/* Le menu principal */

.sideBar(@backgroundcolor1, @backgroundcolor2, @backgroundcolor3, @fontcolor1, @fontcolor2, @fontcolor3){
    .page-sidebar {
        .menu-items li.active > .icon-thumbnail {
            background-color: @backgroundcolor3 !important;
        }
    }
    &.sidebar-hover {
            .menu-items li.active > .icon-thumbnail {
                background-color: transparent !important;
            }
        }
    #sub-sidebar{
        ul.main-menu{
            li .title {
                color:@fontcolor2;
            }
            li.active > a{
                color: @fontcolor3;
            }
            li.active > a > .title{
                color: @fontcolor3;
                &:hover{
                    color: @fontcolor3;
                    text-decoration: underline;
                }
            }
            li:not(.active) > a:hover{
                color:@fontcolor2;
            }
            li:not(.active) > a{
                color:@fontcolor2;
            }
            li a:hover > .title{
                color:@fontcolor2;
            }
        }
        h3 {
            color:@fontcolor2;
        }
    }
    .page-sidebar{
        li span.menu-label{
            border-bottom: solid thin @fontcolor1;
            color:@fontcolor1;
        }
        span.right-caret {
            color:@fontcolor1;
        }
        .sidebar-menu {
            background-color: @backgroundcolor1;
            .assistance {
                .assistance-text{
                    color:@fontcolor1;
                    a {
                        color:@fontcolor3;
                    }
                }
            }
            .menu-items {
                .dont-change-background-color {
                    background-color: @backgroundcolor1 !important;

                }

                > li ul.sub-menu {
                    background-color: @backgroundcolor2 !important;
                }

                > li > span.icon-thumbnail {
                    color:@fontcolor1;
                }
                > li.active > span.icon-thumbnail, > li.active > a, > li.open > span.icon-thumbnail, > li.open > a{
                    color: @fontcolor3 !important;
                    .arrow{
                        color: @fontcolor3 !important;
                    }
                }

                li > a{
                    color:@fontcolor1;
                    .arrow{
                        color: @fontcolor1;
                    }
                }
            }

        }
    }
    .page-content-wrapper {
        .content {
            nav#sub-sidebar:not(.mobile) {
                background-color: @backgroundcolor3 !important;
            }
        }
    }

    //Gestion mobile
    @media (max-width: 991px){
        #appMenu{
            background-color: @backgroundcolor2 !important;
        }
    }
    &.mobile{
        .page-sidebar {
            .sidebar-menu .menu-items li.open > .icon-thumbnail,
            .sidebar-menu .menu-items li.active > .icon-thumbnail {
                color: @fontcolor2 !important;
                background-color: transparent !important;
                /*font-weight: bold;*/
            }
            .sidebar-menu .menu-items li > a .title{
                color: @fontcolor1 !important;
            }
            .sidebar-menu .menu-items li.open > a .title{
                color: @fontcolor2 !important;
            }
            .sidebar-menu .menu-items li.active > a .title{
                color: @fontcolor2 !important;
            }

            .sidebar-menu .menu-items li:hover a {
                color: @fontcolor1 !important;
            }
            .sidebar-menu .menu-items li:hover  a,
                .sidebar-menu .menu-items li.open  a,
                .sidebar-menu .menu-items li.active a {
                color: @fontcolor2 !important;
                /*font-weight: bold;*/
            }

            .sidebar-menu .menu-items li:hover > span.right-caret,
                .sidebar-menu .menu-items li.open > span.right-caret,
                .sidebar-menu .menu-items li.active > span.right-caret {
                color: @fontcolor2 !important;
                /*font-weight: bold;*/
            }

            .sidebar-menu .menu-items > li:hover > span.icon-thumbnail{
                color: @fontcolor1 !important;
            }
            .sidebar-menu .menu-items > li.active > span.icon-thumbnail{
                color: @fontcolor2 !important;
            }
            .sidebar-menu .menu-items > li.open > span.icon-thumbnail{
                color: @fontcolor2 !important;
            }

            .sidebar-menu .menu-items > li > ul.sub-menu > li:hover .icon-thumbnail,
                a:hover, li.active, li:hover
                > span.right-caret {
                color: @fontcolor2 !important;
            }

            .sidebar-menu {
                .menu-items > li {
                    > a {
                        > .arrow {
                            color: @fontcolor1 !important;
                        }
                    }
                }
                .menu-items > li.open, .menu-items > li.active {
                    > a {
                        > .arrow {
                            color: @fontcolor2 !important;
                        }
                    }
                }

                .menu-items li {
                    &.active.child span.icon-thumbnail,
                    &.active:not(.child) ul.sub-menu li.active span.icon-thumbnail {
                        color: @fontcolor2 !important;
                    }
                }
            }
        }
    }
}

.helpPanelColorSet(@leftMenuBackgroundColor, @leftMenuColor,
@leftMenuBackgroundHoverColor, @leftMenuHoverColor, @containerBackgroundColor,
@closeDivBackgroundColor, @closeDivColor){

    #templateHeader{
        #helpPanel{
            //#helpPanelToggle{
            //    background-color: @closeDivBackgroundColor;
            //    color: @closeDivColor;
            //}

            .tabs-left{
                background-color: @containerBackgroundColor;

                &> .nav-tabs{
                    background-color: @leftMenuBackgroundColor;
                    &> li{
                        &> a{
                            color: @leftMenuColor;
                            &:hover{
                                background-color: @leftMenuBackgroundHoverColor;
                                color: @leftMenuHoverColor;
                            }
                        }
                        &.active a{
                            background-color: @leftMenuBackgroundHoverColor;
                            color: @leftMenuHoverColor;
                        }
                    }
                }
            }
        }
    }
}


/* Gestion des couleurs  du header*/
.headerColors(@backgroundColorHover, @fontColorHover, @isCotePro){
    #templateHeader{
        .company-container{
            &.open{
                background: @backgroundColorHover;
                color: @fontColorHover;
            }
        }

        .service-container when (@isCotePro = false){
            display: none;
        }

        #notification-container{
            .icon-block{
                &.open{
                    background-color: @backgroundColorHover;
                    .top-header-icon{
                        color: @fontColorHover;
                    }
                }
            }
        }
    }
}