/* ===== OO Timeline =====
   Senkrechter Verlauf: jede Zeile zeichnet ihr Stück der Linie selbst (::before), so ergibt sich eine durchgehende Linie.
   Das Symbol liegt darüber und schneidet die Linie mit einem Rand in der Hintergrundfarbe aus.
   Farben des Symbols kommen aus den --_btn-* Vars (OoButtonStyle inline); die Standardwerte stehen am Symbol selbst,
   damit es nicht die Vars eines umgebenden Buttons erbt.
   ======================= */

.oo-timeline {
    --oo-timeline-badge-size: 2rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.oo-timeline-item {
    --_tl-pad: var(--oo-space-3);
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--oo-space-3);
    padding: var(--_tl-pad) 0;
    min-width: 0;
}

.oo-timeline-item::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--oo-timeline-badge-size) / 2 - 1px);
    width: 2px;
    background-color: var(--oo-color-border);
}

/* Die Linie beginnt am ersten Symbol und endet am letzten. */
.oo-timeline > .oo-timeline-item:first-child::before {
    top: calc(var(--_tl-pad) + var(--oo-timeline-badge-size) / 2);
}

.oo-timeline > .oo-timeline-item:last-child::before {
    bottom: auto;
    height: calc(var(--_tl-pad) + var(--oo-timeline-badge-size) / 2);
}

.oo-timeline > .oo-timeline-item:only-child::before {
    display: none;
}

.oo-timeline-item__badge {
    --_btn-bg: var(--oo-surface-2);
    --_btn-text: var(--oo-color-text-subtle);
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    width: var(--oo-timeline-badge-size);
    height: var(--oo-timeline-badge-size);
    border-radius: 50%;
    font-size: var(--oo-font-size-md);
    background-color: var(--_btn-bg);
    color: var(--_btn-text);
    box-shadow: 0 0 0 2px var(--oo-timeline-background, var(--oo-color-surface));
}

/* Ohne Icon und Inhalt: freie Spalte, die Linie läuft durch. */
.oo-timeline-item__badge--leer {
    visibility: hidden;
}

.oo-timeline-item__badge--content {
    background-color: transparent;
}

.oo-timeline-item__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--oo-timeline-badge-size);
}

/* Condensed: kleines Symbol ohne Kreis, weniger Abstand. */
.oo-timeline-item--condensed {
    --_tl-pad: var(--oo-space-1);
}

.oo-timeline-item--condensed > .oo-timeline-item__badge {
    font-size: var(--oo-font-size-sm);
    background-color: var(--oo-timeline-background, var(--oo-color-surface));
    box-shadow: none;
}