/* ===== 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); /* Standard; OoSize-Klassen (oo-size-*) überschreiben */
    white-space: nowrap;
    max-width: 100%; /* Nie breiter als der Container – lange Texte werden unten mit „…“ gekürzt */    cursor: default;
    line-height: 1;
    user-select: none;
}

/* Text bleibt standardmäßig ohne zusätzliche Verschiebung zentriert.
   Für fontspezifische optische Anpassungen kann --oo-badge-text-nudge gesetzt werden. */
.oo-badge__text {
    transform: translateY(var(--oo-badge-text-nudge, 0));
    /* Kürzen bei Überlänge; padding/margin-block verhindern, dass overflow Unterlängen abschneidet */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-block: 0.15em;
    margin-block: -0.15em;
}

/* 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;
    flex-shrink: 0;
}

/* 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 {
        /* Nicht --_btn-bg: bei Outline/Ghost ist das transparent und der Fokusring unsichtbar */
        outline: 2px solid var(--oo-primary);
        outline-offset: 2px;
    }