/* ─── Progress Bar ────────────────────────────────────────────────────────────
   Values: site/tokens.css
   Consumers: site/preview/progress-bar.html + src/components/ProgressBar/ProgressBar.tsx
   Sizes: SM (2px) / MD (4px)
   Modes: determinate (value 0–100) / indeterminate (animated)
   Validations: none / info / positive / warning / negative
   Label positions: none / right / bottom
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Root ──────────────────────────────────────────────────────────────────── */

.ds-pb {
  --_pb-h:    var(--ds-progress-md-h);
  --_pb-gap:  var(--ds-progress-md-gap);
  --_pb-fill: var(--ds-progress-fill-none);

  display:     flex;
  align-items: center;
  gap:         var(--_pb-gap);
  width:       100%;
}

/* ── Sizes ─────────────────────────────────────────────────────────────────── */

.ds-pb[data-size='sm'] {
  --_pb-h:   var(--ds-progress-sm-h);
  --_pb-gap: var(--ds-progress-sm-gap);
}

.ds-pb[data-size='md'] {
  --_pb-h:   var(--ds-progress-md-h);
  --_pb-gap: var(--ds-progress-md-gap);
}

/* ── Validations ───────────────────────────────────────────────────────────── */

.ds-pb[data-validation='info']     { --_pb-fill: var(--ds-progress-fill-info); }
.ds-pb[data-validation='positive'] { --_pb-fill: var(--ds-progress-fill-positive); }
.ds-pb[data-validation='warning']  { --_pb-fill: var(--ds-progress-fill-warning); }
.ds-pb[data-validation='negative'] { --_pb-fill: var(--ds-progress-fill-negative); }

/* ── Label position: bottom → column layout ────────────────────────────────── */

.ds-pb[data-label='bottom'] {
  flex-direction: column;
  align-items:    stretch;
  gap:            var(--_pb-gap);
}

/* ── Bar row (track + right label) ────────────────────────────────────────── */

.ds-pb-bar-row {
  display:     flex;
  align-items: center;
  gap:         var(--_pb-gap);
  width:       100%;
}

/* ── Track ─────────────────────────────────────────────────────────────────── */

.ds-pb-track {
  position:      relative;
  height:        var(--_pb-h);
  border-radius: var(--ds-radius-pill);
  background:    var(--ds-progress-track);
  flex:          1;
  overflow:      hidden;
  min-width:     0;
}

/* ── Fill (determinate) ────────────────────────────────────────────────────── */

.ds-pb-fill {
  position:      absolute;
  top:           0;
  bottom:        0;
  left:          0;
  border-radius: var(--ds-radius-pill);
  background:    var(--_pb-fill);
  width:         var(--_pb-value, 0%);
  transition:    width 0.3s ease;
}

/* ── Fill (indeterminate) ──────────────────────────────────────────────────── */

.ds-pb[data-indeterminate] .ds-pb-fill {
  width:      40%;
  left:       0;
  transition: none;
  animation:  ds-pb-slide var(--ds-progress-indeterminate-dur, 1.5s) ease-in-out infinite;
  background: var(--ds-progress-fill-indeterminate);
}

@keyframes ds-pb-slide {
  0%   { left: -40%; }
  100% { left: 100%; }
}

/* ── Label text (percentage) ───────────────────────────────────────────────── */

.ds-pb-label {
  font-size:   var(--ds-field-caption-fs);   /* 12px */
  line-height: var(--ds-field-caption-lh);   /* 16px */
  color:       var(--ds-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
  font-family: var(--ds-font);
}

/* right label: fixed width so bar doesn't jump */
.ds-pb[data-label='right'] .ds-pb-label {
  width:      32px;
  text-align: right;
}

/* ── Bottom row (caption + percentage) ─────────────────────────────────────── */

.ds-pb-bottom-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--_pb-gap);
  width:           100%;
}

.ds-pb-caption {
  font-size:   var(--ds-field-caption-fs);
  line-height: var(--ds-field-caption-lh);
  color:       var(--ds-text-secondary);
  font-family: var(--ds-font);
  flex:        1;
  min-width:   0;
}

/* ── Invert surface overrides ──────────────────────────────────────────────── */
/* Light + invert (dark surface in light page): fill-none must be white */
.theme-invert .ds-pb:not([data-validation]):not([data-indeterminate]) { --_pb-fill: var(--ds-nb-0); }

/* Dark + invert (light surface in dark page): neutral-fill = #1C2023 from tokens.css */
[data-theme="dark"] .theme-invert .ds-pb:not([data-validation]):not([data-indeterminate]) { --_pb-fill: var(--ds-neutral-fill); }

/* ── Reduced motion ────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ds-pb[data-indeterminate] .ds-pb-fill {
    animation: none;
    left:      0;
    width:     40%;
  }

  .ds-pb-fill {
    transition: none;
  }
}