/* Progress
   A horizontal progress bar. Set the fill width inline (or from JS) and mirror
   it on the aria-valuenow attribute. Tone is set with data-tone on the track.
   Add data-indeterminate for an unknown-duration bar. Colour from tokens.css. */

.dp-progress {
  width: 100%;
  height: 0.5rem;
  background: var(--dp-blue-200);
  border-radius: var(--dp-radius-full);
  overflow: hidden;
}

.dp-progress-bar {
  height: 100%;
  width: 0;
  background: var(--dp-primary-bg);
  border-radius: inherit;
  transition: width var(--dp-transition);
}

.dp-progress[data-tone="success"] .dp-progress-bar { background: var(--dp-success); }
.dp-progress[data-tone="warning"] .dp-progress-bar { background: var(--dp-warning); }
.dp-progress[data-tone="danger"] .dp-progress-bar { background: var(--dp-danger); }

/* Indeterminate: a sliding sliver for unknown duration */
.dp-progress[data-indeterminate] .dp-progress-bar {
  width: 40%;
  animation: dp-progress-slide 1.2s ease-in-out infinite;
}

@keyframes dp-progress-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}