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

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

.meter__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  transition: width var(--dur-slower) var(--ease-spring), background-color var(--dur-base) var(--ease-standard);
}

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

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