39 lines
702 B
CSS
39 lines
702 B
CSS
|
.chip {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: baseline;
|
||
|
|
gap: 0.25rem;
|
||
|
|
padding: 0.2rem 0.55rem;
|
||
|
|
font-size: 0.75rem;
|
||
|
|
font-weight: 600;
|
||
|
|
line-height: 1;
|
||
|
|
border-radius: 999px;
|
||
|
|
white-space: nowrap;
|
||
|
|
letter-spacing: 0.01em;
|
||
|
|
font-variant-numeric: tabular-nums;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sm {
|
||
|
|
padding: 0.1rem 0.4rem;
|
||
|
|
font-size: 0.6875rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.suffix {
|
||
|
|
font-weight: 500;
|
||
|
|
opacity: 0.75;
|
||
|
|
}
|
||
|
|
|
||
|
|
.good {
|
||
|
|
background: var(--accent-teal-bg, rgba(45, 125, 125, 0.12));
|
||
|
|
color: var(--accent-teal, #2d7d7d);
|
||
|
|
}
|
||
|
|
|
||
|
|
.bad {
|
||
|
|
background: var(--accent-coral-bg, rgba(224, 114, 86, 0.12));
|
||
|
|
color: var(--accent-coral, #e07256);
|
||
|
|
}
|
||
|
|
|
||
|
|
.neutral {
|
||
|
|
background: var(--bg-secondary, #f3ede4);
|
||
|
|
color: var(--text-muted, #8a847a);
|
||
|
|
}
|