@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);
    }
  }

  .role-badge {
    @apply inline-flex min-w-0 items-center gap-1.5 rounded-full border-2 border-solid px-2 py-1 text-xs font-normal;
    background: color-mix(in srgb, var(--role-color) 12%, transparent);
    color: var(--role-color);
    border-color: color-mix(in srgb, var(--role-color) 22%, transparent);
  }

  .role-badge__dot {
    @apply size-1.5 shrink-0 rounded-full;
    background-color: var(--role-color);
  }

  .role-badge--md {
    @apply text-sm;
  }

  .role-badge--md .role-badge__dot {
    @apply size-2;
  }
}