/*
 * Progress for photos that advance on their own (ynoAutoplay in assets/js/image-swap.js):
 * the TOP hero dots and the dots over TOP and Product Detail feature photos.
 *
 * The current dot fills from the left over --yno-progress-duration, and the photo
 * changes when the fill ends (animationend). data-autoplay on the slider or feature
 * freezes the fill while paused and shows it full when autoplay is off (reduced motion).
 */
.yno-progress {
	position: relative;
	overflow: hidden;
}

.yno-progress[aria-current="true"]::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--yno-progress-color, #32373c);
	transform-origin: left center;
	animation: yno-progress var(--yno-progress-duration, 4s) linear forwards;
}

[data-autoplay="paused"] .yno-progress[aria-current="true"]::after {
	animation-play-state: paused;
}

[data-autoplay="off"] .yno-progress[aria-current="true"]::after {
	animation: none;
}

@keyframes yno-progress {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

/* Dots over a feature photo, placed by script at the photo's lower left. Clicking one shows its photo. */
.yno-dots {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	padding: 0 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .7);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

/*
 * The visible dot is 8px, but each button is at least 24px tall and wide (WCAG 2.5.8)
 * so it is easy to tap: the padding is transparent (background-clip) and the fill
 * keeps to the dot through the matching inset. Adjacent padding gives the 8px gap.
 */
.yno-dots__dot {
	box-sizing: content-box;
	width: 8px;
	height: 8px;
	padding: 8px 8px;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	background: rgba(50, 55, 60, .3) content-box;
	transition: width .3s ease;
}

.yno-dots .yno-progress::after {
	inset: 8px;
}

.yno-dots__dot[aria-current="true"] {
	width: 24px;
}

@media (prefers-reduced-motion: reduce) {
	.yno-dots__dot {
		transition: none;
	}
}