/* hamburger */
.hamburger {
    padding: 1rem;
    z-index: 9999;
}

.hamburger-icon {
    display: flex;
    position: relative;
    vertical-align: middle;
    align-items: center;
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
}

.hamburger-icon .line {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background: var(--light);
}

.hamburger-icon .line:first-of-type {
    --delay: .1s;
    margin-top: -16px;
    transition: 0.2s 0.2s ease margin-top, 0.2s ease transform;
}

.hamburger-icon .line:nth-child(2) {
    --delay: .2s;
    transition: 0.1s ease transform;
}

.hamburger-icon .line:last-of-type {
    --delay: .3s;
    margin-bottom: -16px;
    transition: 0.2s 0.2s ease margin-bottom, 0.2s ease transform;
}

/* hamburger active */

.m-open .hamburger-icon .line:first-of-type {
    transform: rotate(45deg);
    margin-top: 0;
    transition: 0.2s ease margin-top, 0.4s 0.2s ease transform;
}

.m-open .hamburger-icon .line:nth-child(2) {
    transition-delay: 0.2s;
    transform: scaleX(0);
}

.m-open .hamburger-icon .line:last-of-type {
    transform: rotate(-45deg);
    margin-bottom: 0;
    transition: 0.2s ease margin-bottom, 0.4s 0.2s ease transform;
}