@import "var";

.gm-page.layout-main{
    $mainmenuWidth: 50px;
    width: 100%;
    >.mainmenu{
        @include gm-inline;
        overflow-y: auto;
        background-color: #fff;
        -webkit-box-shadow: 2px 0 10px 0 rgba(0,0,0,0.3);
        width: $mainmenuWidth;
        height: 100vh;
        box-shadow: 2px 0 10px 0 rgba(0,0,0,0.3);
        position: fixed;
        z-index: 10;
        left: 0;
        top: 0;
        transition: width ease-in 130ms;
        &:hover{
            width: 200px;
            transition: width ease-out 200ms;
        }
        >.icon{
            @include gm-inline;
            position: relative;
            float: left;
            width: 100%;
            height: $mainmenuWidth;
            >i{
                @include gm-inline;
                @include sizem($mainmenuWidth);
                float:left;
                position: relative;
                &::after{
                    @include gm-inline;
                    @include positionm(50%);
                    content: '';
                    position: absolute;
                    transform: translate(-50%, -50%);
                    font:25px MaterialDesignIcons;
                    color:$colorC1;
                }
            }
            >span{
                @include gm-inline;
                float: left;
                position: absolute;
                top:50%;
                transform: translateY(-50%);
                font:14px Arial;
                color:$colorC1;
                margin-left: 8px;
            }
            &:hover{
                background-color: #eee;
                >span{
                    font-weight: bold;
                }
                transition: all ease-out 200ms;
            }
            &.selected::before{
                @include gm-inline;
                content:'';
                float: left;
                width: 3px;
                height: 100%;
                background-color: $colorC1;
                position: absolute;
                z-index: 1;
                left: 0;
            }
            &.menu i::after{content: '\F035C';}
            &.dashboard i::after{content: '\F02DC';}
            &.contact i::after{content: '\F05B8';}
            &.content i::after{content: '\F1577';}
            &.backup i::after{content: '\F006F';}
            &.page i::after{content: '\F018F';}
            &.logout i::after{content: '\F0343';}
            &.post i::after{content: '\F1008';}
            &.member i::after{content: '\F000E';}
            &.order i::after{content: '\F0545';}
            &.translator i::after{content: '\F0E55';}
            &.users i::after{content: '\F088F';}
            &.category i::after{content: '\F0831';}
            &.product i::after{content: '\F0637';}
            &.store i::after{content: '\F10C1';}
            &.koolis i::after{content: '\F0FB2';}
        }
    }
    >.main-rc{
        @include gm-inline;
        background-color: #ececec;
        background-image: var(--bg);
        background-size: cover;
        float: left;
        position: relative;
        top:0;
        left:$mainmenuWidth;
        width: calc(100% - #{$mainmenuWidth});
        height: 100%;
        >.top-bar{
            @include gm-inline;
            float:left;
            background: rgb(47,49,62);
            background: linear-gradient(90deg, rgba(47,49,62,0.9) 0%, rgba(105,110,145,0.8) 100%);
            width: 100%;
            height: 140px;
            color:#fff;
            box-sizing: border-box;
            *{color:inherit;}
            >h2{
                @include gm-inline;
                float:left;
                font:1.2em Arial;
                margin:22px 0 0 30px;
            }
            >.ctrl{
                @include gm-inline;
                float:right;
                font:0.8em Arial;
                margin:20px 30px 0 0;
            }
        }
        >.maincontent{
            @include gm-inline;
            float: left;
            width: calc(100% - 40px);
            min-height: calc(100vh - 90px);
            margin:-70px 20px 20px 20px;
            border-radius: 5px;
            background-color: rgba(255, 255, 255, 0.97);
            box-sizing: border-box;
            padding:25px;
            -webkit-box-shadow: 0 0 12px 1px rgba(0,0,0,0.36);
            box-shadow: 0 0 12px 1px rgba(0,0,0,0.36);

        }
    }
}

#maincontent{
    >.message,
    >.toolbar,
    >.filterbar,
    >#mainform{
        @include gm-inline;
        float: left;
        width: 100%;
    }
}