.slf-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--slf-radius-pill);
    font-weight: var(--slf-font-weight-bold);
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.slf-badge--default { background: color-mix(in srgb, var(--slf-color-secondary) 8%, transparent); color: var(--slf-color-secondary); }
.slf-badge--success { background: color-mix(in srgb, var(--slf-green-500) 14%, transparent); color: var(--slf-color-success); }
.slf-badge--warning { background: color-mix(in srgb, var(--slf-amber-500) 14%, transparent); color: var(--slf-color-warning); }
.slf-badge--danger { background: color-mix(in srgb, var(--slf-red-500) 14%, transparent); color: var(--slf-color-danger); }
.slf-badge--info { background: color-mix(in srgb, var(--slf-blue-500) 14%, transparent); color: var(--slf-color-info); }
.slf-badge--dark { background: var(--slf-color-secondary); color: var(--slf-color-text-inverse); }
.slf-badge--small { padding: 5px 9px; font-size: .68rem; }
.slf-badge--medium { padding: 7px 12px; font-size: var(--slf-font-size-100); }
.slf-badge--large { padding: 9px 15px; font-size: .82rem; }