.mobile-menu {
    width: calc(100vw - 80px);
    max-width: 340px;
    height: 100dvh;
    padding: 10vw 0 40px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    overflow-y: scroll;
    transform: translateX(-100%);

    color: var(--c-black);
    background-color: var(--c-white);

    transition: 400ms cubic-bezier(.42, 0, .37, .99);

    button#mobile-menu-close {
        width: 36px;
        height: 36px;
        padding: 0;
        position: absolute;
        top: 12px;
        right: 12px;

        border-radius: 0;
        background: none;
        border: none;
    }

    @media screen and (height >= 700px) {
        padding-top: 80px;
    }
}

nav.nav-primary-mobile {
    width: 100%;

    li {
        margin-bottom: 8px;
        padding-left: 20px;

        &:last-child {
            margin-bottom: 0;
        }

        &.has-children {
            position: relative;
            display: flex;
            align-items: center;
            flex-wrap: wrap;

            button {
                width: 36px;
                height: 36px;

                border: none;
                background: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' enable-background='new 0 0 24 24' height='24' viewBox='0 0 24 24' width='24'%3E%3Cg%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath d='M7.71,9.29l3.88,3.88l3.88-3.88c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41l-4.59,4.59 c-0.39,0.39-1.02,0.39-1.41,0L6.29,10.7c-0.39-0.39-0.39-1.02,0-1.41l0,0C6.68,8.91,7.32,8.9,7.71,9.29z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center;
                background-size: 24px auto;
                outline: none;
                appearance: none;

                transition: 200ms cubic-bezier(.42, 0, .18, 1.36);
            }
        }

        &.is-visible {
            & > button {
                transform: rotate(180deg);
            }

            & > .sub-menu {
                display: block;
            }
        }
    }

    a {
        padding: 4px 0;
        display: inline-block;
    }

    .sub-menu {
        width: 100%;
        margin: 8px 0;
        padding: 0;
        display: none;
        position: relative;

        border-left: 1px solid var(--c-primary);
    }
}

div.header-wrapper.mobile-menu-active {
    .mobile-menu {
        transform: translateX(0);
    }
}