/*!
Theme Name:   WSB
Description:  A White Side Bar theme
Tags:         right selector, drawers, accordion, right sidebar
Supports: columns, color_swatches, steps
*/

// COLORS
$colors: (
	light-gray: #b5c2bd,
	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,
	toolbar_bg: #FFF,
	active_bg: #FFF
);

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

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

$distance: 0;

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

$footer_height: 5em;
$footer_height_small_screen: 4em;
$inner_space: 1em;

:root {
	--toolbar_width: 400px;
	--mkl_pc-wsb-spacing: 26px;
	// 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;
}

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

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

.mkl_pc .mkl_pc_container nav.mkl-pc--steps button.step-previous {
	padding: 6px 0;
	padding-left: var(--mkl_pc-wsb-spacing);
	width: 60px;
}

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

.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul.layers > .mkl_pc_summary {
	padding: 20px;
	padding-left: 60px;
}
.mkl_pc_summary {
	width: 100%;
}


.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%;
		}
	}
}

/* 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;
			@media( max-width: $small_screen_width ) {
				bottom: 50%;
			}
		}		
		
		@import 'scss/viewer';

		@import 'scss/toolbar';

		@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: 62px;
						}
					}					
				}
			}
			@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;
	}
}

.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;
		header .cancel {
			display: none;
		}
		.mkl_pc_toolbar {
			> header {
				display: none;
			}
			@media (max-width: $small_screen_width) {
				.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;
				width: var( --mkl_pc_color_thumnail_size, 32px );
				height: var( --mkl_pc_color_thumnail_size, 32px );
			}
			
			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.choice-item 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.no-toggle .mkl_pc_container .mkl_pc_toolbar section.choices .layer_choices:not( .display-mode-dropdown ) {
	display: block;
}

.mkl_pc:not(.no-tooltip) .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;
		}
	}
}

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

.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 {
}

/* 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;
}

/* Code For Loading Screen */

.mkl-configurator-inline.is-shortcode.configure-product:empty {
	height: 60vh;
}
.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 {
	svg {
		transform: translateY(0);
		fill: color(primary);
	}
	@media( max-width: $medium_screen_width ) {
		width: 40px;
		span {
			display: none;
		}
	}
	@media( max-height: 500px ) and (orientation: landscape) {
		width: 40px;
		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,
.mkl-footer--action-button svg path {
    fill: color(primary);
}

/* 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;
		}
	}
}
