@mixin main_color_web($mode){
    background-color : map-deep-get($color, $mode, "back");
    color : map-deep-get($color, $mode, fore);
    &,button,input,select,textarea{color : map-deep-get($color, $mode, fore);}
    button,input,select,textarea{background-color : map-deep-get($color, $mode, input-back);}
    [role=link],[data-role=link],a[href]{
        // &[disabled]{color : map-deep-get($color, grey);}
        &[readonly]{color : map-deep-get($color, $mode, fore);}
        &:not([disabled],[readonly]){
            color : map-deep-get($color, $mode, primary);
            &:hover{color : map-deep-get($color, $mode, secondary);}
        }
    }
    .checkbox,.radio-button{&:not([data-disabled]){
        color : mix(map-deep-get($color, $mode, fore), map-deep-get($color, $mode, primary), 50%);
        &:hover>[type=checkbox]~span{
            color : mix(map-deep-get($color, $mode, fore), map-deep-get($color, $mode, secondary), 50%);
        }
        &[data-readonly]{color : map-deep-get($color, $mode, fore);}
    }}
    [role=button],[data-role=button],button,[type=button],[type=submit],[type=reset]{
        // &[disabled]{
        //     border-color : map-deep-get($color, grey);
        //     color : map-deep-get($color, grey);
        //     box-shadow : 0em 0em .4em inset map-deep-get($color, grey);
        // }
        &[readonly]{
            border-color : map-deep-get($color, $mode, fore);
            color : map-deep-get($color, $mode, fore);
            box-shadow : 0em 0em .4em inset map-deep-get($color, grey);
        }
        &:not([disabled],[readonly]){
            border-color : map-deep-get($color, $mode, primary);
            color : mix(map-deep-get($color, $mode, primary), map-deep-get($color, $mode, fore), 50%);
            box-shadow : 0em 0em .4em inset map-deep-get($color, $mode, primary);
            &:hover{
                border-color : map-deep-get($color, $mode, secondary);
                color : mix(map-deep-get($color, $mode, secondary), map-deep-get($color, $mode, fore), 50%);
                box-shadow : 0em 0em .4em inset map-deep-get($color, $mode, secondary);
            }
        }
    }
    textarea,[type=text],[type=number],[type=date],[type=password]{&:not([disabled]){
        border-color : mix(map-deep-get($color, $mode, fore), map-deep-get($color, $mode, primary), 50%);
        &:focus,&:hover{border-color : mix(map-deep-get($color, $mode, fore), map-deep-get($color, $mode, secondary), 50%);}
        &[readonly]{border-color : map-deep-get($color, $mode, fore);}
    }}
    header,footer{box-shadow : 
        0em 0em 1em map-deep-get($color, $mode, back), 
        0em 0em 1.25em map-deep-get($color, $mode, back), 
        0em 0em 1.5em map-deep-get($color, $mode, back), 
        0em 0em 2em map-deep-get($color, $mode, back);
    }
}

@mixin main_web($reverse:false){

    position : relative;
    top : 0em;
    left : 0em;
    width : 100%;
    height : 100%;
    overflow : hidden;

    &,button,input,select{font-family : $font-normal;}
    textarea,pre{font-family : $font-mono;}
    button,input,select,textarea{font-size : 1em;}
    [data-icon]::before{
        margin-right : .4em;
        font-family : $font-icon;
    }

    .checkbox,.radio-button{input{display : none;}}

    a[href]{text-decoration : none;}
    [role=link],[data-role=link],a[href],
    [role=button],[data-role=button],button,[type=button],[type=submit],[type=reset]{
        &:not([disabled],[readonly]){
            cursor : pointer;
            transition-duration : $transition-out;
            transition-property : color;
            &:hover{transition-duration : $transition-in;}
        }
        &[disabled]{color : map-deep-get($color, grey);}
    }
    .checkbox,.radio-button{
        &>input:not([disabled],[readonly]){&~span{
            cursor : pointer;
            transition-duration : $transition-out;
            transition-property : color;
        }}
        &:hover>input:not([disabled],[readonly]){&~span{
            transition-duration : $transition-in;
        }}
        &>input[disabled]{color : map-deep-get($color, grey);}
    }
    &.anp{
        [role=link],[data-role=link],a[href],
        [role=button],[data-role=button],button,[type=button],[type=submit],[type=reset]{
            &[disabled]{color : map-deep-get($color, grey);}
        }
    }
    textarea,[type=text],[type=number],[type=date],[type=password]{&:not([disabled],[readonly]){
        transition-duration : $transition-out;
        transition-property : color,border-color;
        &:focus{
            outline : none;
            transition-duration : $transition-in;
        }
    }}
    [role=button],[data-role=button],
    button,[type=button],[type=submit],[type=reset],
    textarea,[type=text],[type=number],[type=date],[type=password]{
        padding : .1em .4em;
        border-width : .1em;
        color : map-deep-get($color, grey);
        border-style : solid;
        border-color : map-deep-get($color, grey);
        border-radius : $border-radius;
        box-shadow : 0em 0em .4em inset map-deep-get($color, grey);
    }
    button,[type=button],[type=submit],[type=reset]{&:not([disabled],[readonly]){
        transition-property : color,border-color,background-color,box-shadow;
    }}

    textarea,select,[type=text],[type=number],[type=date],[type=password]{
        width : 100%;
        box-sizing : border-box;
    }

    .group{
        &>*{&,&>*{border-radius : 0em;}}
        &>:first-child{&,&>:first-child{border-radius : $border-radius 0em 0em $border-radius;}}
        &>:last-child{&,&>:last-child{border-radius : 0em $border-radius $border-radius 0em;}}
    }
    .buttons{
        width : 100%;
        text-align : center;
    }

    [data-visible=false]{display : none;}

    header,main,footer{
        position : absolute;
        left : 0em;
        width : 100%;
    }

    header{
        top : 0em;
        height : $header-height;
        z-index : 20;
        overflow : visible;
    }

    main{
        top : $header-height;
        bottom : $footer-height;
        z-index : 10;
        overflow : auto;
    }

    footer{
        display : flex;
        flex-direction : row;
        justify-items : center;
        bottom : 0em;
        height : $footer-height;
        z-index : 30;
        overflow : visible;
    }

    @each $key, $option in (dark : true, light : false){
        &[data-gui-mode=#{$key}],&[data-gui-mode=default][data-dark-mode=#{$option}]{
            @include main_color_web($key);
        }
    }
    &[data-gui-mode=light],&[data-gui-mode=default][data-dark-mode=false]{header>h1{
        [data-type=dark]{opacity : 0;}
        [data-type=light]{opacity : 1;}
    }}
    &[data-gui-mode=dark],&[data-gui-mode=default][data-dark-mode=true]{header>h1{
        [data-type=dark]{opacity : 1;}
        [data-type=light]{opacity : 0;}
    }}

    h1{
        margin : .2em .5em;
        padding : 0em;
        font-size : 1em;
        font-weight : 900;
        img{
            width : auto;
            height : 3.6em;
            &+span{display : none;}
        }
        a>span{vertical-align : middle;}
        &,.image{
            display : inline-block;
            position : relative;
            transition-duration : $transition;
            transition-property : opacity;
            &+.image{
                position : absolute;
                top : 0em;
                left : 0em;
            }
        }
        .text{
            margin-left : .2em;
            font-size : 3.6em;
        }
    }

    .main-menu{
        padding-bottom : .4em;
        vertical-align : bottom;
        &,ul,li{display : inline-block;}
        ul{
            margin : 0em;
            padding : 0em;
            list-style-type : none;
        }
        li{margin : 0em 1em;}
    }

    .licenses{
        display : flex;
        flex-direction : row;
        justify-items : center;
        align-items : center;
        width : 100%;
        font-weight : 100;
        text-align : center;
        img{
            width : auto;
            height : 1.8em;
        }
        &>span{
            margin : 0em .3em;
            vertical-align : middle;
        }
        .text{font-size : .7em;}
    }
    .copyright{font-size : .7em;}

    .cc-by-nc-sa-4,.gplv3{
        display : flex;
        flex-direction : row;
        justify-items : center;
        align-items : center;
        &>span{margin : 0em .3em;}
    }

    .gui-controls{
        margin : .2em .5em;
        padding : 0em;
        border : none;
        white-space : nowrap;
        font-size : .85em;
        &>*{&,&>*{border-radius : 0em;}}
        &{&>[data-i18n=less_zoom],.input-number,&>[data-i18n=more_zoom],&>[data-i18n=reset_zoom]{display : none;}}
        button[data-i18n=zoom_mode]{&,&>:first-child{border-radius : $border-radius 0em 0em $border-radius;}}
        &>:last-child{&,&>:last-child{border-radius : 0em $border-radius $border-radius 0em;}}
        legend{display : none;}
        [data-icon]{
            &::before{margin : 0em;}
            &+[data-i18n]{display : none;}
        };
    }

    .wmd-main-menu-button{
        position : absolute;
        bottom : 0em;
        right : 0em;
    }

    form.form{
        display : block;
        position : relative;
        &>fieldset{
            border : none;
            &>legend{
                font-size : 1.5em;
                font-weight : 900;
            }
        }
        .structure{
            display : table;
            width : 100%;
            box-sizing : border-box;
            &>div{
                display : table-row;
                &>*{
                    display : table-cell;
                    padding : 1em .3em;
                }
                &>:first-child{
                    padding-left : 1em;
                    width  :30%;
                    min-width : 30%;
                    max-width : 50%;
                    text-align : right;
                    span{display : block;}
                    &>:first-child{
                        font-weight : 900;
                        &::after{content : ":";}
                    }
                    &>:last-child{font-size : .85em;}
                }
                &>:nth-child(2){width : 100%;}
                &>:last-child{
                    padding-right : 1em;
                }
            }
        }
    }

}