/*!
Theme Name:   Float
Description:  Floating sections and fullwidth background
Tags:         right selector, drawers, accordion, right sidebar
Supports: columns, color_swatches, steps, display mode: full screen
*/

// COLORS
$colors: (
	light-gray: #5b605e,
	primary: rgb(0, 213, 209),
	primary_rgb: unquote("0, 213, 209"),
	primary_hover: #00626d,
	layers_button_text_color: #000000,
	choices_button_text_color: #000000,
	overlay_bg: #000000,
	active_bg: rgb(249, 249, 249)
);

@function color($color-name) {
	@return var(--mkl_pc_color-#{$color-name});
}

// DIMENSIONS / DISTANCES / SPACE
$medium_screen_width: 860px;
$small_screen_width: 660px;

$distance: 0;

$toolbar_width: 350px;
$toolbar_width_medium: 50%;
$toolbar_width_small: 110px;

$inner_space: 1em;

:root {
	--toolbar_width: 400px;
	--mkl_pc-float-spacing: 26px;
	--mkl_pc-footer-height: 5em;
	// each item in color map
	@each $name, $color in $colors {
		--mkl_pc_color-#{$name}: #{$color};
	}
}

@-webkit-keyframes sk-scaleout {
	0% { -webkit-transform: scale(0) }
	100% {
		-webkit-transform: scale(1.0);
		opacity: 0;
	}
}

@keyframes sk-scaleout {
	0% { 
		-webkit-transform: scale(0);
		transform: scale(0);
	} 100% {
		-webkit-transform: scale(1.0);
		transform: scale(1.0);
		opacity: 0;
	}
}		
@-webkit-keyframes slide-in-top {
	0% { 
		-webkit-transform: translateY(10px); 
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0);
		opacity: 1;
	}
}

@keyframes slide-in-top {
	0% { 
		-webkit-transform: translateY(10px);
		transform: translateY(10px);
		opacity: 0;
	} 100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes configurator-load {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1; 
	} 
	100% {
		opacity: 0; 
	}
}

/* Woocommerce  */
.configurator_is_opened:not(.configurator_is_inline) {
	overflow: hidden;
}

.is_configurable {
	// div.product form.cart {
	// display: none;
	div.product form.cart {
		border: none;
	}

	&:not(.enable-add-to-cart):not(.configurator_is_inline) {
		div.product form.cart {
			// .variations_button
			.quantity, .single_add_to_cart_button {
				display: none;
			}
		}
	}

	@media( max-width: $small_screen_width ) {
		button.configure-product {
			font-size: 1.4em;
			display: block;
			width: 100%;
		}
	}
}

@import 'scss/choices';

@import '../../themes-common/scss/steps';

@include steps-progress( var(--mkl_pc-float-spacing) );

.mkl_pc_toolbar .steps-progress--container {
	border-bottom: none;
}

.mkl_pc .mkl_pc_container nav.mkl-pc--steps button.step-previous {
	padding: 6px 0;
	width: 60px;
}

@import '../../themes-common/scss/summary';

.mkl_pc_summary {
	width: 100%;
}
/* CUSTOMIZER */
.mkl_pc {
	position: fixed;
	top:0;
	left:0;
	bottom: 0;
	width: 100%; 
	z-index: 10000;

	.mkl_pc_container {
		position: absolute;
		width: auto;
		height: auto;
		top: $distance;
		left: $distance;
		right: $distance;
		bottom: $distance;
		background: #fff;

		visibility: hidden;
		opacity: 0;
		transform: translateY(-30px);
		// transition: all 0.3s;
		transition: all 0.5s;

		@media (max-width: $medium_screen_width) {
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
		}

		.mkl_pc_bg {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			background-position: 50%;
			background-size: cover;
		}

		@import 'scss/viewer';

		// TOOLBAR
		.mkl_pc_toolbar {
			position: absolute;
			z-index: 2;
			width: $toolbar_width;
			width: var(--toolbar_width);
			right: 0;
			top: 0;
			bottom: 0;
			display: flex;
			flex-direction: column;

			> header {
				position: absolute;
				right: 100%;
				width: 100%;
				h3 {
					text-align: right;
					text-transform: uppercase;
					font-size: 18px;
					line-height: 1.2;
					margin: 0;
					padding: 0.5em;
					font-weight: 500;
					padding-top: var(--mkl_pc-float-spacing);
					padding-right: var(--mkl_pc-float-spacing);
					&::after {
						content: '';
						display: block;
						height: 60px;
						width: 2px;
						background: #000;
						position: absolute;
						right: 0em;
						top: 0;						
						@media( max-width: $small_screen_width ) {
							display: none;
						}
					}
					@media( max-width: $medium_screen_width ) {
						font-size: 1rem;
					}	
				}
				// padding: $inner_space;
				> .cancel {
					position: fixed; 
					background: transparent;
					border: none;
					box-shadow: none;
					width: 20px; height: 20px;
					padding: 0;
					top: 30px;
					left: 30px;

					span {
						display: none;
					}
					&::before,
					&::after {
						content:' ';
						width:20px;
						height:2px;
						background: #000;
						position: absolute;
						top: 50%; 
						left: 0;
						transform-origin: 50%;
						transform: rotate(45deg);
						transition: all 0.2s;
						border-radius: 1px;
						display: block;
					}
					&::after {
						transform:rotate(-45deg);
					}
				}

				@media( max-width: $small_screen_width ) {
					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;
						left: auto;
						&::after, &::before {
							background: #FFF;
						}
					}
				}

			}
			section.choices {
				position: relative;
				height: 100%;
				overflow-x: hidden;
				overflow-y: auto;
				padding: var(--mkl_pc-float-spacing);

				// &.scrolled + .form {
				// 	&::after {
				// 		height: 60px;
				// 	}
				// }
				> ul {
					list-style-type: none;
					display: block;
					margin: 0;
					padding: 0;

					li {
						padding: 0;
						margin: 0;
					}

					> li {
						display: block;
						line-height: 2;
						position: relative;
						border: none;

						&:not( .type-step ),
						&.type-step > .layer_choices > .choices-list > ul > li.layers-list-item {
							background: #FFF;
							margin-bottom: 1em;
							box-shadow: 0 15px 30px rgba(63, 67, 74, .10);
							border-radius: 8px;
							&.not-a-choice,
							&.type-summary {
								box-shadow: none;
								border-radius: 0;
							}
						}

						&.type-step {
							> span.layer-item {
								display: block;
								margin-bottom: 15px;
								.layer-name {
									display: block;
									font-size: 18px;
									text-transform: uppercase;
									line-height: 1.2;
								}

							}
							&.has-thumbnail {
								> .layer-item {
									padding-left: 60px;
									position:relative;
									min-height: 70px;
									display: flex;
									flex-direction: column;
									justify-content:center;
									i {
										position: absolute;
										height: 40px;
										width: 40px;
										left: 8px;
										top: 50%;
										transform: translateY(-50%);
									}
								}
							}
						}
						// -webkit-animation: slide-in-top 0.2s ease-out;
						// animation: slide-in-top 0.2s ease-out;

						@include buttons();

						&.active {
							button {
								
							}
						}

						ul {
							list-style-type: none;
							display: flex;
							flex-wrap: wrap;
							margin: 0;
							padding: 0;
							position: relative; 
							
							& > li {
								display: block;
								&:not( .layers-list-item ) > 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.choice-item {
									background: color(active_bg); 
								}
							}
						}
					}
				}

				.layers {
					> li {
					}
					button {
						padding-left: 60px;
						&.layer-item {

							transition: .2s all;
							padding-right: 30px;
							i {
								position: absolute;
								display: block;
								width: 40px;
								left: 10px;
								top: 50%;
								transform: translateY(-50%);
								transition: .2s all;
								opacity: 0.5;
								text-align: center;
								@media( max-width: $small_screen_width ) {
									width: 30px;
								}
								img {
									max-width: 100%;
								}
								&.selected-choice-image {
									img ~ img {
										display: none;
									}
									&:not(:empty) + i {
										display: none;
									}									

								}								
							}

							.description {
								display: block;
								font-size: .8em;
								color: color(light-gray);
								text-transform: none;
							}

							span.selected-choice {
								display: block;
								font-size: 0.8em;
								text-transform: uppercase;
								opacity: 0.85;
							}
							
							&::after {
								transition: .2s all;
								content: ' ';
								display: block;
								width: 12px;
								height: 12px;
								position: absolute;
								right: 1.6em;
								top: 50%;
								transform: translateY(-50%) rotate(-45deg);
								border-right: 1px solid #36383a;
								border-bottom: 1px solid #36383a;
							}

							&::before {
								content: ' ';
								background: #36383a1f;
								display: block;
								width: 0;
								height: 1px;
								opacity: 0;
								position: absolute;
								top: 100%;
								left: 50%;
								
								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;
						}
					}

					li.layers-list-item.active {
						> button {

							&::before {
								width: calc( 100% - 1em );
								opacity: 1;
								left: .5em;
							}
							
							&::after {
								transform: translateY(-75%) rotate(45deg);
							}

							i {
								opacity: 1;
							}
						}
					}
				}

				@include layer_choices();

				@import '../../themes-common/scss/dropdown';

				// li.display-mode-dropdown > button.layer-item > .selected-choice-image {
				// 	display: none;
				// }

				@media( max-width: $small_screen_width ) {
					// position: absolute;
					// top: 0;
					// bottom: 0;
					// left: 0;
					// right: 0;
					// box-shadow: 0 -10px 11px -6px rgba(0, 0, 0, 0.2);
					height: 100%;
					padding: 1em;
				}				
			}

			@media (max-width: $medium_screen_width) {
				width: $toolbar_width_medium;
			}

			@media( max-width: $small_screen_width ) {
				width: 100%;
				top: 40%;
				bottom: var(--mkl_pc-footer-height);
			}

		}
		
		@import 'scss/form';
	
		// FOOTER
		@import 'scss/footer';
	}

	&.opened {
		visibility: visible;
		.overlay {
			visibility: visible;
			opacity: 1;
		}
		.mkl_pc_container {
			visibility: visible;
			opacity: 1;
			transform: none;
		}
	}

	@at-root {
		body.admin-bar:not(.configurator_is_inline) & {
			top: 45px;
			.mkl_pc_toolbar {
				> header {
					@media( min-width: 600px ) and ( max-width: $small_screen_width ) {
						position: fixed;
						left: 0;
						top: 45px;
					}
					@media ( max-width: 600px ) {
						position: fixed;
						left: 0;
						top: 0;
					}
					> .cancel {
						@media (min-width: $small_screen_width) {
							top: 65px;
						}
					}					
				}
			}
			@media (max-width: 600px) {
				top: 0;
				z-index: 100000;
			}
			@media (min-width: $small_screen_width) {
				top: 32px;
			}
		}
		body:not(.configurator_is_inline) & {
			.mkl_pc_toolbar {
				> header {
					@media( max-width: $small_screen_width ) {
						position: fixed;
						left: 0;
						top: 0;
					}
				}
			}
			.mkl_pc_viewer {
				@media( max-width: $small_screen_width ) {
					top: 40px;
				}
			}

		}
	}

	form.save-my-design__login_form { padding: 1em; }
	form.save-my-design__login_form > .message{ 
		margin-top: -1em;
		margin-left: -1em;
		margin-right: -1em;
	}
}

.mkl_pc .mkl_pc_container .mkl_pc_bg.default-bg ~ .mkl_pc_toolbar section.choices + .form::after {
	content: '';
    transition: .2s all;
    display: block;
    height: 0;
    width: 100%;
    position: absolute;
    z-index: 4;
    bottom: 100%;
    left: 0;
    background: linear-gradient(to top, #ededed, #ededed00);
}

.mkl_pc .mkl_pc_container .mkl_pc_bg.default-bg ~ .mkl_pc_toolbar section.choices.scrolled + .form::after {
	height: 60px;
}

.keyboard-navigation .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layers button.layer-item:focus {
	box-shadow: 0 0 0 2px #00000026;
}			

body.configurator_is_inline .mkl_pc {
    position: relative;
	height: 95vh;
	min-height: 500px;
	z-index: 1;

	.overlay {
		display: none;
	}

	.mkl_pc_container {
		box-shadow: none;
		.angles-select {
			left: 2em;
		}

		header .cancel {
			
			display: none;
		}

		.mkl_pc_toolbar {
			> header {
				display: none;
			}
			@media (max-width: $small_screen_width) {
				section.choices {
					top: 0;
					height: 100%;
				}
			
				.mkl-pc-show-form {
					&::before {
						height: 100vh;
					}
				}
			}

		}
	}
}

/*
	Variation: color only
*/
.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul li.color-only,
.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul li.display-mode-colors {
	.choices-list li.choice {
		box-shadow: none;
		width: auto;

		&.is-group {
			width: 100%;
		}

		button.choice-item {
			padding: 0;
			text-align: left;
			height: auto;
			&:hover, &:focus {
				box-shadow: none;
			}

			span.text.choice-name {
				padding: 0;
				text-align: left;
			} 
			i.mkl-pc-thumbnail {
				margin-left: 0;
				margin-bottom: 0.5em;
				width: var( --mkl_pc_color_thumnail_size, 30px );
				height: var( --mkl_pc_color_thumnail_size, 30px );
			}
			
			i.mkl-pc-thumbnail span {
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				overflow: visible;
			}			
		}

		button:hover, button:focus {
			span img {
				box-shadow: 0 0 0 2px #FFF, 0 0 0 4px #9E9E9E;
			}
		}
		
		&.active,
		&.active:hover,
		&.active:focus {
			box-shadow: none;
			button:hover, button:focus {
				box-shadow: none;
			}
		}

		&.active i.mkl-pc-thumbnail span {
			img {
				box-shadow: 0 6px 15px -4px #00000091;
			}
			&::before {
				content: ' ';
				display: block;
				width: 20px;
				height: 20px;
				background: #FFF;
				position: absolute;
				top: -5px;
				right: -5px;
				z-index: 1;
				border-radius: 3px;
				box-shadow: 0 3px 8px #0000004a;
			}
			&::after {
				content: ' ';
				/* color: green; */
				position: absolute;
				top: 0;
    			right: -1px;
				display: block;
				width: 10px;
				height: 4px;
				border-bottom: 2px solid #179608;
				border-left: 2px solid #179608;
				transform: rotate(-45deg);
				z-index: 2;
				box-sizing: content-box;
			}
		}

		body.keyboard-navigation &.active {
			button:focus {
				i.mkl-pc-thumbnail span {
					&::before {
						box-shadow: 0 3px 8px #0000004a, 0 0 0 2px #FFF, 0 0 0 4px #9E9E9E;
					}
				}
			}
		}
	
	}

	.layer_choices.swatches-size--medium {
		--mkl_pc_color_thumnail_size: 43px;
	}
	
	.layer_choices.swatches-size--large {
		--mkl_pc_color_thumnail_size: 69px;
	}
}

.mkl_pc:not(.no-tooltip) .mkl_pc_container .mkl_pc_toolbar section.choices .layer_choices li.choice > button span.description,
.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layers li.display-mode-colors .layer_choices li > button span.text.choice-name,
.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layers li.display-mode-colors .layer_choices li > span.out-of-stock {
	display: none;
}

.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layers li.display-mode-colors .layer_choices li.out-of-stock {
	i.mkl-pc-thumbnail svg {
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
    	left: 0;
		line.cls-1 {
			stroke: #FFF;
			stroke-width: 4px;
		}
	}
}

/* Full screen display mode */ 

body.configurator_is_inline {
	> ul.layer_choices.display-mode-full-screen {
		list-style-type: none;
		margin: 0;
		padding: 0;
		ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
		}
		li {
			padding: 0;
			margin: 0;
		}

		> li {
			display: block;
			line-height: 2;
			position: relative;
			border: none;
		}
		@include buttons();
	}

	@include layer_choices();

	// Image to take full available space
}

.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layer_choices.display-mode-full-screen,
body.configurator_is_inline > ul.layer_choices.display-mode-full-screen {
    position: fixed;
    z-index: 40000;
    top: 3em;
    left: 3em;
    bottom: 3em;
    right: 3em;
    background: white;
    padding: 2em;
	border-radius: 20px;
	box-shadow: 0 0 0 200px #000000bf;
	@media (max-width: $medium_screen_width) {
		top: 14px;
		left: 14px;
		bottom: 14px;
		right: 14px;
		padding: 10px;
		li.choices-list {
			padding-left: 0;
			padding-right: 0;
		}
	}
	&.active {
		display: flex;
		flex-direction: column;
		&::before {
			content: '';
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background: transparent;
			z-index: -1;
		}
	}
	> li {
		box-shadow: none;
	}
	li.layer-choices-title {
		display: block;

		a.close {
			position: absolute;
			right: 0;
			top: 0;
			font-size: 12px;
			text-transform: uppercase;
			letter-spacing: 1.5px;
			line-height: 1;
			display: block;
			&::before,
			&::after {
				content: ' ';
				width: 16px;
				height: 2px;
				background: #000;
				position: absolute;
				top: calc(50% - 1px);
				left: -24px;
				transform-origin: 50%;
				transform: rotate(45deg);
				transition: all 0.2s;
				border-radius: 1px;
				display: block;
			}
			&::after {
				transform: rotate(-45deg);
			}
			
			span {
				display: block;
			}		
		}
		
	}
	li.choices-list {
		flex: 1;
    	overflow: auto;
		padding-top: 1em;
		padding-bottom: 2em;
	}
	li.choices-list--footer {
		display: flex;
		justify-content: center;
		box-shadow: 0 -16px 36px -11px  #00000026;
		padding: 8px;
		padding-top: 20px;
		margin: 0;
		button {
			text-align: center;
			width: auto;
			border: 2px solid #000000;
			padding: 10px 20px;
			box-shadow: 0 3px 3px #00000026;
			margin: 0;
		}
	}

	li.choices-list li.choice:not(.is-group) > button {

		.choice-text--container {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		span.choice-text {
			padding-top: 10px;
			padding-bottom: 6px;
			font-size: 20px;
		}

		i.mkl-pc-thumbnail {
			width: auto;
			height: auto;
			span, span img {
				position: relative;
			}
			span img {
				top: auto;
				left: auto;
				transform: none;
			}
		}
	} 

}

/* Fix mobile layout for full screen layer display mode */
@media (max-width: $small_screen_width) {	
	body:not(.configurator_is_inline).pc-full-screenlayer--opened .mkl_pc .mkl_pc_container .mkl_pc_toolbar {
		top: 0;
	}
}


body.configurator_is_inline.pc-full-screenlayer--opened {
    overflow: hidden;
}

/* END Full screen display mode */ 

.tippy-content span.text, .tippy-content span.description, .tippy-content span.choice-price {
    display: block;
}

.tippy-content .out-of-stock {
	position: relative;
	display: block;
}

.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul > li .tippy-content span.out-of-stock {
    position: relative;
    display: block;
    top: auto;
    left: auto;
    right: auto;
    background: transparent;
    padding: 0;
	margin-top: 6px;
	padding-top: 6px;
	padding-bottom: 6px;
	border-top: 1px solid #ffffff40;
}

.tippy-content span.choice-price {
    font-size: .8em;
    opacity: .6;

}

.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul > li.choices-fullwidth {
	.choices-list li {
		width: 100%;
		button {
			display: flex;
			flex-direction: row;
			align-items: center;

			i.mkl-pc-thumbnail {
				margin: 0;
				margin-right: 10px;
			}

			.choice-price {
				position: absolute;
				right: 10px;
				top: 50%;
				transform: translateY(-50%);
			}
		}
		
	}	
}

/* Elementor fix */
.woocommerce div.product.elementor .mkl_pc .mkl_pc_container .pc_configurator_form form.cart {
	display: inline-flex;
}

/* YITH Added to cart popup compat */

.mkl_pc.opened.adding-to-cart::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
	background: rgba(255, 255, 255, 0.79);
}

#yith-wacp-popup .yith-wacp-overlay {
	z-index: 10001;
}

.configurator_is_inline {
	.mkl_pc.opened.adding-to-cart .mkl_pc_container {
		opacity: .4;
	}	
}

/*
	Form fields
*/
.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layer_choices li.choices-list li.form-item {
    padding-left: 0;
    padding-right: 0;
}

/* Code For Loading Screen */

.mkl-configurator-inline.is-shortcode.configure-product:empty {
	height: 60vh;
	position: relative;
}
.mkl-configurator-inline.is-shortcode.configure-product:empty::after {
	content: attr(data-loading);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-transform: uppercase;
	letter-spacing: 2px;
	-webkit-animation: configurator-load 1.0s infinite ease-in-out;
	animation: configurator-load 1.0s infinite ease-in-out; 
}

a.save-your-design, a.save-your-design--pdf, a.mkl-footer--action-button {
	svg {
		transform: translateY(0);
		fill: color(primary);
	}
	@media( max-width: $small_screen_width ) {
		width: 40px;
		svg {
			transform: none;
		}
}
	@media (max-height: 500px) and (orientation: landscape) {
		span {
			display: none;
		}
	}
}

a.save-your-design svg path,
.mkl_pc .mkl_pc_container .mkl-pc-show-form svg path,
.save-your-design--pdf svg path {
    fill: color(primary);
}

/* hide_in_configurator */

.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul > li.hide_in_configurator.layers-list-item,
.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul li.hide_in_configurator.layers-list-item {
    display: none !important;
}

/* Divi fix */
.et_divi_theme:not(.configurator_is_inline) .mkl_pc {
	z-index: 100000;
}

@media (max-width: $small_screen_width) {
	.mkl_pc {
		--mkl_pc-footer-height: 35px;
	}

	.mkl_pc.no-sticky-footer .mkl_pc_container {
		.form.form-cart {
			box-shadow: none;
		}

		.mkl_pc_toolbar {
			section.choices {
				height: auto;
				overflow: unset;
			}	
			overflow: auto;
			overflow-x: hidden;
		}
	}
}
