.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;
    }
}