.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--badge-padding);
    border-radius: var(--primary-action-radius);
    line-height: 1;
    white-space: nowrap;
}

.badge--solid {
    background: var(--color-heading);
    color: var(--color-stage-text);
}

.badge--outline {
    border: var(--hairline-border);
    background: var(--color-card);
    color: var(--color-heading);
}

.badge--soft {
    background: var(--text-highlight-background);
    color: var(--color-deep-blue);
}