/* Styles for src/components/progress-bar.js and nothing else. A Windows ProgressBar.
   Width classes in steps of 5 so the fill needs no inline style. */

.progress-bar { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-xs); color: var(--c-text-gray); }
.progress-bar__track { flex: 1; height: 12px; background: #e6e6e6; border: 1px solid #bcbcbc; overflow: hidden; }
.progress-bar__fill { height: 100%; background: var(--c-progress); transition: width 0.2s ease; }
.progress-bar__label { white-space: nowrap; }

.progress-bar__fill--w0 { width: 0; }
.progress-bar__fill--w5 { width: 5%; }
.progress-bar__fill--w10 { width: 10%; }
.progress-bar__fill--w15 { width: 15%; }
.progress-bar__fill--w20 { width: 20%; }
.progress-bar__fill--w25 { width: 25%; }
.progress-bar__fill--w30 { width: 30%; }
.progress-bar__fill--w35 { width: 35%; }
.progress-bar__fill--w40 { width: 40%; }
.progress-bar__fill--w45 { width: 45%; }
.progress-bar__fill--w50 { width: 50%; }
.progress-bar__fill--w55 { width: 55%; }
.progress-bar__fill--w60 { width: 60%; }
.progress-bar__fill--w65 { width: 65%; }
.progress-bar__fill--w70 { width: 70%; }
.progress-bar__fill--w75 { width: 75%; }
.progress-bar__fill--w80 { width: 80%; }
.progress-bar__fill--w85 { width: 85%; }
.progress-bar__fill--w90 { width: 90%; }
.progress-bar__fill--w95 { width: 95%; }
.progress-bar__fill--w100 { width: 100%; }