/**
 * Shared slider (scroll-snap). Used by product-slider, testimonials and
 * media-slider. Depends on tokens.css.
 *
 * Blocks set the number of visible slides with --dh-slider-per-view
 * (and can change it per breakpoint in their own style.css).
 */

.dh-slider {
	--dh-slider-per-view: 1;
	--dh-slider-gap: var(--dh-space-24);
}

.dh-slider__track {
	position: relative; 
	display: flex;
	gap: var(--dh-slider-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

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

@media (prefers-reduced-motion: no-preference) {
	.dh-slider__track {
		scroll-behavior: smooth;
	}
}

/* Mouse drag: snapping and smooth scroll are paused while dragging. */
.dh-slider__track.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	scroll-snap-type: none;
	user-select: none;
}

.dh-slider__slide {
	flex: 0 0 calc((100% - (var(--dh-slider-per-view) - 1) * var(--dh-slider-gap)) / var(--dh-slider-per-view));
	min-width: 0;
	scroll-snap-align: start;
}

/* Controls: progress bar left, arrows right (always visible). */

.dh-slider__controls {
	display: flex;
	align-items: center;
	gap: var(--dh-space-24);
	margin-top: var(--dh-space-32);
}

/* Nothing to scroll: no controls. */
.dh-slider.is-static .dh-slider__controls {
	display: none;
}

.dh-slider__progress {
	position: relative;
	flex: 1;
	height: var(--dh-slider-progress-height);
	overflow: hidden;
	background-color: var(--dh-color-bg-alt);
}

.dh-slider__progress-bar {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background-color: var(--dh-color-text);
}

.dh-slider__arrows {
	display: flex;
	flex: none;
	gap: var(--dh-space-12);
}

.dh-slider__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--dh-slider-arrow-size);
	height: var(--dh-slider-arrow-size);
	padding: 0;
	border: var(--dh-border-width) solid var(--dh-color-heading);
	border-radius: var(--dh-radius-round);
	background: transparent;
	color: var(--dh-color-heading);
	cursor: pointer;
	transition: background-color var(--dh-transition-fast), color var(--dh-transition-fast), opacity var(--dh-transition-fast);
}

.dh-slider__arrow:hover {
	background-color: var(--dh-color-heading);
	color: var(--dh-color-bg);
}

.dh-slider__arrow[aria-disabled="true"] {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}