.mobile-menu {
  @apply w-full cursor-pointer fixed bg-primary/90 z-[60] border-b border-white/[0.08] -mt-5 -mx-8 mb-6 dark:bg-darkmode-800/90;
  &:before {
      content: "";
      @apply w-full h-screen z-10 fixed inset-x-0 bg-black/90 invisible opacity-0 transition-opacity duration-200 ease-in-out;
  }
  &.mobile-menu--active {
      &:before {
          content: "";
          @apply visible opacity-100;
      }
      .scrollable {
          @apply ml-0 overflow-y-auto;
          .mobile-menu-toggler {
              @apply visible opacity-100;
          }
      }
  }

  .mobile-menu-bar {
      height: 70px;
      @apply px-8 flex items-center;

  }
  .scrollable {
      @apply h-screen z-20 fixed top-0 left-0 w-[270px] -ml-[100%] bg-primary transition-all duration-300 ease-in-out dark:bg-darkmode-800;
      .mobile-menu-toggler {
          @apply fixed top-0 right-0 mt-4 mr-4 invisible opacity-0 transition-opacity duration-200 ease-in-out;
      }
      .simplebar-track.simplebar-vertical {
          .simplebar-scrollbar:before {
              @apply bg-black/50;
          }
      }
  }
  ul {
      &.menu__sub-open {
          @apply block;
      }
      li {
          max-width: 1280px;
          @apply w-full mx-auto;
          ul {
              @apply hidden bg-black/10 rounded-lg mx-4 my-1 dark:bg-darkmode-700;
              .menu {
                  @apply px-4;
              }
              ul {
                  @apply hidden bg-black/10 rounded-lg mx-0 dark:bg-darkmode-600;
              }
          }
      }
  }
  .menu__devider {
      @apply w-full h-px bg-white/[0.08] relative;
  }
  .menu {
      height: 50px;
      @apply flex items-center text-white px-6;
      .menu__title {
          @apply w-full ml-3 flex items-center;
          .menu__sub-icon {
              @apply transition ease-in duration-100 ml-auto;
              svg {
                  @apply w-5 h-5;
              }
          }
      }
  }
}

@media (max-width: 640px) {
  .mobile-menu {
    @apply -mx-3;
  }
  .mobile-menu .mobile-menu-bar {
    @apply px-3;
  }
}
