/* /Components/Shared/ServerReconnectModal.razor.rz.scp.css */
.server-reconnect-connecting-visible[b-48q4et8bnm],
.server-reconnect-retrying-visible[b-48q4et8bnm],
.server-reconnect-failed-visible[b-48q4et8bnm],
.server-reconnect-paused-visible[b-48q4et8bnm],
.server-reconnect-resume-failed-visible[b-48q4et8bnm],
.server-reconnect-spinner[b-48q4et8bnm] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .server-reconnect-connecting-visible[b-48q4et8bnm],
#components-reconnect-modal.components-reconnect-retrying .server-reconnect-retrying-visible[b-48q4et8bnm],
#components-reconnect-modal.components-reconnect-failed .server-reconnect-failed-visible[b-48q4et8bnm],
#components-reconnect-modal.components-reconnect-paused .server-reconnect-paused-visible[b-48q4et8bnm],
#components-reconnect-modal.components-reconnect-resume-failed .server-reconnect-resume-failed-visible[b-48q4et8bnm] {
    display: block;
}

#components-reconnect-modal.components-reconnect-show .server-reconnect-spinner[b-48q4et8bnm],
#components-reconnect-modal.components-reconnect-retrying .server-reconnect-spinner[b-48q4et8bnm] {
    display: block;
}

#components-reconnect-modal.components-reconnect-show .badge.server-reconnect-connecting-visible[b-48q4et8bnm],
#components-reconnect-modal.components-reconnect-retrying .badge.server-reconnect-retrying-visible[b-48q4et8bnm],
#components-reconnect-modal.components-reconnect-failed .badge.server-reconnect-failed-visible[b-48q4et8bnm],
#components-reconnect-modal.components-reconnect-paused .badge.server-reconnect-paused-visible[b-48q4et8bnm],
#components-reconnect-modal.components-reconnect-resume-failed .badge.server-reconnect-resume-failed-visible[b-48q4et8bnm],
#components-reconnect-modal.components-reconnect-failed .btn.server-reconnect-failed-visible[b-48q4et8bnm],
#components-reconnect-modal.components-reconnect-paused .btn.server-reconnect-paused-visible[b-48q4et8bnm],
#components-reconnect-modal.components-reconnect-resume-failed .btn.server-reconnect-resume-failed-visible[b-48q4et8bnm] {
    display: inline-flex;
}

#components-reconnect-modal.components-reconnect-show .server-reconnect-actions[b-48q4et8bnm],
#components-reconnect-modal.components-reconnect-retrying .server-reconnect-actions[b-48q4et8bnm] {
    display: none;
}

#components-reconnect-modal[b-48q4et8bnm] {
    width: min(34rem, calc(100vw - 2rem));
    margin: 12vh auto;
    padding: 0;
    border: 0;
    background: transparent;
    opacity: 0;
    transform: translateY(1rem) scale(0.98);
    transition:
        display 0.25s allow-discrete,
        overlay 0.25s allow-discrete,
        opacity 0.25s ease,
        transform 0.25s ease;
}

#components-reconnect-modal[open][b-48q4et8bnm] {
    opacity: 1;
    transform: translateY(0) scale(1);
}

#components-reconnect-modal[b-48q4et8bnm]::backdrop {
    background: oklch(var(--bc) / 0.32);
    backdrop-filter: blur(10px);
}

.server-reconnect-spinner[b-48q4et8bnm] {
    position: relative;
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
}

.server-reconnect-spinner span[b-48q4et8bnm] {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    border: 3px solid oklch(var(--p));
    opacity: 0;
    animation: server-reconnect-pulse-b-48q4et8bnm 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.server-reconnect-spinner span:nth-child(2)[b-48q4et8bnm] {
    animation-delay: -0.9s;
}

@keyframes server-reconnect-pulse-b-48q4et8bnm {
    0% {
        transform: scale(0.25);
        opacity: 0;
    }

    20% {
        opacity: 0.95;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}