/*
 * How much of a metered feature a reader has used (LocksHelper
 * #limit_counter_tag): "3 of 10 follows". Quiet until it matters — the
 * warning colour from four fifths of the limit, the loss colour and the
 * Powerpack lock at it. The words always say it; the colour only repeats it.
 */
@layer components {
  .limit-counter {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--color-ink-subtle);
    font-family: var(--font-ui);
    font-size: var(--text-meta-xs);
    line-height: var(--leading-meta-xs);
    font-variant-numeric: tabular-nums lining-nums;
  }

  .limit-counter--near {
    color: var(--color-warn);
  }

  .limit-counter--full {
    color: var(--color-loss);
    font-weight: var(--weight-semibold);
  }
}