// 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,[role=button]{
        font-family : Arial, Helvetica, sans-serif;
        font-size : 1em;
    }

    a[href]{text-decoration : none;}
    a[href],button,[role=button]{
        cursor : pointer;
        transition-duration : $transition-out;
        transition-property : color;
        &:hover{transition-duration : $transition-in;}
    }
    button,input,[role=button]{
        border-width : $border-size;
        border-style : solid;
        border-radius : $radius-item;
    }
    a[href],button,[role=button],input{outline : none;}
    button,[role=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;
    }

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

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

    &[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,[role=button]{color : $color-light-fore;}
        a,button,[role=button]{
            color : $color-light-primary;
            &:hover{
                color : $color-light-secondary;
            }
        }
        button,[role=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,.group>label:not([role=button]){
            color : $color-light-fore;
            border-color : $color-light-fore;
            background-color : mix($color-light-back, $color-light-fore, 90%);
        }
        input{
            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%);}
        }
        .test-info{
            li[data-i18n=number]{color : mix($color-light-back, #888, 50%);}
            li[data-i18n=unanswered]{color : mix($color-light-back, #888, 25%);}
            li[data-i18n=rights]{color : mix($color-light-fore, #0F0, 50%);}
            li[data-i18n=wrongs]{color : mix($color-light-fore, #F00, 50%);}
            li[data-i18n=partially]{color : mix($color-light-fore, #FF0, 50%);}
        }
        .form-errors,.errors{color : mix($color-light-fore, #F00, 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,[role=button]{color : $color-dark-fore;}
        a,button,[role=button]{
            color : $color-dark-primary;
            &:hover{
                color : $color-dark-secondary;
            }
        }
        button,[role=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,.group>label:not([role=button]){
            color : $color-dark-fore;
            border-color : $color-dark-fore;
            background-color : mix($color-dark-back, $color-dark-fore, 90%);
        }
        input{
            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%);}
        }
        .test-info{
            li[data-i18n=number]{color : mix($color-dark-back, #888, 50%);}
            li[data-i18n=unanswered]{color : mix($color-dark-back, #888, 25%);}
            li[data-i18n=rights]{color : mix($color-dark-fore, #0F0, 50%);}
            li[data-i18n=wrongs]{color : mix($color-dark-fore, #F00, 50%);}
            li[data-i18n=partially]{color : mix($color-dark-fore, #FF0, 50%);}
        }
        .form-errors,.errors{color : mix($color-dark-fore, #F00, 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;
        font-size : .8em;
        &>*{
            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;}
        &>:first-child,&>:last-child{
            border-width : $border-size;
            border-style : solid;
            border-radius : $radius-item;
        }
        [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;}
        }
        [data-icon]{
            &::before{margin : 0em .3em;}
            &+[data-i18n]{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;
        opacity : .7;
        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-fixed=false]{
        &[data-show-rights=false] [data-is-ok]{display : none;}
        &[data-show-results=false] [data-right]{display : none;}
        button[data-i18n=restart]{&,&:hover{
            background-color : mix($color-light-back, $color-grey, 80%);
            color : $color-grey;
            border-color : $color-grey;
            box-shadow : 0em 0em $box-shadow-item-inset inset $color-grey;
        }}
    }
    [data-fixed=true] button[data-i18n=fix]{&,&:hover{
        background-color : mix($color-light-back, $color-grey, 80%);
        color : $color-grey;
        border-color : $color-grey;
        box-shadow : 0em 0em $box-shadow-item-inset inset $color-grey;
    }}
    [data-fixed=true],[data-lock-mode=true]{button{
        &[data-i18n=change_results_mode],
        &[data-i18n=change_rights_mode]{&,&:hover{
            background-color : mix($color-light-back, $color-grey, 80%);
            color : $color-grey;
            border-color : $color-grey;
            box-shadow : 0em 0em $box-shadow-item-inset inset $color-grey;
        }}
    }}

    .test-info{
        position : absolute;
        top : 0em;
        left : 7em;
        right : 0em;
        margin : 0em;
        padding : 0em;
        text-align : center;
        list-style-type : none;
        font-size : 1em;
        li{
            display : inline-block;
            margin : 0em 1em;
            &[data-i18n=marks]{
                font-weight : 900;
                font-size : 1.2em;
            }
        }
        strong::after{content : ": ";}
        .maximum{
            opacity : .5;
            &::before{content : " / ";}
        }
        .relative{
            opacity : .5;
            &::before{content : " - ";}
        }
    }

    .test-form{
        .buttons{
            position : absolute;
            left : 0em;
            bottom : 0em;
            width : 100%;
            text-align : center;
            [data-icon]{
                &::before{margin : 0em .3em;}
                &+[data-i18n]{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";}
    [data-show-rights=false] [data-icon=change_rights_mode]::before{content : unicode("f03a");font-family : "FA6FS";}
    [data-show-rights=true] [data-icon=change_rights_mode]::before{content : unicode("f0ae");font-family : "FA6FS";}
    [data-show-results=false] [data-icon=change_results_mode]::before{content : unicode("e075");font-family : "FA6FS";}
    [data-show-results=true] [data-icon=change_results_mode]::before{content : unicode("f05b");font-family : "FA6FS";}
    [data-icon=fix]::before{content : unicode("f681");font-family : "FA6FS";}
    [data-icon=restart]::before{content : unicode("f0e2");font-family : "FA6FS";}
    [data-icon=do_other_test]::before{content : unicode("f2f5");font-family : "FA6FS";}

}