@layer components {
  .status {
    --status-background: var(--color-ink-lightest);
    --status-color: var(--color-ink-dark);

    align-items: center;
    background: var(--status-background);
    border-radius: 99rem;
    color: var(--status-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;
  }

  .status--positive {
    --status-background: var(--color-positive);
    --status-color: var(--color-ink-inverted);
  }

  .status--negative {
    --status-background: var(--color-negative);
    --status-color: var(--color-ink-inverted);
  }

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

  .status--info {
    --status-background: oklch(var(--lch-blue-light));
    --status-color: var(--color-ink-inverted);
  }
}