/* progress-bar — @tokens: --progress-bar-height, --progress-bar-height-sm, --progress-bar-height-lg */
/* ─── Progress bar ────────────────────────────────────────────────────
   Linear progress indicator, determinate + indeterminate. role="progressbar"
   + aria-valuenow/min/max live in markup (not focusable). The __fill width
   is set inline for the determinate case; the --indeterminate modifier
   pins width and slides the fill via a transform-only keyframe. */
.hzo-progress-bar {
    display: block;
    width: 100%;
    height: var(--progress-bar-height, 8px);
    background: var(--bg-alt);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.hzo-progress-bar__fill {
    height: 100%;
    background: var(--brand);
    border-radius: var(--radius-pill);
    transition: width var(--transition-base) ease;
}

/* ── Colour modifiers (recolour the fill) ── */
.hzo-progress-bar--accent  .hzo-progress-bar__fill { background: var(--accent); }
.hzo-progress-bar--success .hzo-progress-bar__fill { background: var(--success); }
.hzo-progress-bar--warning .hzo-progress-bar__fill { background: var(--warning); }
.hzo-progress-bar--error   .hzo-progress-bar__fill { background: var(--error); }
.hzo-progress-bar--info    .hzo-progress-bar__fill { background: var(--info); }

/* ── Size modifiers ── */
.hzo-progress-bar--sm { height: var(--progress-bar-height-sm, 4px); }
.hzo-progress-bar--lg { height: var(--progress-bar-height-lg, 12px); }

/* ── Indeterminate ── */
.hzo-progress-bar--indeterminate .hzo-progress-bar__fill {
    width: 40%;
    animation: hzo-progress-indeterminate 1.4s ease-in-out infinite;
}
@keyframes hzo-progress-indeterminate {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

/* Reduced motion — disable the slide (static bar) + the width transition. */
@media (prefers-reduced-motion: reduce) {
    .hzo-progress-bar--indeterminate .hzo-progress-bar__fill {
        animation: none;
        transform: none;
    }
    .hzo-progress-bar__fill { transition: none; }
}