/**
 * Oyolloo Elements — slider chrome.
 *
 * Pairs with js/core/slider.js. The track is a native scroll-snap container, so
 * the browser handles momentum and the JS only reflects state onto the dots and
 * arrows.
 *
 * Dot geometry from Figma node 473:14467: active pill 26x14, inactive 14x14.
 *
 * @package Oyolloo\Elements
 * @since   1.0.0
 */

.oe-slider {
	position: relative;
}

.oe-slider__track {
	display: flex;
	/* The slide width above is computed against this same value, so a
	   hardcoded gap here leaves the deck short of the container edge by the
	   difference - 36px on the reviews row, which reads as a misaligned
	   section rather than as a narrow gap. */
	gap: var(--oe-gap, var(--oe-space-md));
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;

	/*
	 * Room for anything a slide paints outside its own box. Scrolling one axis
	 * forces the other away from `visible`, so this track clips vertically too
	 * however it is declared — a slide's drop shadow gets sliced flat at the
	 * bottom edge. The padding gives the shadow somewhere to land inside the
	 * scroll box and the negative margin hands the height back, so a slider
	 * that needs none (the default) measures exactly as before.
	 */
	padding-block-end: var(--oe-slider-bleed, 0px);
	margin-block-end: calc(-1 * var(--oe-slider-bleed, 0px));
}

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

.oe-slider__slide {
	flex: 0 0 auto;
	scroll-snap-align: start;
	/*
	 * Between two breakpoints the per-view count is fixed while the track keeps
	 * shrinking, so the slides reach a width the copy cannot be read at - four
	 * cards still sharing a 1045 window is the shape of that. The floor stops
	 * them there: past it a slide keeps its width, the count drops itself, and
	 * the track scrolls to the rest. Default 0 leaves every slider as it was.
	 */
	width: max(
		var(--oe-slide-min, 0px),
		calc(
			(100% - var(--oe-peek, 0px) - (var(--oe-per-view, 3) - 1) * var(--oe-gap, var(--oe-space-md)))
			/ var(--oe-per-view, 3)
		)
	);
}

/* -- Dots ---------------------------------------------------------------- */

.oe-slider__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--oe-space-2xs);
	margin-block-start: var(--oe-space-md);
}

/* No dots means every slide is visible; the rail must not reserve height. */
.oe-slider__dots:empty {
	display: none;
}

.oe-slider__dot {
	width: 14px;
	height: 14px;
	padding: 0;
	border: 0;
	border-radius: var(--oe-radius-pill);
	background-color: var(--oe-color-neutral-300);
	cursor: pointer;
	transition:
		width 300ms var(--oe-ease, ease),
		background-color 300ms var(--oe-ease, ease);
}

.oe-slider__dot.is-active {
	width: 26px;
	background-color: var(--oe-color-brand);
}

/* -- Arrows -------------------------------------------------------------- */

.oe-slider__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--oe-color-neutral-300);
	border-radius: var(--oe-radius-pill);
	background-color: var(--oe-color-white);
	color: var(--oe-color-ink);
	cursor: pointer;
	transition:
		background-color 200ms var(--oe-ease, ease),
		border-color 200ms var(--oe-ease, ease),
		opacity 200ms var(--oe-ease, ease);
}

.oe-slider__nav:hover {
	border-color: var(--oe-color-brand);
	background-color: var(--oe-color-brand);
}

.oe-slider__nav[disabled] {
	opacity: 0.35;
	cursor: default;
}

.oe-slider__nav svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

@media (max-width: 1024px) {
	.oe-slider__slide {
		--oe-per-view: var(--oe-per-view-tablet, 2);
	}
}

@media (max-width: 767px) {
	.oe-slider__slide {
		--oe-per-view: var(--oe-per-view-mobile, 1);
	}
}