
$sidenav-font-size: 14px !default;
$sidenav-font-color: rgba(0,0,0,.87) !default;
$sidenav-bg-color: #fff !default;
$sidenav-padding: 16px !default;
$sidenav-item-height: 48px !default;
$sidenav-line-height: $sidenav-item-height !default;

.sidenav-back {
    position: fixed;
    visibility: hidden;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;

    height: 120vh;
    background-color: rgba(0,0,0,.5);
    z-index: 10001;
    @include tr(all 0.30s ease-out);;

    will-change: opacity;
    &.active {
        opacity: 1;
        visibility: visible;
    }
}

.sidenav-layout {
    margin-left: 250px; 
    @include tablet-and-down {
        margin-left: 0px; 

    }  
}

.sidenav {
    
    position: fixed;
    width: 250px;
    left: 0;
    top: 0;
    margin: 0;
    height: 100%;
    // height: calc(100% + 60px);
    // height: -moz-calc(100%); //Temporary Firefox Fix
    padding-bottom: 60px;
    background-color: #f5f5f5;
    z-index: 10002;
    overflow-y: auto;
    will-change: transform;
    backface-visibility: hidden;
    @include tf(translateX(0%));
    @include tr(all 0.30s ease-out);;
    @include bs(0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2));;


    @include tablet-and-down {
        transform: translateX(-105%);
        &.relative {
            transform: translateX(0%);
        }
        a {
            padding: 0 $sidenav-padding;
        }
    }

    &.relative {
        position: relative;
        width: 100%;
    }

    &.collapsed {
        @include tf(translateX(-105%));
    }

    &.active {
        transform: translateX(0%);
    }

    li {
        float: none;
        line-height: $sidenav-line-height;
        position: relative;

        &.active { background-color: rgba(0,0,0,.05); }
        &.disabled { opacity: 0.5; }
        &.forbidden { 
            opacity: 0.5;
            &:before {
                content: 'x';
                color: $error-color;
                position: absolute;
                right: 15px;
                top: 11px;
                line-height: 22px;
                font-size: 22px;
                font-weight: bold;
                z-index: 2;
            }
        }
        > ul {
            background: $primary-color;
            padding-left: 15px;
        } 
        // ul ~ a {
            
        //     &:after {
        //         @extend .icon;
        //         content: "keyboard_arrow_right";
        //         float: right;
        //     }
        // }

        > a {
            color: $sidenav-font-color;
            display: block;
            font-size: $sidenav-font-size;
            font-weight: 500;
            height: $sidenav-item-height;
            line-height: $sidenav-line-height;
            padding: 0 15px 0 15px;
            background-color: #f5f5f5;

            &:hover, 
            &.active {
                background-color: $secondary-color;
                color: $primary-color;
                font-weight: bold;
                & > i.icon {
                    color:  $primary-color;
                }
                // @extend .pulse1;
            }
            &.active {
                & > i.icon {
                    &.sub {
                        @include tf(rotate(90deg));
                    }
                }
            }

            & > i.icon {
                @include tr(all .25s);
                float: left;
                height: 48px;
                line-height: 48px;
                margin: 0 5px 0 0;
                width: $sidenav-item-height / 2;
                color: rgba(0,0,0,.54);
                &.sub {
                    float: right;
                }
            }
            
            &.ellipsis {
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }

            .counter {
                position: absolute;
                top: 9px;
                right: 15px;
                z-index: 1;
                text-align: center;
                display: block;
                padding: 3px;
                border-radius: 7px;

                border-radius: 3px;
                display: block;
                min-width: 30px; 
                height: 30px;
                text-align: center;
                line-height: 22px;
                font-size: 15px;
                font-weight: bold;
                color: white !important;
                background: $primary-color;
                .icon { vertical-align: bottom; }
                &.danger {
                    background: $error-color;
                }
                &.quiet {
                    color: $primary-color !important;
                    background: $secondary-color;
                }
                &.small {
                    font-size: 11px;
                    line-height: 15px;
                    min-width: 20px; 
                    height: 20px;
                }
            }

            &:not(.active) + ul {
                height: 0px;
                overflow: hidden;
            }
        }
    }


    .divider {
        margin: 8px 0 8px 0;
    }

    .subheader {
        &:hover {
            background-color: transparent;
        }

        cursor: initial;
        pointer-events: none;
        color: $primary-color;
        font-size: $sidenav-font-size;
        font-weight: 500;
        line-height: $sidenav-line-height;
    }

    // .brand {
    //     position: relative;
    //     height: 100px;
    //     margin-bottom: $sidenav-padding / 2;
    //     // background: $secondary-color url("/static/img/valdys.png") center center no-repeat;
    //     background-size: contain;
    //     // img {
    //     //     @extend .circle;
    //     //     @include bs(0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2));;
    //     //     margin-left: 32px;
    //     //     height: 64px;
    //     //     width: 64px;
    //     //     display: block;
    //     // }
    // }
    // .name {
    //     display: block;
    //     padding: 16px;
    //     background: rgba(255,255,255,0.5);
    //     font-size: 13px;
    //     line-height: 16px;
    //     text-overflow: ellipsis;
    // }
}
// body.has-sidenav {
//     #layout {
//         @include blur();
//     }
// }

// Fixed sideNav hide on smaller