@layer components {
  .badge {
    align-items: center;
    border-radius: var(--radius-pill);
    display: inline-flex;
    font-size: var(--text-xs);
    font-weight: 600;
    gap: 0.4em;
    inline-size: fit-content;
    padding: 0.25em 0.75em;
    white-space: nowrap;
  }

  .badge--neutral {
    background: var(--color-slate-100);
    color: var(--color-slate-700);
  }

  .badge--positive {
    background: var(--color-emerald-50);
    color: var(--color-emerald-700);
  }

  .badge--warning {
    background: var(--color-amber-50);
    color: var(--color-amber-700);
  }

  .badge--info {
    background: var(--color-sky-50);
    color: var(--color-sky-700);
  }

  .badge--danger {
    background: var(--color-rose-50);
    color: var(--color-rose-700);
  }

  .badge--subtle {
    background: var(--color-slate-50);
    color: var(--color-slate-400);
    font-size: 0.6875rem;
    font-weight: 500;
  }

  .badge--outline {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-ink-subtle);
  }

  .badge--light {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: var(--color-white);
  }

  .badge__dot {
    background: currentColor;
    block-size: 0.5rem;
    border-radius: 999px;
    inline-size: 0.5rem;
    opacity: 0.75;
  }

  .chip {
    align-items: center;
    background: var(--color-slate-100);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    color: var(--color-slate-700);
    display: inline-flex;
    font-size: var(--text-xs);
    font-weight: 600;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    text-decoration: none;
    white-space: nowrap;
  }

  .chip:hover {
    color: var(--color-ink);
  }

  .chip--active {
    background: var(--color-slate-900);
    color: var(--color-white);
  }

  .chip--outline {
    background: var(--color-slate-50);
    border-color: var(--color-border);
    color: var(--color-ink);
  }

  .chip__remove {
    color: var(--color-ink-muted);
    font-weight: 700;
  }

  .chip__remove:hover {
    color: var(--color-ink);
  }
}