// Settings
$color-light-fore : #222;
$color-light-back : #EFEFEF;
$color-light-primary : #2272D4;
$color-light-secondary : #D47222;
$color-dark-fore : #EFEFEF;
$color-dark-back : #222;
$color-dark-primary : mix(#FFF, #2272D4, 30%);
$color-dark-secondary : mix(#FFF, #D47222, 30%);
$color-grey : mix($color-light-fore, $color-light-back ,50%);
$header-height : 4em;
$footer-height : 2em;
$radius-item : .3em;
$border-size : .1em;
$box-shadow-item-inset : .2em;
$transition-in : .15s;
$transition-out : 1s;
$transition : .5s;

// Common
@function unicode($code){
    @return unquote("\"") + unquote(str-insert($code, "\\", 1)) + unquote("\"");
}

// Styles
.opo-tests{

    position : relative;
    top : 0em;
    left : 0em;
    width : 100%;
    height : 100%;
    overflow : hidden;
    &,input,button{
        font-family : Arial, Helvetica, sans-serif;
        font-size : 1em;
    }

    a[href]{text-decoration : none;}
    a[href],button{
        cursor : pointer;
        transition-duration : $transition-out;
        transition-property : color;
        &:hover{transition-duration : $transition-in;}
    }
    button,input{
        border-width : $border-size;
        border-style : solid;
        border-radius : $radius-item;
    }
    a[href],button,input{outline : none;}
    button{transition-property : color,background-color,border-color,box-shadow;}
    input{
        transition-property : border-color,box-shadow;
        transition-duration : $transition-out;
        &:focus{transition-duration : $transition-in;}
    }

    [data-icon]::before{
        margin-right : .4em;
        font-family : "FA6FS";
    }
    
    [data-visible=false]{display : none;}

    fieldset{
        margin : 1em 0em;
        border : none;
    }
    legend{
        font-weight : 900;
        font-size : 1.2em;
    }

    .form{
        fieldset{
            width : 100%;
            box-sizing : border-box;
        }
        .structure{
            display : table;
            width : 92%;
            max-width : 92%;
            margin-left : 3%;
            table-layout : fixed;
            box-sizing : border-box;
            &>div{
                display : table-row;
                &>*{
                    display : table-cell;
                    padding : .2em .5em;
                    vertical-align : top;
                }
                &>span{max-width : 80%;}
                &>label{width : 20em;}
                &>ul{width : 0em;}
            }
        }
        [data-i]>label{
            text-align : right;
            &>span{
                display : block;
                &:first-child{
                    font-weight : 900;
                    white-space : nowrap;
                    &::after{content : ":";}
                }
                &+span{font-size : .85em;}
            }
        }
        [type=number],[type=text]{width : 100%;}
    }

    .buttons,.group{
        display : block;
        text-align : center;
        &>*{border-radius : 0em;}
        &>:first-child{border-top-left-radius : $radius-item; border-bottom-left-radius : $radius-item;}
        &>:last-child{border-top-right-radius : $radius-item; border-bottom-right-radius : $radius-item;}
    }

    &[data-gui-mode=light]{
        &,input{color : $color-light-fore;}
        background-color : $color-light-back;
        header,footer{box-shadow : 0em 0em 1em $color-light-back;}
        &,input,button{color : $color-light-fore;}
        a,button{
            color : $color-light-primary;
            &:hover{
                color : $color-light-secondary;
            }
        }
        button{
            border-color : $color-light-primary;
            background-color : mix($color-light-back, $color-light-primary, 95%);
            box-shadow : 0em 0em $box-shadow-item-inset inset $color-light-primary;
            &:hover{
                border-color : $color-light-secondary;
                background-color : mix($color-light-back, $color-light-secondary, 95%);
                box-shadow : 0em 0em $box-shadow-item-inset inset $color-light-secondary;
            }
        }
        input{
            color : $color-light-fore;
            border-color : $color-light-fore;
            background-color : mix($color-light-back, $color-light-fore, 90%);
            box-shadow : 0em 0em $box-shadow-item-inset inset $color-light-fore;
            &:focus{
                border-color : $color-light-primary;
                box-shadow : 0em 0em $box-shadow-item-inset inset $color-light-primary;
            }
        }
        .graphic{
            [data-status=unanswered]{background-color : mix($color-light-back, #888, 80%);}
            [data-status=answered]{background-color : mix($color-light-back, #888, 50%);}
            [data-status=right]{background-color : mix($color-light-fore, #0F0, 50%);}
            [data-status=wrong]{background-color : mix($color-light-fore, #F00, 50%);}
            [data-status=partially]{background-color : mix($color-light-fore, #FF0, 50%);}
        }
    }
    &[data-gui-mode=dark]{
        &,input{color : $color-dark-fore;}
        background-color : $color-dark-back;
        header,footer{box-shadow : 0em 0em 1em $color-dark-back;}
        &,input,button{color : $color-dark-fore;}
        a,button{
            color : $color-dark-primary;
            &:hover{
                color : $color-dark-secondary;
            }
        }
        button{
            border-color : $color-dark-primary;
            background-color : mix($color-dark-back, $color-dark-primary, 95%);
            box-shadow : 0em 0em $box-shadow-item-inset inset $color-dark-primary;
            &:hover{
                border-color : $color-dark-secondary;
                background-color : mix($color-dark-back, $color-dark-secondary, 95%);
                box-shadow : 0em 0em $box-shadow-item-inset inset $color-dark-secondary;
            }
        }
        input{
            color : $color-dark-fore;
            border-color : $color-dark-fore;
            background-color : mix($color-dark-back, $color-dark-fore, 90%);
            box-shadow : 0em 0em $box-shadow-item-inset inset $color-dark-fore;
            &:focus{
                border-color : $color-dark-primary;
                box-shadow : 0em 0em $box-shadow-item-inset inset $color-dark-primary;
            }
        }
        .graphic{
            [data-status=unanswered]{background-color : mix($color-dark-back, #888, 80%);}
            [data-status=answered]{background-color : mix($color-dark-back, #888, 50%);}
            [data-status=right]{background-color : mix($color-dark-fore, #0F0, 50%);}
            [data-status=wrong]{background-color : mix($color-dark-fore, #F00, 50%);}
            [data-status=partially]{background-color : mix($color-dark-fore, #FF0, 50%);}
        }
    }

    header,main,footer{
        position : absolute;
        left : 0em;
        width : 100%;
    }
    header{
        display : flex;
        flex-wrap : nowrap;
        align-items : flex-end;
        top : 0em;
        height : $header-height;
        &>*{flex: 0 0 auto;}
    }
    main{
        top : $header-height;
        bottom : $footer-height;
        overflow : auto;
    }
    footer{
        display : flex;
        flex-wrap : nowrap;
        align-items : center;
        bottom : 0em;
        height : $footer-height;
        &>*{flex: 1 1 auto;}
    }
    
    h1{
        font-size : 1em;
        span,img{vertical-align : middle;}
        .image{
            display : inline-block;
            margin : .2em 1em;
        }
        img{
            width : auto;
            height : $header-height - .4em;
        }
        [data-status=loading],[data-status=error]{display : none;}
        span+span{
            margin-left : .2em;
            font-size : $header-height * .6;
            font-weight : 900;
        }
    }

    .header-menu{
        flex : 1 1 0;
        margin-bottom : .3em;
        ul{
            list-style-type : none;
            margin : 0em;
            padding : 0em;
            text-align : center;
        }
        li{
            display : inline-block;
            margin : 0em 1em;
        }
    }

    .licenses{
        display : flex;
        flex-direction : row;
        justify-content : center;
        align-items : center;
        margin : 0em;
        text-align : center;
        &>*{
            flex : 0 0 auto;
            margin : 0em 1em;
        }
    }
    .cc-by-nc-sa-4{
        display : flex;
        align-items : center;
        &>[data-i18n]{flex : 1 1 auto;}
        &>.image{
            margin-left : .3em;
            flex : 0 0 auto;
        }
        img{
            width : auto;
            height : $footer-height * .8;
        }
    }

    .group[data-i18n=search]{
        display : flex;
        flex-direction : row;
        flex-wrap : nowrap;
        &>:first-child::after{content : ": ";}
        &>*{flex : 0 0 auto;}
        &>.input-text{flex : 1 1 auto;}
        [for=show_selected]{
            [data-icon=checkbox]::before{content : unicode("f070");font-family : "FA6FS";}
            [type=checkbox]:checked+[data-icon=checkbox]::before{content : unicode("f06e");font-family : "FA6FS";}
            span+span{display : none;}
        }
    }

    label>[data-i18n='blocks[]']{
        &>:first-child{
            margin-right : .4em;
            &::before{content : "[ ";}
            &::after{content : " ] - ";}
        }
        &>span{
            display : inline-block;
            &[title=undefined]{display : none;}
            &+:not([title=undefined])+span::before{
                content : "-";
                margin : 0em .5em;
            }
        }
    }
    [data-i][data-i18n=blocks]{
        [data-show-selected]{width : 100%;}
        nav{
            width : 100%;
            max-height : 20em;
            overflow : auto;
        }
        ul{
            list-style-type : none;
            li{
                white-space : nowrap;
                text-overflow : ellipsis;
            }
        }
    }

    [data-i18n=test]{font-size : 1.5em;}
    [data-i18n=test_text]{display : none;}
    section,.graphic{
        position : absolute;
        top : 4em;
        bottom : 2em;
    }
    section{
        left : 0em;
        right : 1em;
        overflow : auto;
    }
    .graphic{
        display : flex;
        flex-direction : column;
        right : 0em;
        width : 1em;
        margin : 0em;
        padding : 0em;
        list-style-type : none;
        overflow : hidden;
        li{flex : 1 1 auto;}
    }
    .block-info{
        margin : 0em;
        padding : 0em;
        list-style-type : none;
        font-size : .85em;
        li{
            display : inline;
            &+li::before{content : " - ";}
        }
        strong{
            display : none;
            &::after{content : ": ";}
        }
    }
    .answers{list-style-type : none;}
    [data-show-selected=true] [data-selected=true]{display : list-item;}

    [data-show-rights=false] [data-is-ok]{display : none;}
    [data-show-results=false] [data-right]{display : none;}

    [data-is-ok=true]::before{
        content : " ✔";
        color : green;
    }
    [data-is-ok=false]::before{
        content : " ✖";
        color : red;
    }
    [data-is-ok=null]::before{
        content : " ❓";
        color : orange;
    }

    [data-right=true]::before{
        content : " ✔";
        color : green;
    }
    [data-right=false]::before{
        content : " ✖";
        color : red;
    }
    [data-right=null]::before{
        content : " ❓";
        color : orange;
    }

    [type=checkbox]{
        display : none;
        &+[data-icon=checkbox]::before{content : unicode("f0c8");font-family : "FA6FR";}
        &:checked+[data-icon=checkbox]::before{content : unicode("f14a");font-family : "FA6FR";}
    }
    [type=radio]{
        display : none;
        &+[data-icon=radio]::before{content : unicode("f111");font-family : "FA6FR";}
        &:checked+[data-icon=radio]::before{content : unicode("f192");font-family : "FA6FR";}
    }

    [data-icon=select_all_visible]::before{content : unicode("f0ae");font-family : "FA6FS";}
    [data-icon=unselect_all_visible]::before{content : unicode("f03a");font-family : "FA6FS";}
    [data-icon=home]::before{content : unicode("f015");font-family : "FA6FS";}
    [data-icon=git]::before{content : unicode("f841");font-family : "FA6FB";}
    [data-icon=clean]::before{content : unicode("f51a");font-family : "FA6FS";}
    [data-icon=submit]::before{content : unicode("f1d8");font-family : "FA6FS";}
    [data-icon=search]::before{content : unicode("f002");font-family : "FA6FS";}

}