/* ==========================================================================
   ProgressBar — Tickchak Design System
   מתואם ל-Figma: Qw3YeURNIL8V1wdGubxIWQ / Component Set 10368:22545
   Props (variants):
     state: success (ירוק) | disabled (אפור)
     fill : empty | half | full   — שתי דרכי שימוש:
            A) class .progress-bar--empty / --half / --full
            B) inline style="--progress: 75%" (אחוז גמיש)
   ========================================================================== */

.progress-bar{
  width:100%;
  height:6px;
  border-radius:var(--r-full);
  background:var(--color-grays-200);     /* track */
  overflow:hidden;
  position:relative;
  /* יורש direction מההורה: ב-RTL ⇒ ה-fill מתחיל מימין וגדל שמאלה (תואם פיגמה) */
}

.progress-bar__fill{
  display:block;
  height:100%;
  width:var(--progress, 50%);
  border-radius:inherit;
  transition:width .25s ease;
}

/* ===== state variants ===== */
.progress-bar--success .progress-bar__fill{
  background:var(--color-green-400);
}
.progress-bar--disabled .progress-bar__fill{
  background:var(--color-grays-600);
}

/* ===== fill amount shortcuts ===== */
.progress-bar--empty .progress-bar__fill{ width:0; }
.progress-bar--half  .progress-bar__fill{ width:50%; }
.progress-bar--full  .progress-bar__fill{ width:100%; }