svelte-kit-vice/src/uix/eidos/components/slider/slider.css

[data-slider] {
	--_slider-track-size: var(--slider-track-size-md);
	--_slider-thumb-size: var(--slider-thumb-size-md);
	--_slider-hit-size: var(--slider-hit-size-md);
	--_slider-tick-size: var(--slider-tick-size-md);

	cursor: pointer;
}

[data-slider][data-size='xs'] {
	--_slider-track-size: var(--slider-track-size-xs);
	--_slider-thumb-size: var(--slider-thumb-size-xs);
	--_slider-hit-size: var(--slider-hit-size-xs);
	--_slider-tick-size: var(--slider-tick-size-xs);
}

[data-slider][data-size='sm'] {
	--_slider-track-size: var(--slider-track-size-sm);
	--_slider-thumb-size: var(--slider-thumb-size-sm);
	--_slider-hit-size: var(--slider-hit-size-sm);
	--_slider-tick-size: var(--slider-tick-size-sm);
}

[data-slider][data-size='lg'] {
	--_slider-track-size: var(--slider-track-size-lg);
	--_slider-thumb-size: var(--slider-thumb-size-lg);
	--_slider-hit-size: var(--slider-hit-size-lg);
	--_slider-tick-size: var(--slider-tick-size-lg);
}

[data-slider][data-size='xl'] {
	--_slider-track-size: var(--slider-track-size-xl);
	--_slider-thumb-size: var(--slider-thumb-size-xl);
	--_slider-hit-size: var(--slider-hit-size-xl);
	--_slider-tick-size: var(--slider-tick-size-xl);
}

[data-slider][data-disabled] {
	cursor: not-allowed;
	opacity: var(--slider-disabled-opacity);
}

/* Readonly — value visible, thumb stays focusable, NOT dimmed (distinct from
   disabled). Just drops the grab/edit cursor; the value lock lives in soma. */
[data-slider][data-readonly] {
	cursor: default;
}

[data-slider-thumb][data-readonly],
[data-slider-thumb][data-readonly]:active {
	cursor: default;
	scale: 1;
}

/* The global `commit` firma pulses a 3px primary box-shadow RING on whatever the
   commit event targets. Our `commit-set` targets the PROVIDER, so every arrow
   step and every drag release drew a border around the WHOLE control — a ring
   reads as feedback on a small box, as a stray border on a wide thin rail. Kill
   the VISUAL ring here (the sound/haptic firma is unaffected — it runs in JS,
   not CSS); the value change is itself the visible confirmation. Same opt-out as
   gradient-builder.css, and it reaches every embedded slider (media-player,
   waveform, color-picker, time-picker…) because they all carry [data-slider].
   `animation` is the lever, not `box-shadow`: keyframed declarations outrank
   normal ones, so only resetting the animation NAME stops the paint. */
[data-slider][data-event-family='commit'][data-event-phase='active'] {
	animation: none;
}

[data-slider][data-orientation='horizontal'] {
	inline-size: 100%; /* literal: a rail spans its container — identity; its floor is `min-inline-size` */
	block-size: var(--_slider-hit-size);
	min-inline-size: var(--slider-min-inline-size);
}

[data-slider][data-orientation='vertical'] {
	inline-size: var(--_slider-hit-size);
	block-size: var(--slider-min-block-size);
	min-block-size: var(--slider-min-block-size);
}

[data-slider]::before {
	content: '';
	position: absolute;
	border-radius: var(--slider-track-radius);
	background: var(--slider-track-bg);
}

[data-slider][data-orientation='horizontal']::before {
	inset-inline: 0;
	inset-block-start: 50%;
	block-size: var(--_slider-track-size);
	transform: translateY(-50%);
}

/* Centring on the inline axis is a LOGICAL offset (`margin-inline-start`), never
   `translateX(-50%)`: transforms are physical, so pairing one with
   `inset-inline-start` centres in LTR and lands a full track-width off-axis in
   RTL. Same idiom the Tick already used below. */
[data-slider][data-orientation='vertical']::before {
	inset-block: 0;
	inset-inline-start: 50%;
	inline-size: var(--_slider-track-size);
	margin-inline-start: calc(var(--_slider-track-size) / -2);
}

[data-slider-range] {
	border-radius: var(--slider-track-radius);
	background: var(--slider-range-bg);
	pointer-events: none;
}

[data-slider-range][data-orientation='horizontal'] {
	inset-block-start: 50%;
	block-size: var(--_slider-track-size);
	transform: translateY(-50%);
}

[data-slider-range][data-orientation='vertical'] {
	inset-inline-start: 50%;
	inline-size: var(--_slider-track-size);
	margin-inline-start: calc(var(--_slider-track-size) / -2);
}

/* Secondary track (buffer / preloaded region) — same geometry as the range,
   layered UNDER it (source order: the range is painted after and on top). */
[data-slider-secondary-range] {
	border-radius: var(--slider-track-radius);
	background: var(--slider-secondary-bg);
	pointer-events: none;
}

[data-slider-secondary-range][data-orientation='horizontal'] {
	inset-block-start: 50%;
	block-size: var(--_slider-track-size);
	transform: translateY(-50%);
}

[data-slider-secondary-range][data-orientation='vertical'] {
	inset-inline-start: 50%;
	inline-size: var(--_slider-track-size);
	margin-inline-start: calc(var(--_slider-track-size) / -2);
}

[data-slider-thumb] {
	inline-size: var(--_slider-thumb-size);
	block-size: var(--_slider-thumb-size);
	border: var(--slider-thumb-border-width) solid var(--slider-thumb-border);
	border-radius: var(--slider-thumb-radius);
	background: var(--slider-thumb-bg);
	box-shadow: var(--slider-thumb-shadow);
	cursor: grab;
	outline: none;
	/* `scale` is its own property, independent of the `transform: translate()`
	   the soma uses to centre the thumb — they compose, so the lift scales the
	   thumb in place. */
	transition:
		background var(--slider-transition-duration) var(--slider-transition-ease),
		border-color var(--slider-transition-duration) var(--slider-transition-ease),
		scale var(--slider-transition-duration) var(--slider-transition-ease),
		box-shadow var(--slider-transition-duration) var(--slider-transition-ease);
}

/* Pickup lift on grab: scale toward the viewer + a higher shadow. */
[data-slider-thumb]:active {
	cursor: grabbing;
	scale: var(--slider-active-thumb-scale);
	box-shadow: var(--slider-active-thumb-shadow);
}

[data-slider-thumb]:focus-visible {
	/* Keep the thumb's own drop shadow; the focus ring is a flush outline (no gap)
	   so it survives forced-colors. */
	box-shadow: var(--slider-thumb-shadow);
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: 0;
}

[data-slider-thumb][data-disabled] {
	cursor: not-allowed;
}

[data-slider-tick] {
	inline-size: var(--_slider-tick-size);
	block-size: var(--_slider-tick-size);
	border-radius: var(--slider-tick-radius);
	background: var(--slider-tick-bg);
	pointer-events: none;
}

[data-slider-tick][data-orientation='horizontal'] {
	inset-block-start: 50%;
	margin-block-start: calc(var(--_slider-tick-size) / -2);
}

[data-slider-tick][data-orientation='vertical'] {
	inset-inline-start: 50%;
	margin-inline-start: calc(var(--_slider-tick-size) / -2);
}

[data-slider-tick][data-active] {
	background: var(--slider-active-tick-bg);
}

@media (prefers-reduced-motion: reduce) {
	[data-slider-thumb] {
		transition: none;
	}
	/* No pickup zoom under reduced motion — the raised shadow still conveys grab. */
	[data-slider-thumb]:active {
		scale: 1;
	}
}