/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/*
   Der Verbindungs-Dialog aus der Projektvorlage.

   Er brachte eigene Farben mit — weisser Grund, Vorlagen-Blau — und stand damit als
   einziges Element ausserhalb der Gestaltung: Im dunklen Modus leuchtete mitten auf der
   Seite ein weisser Kasten. Die Farben kommen jetzt aus app.css, wo der dunkle Modus
   danebensteht (dieselbe Linie wie FarbenGehoerenInsStylesheetTests sie fuer Komponenten
   erzwingt).

   Klassennamen und Kennungen bleiben unveraendert: Blazor schaltet sie selbst.
*/
.components-reconnect-first-attempt-visible[b-zz001p5ffx],
.components-reconnect-repeated-attempt-visible[b-zz001p5ffx],
.components-reconnect-failed-visible[b-zz001p5ffx],
.components-pause-visible[b-zz001p5ffx],
.components-resume-failed-visible[b-zz001p5ffx],
.components-rejoining-animation[b-zz001p5ffx] {
    display: none;
}

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


#components-reconnect-modal[b-zz001p5ffx] {
    background-color: var(--surface);
    color: var(--text);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-zz001p5ffx 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-zz001p5ffx 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-zz001p5ffx 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-zz001p5ffx]::backdrop {
    background-color: var(--overlay);
    animation: components-reconnect-modal-fadeInOpacity-b-zz001p5ffx 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-zz001p5ffx {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-zz001p5ffx {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-zz001p5ffx {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-zz001p5ffx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-zz001p5ffx] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-zz001p5ffx] {
    border: 0;
    background-color: var(--accent);
    color: var(--auf-akzent);
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-zz001p5ffx] {
        background-color: var(--accent-hover);
    }

    #components-reconnect-modal button:active[b-zz001p5ffx] {
        background-color: var(--accent);
    }

.components-rejoining-animation[b-zz001p5ffx] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-zz001p5ffx] {
        position: absolute;
        border: 3px solid var(--accent);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-zz001p5ffx 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-zz001p5ffx] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-zz001p5ffx {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}