/*!
Theme Name:   H
Description: A theme with layers and choices displayed horizontaly. Available in light or dark mode. Go to the customizer to change the color mode and individual colors!
Tags: Horizontal 
*/

@import 'scss/colors';

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

$distance: 0;

$toolbar_width: 350px;
$toolbar_width_medium: 270px;
$toolbar_width_small: 110px;

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


@-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;
		// .variations_button
	}

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

	@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: var(--mkl_pc_color-default-bg);

		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
		@import 'scss/toolbar';
		
		.single_add_to_cart_button {
			visibility: visible; 
		}

		.form.form-cart {
			padding: 1em 1.3em;
			text-align: right;
			.pc_configurator_form {
				> * {
					vertical-align: middle;
				}
				form.cart {
					padding: 0;
				}
				.configurator-add-to-cart {
					display: inline-block;
					border-radius: 4px;
					font-size: 16px;
					text-align: left;
					padding: 6px 20px;
					line-height: 1.5;
					height: auto;
					text-transform: uppercase;
					background-color: color(add_to_cart_bg_color);
					color: color(add_to_cart_text_color);
					border: 2px solid color(add_to_cart_border_color);
					box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
					transition: .2s all;

					.pc-total-price {
						font-weight: 400;
						display: block; 
						font-size: .9em;
						line-height: 1;
						text-align: left;
						margin: 0;
						color: color(add_to_cart_text_color);
						opacity: .8;
						transition: .2s all;
					}

					&:hover {
						background-color: color(add_to_cart_bg_color_hover);
						color: color(add_to_cart_text_color_hover);
						border-color: color(add_to_cart_border_color_hover);
						.pc-total-price {
							color: color(add_to_cart_text_color_hover);
						}
					}
				}

				&.has-qty {
					display: flex;

					.quantity {
						border-radius: 4px;
						input.qty {
							margin-right: 0;
							height: 100%;
							border: none;
							background: transparent;
							font-size: 1.3em;
							padding: 0;
							width: 60px;
							box-shadow: none;							
						}
					}
				}

			}


			
			.pc-total-price {
				width: 100%;
				text-align: right;
			}
			span[class*="-label"],
			.pc-price {
				text-transform: uppercase;
				font-size: .7em;
				color: color(light-gray);
				display: block;
			}
			.mkl_pc_toolbar & {
				@media (max-width: $small_screen_width ) {
					display: none;
				}
			}
		}

		form {
			display: inline-block;
		}
		form.save-form {
			display: block;
		}

		.quantity {
			display: inline-flex;
			align-items
			input.qty {
				background: var(--mkl_pc_color-default-bg);
				@media (max-width: $small_screen_width) {
					border: 2px solid #36383a;
				}
			}
		}
		form.cart {
			margin: 0;
			padding: 0;
		}
		.extra-cost {
			visibility: hidden;
			position: fixed;
			margin-bottom: 0;
		}
		.extra-cost.show {
			visibility: visible;
			position: relative;
			padding: 0;
			margin: 0;
			margin-bottom: .5em;
			height: auto;
			display: block !important;
		}
		// span.pc-total-price {
		// 	font-weight: bold;
		// 	display: block; 
		// 	font-size: 1.6em;
		// 	line-height: 1;
		// 	margin-bottom: .5em;
		// }

		button.configurator-add-to-cart {
			svg {
				display: none;
			}
		}

		.mkl-pc-show-form {
			display: none;
			background: transparent;
			border: none;
			margin-right: 10px;
			border-radius: 4px;
			padding: 15px 12px;
			text-transform: uppercase;
			font-size: 12px;
			line-height: 1;			
			color: color(primary);
			border: 2px solid color(primary);

			svg {
				height: 25px;
				width: 25px;
				line-height: 1;
				display: none;
				path {
					fill: var(color(primary));
				}
			}
		}

		@media (max-width: $small_screen_width) {
			.mkl-pc-show-form {
				display: inline-block;
				&::before {
					content: '';
					width: 100vw;
					height: 100vh;
					position: fixed;
					background: #dcdcdc;
					top: 0;
					left: 0;
					z-index: 2;
					opacity: 0;
					visibility: hidden;
					transition: .2s all;
				}
			}
			
			footer .form.form-cart {
				position: fixed;
				bottom: -100%;
				transition: .3s all cubic-bezier(0.22, 0.61, 0.36, 1);
				width: calc(100% - 2em);
				left: 1em;
				background: var(--mkl_pc_color-default-bg);
				padding: 2em;
				// height: calc(100vh - #{$footer_height_small_screen} - 2em);
				box-sizing: border-box;
				border-radius: 1em;
				box-shadow: 0 10px 50px #33333373;
				
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: flex-end;
				z-index: 3;

				.pc_configurator_form {
					display: flex;
					align-items: center;
					flex-direction: column;
					width: 100%;
					&.has-qty {
						.quantity {
							width: 100%;							
						}
						.quantity input[type="number"],
						.quantity input[type="text"] {
							width: 100%;
							font-size: 1.6em;
							background: rgba(255, 255, 255, .14);
							color: #FFF;
							text-align: left;
							padding: 0.8em;				
						}
					}
					button {
						border-radius: 6px;
						margin-top: 1em;
						width: 100%;
						font-size: 1.2em;
					}

				}
			}
		}
	
		// FOOTER
		footer {

			position: absolute;
			bottom: 0;
			@media (min-width: $small_screen_width) {
				bottom: var(--toolbar_height);
			}
			left: 0;
			@media (max-width: $small_screen_width) {
				height: $footer_height;
			}
			padding: $inner_space; 
			
			background: transparent;
			z-index: 2;

			// display: none;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;

			h3.product-name {
				line-height: 1;
				margin: 0;
				@media (max-width: $small_screen_width) {
					display: none;
				}
			}

			.footer__section-left:empty {
				display: none;
			}

			.mkl-pc-syd-modal {
				left: 0;
				@media(min-width: $small_screen_width) {
					&::after {
						left: 40px;
					}
				}
			}

			.mkl-footer--action-button {
				margin: 0;
				text-transform: none;
				font-size: 14px;
				font-weight: 400;
				display: inline-block;
				padding: 6px 12px;
				background: transparent;
				color: color(ll2);
				appearance: none;
				box-shadow: none;
				border:  none;
				text-decoration: none;		
				color: color( primary );
				@media (max-width: $medium_screen_width) {
					max-width: 110px;
					white-space: normal;
					font-size: 10px;
				}

				&:hover, &:focus {
					opacity: .5;
				}
			}

			@media (max-width: $medium_screen_width) {
				text-align: center;
				height: $footer_height_small_screen;
				z-index: 10;
				.footer__section-center {
					display: flex;
					flex-direction: row;
				}
			}
			@media (max-width: $small_screen_width) {
				padding: 0;
				right: 0;
				display: flex;
				background-color: color(layers_bg);
			}

			@media (min-width: $small_screen_width) {
				.form.form-cart {
					display: none;
				}
			}


		}
	}

	&.mobile-show-form {
		footer {
			background: var(--mkl_pc_color-default-bg);
			.form.form-cart {
				bottom: 1em;
			}
		}
		.mkl-pc-show-form {
			&::before {
				opacity: 0.8;
				visibility: visible;
			}
		}
		.mkl_pc_toolbar, .mkl_pc_viewer {
			filter: blur(.3em);
		}
	}

	&.no-cart-modal {
		.mkl-pc-show-form {
			display: none;
		}
		@media( max-width: $small_screen_width ) {
			footer .form.form-cart {
				position: relative;
				bottom: auto;
				left: auto;
				right: auto;
				padding: 0;
				display: flex;
				background: transparent;
    			border-radius: 0;
				width: auto;
				.pc_configurator_form {
					flex-direction: row;
					width: auto;
					padding-right: 10px;
					.configurator-add-to-cart {
						margin-top: 0;
						line-height: 1;
						padding: 6px;
						width: auto;
					}
					&.has-qty .quantity {
						width: 80px;
						input[type="number"] {
							text-align: right;
							background: transparent;
							padding-right: 17px;
						}
					}
				}
				.pc-total-price {
					display: none;
				}
			}
		}
	}

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

	body.admin-bar:not(.configurator_is_inline) & {
		@media (min-width: $small_screen_width) {
			top: 32px;
		}

		.mkl_pc_toolbar {
			> header {
				> .cancel {
					@media (min-width: $small_screen_width) {
						top: calc(2.1em + 32px);
					}
				}
			}
		}		
	}

	form.save-my-design__login_form {padding: 1em;}
	form.save-my-design__login_form > .message{ 
		margin-top: -1em;
		margin-left: -1em;
		margin-right: -1em;
	}
	
	@media (max-width: $small_screen_width) {		
		a.save-your-design svg, a.save-your-design--pdf svg {
			transform: translateY(0px);
		}
		.mkl-pc-syd-modal {
			bottom: calc( 100% + 20px );
			
		}
	}
	
	.close-mkl-pc {
		position: absolute; 
		background: transparent;
		border: none;
		box-shadow: none;
		width: 20px; height: 20px;
		padding: 0;
		top: 2.1em;
		right: 30px;
		z-index: 30;

		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);
		}
	}	
}

.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: 85vh;
	min-height: 500px;
	z-index: 1;
	.overlay {
		display: none;
	}

	.mkl_pc_container {
		box-shadow: none;
	}	
	.cancel {	
		display: none;
	}
}

/*
	Variation: color only
*/
.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul > li.color-only {
	.choices-list li {
		box-shadow: none;
		width: auto;
		button {
			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;
			}
			
			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;
			}
		}

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

.mkl_pc:not(.no-tooltip) .mkl_pc_container .mkl_pc_toolbar section.choices .layer_choices li.choice > button span.description,
.mkl_pc:not(.no-tooltip) .mkl_pc_container .mkl_pc_toolbar section.choices ul.layer_choices.display-mode-colors li > button span.text.choice-name,
.mkl_pc:not(.no-tooltip) .mkl_pc_container .mkl_pc_toolbar section.choices ul.layer_choices.display-mode-colors li > span.out-of-stock {
	display: none;
}
.mkl_pc:not(.no-tooltip) .mkl_pc_container .mkl_pc_toolbar section.choices ul.layer_choices.display-mode-colors {
	--layer-item-width: var( --mkl_pc_color_thumnail_size, 32px );
}
.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layer_choices {
	&.form,
	&.text-overlay {
		color: color( choices_button_text_color );
		--layer-item-width: 0;
		.form-item {
			&::after {
				display: none;
			}
			&:not(.is-group) {
				min-width: 0;
			}
		}
	}
	&.text-overlay {
		.choices-list {
			padding: 1em;
		}
	}
}
.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layer_choices.form {
	.form-item {
		label {
			color: color( light-gray );
		}
	}
	li.choices-list > ul {
		padding: 1em;
	}
}

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

/*
	Display mode Color
*/
.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul.display-mode-colors {
	.choices-list {
		li {
			box-shadow: none;
			width: auto;
			&:not(.is-group) {
				margin: 3px;
			}
			&.is-group {
				flex-direction: column;
				.choices-list--children {
					border-radius: 2px;
					margin-bottom: 4px;
				}
				.choice-group-label {
					padding-left: 1em;
					i.mkl-pc-thumbnail {
						display: none;
					}
				}
			}

			button {
				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 {
				background-color: transparent;
				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;
						}
					}
				}
			}
		}
		& > ul {
			align-items: flex-end;
			> li:not(.is-group) {
				margin-bottom: 9px;
			}
		} 
	}
}

/*
TIPPY
*/
.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;

}


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

@import 'scss/dark_mode';

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