.chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    height: 22px;
    padding: 0 .5rem;
    border-radius: 5px;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.chip--critical {
    background-color: var(--ac-critical-soft);
    color: var(--ac-critical);
}
.chip--warning {
    background-color: var(--ac-warning-soft);
    color: var(--ac-warning);
}
.chip--good {
    background-color: var(--ac-good-soft);
    color: var(--ac-good);
}
.chip--neutral {
    background-color: var(--ac-surface-2);
    border: 1px solid var(--ac-border);
    color: var(--ac-text-2);
}
.chip--outline {
    height: 20px;
    padding: 0 .375rem;
    border: 1px solid var(--ac-border);
    border-radius: 4px;
    color: var(--ac-text-2);
    font-size: .71875rem;
    font-weight: 400;
}
.chip--outline i {
    color: var(--ac-text-3);
}