/*
 * Our Designs (left menu) as an accordion — aisha-essential 1.3.0.
 * A group's links open beneath it (assets/js/app.js) instead of in the sliding
 * .submenu panel, so the panel scrolls when an open group runs past the fold.
 */

/* The language and country row sat pinned 15vh above the bottom of the panel,
   where a long open group would run underneath it. As the last item of a
   column it stays at the bottom while the menu is short and follows the menu
   once it is long. */
.mobile-menu-left {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.mobile-menu-left .menu {
    flex-shrink: 0;
}

.mobile-menu-left .language-and-country {
    position: static;
    flex-shrink: 0;
    margin-top: auto;
    margin-bottom: 15vh;
    padding-top: 30px;
}

/* The Back panel belongs to the old slide-in submenu. */
.mobile-menu-left .submenu {
    display: none !important;
}

/* Hidden until opened; app.js sets display and animates the height. */
.mobile-menu-left .menu > li.menu-item-has-children > .sub-menu {
    display: none;
    overflow: hidden;
    padding-inline-start: 20px;
}

.mobile-menu-left .menu > li > .sub-menu > li > a {
    font-size: 18px;
    color: #282626;
    padding-top: 6px;
    padding-bottom: 6px;
}

.mobile-menu-left .menu > li > .sub-menu > li:last-child > a {
    margin-bottom: 8px;
}

/* The group arrow (drawn in each store's Customizer CSS) turns down when open. */
.mobile-menu-left .menu > li.menu-item-has-children > a::after {
    transition: transform 0.3s ease;
}

.mobile-menu-left .menu > li.menu-item-has-children.is-open > a::after {
    transform: translateY(-50%) rotate(90deg);
}

body.rtl .mobile-menu-left .menu > li.menu-item-has-children.is-open > a::after {
    transform: translateY(-50%) scaleX(-1) rotate(90deg);
}

@media (max-width: 1180px) {
    .mobile-menu-left .menu > li > .sub-menu > li > a {
        font-size: 16px;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
}