39 lines
783 B
CSS
39 lines
783 B
CSS
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--size-1);
|
|
padding: var(--size-1) var(--size-3);
|
|
font-size: var(--font-sm);
|
|
font-weight: 600;
|
|
line-height: var(--size-5);
|
|
border-radius: 9999px;
|
|
background: var(--accent);
|
|
color: var(--fg-on-accent);
|
|
}
|
|
|
|
.badge-secondary {
|
|
background: var(--bg-2);
|
|
color: var(--fg-0);
|
|
}
|
|
|
|
.badge-outline {
|
|
background: transparent;
|
|
color: var(--fg-0);
|
|
border: var(--border-0);
|
|
}
|
|
|
|
.badge-success {
|
|
color: var(--success);
|
|
background: color-mix(in srgb, var(--success) 12%, var(--bg-0));
|
|
}
|
|
|
|
.badge-warning {
|
|
color: var(--warning);
|
|
background: color-mix(in srgb, var(--warning) 12%, var(--bg-0));
|
|
}
|
|
|
|
.badge-danger {
|
|
color: var(--danger);
|
|
background: color-mix(in srgb, var(--danger) 12%, var(--bg-0));
|
|
}
|