.ombox-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    border-radius: 999px;
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.ombox-badge-primary {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.ombox-badge-success,
.ombox-badge-ok {
    background: var(--color-success-light);
    color: var(--color-success);
}

.ombox-badge-info {
    background: var(--color-info-light);
    color: var(--color-info);
}

.ombox-badge-warning {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.ombox-badge-error,
.ombox-badge-danger {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

@media (max-width: 760px) {
    .ombox-badge {
        min-height: 32px;
        padding: var(--space-1, 4px) var(--space-3, 12px);
        white-space: normal;
        line-height: 1.35;
    }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    .ombox-badge {
        min-height: 30px;
        padding-inline: var(--space-2, 8px);
    }
}