<input type="checkbox" id="o-header-status" class="menu-status d-none jq_menu_status">

<header class="... menu-for-open">
	<label for="o-header-status" class="m-hamburger m-hamburger--border" style="display: block; text-align: left">
		<span class="m-hamburger__title">MENU</span>
		<span class="m-hamburger__icon"></span>
	</label>
</header>

$menu-status: '.menu-status:not(:disabled):checked + .menu-for-open' !global;

.m-hamburger {

    cursor: pointer;
    display: inline-block;
    position: relative;
    text-align: right;
    z-index: 10;

    &__icon {

        background: transparent;
        background-clip: padding-box;
        border-color: transparent;
        border-style: solid;
        border-width: em(19px 10px, 40px);
        box-shadow: inset em(0 0 0 1px, 40px);
        box-sizing: content-box;
        color: color('black');
        display: inline-block;
        font-size: 40px;
        height: em(2px, 40px);
        position: relative;
        transition: color 0s linear $base-transition;
        vertical-align: middle;
        width: em(20px, 40px);

        &:before,
        &:after {

            background: color('black');
            content: '';
            height: inherit;
            left: 0;
            transition: bottom $base-transition linear $base-transition, top $base-transition linear $base-transition, transform $base-transition;
            transform-origin: center;
            position: absolute;
            width: inherit;

        }

        &:before {

            top: em(-7px, 40px);

        }

        &:after {

            bottom: em(-7px, 40px);

        }

        #{$menu-status} & {

            border-color: color('white');
            color: color('white');
            transition: color 0s linear $base-transition;

            &:before,
            &:after {

                transition: bottom $base-transition, top $base-transition, transform $base-transition linear $base-transition;

            }

            &:before {

                top: 0;
                transform: rotate(45deg);

            }

            &:after {

                bottom: 0;
                transform: rotate(-45deg);

            }

        }

    }

    &--border &__icon {

        border-width: em(18px 9px, 40px);
        margin: em(1px, 40px);
        outline: em(1px, 40px) solid color('gray');

    }

    &__title {

        @include font-family(first, bold);
        @include font-size(small);
        color: color('black');
        margin-right: em(5px, small);
        opacity: 1;
        transition: opacity $base-transition;

        #{$menu-status} & {

            opacity: 0;

        }

    }

    @media(min-width: breakpoint-min($menu-breakpoint)) {

        display: none;

    }

}