////
/// Nav menu component.
///
/// @group  Components
/// @author Sky Shabatura <theme@sky.camp>
/// @link   https://taproot-theme.com
////

.menu--toggle {
    cursor: pointer;
    display: block;
    height: 1em;
    line-height: 1;
    width: 1.25em;
    opacity: 1;
    text-align: center;
    fill: currentColor;
    transition: color .5s ease-in-out;
    margin: 0;

    svg {
        max-width: 100%;
    }
}

// base toggle styles
.taproot-hamburger {

    &-top, &-middle, &-bottom {
        transition: all 0.5s ease-in-out;
    }

    &-top, &-bottom {
        transform-origin: 50% 50% 0px;
        transform: none;
    }

    &-middle {
        opacity: 1;
    }
}

// open toggle styles
.menu--toggle.is-open {

    .taproot-hamburger {

        &-top {
            transform: rotateZ(45deg) translateY(40%);
        }

        &-middle {
            opacity: 0;
        }

        &-bottom {
            transform: rotateZ(-45deg) translateY(-40%);
        }
    }
}
