/* ============================================================================
 * css/components/base_buttons.css  —  base-class-buttons (v2 §7.1/§7.2, §6.4, §4.2)
 * Eine gemeinsame Button-Basisklasse: Standard-Buttons erben via Klasse
 * `btn-base` (additiv, optik-erhaltend). Trainings-Buttons (.simple-btn-*,
 * .mock-android-btn-*, .control-btn) sind spezialisierte Spielfeld-Buttons und
 * fallen unter Ausnahme 0002 (Groessen) -> NICHT zwingend hierauf zurueckfuehren.
 * Basisklassen 2/8.
 * ==========================================================================*/

/* --- Generische Basisklasse: 5 States (default/hover/active/focus/disabled) -- */
.btn-base {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-family);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast),
                color var(--transition-fast),
                box-shadow var(--transition-fast),
                transform var(--transition-fast);
    min-height: 44px; /* Touch-Target (v2 Layout: min. 44px) */
}

.btn-base:hover {
    /* konkrete Hover-Farbe legen erbende Klassen fest */
    transform: translateY(-1px);
}

.btn-base:active {
    transform: translateY(0);
}

/* Sichtbarer Fokus-Indikator (v2 §4.2) — :focus-visible aus base.css ergaenzt;
   hier explizit auch fuer Buttons, die outline unterdruecken koennten. */
.btn-base:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.btn-base:disabled,
.btn-base[disabled],
.btn-base.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* --- Borderless-Variante (Navbar/Menu/Footer, v2 §6.4) --------------------- */
.btn-base--borderless {
    background: transparent;
    border: none;
}

/* --- Gemeinsamer Back-Button (vormals 3x dupliziert in den Seiten-CSS) ------
   Aktiv nur in leaderboard.html; in profile/results aktuell auskommentiert.
   Erbt Fokus/Disabled/Transition von .btn-base. */
.back-btn {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 8px 16px;
    border-radius: 5px; /* near-value -> Snap auf --radius-sm in Basisklassen 5/8 */
    cursor: pointer;
    text-decoration: none;
}

.back-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}