/*
 * DD-12 Progress bar — app/components/ui/progress_bar_component.rb
 *
 * Determinate/indeterminate share a `.ui-progress__track` + `__fill`;
 * segmented renders one flush block per segment instead. Token vars
 * only — enforced by test/lint/css_token_lint_test.rb.
 */

.ui-progress__track {
  height: 6px;
  overflow: hidden;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-pill);
}

.ui-progress__fill {
  height: 100%;
  width: var(--progress, 0%);
  background: var(--color-accent-strong);
  border-radius: var(--radius-pill);
  transition: width var(--duration-base) var(--ease-out);
}

.ui-progress__fill--indeterminate {
  width: 40%;
  animation: ui-progress-indeterminate var(--duration-shimmer) var(--ease-in-out) infinite;
}

@keyframes ui-progress-indeterminate {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(250%);
  }
}

/* Segmented */
.ui-progress--segmented {
  display: flex;
  gap: var(--space-1);
}

.ui-progress__segment {
  flex: 1;
  height: 6px;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-pill);
}

.ui-progress__segment--complete {
  background: var(--color-accent-strong);
}