/* Progression — une piste et sa barre : l'avancement d'une phase, la part d'un budget,
   la progression d'un import. Référence : docs/design-system.md § Composants. */

.progress {
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-border);
}

.progress--sm {
  height: 4px;
}

/* La grande piste porte son pourcentage dans la barre. */
.progress--lg {
  height: 24px;
  border-radius: var(--radius-sm);
}

/* La largeur est `--progress-value`, posée par le gabarit (`style="--progress-value: 40%"`). */
.progress__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--progress-value, 0%);
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: var(--text-11);
  font-weight: var(--weight-semibold);
  transition: width var(--transition-slow);
}

:is(.progress--success, .progress--warning, .progress--danger, .progress--info) .progress__bar {
  background: var(--tone-solid);
}

/* --- Tons (sortis de tone.css au passage au harness 0.13) : chaque ton pose les seules
   propriétés `--tone-*` que ce composant lit, d'après les tokens du ton. --- */

.progress--success {
  --tone-solid: var(--color-success);
}

.progress--warning {
  --tone-solid: var(--color-warning);
}

.progress--danger {
  --tone-solid: var(--color-danger);
}

.progress--info {
  --tone-solid: var(--color-info);
}