/*!
Theme Name:   La Pomme
Description:  A Silicon Valley inspired theme
Tags:         right selector, right sidebar
Supports: 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,
	border: #d2d2d7,
	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: 280px;
$toolbar_width_small: 110px;

$inner_space: 1em;

:root {
	--toolbar_width: 400px;
	--mkl_pc_footer_height: 5em;
	--mkl_pc_choice--border-radius: 8px;
	--mkl_pc_lapomme-spacing: 2em;

	// each item in color map
	@each $name, $color in $colors {
		--mkl_pc_color-#{$name}: #{$color};
	}
}

@import 'scss/animation';

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



.is_configurable, .configurator_is_opened {
	// 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: $medium_screen_width ) {
		--mkl_pc_footer_height: auto;
	}
	@media( max-width: $small_screen_width ) {
		--mkl_pc_footer_height: 110px;
		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;
		padding-bottom: var( --mkl_pc_footer_height );

		&:not( body.configurator_is_inline & ) {
			top: $distance;
			left: $distance;
			right: $distance;
			bottom: var( --mkl_pc_footer_height );
			padding-bottom: 0;
			@media (max-width: $medium_screen_width) {
				top: 0;
				left: 0;
				right: 0;
				bottom: 0; /* Fix issue on mobile, where the footer would be hidden */
			}

		}
		background: #fff;
		display: flex;
		overflow: auto;
		flex-wrap: wrap;
		visibility: hidden;
		align-items: flex-start;
		opacity: 0;
		transform: translateY(-30px);
		// transition: all 0.3s;
		transition: all 0.5s;


		.mkl_pc_bg {
			display: none;
		}

		@import 'scss/reset';

		@import 'scss/viewer';

		@import 'scss/toolbar';		

		@import 'scss/form';

		@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;
						z-index: 9;
					}
					@media ( max-width: 600px ) {
						position: fixed;
						left: 0;
						top: 0;
						z-index: 9;
					}
					> .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;
						z-index: 2;
					}
				}
				padding-bottom: 30px;
			}
			.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 {
	button.choice-item:focus, 
	button.choice-group-label:focus {
		outline: 4px solid rgba(color(primary_rgb), 0.2);
		outline-offset: 1px;
	}
}

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

	.overlay {
		display: none;
	}

	.mkl_pc_container {
		box-shadow: none;
		overflow: unset;
		position: relative;
		align-items: flex-start;
		header .cancel {
			display: none;
		}
		.mkl_pc_toolbar {
			> header {
				display: none;
			}
			@media (max-width: $small_screen_width) {
				.mkl-pc-show-form {
					&::before {
						height: 100vh;
					}
				}
			}

		}
		.mkl_pc_viewer {
			min-height: 60vh;
		}
	}
}

body.configurator_is_inline .mkl-pc-preset-container .mkl_pc {
	.mkl_pc_container {
		margin-right: 280px;
		footer {
			margin-right: 280px;
		}
	}
	.mkl_pc_admin {
		position: fixed;
		top: 32px;
	}
}

/*
	Variation: color only
*/
.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul ul.layer_choices.display-mode-colors {
	.choices-list li {
		box-shadow: none !important;
		width: auto;
		padding: 4px;
		&.is-group {
			width: 100%;
		}
		button.choice-item {
			padding: 0;
			text-align: left;
			height: auto;
			border: none;
			min-height: 0;
			span.choice-text,
			span.choice-price {
				display: none;
			}

			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 );
				border-radius: var( --mkl_pc_color_thumnail_border_radius, 50px );
				padding: 2px;
				overflow: hidden;
				border: 2px solid transparent;
			}
			
			i.mkl-pc-thumbnail span {
				top: 2px;
				left: 2px;
				right: 2px;
				bottom: 2px;
				overflow: hidden;
				border-radius: var( --mkl_pc_color_thumnail_border_radius, 50px );
				box-shadow: 0 2px 2px inset rgba(0, 0, 0, 0.13);
			}

			&:hover, &:focus {
				box-shadow: none;
				outline: none;
				i.mkl-pc-thumbnail {
					border-color: #d2d2d7;
				}
			}

		}

		button:hover, button:focus {
			span img {
				box-shadow: 0 0 0 2px #FFF, 0 0 0 4px #9E9E9E;
			}
		}
		
		&.active {
			box-shadow: none !important;
			button.choice-item,
			button.choice-item:hover, 
			button.choice-item:focus {
				box-shadow: none;
				border: none;
				padding: 0;
				i.mkl-pc-thumbnail {
					border-color: color( primary );
					span {
						
					}
				}
			}
		}


		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:not(.no-tooltip) .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:not(.no-tooltip) .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-box {
	border-radius: 12px;
	padding: 10px;
}
.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;

}


/* 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 .layer_choices li.choices-list li.form-item,
.mkl_pc .mkl_pc_container .mkl_pc_toolbar .layer_choices li.choices-list li:not(.is-group).form-item {
	padding-right: 0;
	padding-left: 0;
}

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

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

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

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

@include steps-progress( var(--mkl_pc_lapomme-spacing) );

.mkl_pc_toolbar .steps-progress--container {
	--mkl_pc-steps-gap: 30px;
	width: calc( 100% - ( var(--mkl_pc_lapomme-spacing) * 2 ) );
	padding: 0;
	margin-left: var(--mkl_pc_lapomme-spacing);
	margin-right: var(--mkl_pc_lapomme-spacing);
}

nav.mkl-pc--steps {
    justify-content: space-between;
	div {
		margin-right: 5px;
		margin-left: 5px;
	}
}

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

.mkl_pc_summary {
	width: 100%;
	margin-top: 30px;
}