.mkl_pc_toolbar {
	position: absolute;
	z-index: 3;
	width: 100%;
	right: 0;
	bottom: 0;
	height: var(--toolbar_height);
	display: flex;
	flex-direction: row;
	background: color(layers_bg);

	> header {
		display: none;
		position: absolute;
		right: 100%;
		width: 100%;
		h3 {
			text-align: right;
			text-transform: uppercase;
			font-size: 1em;
			margin: 0;
			padding: 0.5em;
			font-weight: 500;
			padding-top: 2em;
			padding-right: 2em;
			&::after {
				content: '';
				display: block;
				height: 60px;
				width: 2px;
				background: #000;
				position: absolute;
				right: 0em;
				top: 0;						
			}
		}
		// padding: $inner_space;

		@media( max-width: $medium_screen_width ) {
			left: $toolbar_width_medium;
			width: calc( 100% - #{$toolbar_width_medium} );
		}

		@media( max-width: $small_screen_width ) {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 40px;
			background: #36383a;
			padding-top: 8px;
			color: #FFF;
			font-size: 1rem;
			box-sizing: border-box;

			h3 {
				display: block;
				color: #FFF;
				font-size: 1rem;
				margin: 0;
				padding: 0;
				text-align: center;
				margin-right: 40px;
			}
			.cancel {
				position: absolute;
				top: 10px; 
				right: 10px;
				&::after, &::before {
					background: #FFF;
				}
			}
		}

	}

	section.choices {
		position: relative;
		flex: 1;
		max-width: 100%;
		border-top: 1px solid color(layers_bg);
		padding: 0;
		
		::-webkit-scrollbar {
			width: 8px;
			height: 6px;
		}
		
		/* Track */
		::-webkit-scrollbar-track {
			background: #f8f8f8;
		}
		
		/* Handle */
		::-webkit-scrollbar-thumb {
			background: color(primary);
			border-radius: 6px
		}
		::-webkit-scrollbar-button {
			width: 0;
		}
		
		/* Handle on hover */
		::-webkit-scrollbar-thumb:hover {
			background: #555;
		}
		& + .form {
			position: absolute;
			right: 0;
			top: 1px;
			height: calc(100% - 1px);
			padding-top: 0;
			padding-bottom: 0;
			@media( min-width: $small_screen_width ) {
				display: flex;
			}
			align-items: center;
			background: color(layers_bg);
			border-radius: 6px 0 0 6px;
			padding-left: 30px;
			box-shadow: -14px 0 10px -10px rgba(0, 0, 0, .06);
			z-index: 1;		
		}

		&.scrolled + .form {
			// &::after {
			// 	height: 60px;
			// }
		}
		> ul,
		.layers-wrapper > ul {
			list-style-type: none;
			display: flex;
			flex-direction: row;
			margin: 0;
			padding: 0;
			overflow-x: auto;
			overflow-y: hidden;
			scroll-snap-type: x mandatory;
			-webkit-overflow-scrolling: touch;

			> li {
				display: block;
				margin: 0;
				padding: 0;
				line-height: 2;
				position: relative;
				border: none;
				width: var(--layer-item-width);
				min-width: var(--layer-item-width);
				scroll-snap-align: start;
				// box-shadow: 0 15px 30px rgba(63, 67, 74, .10);
				// border-radius: 8px;
				-webkit-animation: slide-in-top 0.2s ease-out;
				animation: slide-in-top 0.2s ease-out;
				
				&.hide_in_configurator, ul li.hide_in_configurator {
					display: none !important;
				}

				button {
					border: none;
					display: block;
					width: 100%;
					text-align: left; 
					padding: 20px; 
					border: none; 
					background-color: transparent;
					position: relative; 
					line-height: 1.3; 
					font-weight: normal;
					color: color(layers_button_text_color);
					 &:hover, &:focus {
						outline: none;
						color: color(layers_button_text_color_hover);
					}

					@media( max-width: $small_screen_width ) {
						padding: 1em;
						font-size: 1.2em;
					}
						 
				}

				span.out-of-stock {
					display: block;
					position: absolute;
					top: 10px;
					right: 10px;
					padding: 0.5em;
					background: rgba(0, 0, 0, 0.85);
					color: #fff;
					font-size: 10px;
					text-transform: uppercase;
					line-height: 1;
				}

				&.active {
					button {
						
					}
				}

				ul {
					list-style-type: none;
					display: flex;
					flex-wrap: wrap;
					margin: 0;
					padding: 0;
					position: relative; 
					
					& > li {
						display: block;
						& > button {
							padding: 0; 
							border-radius: 6px;
							&:hover, &:focus {
								box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2)
							}
						}
					}
					&.active li {
						-webkit-animation: slide-in-top .2s ease-out;
						animation: slide-in-top .2s ease-out;
					}
					
					// li.active {
					// 	button {
					// 		background: color(active_bg); 
					// 	}
					// }
				}
			}
		}

		.layers-wrapper {
			height: 100%;
			width: 100%;
			@media (min-width: $small_screen_width) {
				width: calc( 100% - var( --cart-form-width ) );
			}
			// overflow-x: auto;
		}

		.layers, .layer_choices.group {
			background: color(layers_bg);
			height: 100%;

			button {
				height: 100%;				
				&.layer-item {
					padding-right: 45px;
					i {
						display: none;
					}

					transition: .2s all;
					.text {
						font-size: 15px;
						font-weight: bold;					
					}
					.description {
						display: none;
						font-size: .8em;
						color: color(light-gray);
						text-transform: uppercase;
					}

					span.selected-choice {
						display: block;
						font-size: 11px;
						text-transform: initial;
					}					

					&::after {
						transition: .2s all;
						content: ' ';
						display: block;
						width: 12px;
						height: 12px;
						position: absolute;
						right: 20px;
						top: 50%;
						transform: translateY(-50%) rotate(-45deg);
						border-right: 1px solid #36383a;
						border-bottom: 1px solid #36383a;
					}

					&::before {
						content: ' ';
						background: #36383a1f;
						display: block;
						width: 1px;
						height: 80%;
						opacity: 1;
						position: absolute;
						top: 10%;
						left: 100%;
						
						transition: .2s all;
					}

					&:focus, &:hover {
						// padding-left: 70px;
						// i {
						// 	transform: translateY(-50%) translateX(10px);
						// }
						// &::after {
						// 	border-color: color(primary);
						// }
					}
				}
			}

			i.close {
				display: none;
			}

			button:hover {
				i {
					opacity: 1;
				}
			}

			&.opened {
				li:not(.active) {
					opacity: .2;
				}
			}

			li:not(.active):hover, li:not(.active):focus-within {
				opacity: 1;
			}

			> li.active {
				button {					
					&::after {
						transform: translateY(-25%) rotate(-135deg);
					}

					i {
						opacity: 1;
					}
				}
			}
		}

		.layer_choices {
			display: none;
			position: relative;
			transition: all 0.3s cubic-bezier(0.02, 0.5, 0.14, 1.01);
			width: 100%;
			background: color(layer_choices_bg);
			box-shadow: 0 -15px 16px -10px rgba(0, 0, 0, .1);

			ul {
				flex-wrap: nowrap;
			}

			li.choices-list {
				overflow: hidden;
				padding: 0;
				width: 100%;

				.simplebar-scrollbar:before {
					background: color(primary);
				}
				> ul {
					overflow-x: auto;
					overflow-y: hidden;
					scroll-snap-type: x mandatory;
					-webkit-overflow-scrolling: touch;
					padding: 0.6em;
					li {
						scroll-snap-align: start;
						&:not(.is-group) {
							min-width: var(--layer-item-width);
						}
					}
	
				}

				li {
					border-radius: 6px;
					width: var(--choice-item-width, 220px);

					position: relative;
					margin: 0;

					.choice-text {
						flex: 1
					}

					span.text.choice-name {
						display: block;
						font-size: 13px;
						text-transform: uppercase;
						text-align: left;
					}

					span.choice-price {
						display: block;
						color: #777;
					}

					i.mkl-pc-thumbnail {
						position: relative;
						height: 38px; 
						width: 38px;
						border: none; 
						display: block; 
						border-radius: 0; 
						background: transparent;
						box-shadow: none;
						transition: all 0.2s;
						order: 2;

						span {
							display: block; 
							overflow: hidden;
							position: absolute;
							top: 3px;
							left: 3px;
							right: 3px;
							bottom: 3px;
							// border-radius: 50%;
							// box-shadow: 0 0 8px rgba(0,0,0,0.2);
						}
						img {
							position: absolute;
							max-width: 100%;
							width: auto; 
							height: auto; 
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%); 
						}
					}
					span.description {
						display: none;
						position: absolute;
						bottom: 100%;
						font-size: .8em;
						color: color(light-gray);
					}
					> button {
						padding: 1em 1.2em;
						margin: 0;
						background: transparent;
						transition: 0.2s all;
						height: 100%;
						color: color(choices_button_text_color);
						display: flex;
						align-items: center;

						&.layer-item {
							flex-direction: column;
							align-items: flex-start;
							img {
								display: none;
							}
						}

						span.choice-text--container {
							display: flex;
							flex-wrap: wrap;
							flex-direction: column;
							width: 100%;

						}
						&:disabled {
							opacity: .2 !important;
						}

					}

					&.has-advanced-description {
						> button {
							padding-right: 30px;
						}
					}

					&.has-thumbnail {
						> button {
							padding-right: 60px;
							min-height: 60px;
							i.mkl-pc-thumbnail {
								position: absolute;
								right: 10px;
								top: 50%;
								transform: translateY(-50%);
							}
						}
					}
					&.has-advanced-description {
						> button {
							padding-right: 30px;
						}
					}

					&.has-thumbnail.has-advanced-description {
						> button {
							padding-right: 80px;
							i.mkl-pc-thumbnail {
								right: 30px;
							}
						}
					}					

					&:not(.active)::after {
						content: '';
						display: block;
						position: absolute;
						right: 0;
						height: 100%;
						top: 0;
						width: 1px;
						background: rgba(0, 0, 0, 0.08);
					}
					
					&:not(.active):last-of-type:after {
						display: none;
					}

					&.active {
						background: color(active_choice_button_bg_color);
						box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
						button {
							color: color(active_choice_button_text_color);
						}
					}

					&.is-group {
						width: auto;
						padding: 0;
						margin: 0;
						box-shadow: none;
						display: flex;
						div.choice-group-label {
							display: flex;
							align-items: center;
							padding: 5px;
							line-height: 1.2;
							opacity: .5;
							color: color( choices_button_text_color );
							min-width: var( --choice-item-width );
							i.mkl-pc-thumbnail {
								height: 38px;
								margin: 0;
								order: initial;
							}
							span.choice-price {
								display: none;
							}
						}
						
						&.has-advanced-description {
							padding-right: 30px;
						}

						.choices-list--children {
							margin: .5em;
							border-radius: 8px;
							border: 2px solid #edefef;
						}

						& + .is-group {
							div.choice-group-label {
								padding-left: 1em;
							}
							// margin-top: 1em;
						}

						.is-group {
							.choice-group-label {
								padding-left: 1em;
							}
						}

						button.choice-group-label {
							min-width: var(--layer-item-width);
							padding-left: 30px;
							&::after,
							&::before {
								content: '';
								width: 15px;
								display: block;
								height: 2px;
								background: color(primary);
								position: absolute;
								left: 10px;
								transition: .2s all;
								transform-origin: 50% 50%;										
							}

							&:hover, &:focus {
								&::after, &::before {
									background: color(primary_hover);
								}
							}
						}
						// &.has-thumbnail button.choice-group-label {
						// 	&::before, &::after {
						// 		right: 10px;
						// 	}
						// }

						&:not( .show-group-content ) {
							button.choice-group-label {
								&::before {
									transform: rotate( 90deg );
								}
								& ~ ul.choices-list--children {
									display: none;
								}
							}
						}
					}

				}
			}

			&.active {
				display: block;
				bottom: calc(100% + 1px);
				position: absolute;
				-webkit-animation: slide-in-top 0.2s ease-out;
				animation: slide-in-top 0.2s ease-out;
				@media (max-width: $small_screen_width){
					max-height: calc( 100vh - ( var(--toolbar_height) + var(--footer-height-small-screen)));
					overflow-y: auto;
					overflow-x: hidden;
				}

				li.active {
					border-color: #CCC;
				}
			}

			li.layer-choices-title {
				display: none;
			}

			&.is-child-layer {
				&.active {
					display: flex;
					&.temp-hide {
						display: none;
					}
				}
				li.layer-choices-title {
					display: block;
					min-width: 0;
					width: 40px;
					border-right: 1px solid #757779;
					span {
						display: none;
					}
					a.close {
						display: block;
						width: 100%;
						height: 100%;
						&::after {
							transition: .2s all;
							content: ' ';
							display: block;
							width: 12px;
							height: 12px;
							position: absolute;
							right: 13px;
							top: 50%;
							transform: translateY(-50%) rotate(45deg);
							border-right: 1px solid #36383a;
							border-bottom: 1px solid #36383a;
						}						
					}
				}
			}

			&.temp-hide {
				display: none;
			}
			// .layer_choices {
			// 	position: relative;
			// 	top: auto;
			// 	bottom: auto;
			// 	width: auto;
			// 	overflow: initial;		
	
			// 	li.choices-list {
			// 		width: auto;
			// 	}
			// }

			li.choices-list li.layers-list-item.active {
				width: auto;
			}
			li.choices-list li.layers-list-item {
				display: flex;
				flex-wrap: nowrap;
				flex-direction: row;
				button.layer-item i.img {
					max-width: 40px;
				}				
			}
			

		}
		@media( max-width: $small_screen_width ) {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100%;
		}				
	}

	a.mkl-pc-show-description {
		margin-left: 5px;
	}

	@media( max-width: $small_screen_width ) {
		width: 100%;
		top: auto;
		bottom: $footer_height_small_screen;
		.form.form-cart {
			display: none;
		}
	}

}
