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

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

	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-left: var(--thumbs-left-spacing, calc(var(--thumbs-spacing, 15px) / 2));
		padding-right: var(--thumbs-right-spacing, calc(var(--thumbs-spacing, 15px) / 2));
		margin-bottom: 0;

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

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

		&.active {
			opacity: 0.5;
			transition: opacity 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
		}
	}
}


// thumbs on the left
@include media-breakpoint-up (md) {
	.thumbs-left {
		.flexy {
			margin-left: calc(var(--thumbs-width) + var(--thumbs-spacing, 15px));
		}

		.flexy-pills {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 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;
			}

			.flexy-arrow-prev {
				top: 20px;
				transform: rotate(90deg);
			}

			.flexy-arrow-next {
				top: initial;
				bottom: 20px;
				transform: rotate(90deg);
			}
		}
	}
}


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

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

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