@layer components {

  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.15em 0.7em;
    border-radius: var(--radius-full);
    font-size: var(--text-x-small);
    font-weight: var(--font-semibold);
    line-height: 1.5;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: none;
  }

  .badge--entry {
    background-color: var(--color-success-light);
    color: var(--color-success-dark);
  }

  .badge--exit {
    background-color: var(--color-warning-light);
    color: var(--color-warning-dark);
  }

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

  .badge--danger {
    background-color: var(--color-danger-light);
    color: var(--color-danger-dark);
  }

  .badge--neutral {
    background-color: var(--color-ink-lightest);
    color: var(--color-ink-darker);
  }

  .badge--brand {
    background-color: var(--color-brand-tint);
    color: var(--color-brand-base);
  }

  .badge--info {
    background-color: var(--color-info-light);
    color: var(--color-info-dark);
  }

  .badge--sm {
    font-size: 0.65rem;
    padding: 0.1em 0.6em;
  }

  .badge--lg {
    font-size: var(--text-sm);
    padding: 0.25em 0.9em;
  }
}