.burger-wrapper {
    cursor: pointer;
    margin: auto;
    width: 24px;
    height: 24px;

    .hamburger {
        background: var(--nav-item-font-color);
        width: 24px;
        height: 2px;
        position: relative;
        transition: background 10ms 300ms ease;
        transform: translateY(11px);

        &:before, &:after {
            transition: top 300ms 350ms ease,
            transform 300ms 50ms ease;
            position: absolute;
            background: var(--nav-item-font-color);
            width: 24px;
            height: 2px;
            content: '';
        }
        &:before {
            top: -6px;
        }

        &:after {
            top: 6px;
        }
    }
}

.menu-open .burger-wrapper {
    .hamburger {
        background: transparent;
        &:after, &:before {
            transition: top 300ms 50ms ease,
            transform 300ms 350ms ease;
            top: 0;
        }
        &:before {
            transform: rotate(45deg);
        }
        &:after {
            transform: rotate(-45deg);
        }
    }
}