/* ===== 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 */
    font-weight: var(--oo-font-weight-medium);
    white-space: nowrap;
    cursor: default;
    line-height: 1;
    user-select: none;
}

.oo-badge__text {
    transform: translateY(-0.05em);
}

.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;
    }