/* ===== OO ProgressBar =====
   Balken mit grauer Spur; die Abschnitte nehmen ihre Breite inline (width in %), die Farbe aus --_btn-bg (OoButtonStyle).
   Zwischen zwei Abschnitten trennt ein schmaler Rand in der Hintergrundfarbe.
   ========================== */

.oo-progress-bar {
    --_pb-hoehe: var(--oo-progress-bar-height, 0.5rem);
    display: flex;
    box-sizing: border-box;
    width: 100%;
    height: var(--_pb-hoehe);
    overflow: hidden;
    border-radius: var(--oo-radius-full);
    background-color: var(--oo-surface-2);
}

.oo-progress-bar:is(.oo-size-xxxs, .oo-size-xxs, .oo-size-xs, .oo-size-sm) {
    --_pb-hoehe: var(--oo-progress-bar-height, 0.25rem);
}

.oo-progress-bar.oo-size-lg {
    --_pb-hoehe: var(--oo-progress-bar-height, 0.75rem);
}

.oo-progress-bar.oo-size-xl {
    --_pb-hoehe: var(--oo-progress-bar-height, 1rem);
}

.oo-progress-bar__segment {
    --_btn-bg: var(--oo-primary);
    display: block;
    flex-shrink: 0;
    box-sizing: border-box;
    height: 100%;
    background-color: var(--_btn-bg);
    transition: width var(--oo-transition-slow);
}

.oo-progress-bar__segment + .oo-progress-bar__segment {
    border-left: 2px solid var(--oo-color-surface);
}