/* ================================================================
   PROGRESS BAR COMPONENT — linear progress indicator
   Budget: < 800 bytes minified
   ================================================================ */

.progress {
    width: 100%;
    background: var(--bg-surface-sunken);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.progress--sm { height: 4px; }
.progress--md { height: 6px; }
.progress--lg { height: 8px; }

.progress__bar {
    height: 100%;
    border-radius: inherit;
    transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.progress--accent .progress__bar  { background: var(--accent-primary); }
.progress--success .progress__bar { background: var(--success); }
.progress--danger .progress__bar  { background: var(--danger); }