/* login.css */
@import url(./base.css);

:root{
    --backgroundImage: url(https://images.unsplash.com/photo-1497215728101-856f4ea42174?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
}

body{ display: flex }
.body--block{ height: 100% }

.body--block--left{
    padding: 2em;
    width: 80%;
    min-width: 300px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: var(--backgroundImage);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.body--block--left::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    top: 0;
    background-color: var(--backgroundColor);
    opacity: .7;
    left: 0;
}

.logo{
    display: none;
    content: '';
    width: 250px;
    max-width: 100%;
    z-index: 2;
    margin-bottom: 1.5em;
    border-bottom: 1px solid var(--opacityColor);
}

@media (prefers-color-scheme: light){
    .logo--dark{ display: block }
    :root{ --opacityColor: rgba(255, 255, 255, .8) }
}

@media (prefers-color-scheme: dark){
    .logo--light{ display: block }
    :root{ --opacityColor: rgba(0, 0, 0, .8) }
}

.body--block--left a{
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color);
    z-index: 2;
    text-decoration: none;
    font-size: 1.2em;
}

.body--block--left a ion-icon{ margin-right: .4em }

.body--block--right{
    width: 100%;
    padding: 1em;
    background-color: var(--backgroundColor);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

h1{ font-size: 2em }

h3{
    font-size: 1.3em;
    font-weight: lighter;
    margin-top: .4em;
}

.body--block--right .logo{
    border-bottom: 0;
    width: 150px;
}

.body--block--right .logo--container{
    display: none;
    margin-bottom: 1em;
}

@media (max-width: 700px){
    .body--block--left{ display: none }
    .body--block--right > *{ z-index: 2 }
    .body--block--right .logo{ margin-bottom: .2em }
    .body--block--right .logo--container{ display: block }

    .body--block--right::before{
        content: '';
        z-index: 1;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--opacityColor);
    }
    
    .body--block--right{
        background-image: var(--backgroundImage);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }
}

form{
    width: 400px;
    max-width: 100%;
    border-radius: 1.5em;
    margin-top: 2em;
}

form.loading{
    margin-top: 1em;
    font-size: 2em;
}

form input:not(:last-child){ margin-bottom: 1em }

form a:not(.classic--link){
    color: var(--textColor);
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    margin-top: 2em;
    text-decoration: none;
    position: relative;
}

form .link--container{ text-align: center }

form a:not(.classic--link)::before{
    content: '';
    height: 1px;
    position: absolute;
    background-color: var(--textColor);
    top: 100%;
    margin-top: .1em;
    animation: linkUnderline 3s ease infinite 0s alternate;
}

@keyframes linkUnderline{
    0%, 20%{
        width: 0%;
        left: 0;
    }
    50%{
        width: 100%;
        left: 0;
    }
    80%, 100%{
        width: 0%;
        left: 100%;
    }
}