@layer components {
  .badge {
    @apply inline-flex items-center gap-1 rounded-full border-2 border-solid border-transparent px-2 py-1 text-sm font-semibold whitespace-nowrap;

    &.badge-sm {
      @apply h-6 text-xs;
    }

    &.badge-neutral {
      @apply bg-surface-less text-content-muted border-line;
    }

    &.badge-primary {
      background: color-mix(in srgb, var(--primary) 12%, transparent);
      color: var(--primary);
      border-color: color-mix(in srgb, var(--primary) 22%, transparent);
    }

    &.badge-warning {
      background: color-mix(in srgb, var(--warning) 14%, transparent);
      color: var(--warning);
      border-color: color-mix(in srgb, var(--warning) 25%, transparent);
    }
  }
}