@layer cm.components {
  .cm-progressbar {
    --cm-pb-color: var(--brand);
    display: flex;
    align-items: center;
    gap: 8px;
    inline-size: 100%;
  }
  .cm-progressbar--ok { --cm-pb-color: var(--ok); }
  .cm-progressbar--warn { --cm-pb-color: var(--warn); }
  .cm-progressbar--danger { --cm-pb-color: var(--danger); }
  .cm-progressbar--info { --cm-pb-color: var(--info, #0ea5e9); }
  .cm-progressbar--brand { --cm-pb-color: var(--brand); }

  .cm-progressbar-track {
    position: relative;
    flex: 1 1 auto;
    block-size: 10px;
    min-inline-size: 0;
    background: var(--surface-2);
    border-radius: var(--radius-pill, 999px);
    overflow: hidden;
  }
  .cm-progressbar-fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 0%;
    background: var(--cm-pb-color);
    border-radius: var(--radius-pill, 999px);
    transition: inline-size var(--dur-med, 200ms) var(--ease-std, ease);
  }
  .cm-progressbar-label {
    flex: 0 0 auto;
    min-inline-size: 3ch;
    text-align: end;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-2);
  }

  .cm-progressbar.is-indeterminate .cm-progressbar-fill {
    inline-size: 40%;
    transition: none;
    background: linear-gradient(90deg, transparent, var(--cm-pb-color), transparent);
    animation: cm-pb-indet 1.15s var(--ease-std, ease) infinite;
  }
  @keyframes cm-pb-indet {
    0%   { inset-inline-start: -40%; }
    100% { inset-inline-start: 100%; }
  }
  [dir="rtl"] .cm-progressbar.is-indeterminate .cm-progressbar-fill { animation-name: cm-pb-indet-rtl; }
  @keyframes cm-pb-indet-rtl {
    0%   { inset-inline-start: 100%; }
    100% { inset-inline-start: -40%; }
  }

  @media (prefers-reduced-motion: reduce) {
    .cm-progressbar-fill { transition: none; }
    .cm-progressbar.is-indeterminate .cm-progressbar-fill {
      animation: none;
      inline-size: 100%;
      inset-inline-start: 0;
      opacity: 0.55;
    }
  }
}