21 lines
678 B
CSS
21 lines
678 B
CSS
@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-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);
|
|
}
|
|
}
|
|
}
|