/**
 * Faradoran Theme — timed slider pagination (dots + progress pill).
 *
 * Active model: dark full capsule (base) + white remaining overlay (progress).
 */

.faradoran-slider-pagination {
	--faradoran-slider-dot-size: 10px;
	--faradoran-slider-pill-width: 44px;
	--faradoran-slider-pill-height: 11px;
	--faradoran-slider-pagination-gap: 8px;
	--faradoran-slider-pagination-track: var(--faradoran-theme-color-white);
	--faradoran-slider-pagination-progress: var(--faradoran-theme-color-text);
	--faradoran-slider-previous-duration: 650ms;

	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: var(--faradoran-slider-pagination-gap);
}

.faradoran-slider-pagination__item {
	box-sizing: border-box;
	inline-size: 44px;
	block-size: 44px;
	min-inline-size: 44px;
	min-block-size: 44px;
	padding: 0;
	border: 0;
	margin: 0;
	background: transparent;
	appearance: none;
	cursor: pointer;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.faradoran-slider-pagination__item:focus-visible {
	outline: var(--faradoran-theme-focus-ring);
	outline-offset: var(--faradoran-theme-focus-offset);
	border-radius: 999px;
}

.faradoran-slider-pagination__track {
	box-sizing: border-box;
	display: block;
	inline-size: var(--faradoran-slider-dot-size);
	block-size: var(--faradoran-slider-dot-size);
	padding: 0;
	border: 0;
	margin: 0;
	border-radius: 999px;
	background-color: var(--faradoran-slider-pagination-track);
	position: relative;
	overflow: hidden;
	transition:
		inline-size var(--faradoran-theme-motion-duration-fast, 200ms) var(--faradoran-theme-motion-ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1)),
		block-size var(--faradoran-theme-motion-duration-fast, 200ms) var(--faradoran-theme-motion-ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1)),
		opacity var(--faradoran-theme-motion-duration-fast, 200ms) ease;
}

.faradoran-slider-pagination__item.is-active .faradoran-slider-pagination__track,
.faradoran-slider-pagination__item[aria-selected="true"] .faradoran-slider-pagination__track {
	inline-size: var(--faradoran-slider-pill-width);
	block-size: var(--faradoran-slider-pill-height);
	background-color: transparent;
}

.faradoran-slider-pagination__base {
	display: none;
	box-sizing: border-box;
	position: absolute;
	inset: 0;
	padding: 0;
	border: 0;
	margin: 0;
	border-radius: 0;
	background-color: var(--faradoran-slider-pagination-progress);
}

.faradoran-slider-pagination__item.is-active .faradoran-slider-pagination__base,
.faradoran-slider-pagination__item.is-previous .faradoran-slider-pagination__base {
	display: block;
}

.faradoran-slider-pagination__progress {
	box-sizing: border-box;
	position: absolute;
	inset: 0;
	padding: 0;
	border: 0;
	margin: 0;
	border-radius: 0;
	background-color: var(--faradoran-slider-pagination-track);
	transform: scaleX(1);
	transform-origin: right center;
	will-change: transform;
	direction: ltr;
}

.faradoran-slider-pagination__item:not(.is-active) .faradoran-slider-pagination__progress {
	opacity: 0;
}

.faradoran-slider-pagination__item.is-active.is-progressing .faradoran-slider-pagination__progress {
	opacity: 1;
	animation-name: faradoran-slider-pagination-fill;
	animation-duration: var(--faradoran-slider-progress-duration);
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	animation-delay: var(--faradoran-slider-progress-delay, 0ms);
	animation-play-state: var(--faradoran-slider-progress-play-state, running);
}

.faradoran-slider-pagination__item.is-previous .faradoran-slider-pagination__track {
	inline-size: var(--faradoran-slider-dot-size);
	block-size: var(--faradoran-slider-dot-size);
	background-color: var(--faradoran-slider-pagination-track);
}

.faradoran-slider-pagination__item.is-previous .faradoran-slider-pagination__progress {
	opacity: 0;
	animation: none;
	transform: none;
}

.faradoran-slider-pagination__item.is-previous .faradoran-slider-pagination__base {
	animation: faradoran-slider-pagination-previous var(--faradoran-slider-previous-duration) ease forwards;
}

@keyframes faradoran-slider-pagination-fill {
	from {
		transform: scaleX(1);
	}

	to {
		transform: scaleX(0);
	}
}

@keyframes faradoran-slider-pagination-previous {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.faradoran-slider-pagination__track {
		transition: none;
	}

	.faradoran-slider-pagination__item.is-active.is-progressing .faradoran-slider-pagination__progress {
		animation: none;
		transform: scaleX(0);
	}

	.faradoran-slider-pagination__item.is-previous .faradoran-slider-pagination__base {
		animation: none;
		opacity: 0;
	}
}