/**
 * Slider engine — shared by hermizon/slider (hero) and hermizon/collection-rail.
 *
 * home-spec.md §3 and §4. One component, two pagination modes: dots under the
 * hero, a single circular arrow on the rail.
 *
 * The track is a real scroll container. That is the whole design: swipe,
 * trackpad, shift-scroll, keyboard and the scrollbar itself all work before a
 * line of JavaScript runs, and if the module never loads the row is still
 * scrollable — it just loses its dots.
 */

.hermizon-slider {
	position: relative;
}

.hermizon-slider__track {
	display: flex;
	gap: var(--hermizon-slider-gap, var(--wp--preset--spacing--50));
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	/* The scrollbar is chrome the design does not draw, and the dots and arrow
	 * already say where you are. Scrolling itself is untouched. */
	scrollbar-width: none;
}

.hermizon-slider__track::-webkit-scrollbar {
	display: none;
}

/* A scroll container has to be reachable by keyboard or it is a region a
 * keyboard user cannot read. `tabindex="0"` is on the element; this is the
 * matching focus treatment, since the container is not a control. */
.hermizon-slider__track:focus-visible {
	outline: var(--wp--custom--state--focus-width) solid var(--wp--custom--state--focus);
	outline-offset: var(--wp--custom--state--focus-offset);
}

.hermizon-slider__slide {
	flex: 0 0 var(--hermizon-slide-basis, 100%);
	scroll-snap-align: start;
	min-width: 0;
}

/* --------------------------------------------------------------------------
 * Dots — the hero. One 32 x 8 active pill and 8 x 8 for the rest, centred.
 * ----------------------------------------------------------------------- */

.hermizon-slider__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	margin-block-start: var(--wp--preset--spacing--40);
}

.hermizon-slider__dot {
	/* The design draws 8px. A 24px transparent box around it carries the WCAG
	 * 2.2 target size without changing what is painted — the visible pill is
	 * the ::before, the button is the hit area. */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.hermizon-slider__dot::before {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	background-color: var(--wp--preset--color--disabled);
	border-radius: var(--wp--custom--radius--pill);
	transition: width var(--wp--custom--transition--base), background-color var(--wp--custom--transition--base);
}

.hermizon-slider__dot.is-active::before {
	width: 32px;
	background-color: var(--wp--preset--color--contrast);
}

/* The dots are the hero's only pagination, so the active one must be
 * distinguishable without relying on the width change alone. */
.hermizon-slider__dot:hover::before {
	background-color: var(--wp--preset--color--muted);
}

/* --------------------------------------------------------------------------
 * Arrow controls — the collection rail.
 * 40 x 40 white circle, shadow 0 9px 19px rgba(0,1,35,.16) (home-spec.md §4).
 * ----------------------------------------------------------------------- */

.hermizon-slider__control {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: var(--hermizon-slider-control-top, 40%);
	z-index: 2;
	width: 40px;
	height: 40px;
	padding: 0;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	box-shadow: 0 9px 19px rgba(0, 1, 35, 0.16);
	cursor: pointer;
	transition: background-color var(--wp--custom--transition--fast);
}

.hermizon-slider__control:hover {
	background-color: var(--wp--preset--color--line-light);
}

/* The frame draws only a next control, at the right edge. Previous is rendered
 * too and hides itself at the start of the track — which is the state the frame
 * was drawn in — because a desktop pointer otherwise has no way back. */
.hermizon-slider__control.is-previous {
	inset-inline-start: 0;
	transform: translateX(-50%);
}

.hermizon-slider__control.is-next {
	inset-inline-end: 0;
	transform: translateX(50%);
}

/* Both arrows sit half outside the track, which is off the page at the screen
 * edge on a phone — where the gesture is a swipe anyway. */
@media (max-width: 781px) {
	.hermizon-slider__control {
		display: none;
	}
}

/* --------------------------------------------------------------------------
 * Motion
 * ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.hermizon-slider__track {
		scroll-behavior: auto;
	}

	.hermizon-slider__dot::before {
		transition: none;
	}
}