.hamburger-active {
    header {
        .container {
            nav {
                visibility: visible;
                opacity: 1;
                top: var(--header-height);
                z-index: 100;
                overflow-y: auto;
                max-height: calc(100vh - var(--header-height));
            }
        }
    }
}

.hamburger-icon-container {
    color: transparent;
    height: 48px;
    width: 48px;
    position: relative;
    cursor: pointer;
    background: currentColor;
    border: 10px solid currentColor;
    border-radius: 3px;

    .hamburger-icon,
    .hamburger-icon:before,
    .hamburger-icon:after {
        content: '';
        position: absolute;
        height: 3px;
        width: 28px;
        background: var(--light-blue);
        transition: all .2s ease;
    }

    .hamburger-icon {
        top: 0.75em
    }

    .hamburger-icon:before {
        top: -0.55em
    }

    .hamburger-icon:after {
        top: 0.55em
    }
}

.hamburger-active {
    .hamburger-icon-container {
        color: transparent;
    }

    .hamburger-icon {
        background: transparent;
        transform: rotate(-135deg)
    }

    .hamburger-icon:before,
    .hamburger-icon:after {
        top: 0
    }

    .hamburger-icon:before {
        transform: rotate(90deg)
    }
}

@media (min-width: 1024px) {
    .hamburger-active {
        header {
            .container {
                nav {
                    visibility: visible;
                    opacity: 1;
                    top: initial;
                    z-index: 100;
                    max-height: initial;
                }
            }
        }
    }
}