p.badge,
span.badge {
    display: inline-flex;
    align-items: center;
    color: var(--primary-color-darker);
    border: 1px solid rgba(var(--primary-rgb), 0.3);
    background: rgba(var(--primary-rgb), 0.05);
    border-radius: var(--global-radius);
    padding: 5px 10px;
    white-space: nowrap;
    margin: 2px 5px;
    line-height: 1;
    vertical-align: middle;
    gap: 3px;
}

p.badge.secondary,
span.badge.secondary {
    color: var(--font-color);
    border: var(--global-border);
    background: var(--background-color);
}

p.badge.success,
span.badge.success {
    color: var(--success-color-darker);
    border-color: rgba(var(--success-rgb), 0.3);
    background: rgba(var(--success-rgb), 0.05);
}

p.badge.warning,
span.badge.warning {
    color: var(--warning-color-darker);
    border-color: rgba(var(--warning-rgb), 0.3);
    background: rgba(var(--warning-rgb), 0.05);
}

p.badge.danger,
span.badge.danger {
    color: var(--danger-color-darker);
    border-color: rgba(var(--danger-rgb), 0.3);
    background: rgba(var(--danger-rgb), 0.05);
}

html.dark p.badge,
html.dark span.badge {
    color: var(--font-color);
}

.line-separator {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    border: var(--global-border);
}