:root {
	--mf-slider-track-width: 8rem;
	--mf-slider-track-height: 1.4rem;
}

.mf-slider {
	display: inline-flex;
	align-items: center;
	gap: var(--mf-space-2);
	font-family: var(--mf-font-mono);
	/* The gesture is a drag, not a scroll. */
	touch-action: none;
}

/* The slider proper: it holds the role, the values and the focus, and clips the
   tape sliding inside it. */
.mf-slider-track {
	position: relative;
	width: var(--mf-slider-track-width);
	height: var(--mf-slider-track-height);
	overflow: hidden;
	background: var(--mf-color-surface);
	border: var(--mf-border);

	&:focus-visible {
		border-color: var(--mf-color-accent);
		outline: none;
	}
}

/* Starts at the track's centre, so its own origin sits under the cursor and the
   travel beyond either end stays empty rather than reachable. */
.mf-slider-ticks {
	position: absolute;
	top: 0;
	left: 50%;
	width: var(--mf-slider-travel);
	height: 100%;
	/* Minor ticks, kept short: the detents and the cursor are the only lines
	   that cross the track. */
	background-image: linear-gradient(to right, var(--mf-color-border) 0 1px, transparent 1px);
	background-size: 8px 60%;
	background-position: 0 50%;
	background-repeat: repeat-x;
	transition: transform var(--mf-transition-fast) linear;
}

.mf-slider-detent {
	position: absolute;
	top: 0;
	width: 2px;
	height: 100%;
	background: var(--mf-color-border-strong);
	transform: translateX(-1px);
}

.mf-slider-cursor {
	position: absolute;
	top: 0;
	left: 50%;
	width: 2px;
	height: 100%;
	background: var(--mf-color-accent);
	transform: translateX(-1px);
	pointer-events: none;
}

.mf-slider-readout {
	min-width: 4.5em;
	color: var(--mf-color-text-muted);
	font-size: var(--mf-font-size-small);
	letter-spacing: 0.06em;
}