/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-vycd8s8zl3],
.components-reconnect-repeated-attempt-visible[b-vycd8s8zl3],
.components-reconnect-failed-visible[b-vycd8s8zl3],
.components-pause-visible[b-vycd8s8zl3],
.components-resume-failed-visible[b-vycd8s8zl3],
.components-rejoining-animation[b-vycd8s8zl3] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-vycd8s8zl3],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-vycd8s8zl3],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-vycd8s8zl3],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-vycd8s8zl3],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-vycd8s8zl3],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-vycd8s8zl3],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-vycd8s8zl3] {
    display: flex;
}

/* A banner pinned to the top, not a centered modal: the page underneath stays visible. */
#components-reconnect-modal[b-vycd8s8zl3] {
    position: fixed;
    inset: 0 0 auto 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--bg);
    color: var(--text);
    box-shadow: var(--shadow-1);
    z-index: 50;
}

    #components-reconnect-modal[b-vycd8s8zl3]::backdrop {
        background: transparent;
    }

.components-reconnect-container[b-vycd8s8zl3] {
    align-items: center;
}

    .components-reconnect-container p[b-vycd8s8zl3] {
        margin: 0;
        display: none;
        gap: 6px;
        flex-wrap: wrap;
    }

.components-rejoining-animation[b-vycd8s8zl3], .components-reconnect-container > span[aria-hidden][b-vycd8s8zl3] {
    align-items: center;
    color: var(--warning);
}

@media (max-width: 719px) {
    .components-reconnect-container[b-vycd8s8zl3] {
        padding-left: 16px;
        font-size: 13px;
    }
}