/* ============================================================
   Komponente: filter-option-row
   ------------------------------------------------------------
   Quelle: Figma „Design System" → filter option row,
   Komponenten-Satz 11732:275, ausgelesen am 04.09.2026.

   Eine Zeile einer Filterliste: Control links, Label daneben,
   Trefferzahl rechts. Zwölf Fassungen aus control × zustand ×
   „zahl sichtbar" — und ausdrücklich KEIN zweiter Zeilentyp:
   „wer eine Variante braucht, die es nicht gibt, ergänzt sie
   hier."

   DIE GANZE ZEILE IST DAS ZIEL, nicht das Control. Deshalb ist
   das <label> die Klickfläche und das Control liegt darin —
   der Browser leitet den Klick von selbst weiter.

   DER STANDARDWERT DER TREFFERZAHL IST EIN GEVIERTSTRICH, nicht
   0 und nicht leer. Aus der Figma-Doku: leer wäre nicht von
   „noch nicht ausgefüllt" zu unterscheiden, und 0 heißt im
   Filter „kein Treffer, Zeile disabled".

   DISABLED ENTSTEHT HIER, nicht am Control (so die Doku): die
   Zeile setzt disabled-text und disabled-outline, checkbox und
   radio kennen nur aus und an.

   Setzt tokens.css, base.css und components/auswahl-control.css
   voraus.

   VERWENDUNG
     <label class="filter-option-row">
       <span class="filter-option-row__auswahl">
         <input class="auswahl-control auswahl-control--checkbox"
                type="checkbox">
         <span class="filter-option-row__label">Label</span>
       </span>
       <span class="filter-option-row__zahl">—</span>
     </label>

   ------------------------------------------------------------
   GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE
     45   Zeilenhöhe. Die Figma-Doku nennt im Text 48 („Höhe 48
          nach §11.2/§19.7"), der Komponenten-Rahmen und der
          Code-Export nennen 45. Hier gilt der gemessene Rahmen;
          beide Werte liegen über der Untergrenze von 44. Siehe
          OFFEN.
   ============================================================ */

.filter-option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);                    /* 12 */

  width: 100%;
  height: 45px;                            /* gemessen, siehe Kopf */
  overflow: hidden;
  cursor: pointer;
}

.filter-option-row__auswahl {
  display: flex;
  align-items: center;
  gap: var(--space-sm);                    /* 12 */
  flex-shrink: 0;
  min-width: 0;
}

.filter-option-row__label {
  font-family: var(--font-family-inter);
  font-size: var(--font-size-small-text);
  line-height: var(--line-height-small-text);
  font-weight: var(--font-weight-regular);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filter-option-row__zahl {
  flex-shrink: 0;
  font-family: var(--font-family-inter);
  font-size: var(--font-size-extra-small-text);
  line-height: var(--line-height-extra-small-text);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-small-text-bold);   /* 1 % */
  color: var(--text-description);
  white-space: nowrap;
}

/* ------------------------------------------------------------
   Disabled
   ------------------------------------------------------------
   Die Zeile setzt ihn, nicht das Control. Der Cursor bleibt
   default statt not-allowed — ein durchgestrichener Kreis liest
   sich als Fehler, nicht als „hier ist gerade nichts zu tun"
   (dieselbe Begründung wie am Button).
   ------------------------------------------------------------ */

.filter-option-row:has(.auswahl-control:disabled) {
  cursor: default;
}

.filter-option-row:has(.auswahl-control:disabled) .filter-option-row__label,
.filter-option-row:has(.auswahl-control:disabled) .filter-option-row__zahl {
  color: var(--button-disabled-text);
}

/* ------------------------------------------------------------
   Zustände
   ------------------------------------------------------------
   Die Zeile ist das Ziel, also reagiert die Zeile — und zwar so
   wie jede neutrale Zeile im System: mit einer getönten Fläche.
   Sie geht dabei über die Kanten hinaus, weil die Zeile selbst
   kein Polster hat.
   ------------------------------------------------------------ */

@media (hover: hover) and (pointer: fine) {
  .filter-option-row:not(:has(.auswahl-control:disabled)):hover .filter-option-row__label {
    color: var(--label-outline-active);
  }
}

/* ============================================================
   OFFEN
   ------------------------------------------------------------
   · Die Zeilenhöhe widerspricht sich: der Doku-Text sagt 48,
     der Rahmen und der Code-Export sagen 45. Hier stehen 45.
   · Hover steht nicht an der Komponente. Eine getönte Fläche
     wäre die Regel für neutrale Bedienelemente (§10.1a), sie
     würde hier aber über die ganze Listenbreite laufen und
     bräuchte ein Polster, das die Komponente nicht hat.
     Deshalb tönt vorerst nur der Text — das ist eine
     Notlösung und gehört in Figma entschieden.
   ============================================================ */