@keyframes diva4-slide-down {
  0% {
    opacity: 0;
    position: absolute;
    max-height: 0;
    transform: translateY(-100%);
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
    position: static;
    max-height: 100vh;
    transform: translateY(0);
  }
}

@keyframes diva4-slide-up {
  0% {
    opacity: 1;
    max-height: 100vh;
    position: static;
  }
  
  100% {
    opacity: 0;
    max-height: 0;
    position: absolute;
  }
}

#MobileNav .slide-nav__wrapper:has(.diva4-menu) {

  .slide-nav > .slide-nav__item > .slide-nav__link,
  .slide-nav > .slide-nav__item > button .slide-nav__link {
    text-transform: uppercase;
    font-weight: bold;
  }

  /* hide arrows on flat links */
  a.slide-nav__link {
    svg {
      display: none;
    }
  }

  /* hide back links */
  .slide-nav__item:has(> button .slide-nav__link--back) {
    display: none;
  }
  
  .diva4-menu { 
    
    /* update the copy on View all links */
    &[data-parent="shop1"] {
      .slide-nav__link {
        &[href*="/collections/all-diva-cup-products"] {
          span {
            display: none;
          }
          
          &:before {
            content: 'Shop all';
          }
        }
      }
  
      [data-parent="period-protection1"] .slide-nav__link[href*="/collections/period-care"] {
        span {
          display: none;
        }
        
        &:before {
          content: 'Shop all Period Care';
        }
      }
  
      [data-parent="vulva-care1"] .slide-nav__link[href*="pelvic-wellness"] {
        span {
          display: none;
        }
  
        &:before {
          content: 'Shop all Vulva Care';
        }
      }
  
    }
  }

  /* accordion handler effects */
  
  .slide-nav__item {
    
    > button .slide-nav__link {
      position: relative;
        
      .icon-chevron-right {
        display: none;
      }
      
      &:before,
      &:after {
        position: absolute;
        display: block;
        right: 0;
        top: 25%;
        height: 1rem;
        width: 1rem;
        margin-block: auto;
      }

      &:before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false' role='presentation' class='icon icon-toggle-minus' viewBox='0 0 192 192'%3E%3Cpath d='M30 96h132' stroke='%23612522' stroke-width='18' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='1'/%3E%3C/svg%3E");
        transition: opacity .3s ease;
      }

      &:after {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false' role='presentation' class='icon icon-toggle-plus' viewBox='0 0 192 192'%3E%3Cpath d='M30 96h132M96 30v132' stroke='%23612522' stroke-width='18' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='1'/%3E%3C/svg%3E");
        transition: transform .3s ease, opacity .3s ease;
      }
        
    }

    .diva4-menu,
    .diva4-submenu {
      display: block;
      padding-inline: .25rem 0;
      visibility: hidden;
    }

    &.diva4-collapsed {      
      & > .diva4-menu,
      & > .diva4-submenu {
        animation: diva4-slide-up .3s cubic-bezier(.165, .84, .44, 1);
      }

      > button .slide-nav__link:before {
        opacity: 0;
      }
    }

    &.diva4-expanded {      
      & > .diva4-menu,
      & > .diva4-submenu {
        max-height: 100vh;
        visibility: visible;
        position: static;
        opacity: 1;
        animation: diva4-slide-down .3s cubic-bezier(.165, .84, .44, 1);
      }
      
      > button .slide-nav__link:after {
        opacity: 0;
        transform: rotate(90deg);
      }
    }
  }
  
}