/* Styling for the light-DOM #components-reconnect-modal added in _Host.cshtml (see reconnectModal.js).
   Visibility of each message/button is keyed off the state classes Blazor applies to the dialog
   itself once it's driving a user-supplied element instead of its own shadow-DOM default. */

#components-reconnect-modal {
    border: none;
    border-radius: 0.5rem;
    padding: 1.5rem 2rem;
    max-width: 20rem;
    text-align: center;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
}

#components-reconnect-modal::backdrop {
    background: rgba(0, 0, 0, 0.4);
}

#components-reconnect-modal p,
#components-reconnect-modal button {
    display: none;
    margin: 0.5rem 0;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-attempt-visible,
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-attempt-visible {
    display: block;
}

#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible,
#components-reconnect-modal.components-reconnect-failed #components-reconnect-button {
    display: block;
}

#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
#components-reconnect-modal.components-reconnect-paused #components-resume-button {
    display: block;
}

#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible {
    display: block;
}

#components-reconnect-modal button {
    padding: 0.4rem 1.2rem;
    border: none;
    border-radius: 0.25rem;
    background: #3b6ea2;
    color: #fff;
    cursor: pointer;
}

#components-reconnect-modal button:hover {
    background: #2a5580;
}