@layer components {
  .status,
  .tag {
    --pill-bg: var(--color-quiet-bg);
    --pill-ink: var(--color-muted);

    display: inline-block;
    padding-block: 0.1rem;
    padding-inline: 0.4rem;
    border-radius: var(--radius-tight);
    font-size: var(--text-x-small);
    background: var(--pill-bg);
    color: var(--pill-ink);
  }

  .status {
    font-weight: 600;
  }

  .status--pending,
  .status--draft,
  .status--needs_clarification,
  .status--withheld,
  .tag--unknown,
  .tag--needs_review,
  .tag--unregistered {
    --pill-bg: var(--color-waiting-bg);
    --pill-ink: var(--color-waiting-ink);
  }

  .status--processing {
    --pill-bg: var(--color-working-bg);
    --pill-ink: var(--color-working-ink);
  }

  .status--completed,
  .status--succeeded,
  .status--quoted,
  .status--sent,
  .status--delivered,
  .tag--approved,
  .tag--registered {
    --pill-bg: var(--color-settled-bg);
    --pill-ink: var(--color-settled-ink);
  }

  .status--failed,
  .status--bounced,
  .status--complained,
  .tag--blocked,
  .tag--aog {
    --pill-bg: var(--color-wrong-bg);
    --pill-ink: var(--color-wrong-ink);
  }

  .status--ignored,
  .status--closed,
  .status--no_inventory,
  .status--no_rfq_found {
    --pill-bg: var(--color-quiet-bg);
    --pill-ink: var(--color-quiet-ink);
  }

  .tag--superseded {
    --pill-bg: var(--color-aside-bg);
    --pill-ink: var(--color-aside-ink);
  }

  .tag--aog {
    font-weight: 600;
  }
}