/**
 * The thumbnail bar inside the PhotoSwipe lightbox.
 *
 * PhotoSwipe ships no thumbnail strip, so this is the one piece of its UI the
 * theme draws itself; everything else — arrows, counter, close, the zoom and
 * pan gestures — is the library's own, styled by assets/vendor/photoswipe.
 *
 * The bar's height is also written in assets/js/lightbox.js, which reserves it
 * as bottom padding so a zoomed-out photo is never hidden behind it. Change
 * the two together.
 */

@layer components {
	.hauto-lightbox-thumbs {
		position: absolute;
		z-index: 10;
		inset-block-end: 0;
		inset-inline: 0;
		display: flex;
		gap: var(--wp--preset--spacing--20);
		justify-content: center;
		overflow-x: auto;
		padding: var(--wp--preset--spacing--20);
		background-color: color-mix(
			in srgb,
			var(--wp--preset--color--contrast) 55%,
			transparent
		);
	}

	.hauto-lightbox-thumbs__item {
		flex: 0 0 auto;
		overflow: hidden;
		width: var(--wp--preset--spacing--80);
		padding: 0;
		border: 2px solid transparent;
		border-radius: var(--hauto-radius-sm);
		background: none;
		aspect-ratio: 4 / 3;
		cursor: pointer;

		&.is-current {
			border-color: var(--wp--preset--color--base);
		}

		&:focus-visible {
			outline: 2px solid var(--wp--preset--color--primary);
			outline-offset: 2px;
		}
	}

	.hauto-lightbox-thumbs__image {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}