/**
 * Product gallery, desktop (64rem): thumbs column + main photo with fade and blur;
 * one photo (`--single`) takes the whole width at the same height.
 * Loaded after product-gallery.css (Ui\UiModule::STYLE_PARTS).
 */

@media (min-width: 64rem) {
	.mk-product-gallery {
		grid-template-columns: var(--wp--custom--product-gallery--columns);
	}

	.mk-product-gallery__thumbs {
		display: block;
		min-inline-size: 0;
		container-type: inline-size;
	}

	/* N square thumbs + gaps: each slot is as tall as the column is wide. */
	.mk-product-gallery__thumbs-slider {
		--mk-gallery-thumbs: var(--wp--custom--product-gallery--thumbs-visible);
		--mk-gallery-thumb-gap: var(--wp--custom--product-gallery--thumb-gap);

		--mk-gallery-gaps: calc(
			(var(--mk-gallery-thumbs) - 1) * var(--mk-gallery-thumb-gap)
		);

		block-size: calc(
			var(--mk-gallery-thumbs) * 100cqi + var(--mk-gallery-gaps)
		);
	}

	.mk-product-gallery__main {
		grid-column: 2;
	}

	.mk-product-gallery__slider {
		block-size: auto;
		aspect-ratio: var(--wp--custom--product-gallery--ratio);
	}

	.mk-product-gallery__dots {
		display: none;
	}

	/* One photo: across the thumbs column too, as high as the slider. */
	.mk-product-gallery--single {
		grid-template-columns: minmax(0, 1fr);
		container-type: inline-size;
	}

	/* Kept for the other colour sets (D-81), hidden while one photo is shown. */
	.mk-product-gallery--single .mk-product-gallery__thumbs {
		display: none;
	}

	.mk-product-gallery--single .mk-product-gallery__main {
		grid-column: 1 / -1;
	}

	.mk-product-gallery--single .mk-product-gallery__slider {
		block-size: var(--wp--custom--product-gallery--single-height);
		aspect-ratio: auto;
	}

	/* Fade + blur: the leaving photo blurs out, the new one sharpens. */
	.mk-product-gallery.is-fade .mk-product-gallery__image {
		filter: blur(var(--wp--custom--product-gallery--blur));
		transition: filter var(--wp--custom--motion--duration--slow)
			var(--wp--custom--motion--easing--standard);
	}

	.mk-product-gallery.is-fade
		.swiper-slide-active
		.mk-product-gallery__image {
		filter: none;
	}
}

.mk-product-gallery__thumb-button {
	position: relative;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: var(--wp--custom--product-gallery--thumb-radius);
	background-color: var(--wp--custom--color--product-gallery--background);
	cursor: pointer;
}

.mk-product-gallery .mk-product-gallery__thumb-image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* Active thumb: 2px frame drawn over the photo. */
.mk-product-gallery__thumb-button::after {
	position: absolute;
	inset: 0;
	border: var(--wp--custom--product-gallery--thumb-border-width) solid
		transparent;
	border-radius: inherit;
	content: "";
	transition: border-color var(--wp--custom--motion--duration--base);
}

.swiper-slide-thumb-active .mk-product-gallery__thumb-button::after,
.mk-product-gallery__thumb-button[aria-current="true"]::after {
	border-color: var(--wp--custom--color--product-gallery--thumb-active);
}

.mk-product-gallery__thumb-button:focus-visible {
	outline-width: var(--wp--custom--focus--ring-width);
	outline-style: solid;
	outline-color: var(--wp--custom--color--focus--ring);
	outline-offset: calc(-1 * var(--wp--custom--focus--ring-width));
}

@media (prefers-reduced-motion: reduce) {
	.mk-product-gallery .swiper-wrapper,
	.mk-product-gallery .mk-product-gallery__image,
	.mk-product-gallery__dot,
	.mk-product-gallery__thumb-button::after {
		transition: none;
	}

	.mk-product-gallery.is-fade .mk-product-gallery__image {
		filter: none;
	}
}