/* ==========================================================================
   Progress / meter
   ========================================================================== */

.meter {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--track, var(--color-surface-hover));
  overflow: hidden;
  position: relative;
}

.meter__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--lead, var(--color-accent));
  /* No width animation: a bar shows its value at once. */
  transition: background-color var(--dur-fast) var(--ease-standard);
}

.meter__fill--warning {
  background: var(--color-warning);
}

.meter__fill--danger {
  background: var(--color-loss);
}