//==============================================================================
// KANNABIS CANVAS MENU
//==============================================================================
nav.yolo-canvas-menu-wrapper {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 100%;
    bottom: 0;
    width: 460px;
    transform: translateX(0);
    overflow: hidden;
    .transition (all .6s cubic-bezier(.77, 0, .175, 1));
    background-color: @white;
    padding: 140px 70px 35px;


    &.in {
        .transform(translateX(-100%));
        box-shadow: 0 8px 20px 0 rgba(0, 0, 0, .1);
        overflow-y: auto;
    }

    .yolo-canvas-menu-close {
        position: absolute;
        top: 40px;
        right: 35px;
        cursor: pointer;
        color: var(--heading_color);

        .yolo-m-line {
            position: absolute;
            right: 0;
            height: 1px;
            width: 100%;
            background-color: currentColor;
            -webkit-transition: top .3s ease, -webkit-transform .3s ease;
            transition: top .3s ease, -webkit-transform .3s ease;
            -o-transition: top .3s ease, transform .3s ease;
            transition: top .3s ease, transform .3s ease;
            transition: top .3s ease, transform .3s ease, -webkit-transform .3s ease;

            &.yolo--1 {
                width: 26px;
                top: 11px;
                -webkit-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
            }

            &.yolo--2 {
                width: 26px;
                top: 11px;
                -webkit-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                transform: rotate(-45deg);
            }

        }

        .yolo-m-lines {
            position: relative;
            display: block;
            width: 40px;
            height: 23px;


        }

    }

    aside.widget {
        background-color: transparent;
        margin-top: 0;
        margin-bottom: 55px;

        img {
            margin: 0;
        }

        p {
            margin-top: 0;
            margin-bottom: 0;
        }

        .widget-title {
            margin: 0;
            margin-bottom: 20px;

            span {
                padding: 0;
                margin-bottom: 0;

                &:before {
                    content: none;
                }
            }


        }

    }

}

body.admin-bar nav.yolo-canvas-menu-wrapper {
    top: 32px;
}

.canvas-menu-toggle-wrapper {
    margin-right: 10px;
}