/**
 * idf-pill-colors - das Farb-Sortiment der Pillen (Issue 945).
 *
 * Bis hierher trug jede Pillenfarbe ihre eigene Regel in der Modul-CSS:
 * `.un-typ-pill[data-typ="kunde"] { background: var(--tint-primary); … }`,
 * und dasselbe noch einmal in akteure, netzwerk, safeguard. Das ging, solange
 * die Werte im Code standen. Seit die Auswahlen aus Directus kommen und sich
 * aus der App erweitern lassen (Issue 942), gibt es fuer einen frisch
 * angelegten Wert keine Regel mehr, die jemand haette schreiben koennen.
 *
 * Deshalb traegt die Auswahl ihre Farbe als DATEN (`color` in der
 * Directus-Choice), und hier stehen die Klassen dazu. Neun Rollen, nicht
 * neun Farbwerte: wer eine Pille faerbt, waehlt aus diesem Sortiment, nicht
 * aus dem Farbkreis. Ein freier Hex-Wert steht in keinem Verhaeltnis zu den
 * Nachbarn und macht aus einer Liste ein Mosaik.
 *
 * Geometrie und Typografie bleiben `.idf-pill-tag` (idf-list-grid.css), hier
 * kommt nur die Toenung dazu. Deshalb laedt diese Datei NACH dem Listen-Grid:
 * beide Selektoren wiegen eine Klasse, bei Gleichstand entscheidet die
 * Reihenfolge.
 */

/* ================================================================ */
/* Das Sortiment                                                     */
/* Paare aus --tint-* und der zugehoerigen Textfarbe, wie sie die    */
/* Tokens vorgeben. Keine eigenen Werte: wer hier ein color-mix      */
/* schreibt, hat eine zehnte Farbe erfunden.                        */
/* ================================================================ */
.idf-pill-farbe-primary { background: var(--tint-primary); color: var(--primary); }
.idf-pill-farbe-accent  { background: var(--tint-accent);  color: var(--accent); }
.idf-pill-farbe-confirm { background: var(--tint-confirm); color: var(--confirm); }
.idf-pill-farbe-green   { background: var(--tint-green);   color: var(--green-text); }
.idf-pill-farbe-yellow  { background: var(--tint-yellow);  color: var(--yellow-text); }
.idf-pill-farbe-orange  { background: var(--tint-orange);  color: var(--orange-text); }
.idf-pill-farbe-red     { background: var(--tint-red);     color: var(--red); }
.idf-pill-farbe-indigo  { background: var(--tint-indigo);  color: var(--indigo); }
.idf-pill-farbe-neutral { background: var(--tint-neutral); color: var(--mid); }

/* ================================================================ */
/* Die Wahl (IDF.pillColors.mountWahl)                               */
/* Eine Reihe Punkte, ein Punkt je Rolle. Bewusst keine Combobox:    */
/* neun Farben sieht man schneller, als man sie liest, und ein       */
/* Farbname in einer Liste beantwortet nicht, wie die Pille aussieht.*/
/* ================================================================ */
.idf-pill-farbwahl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.idf-pill-farbwahl-punkt {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  padding: 0;
  cursor: pointer;
  /* Die Flaeche zeigt die Toenung, der Punkt darin die Textfarbe: beides
     gehoert zur Rolle, und eine Pille ohne ihre Schriftfarbe zu waehlen
     hiesse, die Haelfte der Entscheidung zu verstecken. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--motion-fast) ease, transform var(--motion-fast) ease;
}

.idf-pill-farbwahl-punkt::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.idf-pill-farbwahl-punkt:hover {
  border-color: var(--soft);
}

/* Gewaehlt: kraeftiger Rand statt Haken. Ein Haken in der Punktfarbe
   verschwindet auf dem eigenen Tint, und ein dunkler Haken wuerde bei neun
   Punkten neun verschiedene Kontraste ergeben. */
.idf-pill-farbwahl-punkt.is-gewaehlt {
  border-color: var(--ink);
  border-width: 2px;
}

.idf-pill-farbwahl-punkt:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}