.menu-modal nav {
    background-color: var(--color--blue-normal);
    bottom: 0;
    box-sizing: border-box;
    color: var(--color--white);
    font-weight: 500;
    height: calc(100% - 80px);
    left: 0;
    opacity: 0;
    overflow-y: auto;
    padding: 36px 0 30px;
    position: absolute;
    width: 100%;
}

.menu-modal[__animate] nav {
    transition: opacity 0.12s cubic-bezier(0, 0, 0.8, 1);
}

.menu-modal[__active] nav {
    opacity: 1;
}

.menu-modal .list {
    margin: 0 auto;
    width: var(--container--width);
}

.menu-modal li:not(:last-child) {
    margin-bottom: 6px;
}

.menu-modal li[__animate] .sub-menu {
    transition: height 0.12s cubic-bezier(0, 0, 0.8, 1);
}

.menu-modal li[__animate] .sub-menu-toggler {
    transition: transform 0.12s cubic-bezier(0, 0, 0.8, 1);
}

.menu-modal li[__opened] .sub-menu-toggler {
    transform: rotate(180deg);
}

.menu-modal .sub-menu {
    box-sizing: border-box;
    /* height: 0;
    overflow: hidden; */
    transform: translateX(calc(-1 * ((var(--viewport--width) - var(--container--width)) / 2)));
    width: var(--viewport--width);
}

.menu-modal .sub-menu-inner {
    padding-top: 16px;
    position: relative;
}

.menu-modal .sub-menu-inner::before {
    background-color: var(--color--white);
    content: "";
    display: block;
    height: 2px;
    left: 0;
    position: absolute;
    top: 16px;
    width: 100%;
}

.menu-modal .sub-list {
    background-color: var(--color--white-transparent-25);
    padding: 28px calc((var(--viewport--width) - var(--container--width)) / 2) 26px;
}

.menu-modal a,
.menu-modal button {
    display: flex;
    justify-content: space-between;
    padding: 7px 0 6px;
}

.menu-modal button {
    background-color: transparent;
    color: inherit;
    width: 100%;
}

.menu-modal svg {
    position: relative;
    top: 3px;
}