/**
 * Menu toggle (hamburger button anmiation)
 */

.menu-toggle {
    display: inline-block;
    cursor: pointer;
    width: 30px;
    height: 24px;
    position: relative;
}

.menu-toggle > .bars > span {
    display: block;
    position: absolute;
    top: 10px; left: 0;
    height: 4px;
    width: 100%;
    background: var(--top-bar-text-color);
    border-radius: 2px;
    transition: var(--color-transition), transform 0.5s ease;
}

.menu-toggle > .bars > span:nth-child(1) {
    transform: translateY(-10px) scaleX(1);
}
.menu-toggle > .bars > span:nth-child(4) {
    transform: translateY(10px) scaleX(1);
}

/* When checkbox is checked, turn into X */
.menu-toggle > input:checked + .bars > span:nth-child(1) {
    transform: translateY(0) scaleX(0);
}
.menu-toggle > input:checked + .bars > span:nth-child(2) {
    transform: rotate(45deg);
}
.menu-toggle > input:checked + .bars > span:nth-child(3) {
    transform: rotate(-45deg);
}
.menu-toggle > input:checked + .bars > span:nth-child(4) {
    transform: translateY(0) scaleX(0);
}