/**
 * idf-status-pille - die Status-Pille vorn (Issue 1542)
 *
 * Logik: idf-status-pille.js. Geometrie: `.idf-list-done-pill` aus
 * functions/list-view/grid-css. Farben: die Rolle aus blocks/pill-colors,
 * die ihre beiden Werte als Variablen traegt (--pill-farbe, --pill-flaeche).
 * Hier wird keine Farbe gemischt und keine eigene vergeben.
 *
 * Laedt NACH grid-css und pill-colors: die Regeln hier muessen die gesetzte
 * Check-Pille (`.idf-list-done-pill.is-active`, Vollton Gruen) und die
 * Toenung der Rolle uebertreffen.
 */

/* Getoent: der Datensatz ist unterwegs. */
.idf-list-done-pill.idf-status-pille.is-active[class*="idf-pill-farbe-"] {
  background: var(--pill-flaeche);
  color: var(--pill-farbe);
  opacity: 1;
  filter: none;
}

/* Vollton: der Datensatz ist abgeschlossen. Wie die gesetzte Check-Pille,
   nur in der Farbe seines Status. */
.idf-list-done-pill.idf-status-pille.is-active.is-voll[class*="idf-pill-farbe-"] {
  background: var(--pill-farbe);
  color: var(--pill-voll-schrift, var(--white));
}

.idf-list-done-pill.idf-status-pille.is-active[class*="idf-pill-farbe-"]:hover {
  filter: brightness(0.95);
}
.idf-list-done-pill.idf-status-pille.is-active.is-voll[class*="idf-pill-farbe-"]:hover {
  filter: brightness(1.06);
}

/* Solange ihr Menue offen ist, steht auch die blasse Pille voll da: man
   sieht, woran das Menue haengt. `is-popover-open` setzt blocks/popover. */
.idf-list-done-pill.idf-status-pille.is-popover-open {
  opacity: 1;
}
.idf-list-done-pill.idf-status-pille.is-popover-open:not(.is-active) {
  background: var(--ink-15-a);
}

/* Auf Papier bleibt die blasse Pille blass (Issue 2549, Protokoll-Ausdruck).
   print-base zieht im Druckblatt `--ink-50` auf Schwarz, weil graue Schrift
   im Druck unlesbar wird. Das Zeichen der Pille ist aber keine Schrift: als
   schwarzer Haken saehe „offen“ aus wie „erledigt“. Die durchsichtige Stufe
   zieht print-base nicht um, sie ergibt auf Weiss dasselbe Grau wie am
   Bildschirm. */
.idf-print-sheet .idf-list-done-pill.idf-status-pille.is-static:not(.is-active) {
  color: var(--ink-50-a);
}

/* ---------- Das Menue an der Pille ---------- */

.idf-status-pille-menue {
  min-width: 220px;
}

/* Das Zeichen vor dem Wort: dieselbe Faerbung wie die Pille, nur kleiner.
   Getoent kommt die Flaeche aus der Rollen-Klasse selbst. */
.idf-status-pille-zeichen {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-xs);
  font-size: var(--font-md);
  line-height: 1;
}
.idf-status-pille-zeichen.is-voll {
  background: var(--pill-farbe);
  color: var(--pill-voll-schrift, var(--white));
}
/* Ohne Status (offen, zurueck): ein leeres Kaestchen, wie die blasse Pille. */
.idf-status-pille-zeichen.is-leer {
  border: 1px solid var(--ink-25);
  color: var(--ink-50);
}

/* Der aktuelle Status: fett und mit einem Punkt am Ende. Bewusst kein Haken,
   der hiesse in diesem Menue „erledigt“. */
.idf-status-pille-eintrag.is-aktuell {
  font-weight: var(--weight-semi);
}
.idf-status-pille-eintrag.is-aktuell::after {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--ink-50);
}

/* Ein Wert am rechten Rand des Eintrags, etwa ein Preis (Issue 1817): Zahlen
   stehen rechts und untereinander. Der Punkt des aktuellen Eintrags rueckt
   dann hinter das Wort, sonst stuende dessen Zahl um den Punkt weiter links
   als die anderen. */
.idf-status-pille-wert {
  order: 1;
  margin-left: auto;
  padding-left: var(--space-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.idf-status-pille-eintrag.is-aktuell:has(> .idf-status-pille-wert)::after {
  margin-left: 0;
}