article#login-page {
    width: 300px;
    display: flex;
    flex-direction: column;
    text-align: center;
    header {
        margin-bottom: 40px;
        figure.digilean-logo, figure.digilean-logo svg {
            width: 10rem;
            height: 10rem;
        }
    }
    section.external {
        padding: 0;
        margin: 0;
        a.external-provider-button {
            display: block;
            text-decoration: none;
        }
    }
    section.bottom {
        margin-top: 40px;
        p#email-user-label {
            margin-top: 0;
            margin-bottom: 1rem;
        }
    }
    .btn-login {
        width: 100%;
    }
    .forgot-password-link {
        color: var(--digilean-white);
        text-decoration: underline;
        font-size: 11px;
    }
}

dialog#forgot-password::backdrop {
    /* background-image: linear-gradient(
        90deg,
        var(--digilean-blue),
        var(--digilean-grey-dark)
    ); */
    /* background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px); */
    /* opacity: 0.7; */
    /* transition:  2s ease-out; */
}
dialog[open]::backdrop {
    animation: backdrop-fade 1s ease forwards;
}
dialog.close::backdrop {
    animation: backdrop-fade 1s ease backwards;
    animation-direction: reverse;
}
@keyframes backdrop-fade {
    from {
        background: transparent;
    }
    to{
        background-color: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(10px);
    }
}

dialog#forgot-password {
    background: var(--digilean-grey-white);
    border: none !important;
    border-radius: 3px;
    padding: 0;
    width: 400px;
    article.password-dialog {
        color: var(--digilean-grey-dark);
        header {
            background: var(--digilean-white);
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: 1rem;
            h1 {
                font-size: 1.25rem;
                font-weight: 500;
                margin-block-start: 0;
                margin-block-end: 0;
            }
            button.close {
                background: var(--digilean-white);
                border: none;
                color: black;
                opacity: 0.5;
                cursor: pointer;
                font-size: 1.5rem;
                font-weight: 700;
                outline: none;
            }
        }
        section.modal-body {
            display: flex;
            flex-direction: column;
            padding: 1rem;
            div.button-row {
                display: flex;
                flex-direction: row;
                justify-content: end;
            }
            label.email {
                font-size: 0.9rem;
            }
        }
    }
}

.digilean-logo.login #digilean-logo-login use {
    animation: spin 1s infinite linear;
    transform-origin: center;
}

.digilean-logo.login.initial #digilean-logo-login use {
    animation-timing-function: ease;
    animation-direction: reverse;
}

.digilean-logo.login.paused #digilean-logo-login use {
    animation-play-state: paused;
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}