/**
 * Generic horizontal scroller engine for Vida Aromatica Core.
 *
 * Mechanics and shape only. Nothing here is branded, so any component can reuse
 * it and paint its own skin on top with its own BEM classes.
 *
 * ---------------------------------------------------------------------------
 * Tokens a skin can override
 * ---------------------------------------------------------------------------
 *
 * Everything a skin normally wants to change is a custom property, so a new
 * component (products, brands, collections, promotions) usually writes a single
 * token block instead of redeclaring the arrow and focus rules.
 *
 *   --va-scroller-transition        Duration and easing of every transition.
 *   --va-scroller-focus-color       Focus ring colour, controls and track.
 *   --va-scroller-focus-width       Focus ring thickness.
 *   --va-scroller-focus-offset      Focus ring offset on the controls.
 *   --va-scroller-track-focus-offset Focus ring offset on the track.
 *   --va-scroller-control-size      Diameter of the arrow buttons.
 *   --va-scroller-control-top       Vertical anchor of the arrows.
 *   --va-scroller-control-offset    Horizontal inset. Negative pulls them out.
 *   --va-scroller-control-bg        Arrow background.
 *   --va-scroller-control-color     Arrow foreground, inherited by the chevron.
 *   --va-scroller-control-border    Arrow border colour.
 *   --va-scroller-control-radius    Arrow corner radius.
 *   --va-scroller-control-shadow    Arrow shadow.
 *   --va-scroller-control-bg-hover      Arrow background on hover and focus.
 *   --va-scroller-control-color-hover   Arrow foreground on hover and focus.
 *   --va-scroller-control-border-hover  Arrow border on hover and focus.
 *   --va-scroller-icon-size         Side of the chevron square.
 *   --va-scroller-icon-weight       Chevron stroke thickness.
 *   --va-scroller-icon-nudge        Optical centring of the chevron.
 *
 * What is deliberately NOT here, because it is genuinely per component:
 * typography, item width, gap, scrollbar visibility and scroll snap mode.
 */

.va-scroller {
	--va-scroller-transition: var(--va-transition, 240ms ease-out);
	--va-scroller-focus-color: currentColor;
	--va-scroller-focus-width: 2px;
	--va-scroller-focus-offset: 2px;
	--va-scroller-track-focus-offset: 2px;
	--va-scroller-control-size: 2.5rem;
	--va-scroller-control-top: 50%;
	--va-scroller-control-offset: 0.25rem;
	--va-scroller-control-bg: #fff;
	--va-scroller-control-color: inherit;
	--va-scroller-control-border: transparent;
	--va-scroller-control-radius: 999px;
	--va-scroller-control-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
	--va-scroller-control-bg-hover: var(--va-scroller-control-bg);
	--va-scroller-control-color-hover: var(--va-scroller-control-color);
	--va-scroller-control-border-hover: var(--va-scroller-control-border);
	--va-scroller-icon-size: 0.5rem;
	--va-scroller-icon-weight: 2px;
	--va-scroller-icon-nudge: 0.18rem;

	position: relative;
	width: 100%;
}

.va-scroller__frame {
	position: relative;
}

/* ---------------------------------------------------------------------------
 * Track: the scroll container. Always a single line.
 * ------------------------------------------------------------------------ */

.va-scroller__track {
	-webkit-overflow-scrolling: touch;
	display: flex;
	flex-wrap: nowrap;
	list-style: none;
	margin: 0;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 0;
	scroll-behavior: smooth;
}

.va-scroller__track:focus-visible {
	outline: var(--va-scroller-focus-width) solid var(--va-scroller-focus-color);
	outline-offset: var(--va-scroller-track-focus-offset);
}

.va-scroller__item {
	flex: 0 0 auto;
	list-style: none;
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Controls
 * ------------------------------------------------------------------------ */

.va-scroller__control {
	align-items: center;
	background: var(--va-scroller-control-bg);
	border: 1px solid var(--va-scroller-control-border);
	border-radius: var(--va-scroller-control-radius);
	box-shadow: var(--va-scroller-control-shadow);
	color: var(--va-scroller-control-color);
	cursor: pointer;
	display: flex;
	height: var(--va-scroller-control-size);
	justify-content: center;
	padding: 0;
	position: absolute;
	top: var(--va-scroller-control-top);
	transform: translateY(-50%);
	transition:
		background-color var(--va-scroller-transition),
		border-color var(--va-scroller-transition),
		color var(--va-scroller-transition),
		opacity var(--va-scroller-transition),
		visibility var(--va-scroller-transition);
	width: var(--va-scroller-control-size);
	z-index: 3;
}

.va-scroller__control--prev {
	left: var(--va-scroller-control-offset);
}

.va-scroller__control--next {
	right: var(--va-scroller-control-offset);
}

.va-scroller__control:hover,
.va-scroller__control:focus-visible {
	background: var(--va-scroller-control-bg-hover);
	border-color: var(--va-scroller-control-border-hover);
	color: var(--va-scroller-control-color-hover);
}

.va-scroller__control:focus-visible {
	outline: var(--va-scroller-focus-width) solid var(--va-scroller-focus-color);
	outline-offset: var(--va-scroller-focus-offset);
}

/*
 * Hidden rather than greyed out: an arrow that leads nowhere is noise. It stays
 * in the flow (no display: none) so showing it again does not reflow the strip.
 */
.va-scroller__control[disabled] {
	cursor: default;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}

/* CSS-only chevron: no icon font, no external asset, no extra request. */
.va-scroller__control-icon {
	border-right: var(--va-scroller-icon-weight) solid currentColor;
	border-top: var(--va-scroller-icon-weight) solid currentColor;
	display: block;
	height: var(--va-scroller-icon-size);
	width: var(--va-scroller-icon-size);
}

/* The rotated square is optically off centre; the nudge puts it back. */
.va-scroller__control--prev .va-scroller__control-icon {
	margin-left: var(--va-scroller-icon-nudge);
	transform: rotate(-135deg);
}

.va-scroller__control--next .va-scroller__control-icon {
	margin-right: var(--va-scroller-icon-nudge);
	transform: rotate(45deg);
}

/* ---------------------------------------------------------------------------
 * Accessibility preferences
 * ------------------------------------------------------------------------ */

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

	.va-scroller__control {
		transition: none;
	}
}