@layer components {
  .badge {
    --badge-background: var(--color-ink-lightest);
    --badge-color: var(--color-ink-medium);

    align-items: center;
    background: var(--badge-background);
    border-radius: 99rem;
    color: var(--badge-color);
    display: inline-flex;
    font-size: var(--text-x-small);
    font-weight: 500;
    gap: 0.25em;
    line-height: 1;
    padding: 0.25em 0.6em;
    white-space: nowrap;
  }

  .badge--primary {
    --badge-background: var(--color-link);
    --badge-color: var(--color-white);
  }

  .badge--positive {
    --badge-background: var(--color-positive);
    --badge-color: var(--color-white);
  }

  .badge--negative {
    --badge-background: var(--color-negative);
    --badge-color: var(--color-white);
  }

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

  .badge--info {
    --badge-background: oklch(var(--lch-blue-light));
    --badge-color: var(--color-white);
  }

  .badge--subtle {
    --badge-background: var(--color-ink-lightest);
    --badge-color: var(--color-ink-dark);
  }
}