/* ===== OO Badge =====
   Nutzt dieselben --_btn-* Vars wie .oo-btn (gesetzt via OoColor inline style).
   ===================== */

.oo-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2em;
    padding: 0.1em 0.4em;
    border: var(--oo-border-width) solid var(--_btn-border, transparent);
    background: var(--_btn-bg);
    color: var(--_btn-text);
    font-family: inherit;
    font-size: var(--oo-font-size-sm); /* Fallback; Component überschreibt per inline style */
    white-space: nowrap;
    cursor: default;
    line-height: 1;
    user-select: none;
}

/* Korrigiert optisches Absinken bei Fonts mit unbalancierten Schriftmetriken (z.B. Open Sans). Bei ausgewogener Schrift
   (etwa Source Sans Pro) sitzt der Text damit zu hoch – dann --oo-badge-text-nudge: 0 setzen. */
.oo-badge__text {
    transform: translateY(var(--oo-badge-text-nudge, -0.05em));
}

/* Symbol und Text auf einer Linie: das Symbol so hoch wie der Text, ohne eigene Zeilenhöhe */
.oo-badge .oo-icon {
    font-size: 1.1em;
    line-height: 1;
}

/* Kleinere Größen (OoSize.Xxs, OoSize.Xxxs) für Badges in dichten Listen und Seitenleisten */
.oo-badge.oo-size-xxs {
    font-size: var(--oo-font-size-xxs) !important;
}

.oo-badge.oo-size-xxxs {
    font-size: var(--oo-font-size-xxxs) !important;
}

.oo-badge--clickable {
    cursor: pointer;
    transition: background var(--oo-transition), border-color var(--oo-transition), color var(--oo-transition);
}

    .oo-badge--clickable:hover {
        background: var(--_btn-hover);
    }

    .oo-badge--clickable:focus-visible {
        outline: 2px solid var(--_btn-bg, var(--oo-primary));
        outline-offset: 2px;
    }