/* ===== OO Button =====
   Farbe/Variante: Component setzt --_btn-* per inline style (OoColor).
   Tokens: --oo-btn-* (theme1.css)
   ===================== */

.oo-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    white-space: nowrap;
    flex-shrink: 0;
    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-md);
    line-height: 1;
    cursor: pointer;
    outline: none;
    transition: background var(--oo-transition), border-color var(--oo-transition), color var(--oo-transition);
}

    /* Icon innerhalb von Buttons: Schriftgröße relativ zur Button-Schriftgröße */
    .oo-btn .oo-icon {
        font-size: 1.1em;
    }

    /* Korrigiert optisches Absinken bei Fonts mit unbalancierten Schriftmetriken (z.B. Open Sans) */
    .oo-btn .oo-btn__text {
        transform: translateY(-0.05em);
    }

    .oo-btn:hover:not(:disabled):not(.oo-btn--disabled) {
        background: var(--_btn-hover);
    }

    .oo-btn:disabled,
    .oo-btn--disabled {
        opacity: 0.50;
        cursor: default;
        pointer-events: none;
    }

    .oo-btn:active:not(:disabled):not(.oo-btn--disabled) {
        filter: brightness(0.95);
    }

/* Shadow-Variante: simuliert gedrückten Zustand via inset box-shadow */
.oo-btn--shadow {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.20), inset 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* Loading-State */
.oo-btn--busy {
    cursor: wait;
}

.oo-btn__spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: oo-btn-spin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes oo-btn-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Größen (OoSize) */
.oo-btn.oo-size-xs {
    /*font-size: var(--oo-font-size-xs) !important;*/
    min-height: var(--oo-size-min-height-xs) !important;
    padding: var(--oo-size-padding-xs-y) var(--oo-size-padding-xs-x) !important;
    line-height: 1.5;
}

    .oo-btn.oo-size-xs .oo-btn__text {
        transform: none;
    }

    .oo-btn.oo-size-xs .oo-icon {
        font-size: inherit;
    }

.oo-btn.oo-size-sm {
    /*font-size: var(--oo-font-size-sm) !important;*/
    min-height: var(--oo-size-min-height-sm) !important;
    padding: var(--oo-size-padding-sm-y) var(--oo-size-padding-sm-x) !important;
    line-height: 1.5;
    transform: none;
}

.oo-btn.oo-size-sm .oo-btn__text {
    transform: none;
}

.oo-btn.oo-size-sm .oo-icon {
    font-size: inherit;
}

.oo-btn.oo-size-md {
    /*font-size: var(--oo-font-size-md) !important;*/
    min-height: var(--oo-size-min-height-md) !important;
    padding: var(--oo-size-padding-md-y) var(--oo-size-padding-md-x) !important;
    line-height: 1.5;
    transform: none;
}

.oo-btn.oo-size-md .oo-btn__text {
    transform: none;
}

.oo-btn.oo-size-md .oo-icon {
    font-size: inherit;
}

.oo-btn.oo-size-lg {
    /*font-size: var(--oo-font-size-lg) !important;*/
    min-height: var(--oo-size-min-height-lg) !important;
    /*padding: var(--oo-space-3) var(--oo-space-5) !important;*/
    padding: var(--oo-size-padding-lg-y) var(--oo-size-padding-lg-x) !important;
    line-height: 1.5;
    transform: none;
}

.oo-btn.oo-size-lg .oo-btn__text {
    transform: none;
}

.oo-btn.oo-size-lg .oo-icon {
    font-size: inherit;
}

.oo-btn.oo-size-xl {
    /*font-size: var(--oo-font-size-xl) !important;*/
    min-height: var(--oo-size-min-height-xl) !important;
    /*padding: var(--oo-space-4) var(--oo-space-6) !important;*/
    padding: var(--oo-size-padding-xl-y) var(--oo-size-padding-xl-x) !important;
    line-height: 1.5;
    transform: none;
}

.oo-btn.oo-size-xl .oo-btn__text {
    transform: none;
}

.oo-btn.oo-size-xl .oo-icon {
    font-size: inherit;
}