@import "../settings/_mixins";
@import "../settings/_variables";

.dnetor-canvas-menu{
    .dnetor-canvas-menu-icon{
        cursor: pointer;
        width: 24px;
        height: 24px;
        position: relative;
        margin-left: 20px;
        &.on{
            span{
                background-color: transparent;
                &:before,
                &:after{
                    top: 0;
                    @include transition(all .3s);
                }
                &:before{
                    @include transform(rotate3d(0, 0, 1, 45deg));
                }
                &:after{
                    @include transform(rotate3d(0, 0, 1, -45deg));
                }
            }
        }
        span{
            @include transition(all .3s);
            bottom: 0;
            display: block;
            height: 2px;
            left: 2px;
            right: 0;
            margin: auto;
            position: absolute;
            top: 0;
            background-color: currentColor;
            &:before,
            &:after{
                content: "";
                height: 2px;
                left: 0;
                margin: auto;
                position: absolute;
                right: 0;
                @include transition(all .3s);
                @include transform-origin(50% 50%);
                background-color: currentColor;
            }
            &:before{
                top: 8px;
            }
            &:after{
                top: -8px;
            }
        }
    }
    .dnetor-canvas-menu-form{
        .bg-overlay{
            display: none;
            position: fixed;
            z-index: 9;
        }
        .menu-item-has-children > a .angle-down{
            &:before {
                content: "\f107";
                font-family: 'Font Awesome 5 Pro';
                padding-left: 10px;
            }
        }
    }

    .dnetor-menu-canvas-content{
        background-color: #fff;
        position: fixed;
        width: 300px;
        top: 0;
        left: 0;
        bottom: 0;
        overflow: auto;
        @include d-flex();
        @include flex-column();
        @include transform(translateX(-300px));
        z-index: 9;
        &.active{
            @include transform(translateX(0));
            @include transition(transform .5s);
        }
        .menu-top{
            @include d-flex();
            @include align-items-center();
            @include justify-content-between();
            padding: 15px 30px;
            border-bottom: 1px solid #eee;
            margin-bottom: 15px;
            i{
                font-size: 22px;
                font-weight: 400;
            }
        }
        ul.menu{
            padding-left: 30px;
            padding-right: 30px;
            @include transition(transform .3s);
            li{
                + li{
                    margin-top: 15px;
                }
                a{
                    font-weight: 500;
                    color: #111;
                    display: inline-block;
                }
            }
        }
        li{
            list-style: none;
            display: block;
        }
        .sub-menu{
            padding-left: 15px;
            margin-top: 15px;
            display: none;
        }
    }
}



body.admin-bar{
    .dnetor-canvas-menu .dnetor-menu-canvas-content{
        padding-top: 46px;
    }
}