:root {
    --fg: #313131;
    --bright: #777;
}

body {
    margin: 0px;
    height: 100vh;
    
    background:var(--root-background, var(--main-background));
    background-repeat:var(--root-repeat, no-repeat);
    background-size: var(--root-size, auto);
    background-position: center;

    > .yes {
        display:none;
    }
}

.wait {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 64px;
    height: 64px;

    transform: translate(-50%, -50%);
    pointer-events: none;
    filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.25));

    > path {
        fill: var(--fg);
    }

    &.hidden {
        display:none;
    }
}

form {
    position: absolute;
    display: none;

    flex-direction: column;
    align-items: center;

    left: 50%;
    top: 50%;
    
    width: 400px;
    height: 540px;
    padding-bottom: 20px;
    max-width: calc(100% - 40px);
    max-height: calc(100% - 40px);

    transform: translate(-50%, -50%);
    /*box-shadow: 0 17px 50px 0 rgba(0, 0, 0, 0.19),0 12px 15px 0 rgba(0, 0, 0, 0.24);*/
    box-shadow:0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.15);
    border-radius:10px;
    font-family: var(--font-family, 'Segoe UI', Tahoma, Arial, sans-serif);
    font-size: var(--font-size, 12px);
    color: var(--fg);
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);

    &.visible {
        display: flex;
    }

    > .logo {
        position: relative;
        display: block;

        flex-shrink: 0;

        margin: 10px 0px 0px 0px;

        width: 300px;
        height: 100px;

        background-image: url(../desktop/?remote=1&action=doodle&what=logo);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }

    > .header {
        margin: 10px 5px 0px 5px;

        font-size: calc(1.33 * var(--font-size));
        font-weight: bold;        

        text-transform: uppercase;

        text-align:center;
    }

    > .text {
        margin-top: 10px;

        width: calc(100% - 64px);
        
        font-family: var(--font-family);
        font-size: var(--font-size);
        text-align: justify;

        &.hidden {
            display:none;
        }
    }
    /*
	&[data-form='login'] > [data-form]:not([data-form~=login]),
	&[data-form='forgot'] > [data-form]:not([data-form~=forgot]),
	&[data-form='signup'] > [data-form]:not([data-form~=signup]),
	&[data-form='signup'] > [data-form]:not([data-form~=signup]),
	&[data-form='reset'] > [data-form]:not([data-form~=reset]) {
		display:none;
	}
	*/

    > .row {
        position: relative;
        display: block;

        margin-top: 20px;

        width: calc(100% - 64px);

        > label {
            position: relative;
            display: block;

            font-size: var(--font-size);
            text-transform: uppercase;

            cursor:pointer;

            user-select:none;
        }

        > input[type='text'],
        > input[type='password'] {
            position: relative;
            display: block;

            margin-top:2px;

            width: calc(100% - 12px);
            height: 30px;
            padding: 5px;

            font-family: var(--font-family);
            font-size: calc(1.5 * var(--font-size));

            border-radius: 5px;
            border: 1px solid var(--bright);
            outline: none;

            transition: border-color 200ms, box-shadow 200ms;

            &:focus {
                border-color: var(--fg);
                box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
            }

            &.code {
                height:50px;

                font-family:monospace;
                font-size:calc(2.5 * var(--font-size));
                font-weight:bold;

                text-align:center;
            }
        }

        > input[type='checkbox'] {
            margin-right:10px;

            width:20px;
            height:20px;
        }

        &[data-key='captcha'] {
            > .h-captcha {
                display:flex;

                justify-content:center;
                align-items:center;
            }
        }

        &[data-key='tfa-app'] {
            display:none;

            justify-content:center;
            align-items:center;

            margin-top:10px;

            height:80px;
            
            text-align:center;

            &:after {
                display:block;
                content:"";

                width:80px;
                height:80px;

                background-image:var(--tfa-app);
                background-repeat:no-repeat;
                background-size:contain;
                border-radius:25%;
            }
        }

        &.hidden {
            display:none;
        }

        &[data-key='remember'] {
            display:flex;

            flex-direction:row;
            align-items:center;
            justify-content:center;
        }
    }

    > .qr {
        position:relative;
        display:block;

        flex-shrink:0;

        margin-top:10px;
        margin-bottom:10px;

        width:300px;
        height:300px;

        background-repeat:no-repeat;
        background-size:contain;
        background-position:center;

        + .manual {
            margin-bottom:10px;

            font-size:20px;
            font-weight:bold;
            font-family:monospace;

            text-align:center;
        }
    }

    &[data-form='signup'] {
        // too many fields -> need more space
        > .logo-x {
            display: none;
        }

        > .row {
            > input {
                height: 20px;
                font-size: 14px;
            }

            + .row {
                margin-top:5px;
            }
        }
    }

    > .yes {
        position:relative;
        display:block;

        flex-grow: 1;

        > .content {
            position:absolute;

            left:calc(50% - 100px);
            top:calc(50% - 100px);

            width:0px;
            height:200px;

            overflow:hidden;

            transition:width 400ms;

            > svg {
                position:absolute;

                left:0px;
                top:0px;

                width:200px;
                height:100%;
                
                > path {
                    fill: var(--fg);
                }
            }
            
            &.visible {
                width:200px;
            }
        }
    }

    > .large-icon {
        position:relative;
        display:block;

        flex-grow: 1;

        width:100%;

        > svg {
            position:absolute;

            width:100%;
            height:200px;
            max-height:100%;
        
            > path {
                fill: var(--fg);
            }
            
            transform:scaleY(-1);
        }
    }

    > .filler {
        flex-grow: 1;
    }

    > .status {
        display:none;

        margin: 10px 0px 0px 0px;
        font-size: var(--font-size);

        &.visible {
            display:block;
        }

        &[data-color='green'] {
            color: #00AA00;
        }

        &[data-color='red'] {
            color: #FF3131;
        }
    }

    > button {
        position: relative;
        display: block;

        margin: 0px 0px 20px 0px;

        width: calc(100% - 62px);
        height: 42px;

        border-radius: 4px;
        border: none;
        outline: 0;

        background-color: var(--button-bg, #DDD);
        color: var(--button-fg, #000);

        cursor: pointer;
        text-align: center;
        transition: filter 200ms;

        font-family:var(--font-family) !important;
        font-size:var(--font-size) !important;

        &:hover {
            filter: brightness(1.1);
        }

        &:active {
            filter: brightness(0.9);
        }

        &.disabled {
            pointer-events: none;
            opacity: 0.5;
        }

		&.list {
            margin-bottom:2px;
		}
    }

    > .link {
        display:block;

        margin: 0px 0px 5px 0px;

        cursor: pointer;
        color: var(--bright);
        
        transition: color 200ms;
        font-size: var(--font-size);

        &.hidden {
            display:none;
        }

        &:hover {
            color: var(--fg);
        }
    }

    > .header,
    > .row > span,
    > button,
    > button ~ span {
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version */
    }
}

body:not([data-tfa-app='none']) > form > .row[data-key='tfa-app'] {
    display:flex;

    + .row[data-key='code'] {
        margin-top:10px;

        > input {
            height:35px;
        }
    }
}

@media only screen and (max-width: 600px) {
    form {
        box-shadow: none;
    }
}