.nav-mask {
    position: fixed;
    z-index: 998;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(86, 88, 105, .75);
    padding-left: 420px;
    padding-top: 12px;
    opacity: 0;
    transition: all .5s;
    pointer-events: none;
}

.nav {
    transition: all .5s;
}

.nav-close-button {
    display: none;
}

@media (max-width: 1024px) {
    .sibling-switch {
        left: 114px;
        top: unset;
        bottom: 4px;
        visibility: visible;
        z-index: 2;
    }

    .resubmit-edit-button {
        display: block;
        visibility: visible;
    }
}

@media (max-width: 767px) {
    .nav-close-button {
        display: block;
        position: absolute;
        left: 100%;
        top: 12px;
        margin-left: 20px;
    }

    .nav {
        position: fixed;
        z-index: 999;
        left: calc(-100%);;
        top: 0;
        bottom: 0;
        max-width: 320px;
        width: calc(100% - 60px);
        opacity: 0;
    }
    
    .nav.active {
        left: 0;
        opacity: 1;
    }

    .nav-mask.active {
        opacity: 1;
        pointer-events: auto;
    }
}