/*
 * Der Doppel-Regler.
 *
 * Eigene Datei, nur geladen, wenn ein Projekt ihn einschaltet — so belastet er die
 * Grundausstattung nicht.
 *
 * Kaskade: Stufe 2 geprüft und bewusst verworfen, Stufe 6 belegt.
 *
 * `uk-range` GIBT ES (uikit.css:1234-1313) und es stylt einen Bereichsregler vollständig:
 * Bahn 3px in #ebebeb, Griff 15px weiß mit 1px-Rand, dazu Varianten für dunkle Sektionen.
 * Für EINEN Regler wäre es genau richtig.
 *
 * Hier liegen aber zwei Felder übereinander, und dann trägt jedes seine eigene sichtbare
 * Bahn: sie wäre doppelt gezeichnet, und die obere verdeckte den gewählten Ausschnitt
 * darunter. Sie stillzulegen hieße `.uk-range::-webkit-slider-runnable-track` zu
 * überschreiben — und keine `.uk-*`-Regel wird überschrieben (CLAUDE.md §2.2).
 *
 * Also eigener Aufbau, mit den Maßen von UIkit, damit der Regler im Theme nicht auffällt:
 * 15px Griff, 3px Bahn, 500px Radius. Die Farben kommen aus `currentColor` statt aus
 * festen Werten — damit folgt der Regler jedem Style-Customizer-Schema und auch einer
 * dunklen Sektion, wofür UIkit eigene Regeln braucht.
 *
 * Kein `.uk-*`-Selektor wird angefasst. Alle Namen sind `idco-re-*`.
 */

.idco-re-filter__slider {
	margin-top: 6px;
	max-width: 15rem;
}

/* Die Bahn trägt beide Regler übereinander. */
.idco-re-filter__track {
	position: relative;
	display: block;
	height: 20px;
}

/* Der ungewählte Grund. Als Pseudo-Element, damit die Bahn selbst nur Behälter bleibt. */
.idco-re-filter__track::before {
	content: "";
	position: absolute;
	inset: 9px 0 auto;
	height: 3px;
	border-radius: 500px;
	background: currentColor;
	opacity: 0.18;
}

/* Der gewählte Ausschnitt. Farbe erbt vom Text — damit passt er sich jedem
   Style-Customizer-Farbschema an, ohne dass wir eine Farbe festlegen. */
.idco-re-filter__fill {
	position: absolute;
	top: 9px;
	height: 3px;
	border-radius: 500px;
	background: currentColor;
}

/* Beide Regler decken die volle Breite ab und liegen exakt übereinander.
   `pointer-events: none` am Feld, `auto` am Griff: nur so bleibt der untere Griff
   greifbar, wenn beide auf demselben Punkt stehen. */
.idco-re-filter__thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.idco-re-filter__thumb--max {
	z-index: 2;
}

.idco-re-filter__track.is-min-on-top .idco-re-filter__thumb--min {
	z-index: 3;
}

/* Die Bahn des nativen Reglers wird unsichtbar — gezeichnet wird oben. */
.idco-re-filter__thumb::-webkit-slider-runnable-track {
	height: 20px;
	background: none;
	border: 0;
}
.idco-re-filter__thumb::-moz-range-track {
	height: 20px;
	background: none;
	border: 0;
}

.idco-re-filter__thumb::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	pointer-events: auto;
	width: 15px;
	height: 15px;
	margin-top: 3px;
	border-radius: 500px;
	border: 1px solid #cccccc;
	background: #fff;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.2 );
	cursor: pointer;
}
.idco-re-filter__thumb::-moz-range-thumb {
	pointer-events: auto;
	width: 15px;
	height: 15px;
	border-radius: 500px;
	border: 1px solid #cccccc;
	background: #fff;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.2 );
	cursor: pointer;
}

/* `appearance: none` nimmt in einigen Browsern auch den Fokusring mit. Ohne Ersatz wäre
   der Regler mit der Tastatur bedienbar, aber unsichtbar bedienbar. */
.idco-re-filter__thumb:focus-visible::-webkit-slider-thumb {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
.idco-re-filter__thumb:focus-visible::-moz-range-thumb {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
.idco-re-filter__thumb:focus {
	outline: none;
}

.idco-re-filter__values {
	margin: 2px 0 0;
	font-variant-numeric: tabular-nums;
}