/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* ReconnectModal.razor.js only toggles these state classes, so this CSS is what shows or hides each part. */
.components-reconnect-first-attempt-visible[b-wm78oaaa2j],
.components-reconnect-repeated-attempt-visible[b-wm78oaaa2j],
.components-reconnect-failed-visible[b-wm78oaaa2j],
.components-pause-visible[b-wm78oaaa2j],
.components-resume-failed-visible[b-wm78oaaa2j],
.components-rejoining-animation[b-wm78oaaa2j] {
    display: none;
}

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

#components-reconnect-modal[b-wm78oaaa2j] {
    width: 20rem;
    max-width: calc(100vw - 32px);
    padding: 24px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

#components-reconnect-modal[b-wm78oaaa2j]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
}

/* blazor.web.js sets display: block on an unhandled error. */
#blazor-error-ui[b-wm78oaaa2j] {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
}