/* The credit ring. Blue while there is room, orange at a fifth left, red at a
   tenth — the thresholds live in `Creditable#credits_level`, not here, so the
   colour and the warning can never disagree. */
.gauge {
  display: inline-flex;
  flex: none;
  --gauge-fill: var(--color-land);
}

.gauge--low {
  --gauge-fill: var(--color-highlight);
}

.gauge--critical,
.gauge--empty {
  --gauge-fill: var(--color-danger);
}

.gauge__dial {
  display: block;
  /* SVG circles start at three o'clock; the dial should start at twelve. */
  rotate: -90deg;
}

.gauge__track {
  fill: none;
  stroke: var(--color-border);
}

.gauge__fill {
  fill: none;
  stroke: var(--gauge-fill);
  stroke-linecap: round;
  transition: stroke-dasharray 0.3s ease, stroke 0.3s ease;
}

/* An empty balance has nothing to draw, so the ring alone would look like a
   loading state. The track goes red instead. */
.gauge--empty .gauge__track {
  stroke: var(--color-building-soft);
}

@media (prefers-reduced-motion: reduce) {
  .gauge__fill {
    transition: none;
  }
}