/* reconnect-modal.css
 *
 * Only styles that Tailwind utilities cannot express live here:
 *
 *  1. The outer #components-reconnect-modal layout — Blazor replaces the
 *     element's class attribute entirely, so Tailwind classes on it would
 *     be wiped. The show/hide toggling is driven by the Blazor-managed class.
 *
 *  2. The panel show/hide selectors — compound selectors keyed off the
 *     Blazor-managed parent class (#id.blazor-class .child).
 *
 *  3. The spinner — the dark-mode override targets only border-top-color
 *     (keeping the halo in white/10) which cannot be expressed with Tailwind's
 *     dark: variant alone without a specificity conflict.
 */

/* ── Outer container (class managed by Blazor) ──────────────────────────── */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background-color: var(--surface);
    align-items: center;
    justify-content: center;
}

    #components-reconnect-modal.components-reconnect-show,
    #components-reconnect-modal.components-reconnect-failed,
    #components-reconnect-modal.components-reconnect-rejected {
        display: flex;
    }

/* ── Inner panel visibility (compound selectors off Blazor class) ──────── */
.rcn-show-only {
    display: none;
}

.rcn-failed-only {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .rcn-show-only {
    display: flex;
}

#components-reconnect-modal.components-reconnect-failed .rcn-failed-only,
#components-reconnect-modal.components-reconnect-rejected .rcn-failed-only {
    display: flex;
}

/* ── Spinner ────────────────────────────────────────────────────────────── */
@keyframes rcn-spin {
    to {
        transform: rotate(360deg);
    }
}

.rcn-spinner {
    width: 2rem;
    height: 2rem;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--feedbax);
    border-radius: 9999px;
    animation: rcn-spin 0.8s linear infinite;
}

.dark .rcn-spinner {
    border-color: rgba(255, 255, 255, 0.1);
    border-top-color: var(--feedbax);
}