/* ==========================================================================
   EWB Radar -- color_mixer.css
   Die Regler im Feld des Farbmischers: vier für die Farben der Karte, darunter
   der Schrift-Regler und, wo die Instanz sie zeigt, drei für die Stellwerte
   von „Rand abgerundet“. Der Bauplan steht im Kopf von
   frontend/js/color_mixer_panel.js; hier steht allein die Darstellung. Das Feld
   selbst gehört floating_panel.css.

   ⚠️ Kein Regler trägt ein eigenes `touch-action`: die Angabe steht am Feld.

   Die Bahn eines der vier Regler zeigt, was er tut. Die Farben darin sind
   deshalb wörtliche Werte und keine Tokens: sie stehen für Helligkeit, Kontrast,
   Sättigung und Farbton selbst und wechseln nicht mit dem Theme. Die Bahn des
   Schrift-Reglers ist neutral und nimmt ihre Farbe aus einem Token.
   ========================================================================== */

/* Die Zeilen stehen untereinander, mit festem Abstand: die Höhe des Feldes
   ergibt sich aus ihnen, nicht umgekehrt. */
.color-mixer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.color-mixer__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.color-mixer__name {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* Der Träger der Sprechblase mit dem Wert des Reglers (tooltips.css setzt ihr
   Aussehen, das Skript ihren Text). Sie steht mittig über dem Regler und
   erscheint allein mit `:hover`: anders als die Blasen der Knöpfe zeigt sie
   sich bei Fokus nicht. */
.color-mixer__carrier[data-t-tooltip]::after {
  bottom: calc(100% + var(--space-1));
  left: 50%;
  transform: translateX(-50%) translateY(4px);
}

.color-mixer__carrier[data-t-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.color-mixer__slider {
  --color-mixer-track-height: 10px;
  --color-mixer-thumb: 20px;
  --color-mixer-thumb-height: var(--color-mixer-thumb);

  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  outline: none;
  cursor: pointer;
}

/* Die Bahnen der vier Regler: je Regler ein Verlauf, von seinem linken zu seinem rechten Ende. */
.color-mixer__slider--brightness {
  --color-mixer-track: linear-gradient(to right, black, white);
}

/* Links ein weicher Übergang, rechts eine harte Kante zwischen Schwarz und Weiß. */
.color-mixer__slider--contrast {
  --color-mixer-track: linear-gradient(to right, gray 0%, darkgray 40%, black 60%,
    black 80%, white 80%, white 100%);
}

.color-mixer__slider--saturation {
  --color-mixer-track: linear-gradient(to right, gray, #ff3b30);
}

/* Der ganze Farbkreis: beide Enden sind dieselbe Farbe. */
.color-mixer__slider--hue {
  --color-mixer-track: linear-gradient(to right, #0ff, #00f, #f0f, #f00, #ff0, #0f0, #0ff);
}

.color-mixer__slider::-webkit-slider-runnable-track {
  height: var(--color-mixer-track-height);
  border-radius: var(--radius-full);
  background: var(--color-mixer-track);
  box-shadow: 0 0 0 1px var(--color-border);
}

.color-mixer__slider::-moz-range-track {
  height: var(--color-mixer-track-height);
  border-radius: var(--radius-full);
  background: var(--color-mixer-track);
  box-shadow: 0 0 0 1px var(--color-border);
}

.color-mixer__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--color-mixer-thumb);
  height: var(--color-mixer-thumb-height);
  /* Der Knopf sitzt mittig auf der Bahn: halbe Bahn minus halber Knopf. */
  margin-top: calc((var(--color-mixer-track-height) - var(--color-mixer-thumb-height)) / 2);
  border-radius: var(--radius-full);
  background: var(--color-text);
  border: 2px solid var(--glass-bg-solid);
  box-shadow: var(--shadow-sm);
}

.color-mixer__slider::-moz-range-thumb {
  width: var(--color-mixer-thumb);
  height: var(--color-mixer-thumb-height);
  box-sizing: border-box;
  border-radius: var(--radius-full);
  background: var(--color-text);
  border: 2px solid var(--glass-bg-solid);
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   Der Schrift-Regler: eine Stellung je Stufe. Seine Zeile ist ausgeblendet,
   solange keine Schrift-Ebene aufliegt; die Zeilen der Stellwerte sind es,
   solange er nicht auf ihrer Stufe steht.
   -------------------------------------------------------------------------- */

/* Ausdrücklich: `display: flex` an der Zeile schlüge sonst die Regel des
   Browsers für `[hidden]`. */
.color-mixer__row[hidden] {
  display: none;
}

/* Die Zeile über dem Regler nennt die gewählte Stufe und bleibt eine Zeile:
   bräche sie um, änderte jeder Schritt des Reglers die Höhe des Feldes. */
.color-mixer__row--font .color-mixer__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Die Breite des Knopfes am Schrift-Regler und an den Reglern der Stellwerte,
   an EINER Stelle für den Knopf und für die Marke. Der Knopf ist schmal, damit
   sein Weg (Bahn minus Knopf) am Schrift-Regler auch im schmalsten Feld je
   Stufe für einen Finger reicht. */
.color-mixer__carrier--font,
.color-mixer__carrier--tuning {
  --color-mixer-font-thumb: 12px;
  /* Bezug der Marke, ausdrücklich: dieser Träger trägt keine Sprechblase, und
     nur mit einer gäbe tooltips.css ihm den Bezug. */
  position: relative;
}

.color-mixer__slider--font,
.color-mixer__slider--tuning {
  --color-mixer-thumb: var(--color-mixer-font-thumb);
  --color-mixer-thumb-height: 20px;
  --color-mixer-track: var(--glass-bg-2h);
}

/* Unter der Bahn: je Stellung ein feiner Strich, und die Marke: am
   Schrift-Regler an der Stufe des Kartenstils, an einem Regler der Stellwerte
   an seiner Vorgabe. Beide stehen, wo die Mitte des Knopfes an ihrer
   Stellung steht: der Knopf läuft nicht die ganze Bahn, sondern die Bahn minus
   seine Breite. Den Anteil am Weg setzt das Skript. */
.color-mixer__marker,
.color-mixer__tick {
  position: absolute;
  bottom: 0;
  left: calc(var(--color-mixer-font-thumb) / 2
    + var(--color-mixer-mark, 0) * (100% - var(--color-mixer-font-thumb)));
  border-radius: 1px;
  background: var(--color-text-muted);
  pointer-events: none;
}

.color-mixer__marker {
  width: 2px;
  height: 6px;
  margin-left: -1px;
}

/* Feiner und blasser als die Marke, damit sie sich abhebt. */
.color-mixer__tick {
  width: 1px;
  height: 4px;
  margin-left: -0.5px;
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   Die Regler der Stellwerte von „Rand abgerundet“: drei Zeilen unter dem
   Schrift-Regler, mit Bahn, Knopf, Strichen und Marke wie er. Sie sind eine
   technische Einstellung: die Zeile über dem Regler steht in einer Schrift mit
   fester Zeichenbreite, links der Name des Stellwerts als Code, rechts sein
   Wert.
   -------------------------------------------------------------------------- */

.color-mixer__name--tuning {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.color-mixer__code {
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--glass-bg-2);
  color: var(--color-text);
  font-family: inherit;
}

.color-mixer__value {
  color: var(--color-text);
}