@layer components {
  [data-coco][data-component="badge"] {
    @apply flex items-center whitespace-nowrap px-2 rounded-lg;
    width: min-content;

    .badge-icon {
      @apply mr-1;
    }

    &[data-size="sm"] {
      @apply badge-sm;
    }

    &[data-size="md"] {
      @apply badge-md;
    }

    &[data-theme="neutral-dark"] {
      @apply bg-background-dark-1 text-content-light-1;
    }

    &[data-theme="neutral-light"] {
      @apply bg-background-light-1 text-content-dark-1;
    }

    &[data-theme="neutral-muted"] {
      @apply bg-gray-300 text-content-dark-3;
    }

    &[data-theme="primary"] {
      @apply bg-background-primary text-content-light-1;
    }
  }
}

@layer utilities {
  .badge-sm {
    @apply py-1 label-sm;
  }

  .badge-md {
    @apply py-1 label-md;
  }
}