/*
 * Native <meter> as a thin bar (DESIGN.md §5): surface-2 track, text fill.
 * Always paired with the number beside it.
 */
@layer components {
  .meter {
    inline-size: 8rem;
    block-size: var(--space-2);
    border: 0;
    border-radius: var(--radius-xs);
    background: var(--color-surface-2);
    appearance: none;

    &::-webkit-meter-bar {
      block-size: var(--space-2);
      border: 0;
      border-radius: var(--radius-xs);
      background: color-mix(in srgb, var(--color-text) 12%, transparent);
    }

    &::-webkit-meter-optimum-value,
    &::-webkit-meter-suboptimum-value,
    &::-webkit-meter-even-less-good-value {
      border-radius: var(--radius-xs);
      background: var(--color-text);
    }

    &::-moz-meter-bar {
      border-radius: var(--radius-xs);
      background: var(--color-text);
    }
  }
}