%menu-toggle {
    position: relative;
    padding: 0;
    &:before {
        content: "";
        position: absolute;
        top: 8px;
        height: 5px;
        border-top: 15px double #ddd;
        border-bottom: 5px solid #ddd;
    }
}

#no-menu {
    @include size(width, $W_NONUMBERS_TINY);

    @include min-screen($S_NONUMBERS_TINY_MAX) {
        @include size(width, $W_NONUMBERS);
    }

    @include min-screen($S_NUMBERS) {
        @include size(width, 44px);
    }

    /* Button for showing menu */
    #menu-toggle-on {
        @extend %menu-toggle;
        display: block;
        background: #191919;
        color: #ddd;
        text-align: center;
        z-index: 100;
        @include size(height, 44px);
        padding: 0;

        &:before {
            left: 5px;
            right: 5px;
            @include min-screen(240px) {
                left: 8px;
                right: 8px;
            }
        }
    }
}

#menu-toggle-off {
    @extend %menu-toggle;
    height: 24px;
    &:before {
        left: 45px;
        right: 45px;
    }
}


#menu {
    display: none;
    width: $W_MENU;
    height: 100%;
}

#menu, #no-menu {
    z-index: 101;
    position: fixed;
    top: 0;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: center;
    line-height: 1.1em;
    background: #191919;
    color: #ddd;

    ul {
        list-style: none;
        margin: 0;
        padding: 0;

        li {

            a {
                padding: 10px 0;
                color: white;
                display: block;
                text-decoration: none;

                &.active {
                    background: white;
                    color: black;
                }

                .label {
                    display: block;
                    font-size: 12px;
                }
            }
        }

    }
}

/* body class for showing menu */
.menu-showed {
    #menu {
        display: block;
    }
    #no-menu {
        display: none;
    }
}

/* menu showing by default */
@include min-screen($S_MENU) {
    #menu {
        display: block;
    }
    #no-menu {
        display: none;
    }
    /* body class for hiding menu */
    .menu-hidden {
        #menu {
            display: none;
        }
        #no-menu {
            display: block;
        }
    }
}