@use "../../../1-helpers/functions";

div.woocommerce-product-gallery {
	position: relative;
	overflow: hidden;
	align-self: flex-start;

	@include functions.media-breakpoint-down(md) {
		margin-bottom: 3em;
	}

	.ct-product-gallery-container {
		position: relative;
	}

	ol {
		margin: var(--thumbs-container-margin, 0 calc(var(--thumbs-spacing, 15px) / -2));
	}

	li {
		padding-top: var(--thumbs-top-spacing, var(--thumbs-spacing, 15px));
		padding-inline: var(--thumbs-left-spacing, calc(var(--thumbs-spacing, 15px) / 2));
		margin-bottom: 0;
		transition: opacity 0.25s cubic-bezier(.215,.61,.355,1);

		@include functions.media-breakpoint-down (xs) {
			--thumbs-width: 33.333%;
		}

		@include functions.media-breakpoint-only (sm) {
			--thumbs-width: 25%;
		}

		&:hover {
			opacity: 0.75;
		}

		&.active {
			opacity: 1;
			
			.ct-media-container:after {
				border-color: rgba(0,0,0,0.2);
			}
		}

		.ct-media-container:after {
			position: absolute;
			content: '';
			z-index: 2;
			inset: 0;
			pointer-events: none;
			border-radius: inherit;
			border: 2px solid rgba(0,0,0,0);
			transition: border-color 0.25s cubic-bezier(.215,.61,.355,1);
		}

		.ct-video-indicator svg {
			width: 30%;
			height: 30%;
			transform: none;
		}
	}
}


// thumbs on the left
@include functions.media-breakpoint-up (md) {
	.thumbs-left {
		--thumbs-width: 100px;

		.flexy {
			margin-inline-start: calc(var(--thumbs-width) + var(--thumbs-spacing, 15px));
		}

		.flexy-pills {
			position: absolute;
			inset-inline-start: 0;
			inset-block: 0;
			height: 100%;
			--pills-direction: column;
			--pills-wrap: nowrap;
			--thumbs-left-spacing: 0;
			--thumbs-right-spacing: 0;
			--thumbs-container-margin: calc(var(--thumbs-spacing, 15px) * -1) 0 0 0;

			[data-flexy] {
				max-height: calc(100% + var(--thumbs-spacing, 15px));
			}

			[class*='flexy-arrow'] {
				left: calc(50% - 20px);
				right: initial;

				--rotate: 90deg;
			}

			.flexy-arrow-prev {
				top: 20px;
			}

			.flexy-arrow-next {
				top: initial;
				bottom: 20px;
			}
		}
	}
}


// native woo gallery
.woocommerce-product-gallery.images img {
	width: 100%;

	&.flex-active {
		opacity: 0.5;
	}
}

.woocommerce-product-gallery__wrapper {
	max-width: initial;
}