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