/* ===== OO List / ListItem =====
   Die Liste ist nur die Hülle: Rahmen (Bordered), Trennlinien zwischen zwei ListItems und der Innenabstand der Zeilen.
   Eine Zeile hat drei Bereiche: __start und __end behalten ihre Breite, __main füllt den Rest und darf schrumpfen,
   damit Text darin mit TextOverflow--ellipsis gekürzt werden kann. Die Zeile selbst ist a (Href), button (OnClick) oder div.
   Abstände und Zustände hängen am Kind-Kombinator, damit eine Liste in einer Zeile nicht die Regeln der äußeren erbt.
   ============================== */

.oo-list {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.oo-list--bordered {
    border: var(--oo-border-width) solid var(--oo-color-border);
    border-radius: var(--oo-radius-md);
    overflow: hidden;
}

.oo-list > .oo-list-item + .oo-list-item {
    border-top: var(--oo-border-width) solid var(--oo-color-border);
}

/* ── Zeile ── */

.oo-list-item__row {
    display: flex;
    align-items: center;
    gap: var(--oo-space-3);
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: var(--oo-space-3) var(--oo-space-4);
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
}

.oo-list--plain > .oo-list-item > .oo-list-item__row {
    padding: var(--oo-space-2) 0;
}

.oo-list--dense.oo-list--bordered > .oo-list-item > .oo-list-item__row {
    padding: var(--oo-space-2) var(--oo-space-3);
}

.oo-list--dense.oo-list--plain > .oo-list-item > .oo-list-item__row {
    padding: var(--oo-space-1) 0;
}

/* Plain steht meist in einer Card, die selbst Innenabstand hat: erste und letzte Zeile ohne Abstand nach außen.
   Nach den Dense-Regeln, die sonst gleichrangig gewinnen würden. */
.oo-list--plain > .oo-list-item:first-child > .oo-list-item__row {
    padding-top: 0;
}

.oo-list--plain > .oo-list-item:last-child > .oo-list-item__row {
    padding-bottom: 0;
}

/* Flush: Liste in einer Card bis an deren Rand. Die Liste hebt den seitlichen Innenabstand des Card-Bodys auf, damit
   Trennlinien, Hover-Fläche und der Balken des aktiven Eintrags bis an den Rahmen reichen; die Zeilen holen den Abstand
   innen zurück, der Inhalt bleibt bündig mit dem übrigen Card-Inhalt. */
.oo-list--flush {
    margin-inline: calc(-1 * var(--oo-space-4));
}

.oo-list--flush > .oo-list-item > .oo-list-item__row {
    padding: var(--oo-space-3) var(--oo-space-4);
}

.oo-list--dense.oo-list--flush > .oo-list-item > .oo-list-item__row {
    padding: var(--oo-space-2) var(--oo-space-4);
}

/* Füllt die Liste den Card-Body oben bzw. unten aus, hebt sie auch dort den Innenabstand auf: Die erste Zeile schließt
   an die Linie unter dem Card-Kopf an, die letzte an den Rand (oder den Footer). Die Card schneidet dann auf ihre runden
   Ecken zu, damit Streifen und Hover der letzten Zeile nicht eckig überstehen. */
.oo-card__body > .oo-list--flush:first-child {
    margin-top: calc(-1 * var(--oo-space-4));
}

.oo-card__body > .oo-list--flush:last-child {
    margin-bottom: calc(-1 * var(--oo-space-4));
}

.oo-card:has(> .oo-card__body > .oo-list--flush:last-child) {
    overflow: hidden;
}

.oo-list-item__start,
.oo-list-item__end {
    display: flex;
    align-items: center;
    gap: var(--oo-space-2);
    flex-shrink: 0;
}

/* EndFullHeight: EndContent so hoch wie die Zeile; der Inhalt (etwa ein Stack) streckt sich mit */
.oo-list-item__end--full {
    align-self: stretch;
    align-items: stretch;
}

.oo-list-item__main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

/* ── Zustände: Link oder Knopf ── */

.oo-list-item__row--interactive {
    cursor: pointer;
    transition: background-color var(--oo-transition-fast);
}

/* Fläche unter der Maus und des aktiven Eintrags: ein Hauch Primärfarbe. Nicht die Fläche (--oo-color-surface) selbst,
   denn die ist in vielen Layouts schon die Farbe des Inhalts und wäre dort unsichtbar. */
.oo-list {
    --oo-list-hover: color-mix(in srgb, var(--oo-primary) 8%, var(--oo-color-surface));
}

.oo-list-item__row--interactive:hover {
    background: var(--oo-list-hover);
}

/* Hover: dieselbe Fläche auf jeder Zeile, auch ohne Href/OnClick, aber ohne Zeiger – die Zeile selbst tut nichts. */
.oo-list--hover > .oo-list-item > .oo-list-item__row {
    transition: background-color var(--oo-transition-fast);
}

.oo-list--hover > .oo-list-item > .oo-list-item__row:hover {
    background: var(--oo-list-hover);
}

/* Striped: Jede zweite Zeile einen Hauch dunkler als das, was darunter liegt – mit der Textfarbe gemischt, damit es auf
   weißem wie grauem Inhalt und im Dunkelmodus gleich dezent wirkt. Die Tönung liegt auf dem ListItem, nicht auf der
   Zeile, damit Hover und aktiver Eintrag der Zeile sie überdecken. Gezählt werden nur ListItems, anderer Inhalt
   dazwischen verschiebt das Muster nicht. */
.oo-list--striped > .oo-list-item:nth-child(even of .oo-list-item) {
    background: color-mix(in srgb, var(--oo-color-text) 3%, transparent);
}

.oo-list-item__row--interactive:focus-visible,
.oo-list-item__hit:focus-visible {
    outline: 2px solid var(--oo-primary);
    outline-offset: -2px;
}

/* Zeile als Knopf (OnClick ohne Href): Der Knopf (__hit) liegt als Fläche unter dem ganzen Inhalt. Der Inhalt darüber
   lässt Klicks zum Knopf durch, außer Bedienelementen und Elementen mit eigenem Tooltip – die bleiben bedienbar und lösen
   die Zeile nicht aus. */
.oo-list-item__row--overlay {
    position: relative;
}

.oo-list-item__hit {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: inherit;
}

.oo-list-item__row--overlay > :not(.oo-list-item__hit) {
    position: relative;
    pointer-events: none;
}

.oo-list-item__row--overlay > :not(.oo-list-item__hit) :is(a, button, input, select, textarea, label, [role="button"], [tabindex], [title]) {
    pointer-events: auto;
}

/* Aktiver Eintrag: Fläche wie beim Überfahren, dazu ein Balken in Primärfarbe am linken Rand; Text bleibt unverändert. */
.oo-list-item--active > .oo-list-item__row,
.oo-list-item--active > .oo-list-item__row--interactive:hover {
    background: var(--oo-list-hover);
    box-shadow: inset calc(var(--oo-border-width) * 3) 0 0 var(--oo-primary);
}

.oo-list-item--disabled > .oo-list-item__row {
    color: var(--oo-color-text-disabled);
    cursor: not-allowed;
}

.oo-list-item--disabled > .oo-list-item__row--interactive:hover,
.oo-list--hover > .oo-list-item--disabled > .oo-list-item__row:hover {
    background: transparent;
}