/* ===== ProgressBar Component ===== */
/*
 * Token-driven determinate progress.
 * Consumers set height on the wrapper; the component fills width.
 * No external margin/gap (Bingo-Template §1792).
 * Internal flex used only to center overlay content within the track,
 * which is explicitly allowed per §8.7.
 *
 * Fill width is set inline on the .ui-progressbar-fill element (not via
 * a CSS variable on the wrapper) so that consumer-supplied wrapper
 * styles do not clobber it. RTL: uses logical inline-* properties so
 * the fill grows from inline-start regardless of writing direction.
 */

.ui-progressbar {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.ui-progressbar-track {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--progressbar-track, var(--meb-surface-input-filled));
    border-radius: var(--progressbar-radius, 9999px);
    overflow: hidden;
}

.ui-progressbar-fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 0;
    background: var(--progressbar-color, var(--meb-accent-color, var(--meb-accent-secondary)));
    border-radius: inherit;
    transition: inline-size var(--meb-anim-progress, 300ms) ease-out;
}

.ui-progressbar-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .ui-progressbar-fill {
        transition: none;
    }
}