/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 */

/**
 * Mixins (reused styles)
 */
%view-cart {
	display: block;
	position: absolute;
	top: 100%;
	width: 100%;
	a {
		display: block;
		position: relative;
		color: inherit;
		text-align: center;
		line-height: 1.6;
	}
}

%layouts {
	&.layout2 {
		.wcspots-product {
			width: 100%;
			flex-direction: row;

			> * {
				flex: 1;
			}

		}
	}
	&.layout3 {
		.wcspots-product {
			position: relative;

			> * { flex: 1; }

			.overlay {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 2;
				background-color: rgba(0, 0, 0, 0.5);
			}
			.product-featured-image {
				position: absolute;
				height: 100%;
				width: 100%;
				overflow: hidden;
				max-width: 100%;

				/* img {
					height: 100%;
					width: 100%;
					object-fit: cover;
					object-position: 50% 50%;
				} */
			}

			.product-elements {
				justify-content: center;
				height: 100%;
			}

		}
	}
}

%alignments {
	&.align-center { 
		.product-title,
		.product-price,
		.product-excerpt > *,
		.product-add-to-cart {
			text-align: center;
			transform-origin: center;
		}
	}
	&.align-flex-start { 
		.product-title,
		.product-price,
		.product-excerpt > *,
		.product-add-to-cart {
			text-align: left;
			transform-origin: left center;
		}
	}
	&.align-flex-end {
		.product-title,
		.product-price,
		.product-excerpt > *,
		.product-add-to-cart {
			text-align: right;
			transform-origin: right center;
		}
	}
}

%wcspots-product {
	.wcspots-product {
		display: flex;
		flex-direction: column;
		position: relative;
		background-color: transparent;
		box-shadow: none;
		transform: none;
		transition: all .2s linear;
		min-height: fit-content !important;
		height: auto !important;

		&:after {
			content: "";
			display: block;
			position: absolute;
			z-index: 10;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			box-shadow: none;
			transition: all .2s linear;
			pointer-events: none;
			box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0);
		}

		&.highlighted {
			&:after {
				box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.6);
			}
		}

		.product-featured-image {

			display: flex;
			align-items: flex-start;
			z-index: 1;
			border-radius: inherit;
			overflow: hidden;

			img {
				// max-width: 100%;
				// width: 100%;
				// height: auto;
				height: 100%;
				width: 100%;
				object-fit: cover;
				object-position: 50% 50%;

			}
		}

		.product-elements {
			display: flex;
			flex-direction: column;
			z-index: 5;
			> :last-child { margin-bottom: 0 !important; }
		}

		.product-element {
			margin-top: 0;
			line-height: 1.2;
		}

		.product-title {
			font-size: 1.2em;

			a { color: inherit; }
		}

		.product-excerpt {
			font-size: 0.8em;
			div > * {
				margin: inherit;
				color: inherit;
			}
		}

		.product-add-to-cart {
			position: relative;

			> a {
				display: inline-flex;
				&:hover {
					cursor: pointer;
				}
			}

			.view-cart {
				@extend %view-cart;
			}
		}

		@extend %alignments;
	}
}

/**
 * Hotspots styles.
 */
%hotspot-icon-styles {
	&.iconstyle-2 {
		
		width: 1.5rem;
		height: 1.5rem;
		background: rgba(255, 0, 0, 0.5);
		border:none;

		.inner {
			width: 1rem;
			height: 1rem;
			transition: all 0.2s ease-in-out;

			&:before {
				content: "+";
				position: absolute;
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: bold;
				transform: none;
				transition: all 0.2s ease-in-out;
			}
		}
		&:hover {

			background-color: inherit;
			.inner {
				width: 1.5rem;
				height: 1.5rem;
				transform: scale(1);

				&:before {
					transform: rotate(90deg);
				}
			}
		}
	}
	&.iconstyle-3 {
		width: 1.2rem;
		height: 1.2rem;
		background: transparent !important;
		border: 0 solid transparent;
		outline-style: solid;
		outline-color: rgba(255, 220, 0, 0.8);
		outline-width: 1;
		transition: outline-offset 0.2s ease-in-out;
		outline-offset: 0px;

		.inner {
			width: 0.6rem;
			height: 0.6rem;
			background-color: rgba(255, 220, 0, 0.8);
		}
		&:hover {
			outline-offset: 2px;
			.inner {
				transform: none;
				border: none
			}
		}
	}
}

.wp-block-micemade-wcspots {

	position: relative;

	*, ::before, ::after {
		box-sizing: inherit;
		outline: none;
	}

	> *:not(.cover-image) {
		position: relative;
		z-index: 1;
	}

	.cover-image {
		z-index: 0;
		background-size: cover;
		background-position: center;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0.5;
	}

	.flex-container {
		display: flex;
		position: relative;

		&.row, &.image-only { flex-direction: row; }
		&.row-reverse { flex-direction: row-reverse; }
		&.column { flex-direction: column; }
		&.column-reverse { flex-direction: column-reverse; }
	}

	.flex-block {
		flex-grow: 0;
		position: relative;
		display: flex;

		.product-grid,
		&.image-container,
		&.image-container .hotspot,
		&.image-container img {
			position: relative;
		}

		&.image-container {

			img {
				width: 100%;
				z-index: 1;
			}

			.product-hotspot {
				transition: all 250ms ease-in-out;
				transform: translateX(-50%) translateY(-50%) scale(1);
				padding: 0;
				width: 2rem;
				height: 2rem;
				border: 2px solid transparent;
				position: absolute;
				background: rgba(17, 17, 17, 0.2);
				border-radius: 64px;
				line-height: .5;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 5;
				// mix-blend-mode: difference;

				.inner, .events-holder {
					position: absolute;
					display: block;
					cursor: pointer;
				}
				.inner {
					transition: transform 250ms ease-in-out;
					position: relative;
					display: block;
					background: rgb(255, 255, 255);
					box-shadow: 0 1px 4px rgba(17, 17, 17, 0.55);
					width: .75rem;
					height: .75rem;
					border-radius: 64px;
				}

				&:before {
					content: "";
					position: absolute;
					top: -0.5rem;
					left: -0.5rem;
					right: -0.5rem;
					bottom: -0.5rem;
					display: block;
				}
				&:hover {
					border-color: rgba(255, 255, 255, 0.5);
					background: rgba( 17, 17, 17, 0.4);
					.inner {
						transform: scale(0.7);
					}
				}

				.events-holder {
					width: 100%;
					height: 100%;
					background-color: transparent;
					border-radius: 50%;
					z-index: 3;
				}

				.hotspot-product-title {
					
					position: absolute;
					top: 130%;
					left: 50%;
					transform: translateX(-50%);
					width: max-content;
					transition: margin 0.15s ease-in-out;

					span.title-text {
						display: flex;
						color: #333;
						background: #fff;
						padding: 2px 8px;
						font-size: 14px;
						border-radius: 3px;
						line-height: 1.4;
						font-weight: bolder;
						border: none;
						box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
					}
				}

				@extend %hotspot-icon-styles;
			}

			.add-some-hotspots {
				position: absolute;
				bottom: 14px;
				left: 50%;
				transform: translateX(-50%);
				padding: 2px 8px;
				z-index: 10;
				font-size: 14px;
				line-height: 1.4;
				color: #333;
				background: rgba(255,255,255,0.7);
				border-radius: 4px;
			}

		}

		.product-grid {
			display: grid;
			box-sizing: border-box;
			width: 100%;

			@extend %wcspots-product;

			@extend %layouts;

			@media (max-width: 599px) {
				grid-template-columns: repeat(2,1fr) !important;
			}

			@media (max-width: 479px) {
				grid-template-columns: repeat(1,1fr) !important;
			}
		}
	}

	@media (max-width: 781px) {
		.flex-container.is-stacked-on-mobile.column,
		.flex-container.is-stacked-on-mobile.row {
			flex-direction: column;
		}
		.flex-container.is-stacked-on-mobile.column-reverse,
		.flex-container.is-stacked-on-mobile.row-reverse {
			flex-direction: column-reverse;
		}
		.flex-block.is-stacked-on-mobile {
			width: 100% !important;
		}
	}
}

#modal-container {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	width: 50vw;
	height: 70vh;
	background: #fff;
	z-index: 9999;
	box-shadow: 0 0 30px rgba(0,0,0,0.2);
}

.react-tiny-popover-container {
	z-index: 1000;
	width: clamp(340px, 50% + 20px, 600px);

	.popover-content{

		overflow: hidden;
		box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);

		@extend %wcspots-product;

		.wcspots-product {
			background-color: #fff;
			background: var(--wp--preset--color--background);
			box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
			border-radius: inherit;
		}

		@extend %layouts;

		.arrow {
			
			position: absolute;
			display: block;
			width: 0;
			height: 0;
			left: 50%;
			top: 50%;
			border-width: 10px;
			border-style: solid;

			&.bottom {
				bottom: 100%;
				top: auto;
				transform: translateX(-50%);
				border-left-color: transparent !important;
				border-right-color: transparent !important;
				border-top-color: transparent !important;
				border-bottom-color:  #fff;
			}

			&.top {
				top: 100%;
				bottom: auto;
				transform: translateX(-50%);
				border-left-color: transparent !important;
				border-right-color: transparent !important;
				border-bottom-color: transparent !important;
				border-top-color:#fff;
			}

			&.right {
				right: 100%;
				left: auto;
				transform: translateY(-50%);
				border-top-color: transparent !important;
				border-bottom-color: transparent !important;
				border-left-color: transparent !important;
				border-right-color:#fff; 
			}

			&.left {
				left: 100%;
				right: auto;
				transform: translateY(-50%);
				border-top-color: transparent !important;
				border-bottom-color: transparent !important;
				border-right-color: transparent !important;
				border-left-color: #fff;
			}
		}

	}
}

@keyframes animation-1 {

	0% {
		transform: translateX(-50%) translateY(-50%) scale(1);
		opacity: 0;
	}

	25% {
		opacity: 1;
	}

	100% {
		transform: translateX(-50%) translateY(-50%) scale(2);
		opacity: 0;
	}
}