/* Start Menu Styles */
[data-menu-styles="dark"] {
  .app-sidebar {
    @apply bg-[#111c43] border-white/10;

    .main-sidebar-header {
      @apply backdrop-blur-3xl;
      .header-logo {
        &.desktop-logo,
        .desktop-white {
          @apply hidden! ;
        }

        &.desktop-dark {
          @apply block! ;
        }
      }

      .slide.has-sub .slide-menu {
        @apply bg-[#111c43]! ;
      }
    }
  }

  &[data-vertical-style="overlay"][data-toggled="icon-overlay-close"] {
    &:not([icon-overlay="open"]) {
      .app-sidebar {
        .header-logo {
          &.toggle-logo {
            @apply lg:hidden;
          }

          &.toggle-dark {
            @apply lg:block;
          }
        }
      }
    }
  }

  &[data-vertical-style="icontext"][data-toggled="icon-text-close"] {
    &:not([icon-text="open"]) {
      .app-sidebar {
        .header-logo {
          &.toggle-logo {
            @apply lg:!hidden ;
          }

          &.toggle-dark {
            @apply lg:!block ;
          }
        }
      }
    }
  }

  @media (min-width: 992px) {
    &[class="dark"] {
      &[data-nav-style="menu-click"][data-toggled="menu-click-closed"],
      &[data-nav-style="icon-click"][data-toggled="icon-click-closed"],
      &[data-nav-style="menu-hover"][data-toggled="menu-hover-closed"],
      &[data-nav-style="icon-hover"][data-toggled="icon-hover-closed"],
      &[data-vertical-style="doublemenu"] {
        &:not([data-nav-layout="horizontal"]) {
          .app-sidebar {
            .main-sidebar-header {
              @apply bg-bodybg;
            }

            .slide.has-sub .slide-menu {
              @apply bg-bodybg!;
            }
          }
        }
      }
    }

    &[data-nav-style="menu-click"][data-toggled="menu-click-closed"],
    &[data-nav-style="menu-hover"][data-toggled="menu-hover-closed"],
    &[data-nav-style="icon-click"][data-toggled="icon-click-closed"],
    &[data-nav-style="icon-hover"][data-toggled="icon-hover-closed"],
    &[data-vertical-style="doublemenu"] {
      &:not([data-nav-layout="horizontal"]) {
        .app-sidebar {
          .main-sidebar-header {
            @apply bg-[#111c43];
          }

          .header-logo {
            &.toggle-logo {
              @apply lg:!hidden ;
            }

            &.toggle-dark {
              @apply lg:!block ;
            }
          }

          .slide.has-sub .slide-menu {
            @apply bg-[#111c43]! border-white/10! ;
          }

          .slide-menu .child2 {
            @apply bg-[#111c43]! border-white/10! ;
          }

          .slide.side-menu__label1 {
            @apply border-white/10! text-white! ;
          }
        }
      }

      .dark {
        .slide.has-sub .slide-menu {
          @apply bg-bodybg! border-white/10!;
        }
      }
    }

    &[data-nav-layout="horizontal"] {
      .app-sidebar {
        @apply border-white/10!;

        .slide.has-sub .slide-menu {
          &.child1,
          &.child2,
          &.child3 {
            @apply bg-[#111c43] border-white/10;
          }
        }

        .slide.side-menu__label1 {
          @apply border-white/10! text-white!;
        }

        .main-menu-container {
          .slide-left,
          .slide-right {
            @apply bg-black/20 text-white border-white/10;

            svg {
              @apply fill-white;
            }
          }
        }
      }
    }
  }

  &.dark {
    .app-sidebar {
      @apply bg-bodybg!;
    }

    .main-sidebar-header {
      @apply bg-bodybg!;
    }
  }

}

[data-menu-styles="color"] {
  .app-sidebar {
    @apply bg-primary! border-white/20!;

    .main-sidebar-header {
      @apply bg-primary backdrop-blur-3xl;

      .header-logo {
        img {
          @apply h-8 leading-8;
        }

        .desktop-white {
          @apply block;
        }

        .desktop-logo,
        .toggle-logo,
        .toggle-dark,
        .desktop-dark {
          @apply hidden;
        }
      }
    }

    .app-sidebar {
      @apply bg-primary!;
    }

    .side-menu__item {
      @apply text-white/60;

      .side-menu__icon {
        @apply fill-white/60 text-white/60;
      }

      .side-menu__label {
        @apply text-white/60!;
      }

      &.active {
        @apply text-white!;

        .side-menu__icon {
          @apply fill-white! text-white!;
        }

        .side-menu__label {
          @apply text-white!;
        }
      }

      &:hover {
        @apply text-white!;

        .side-menu__icon {
          @apply fill-white! text-white!;
        }
      }

      &.active {
        @apply bg-white/10;
      }
    }

    .slide-menu {
      &.child1,
      &.child2,
      &.child3 {
        .side-menu__item {
          @apply text-white/60 before:border-white/60;

          &.active {
            @apply text-white!;

            &::before {
              @apply border-white!;
            }

            .side-menu__angle {
              @apply text-white!;
            }
          }

          &:hover {
            @apply text-white!;

            &::before {
              @apply border-white!;
            }

            .side-menu__angle {
              @apply text-white!;
            }
          }
        }
      }
    }

    .slide__category {
      @apply text-white/50;
    }
  }

  &[data-vertical-style="overlay"][data-toggled="icon-overlay-close"] {
    &:not([icon-overlay="open"]) {
      .app-sidebar {
        .header-logo {
          img {
            @apply h-8 leading-8;
          }
          .toggle-white {
            @apply block!;
          }

          .desktop-logo,
          .desktop-dark,
          .toggle-dark,
          .toggle-logo {
            @apply hidden!;
          }
        }
      }
    }
  }

  &[data-nav-style="icon-click"][data-toggled="icon-click-closed"],
  &[data-nav-style="icon-hover"][data-toggled="icon-hover-closed"] {
    .app-sidebar {
      .header-logo {
        .toggle-white {
          @apply block!;
        }

        .desktop-logo,
        .desktop-dark,
        .toggle-dark,
        .toggle-logo {
          @apply hidden!;
        }
      }
    }
  }

  &[data-vertical-style="icontext"][data-toggled="icon-text-close"] {
    &:not([icon-text="open"]) {
      .app-sidebar {
        .header-logo {
          img {
            @apply h-8 leading-8;
          }

          .desktop-white {
            @apply block!;
          }

          .desktop-logo,
          .desktop-dark,
          .toggle-logo,
          .toggle-dark
          .toggle-white  {
            @apply hidden!;
          }
        }
      }
    }
  }

  @media (min-width: 992px) {
    &[data-nav-style="menu-click"][data-toggled="menu-click-closed"],
    &[data-nav-style="menu-hover"][data-toggled="menu-hover-closed"],
    &[data-nav-style="icon-click"][data-toggled="icon-click-closed"],
    &[data-nav-style="icon-hover"][data-toggled="icon-hover-closed"],
    &[data-vertical-style="doublemenu"] {
      &:not([data-nav-layout="horizontal"]) {
        .app-sidebar {
          .header-logo {
            &.toggle-logo,&.toggle-dark {
              @apply hidden!;
            }

            &.toggle-white {
              @apply block!;
            }
          }

          .slide.has-sub .slide-menu {
            @apply bg-primary! border-white/20!;
          }

          .slide__category {
            @apply before:!border-white/60;
          }

          .slide.side-menu__label1 {
            @apply border-white/20! text-white! ;
          }
        }
      }
    }

    &[data-nav-layout="horizontal"] {
      .app-sidebar {
        @apply border-white/20!;

        .slide.has-sub .slide-menu {
          &.child1,
          &.child2,
          &.child3 {
            @apply bg-primary! border-white/20!;
          }
        }

        .slide.side-menu__label1 {
          @apply border-white/20! text-white! ;
        }

        .main-menu-container {
          .slide-left,
          .slide-right {
            @apply bg-black/20 text-white border-white/10;

            svg {
              @apply fill-white;
            }
          }
        }
      }
    }
  }
}

[data-menu-styles="gradient"] {
  .app-sidebar {
    @apply bg-gradient-to-b from-primary to-secondary border-white/10! before:!absolute before:!h-full before:!w-full before:!inset-0;

    .main-sidebar-header {
      @apply bg-gradient-to-t from-primary to-secondary border-white/10 backdrop-blur-3xl;

      .header-logo {
        &.desktop-logo,
        .desktop-dark {
          @apply hidden;
        }

        &.desktop-white {
          @apply block!;
        }
      }
    }

    .side-menu__item {
      @apply text-white/70 before:text-white/70;

      .side-menu__icon {
        @apply fill-white/70 text-white/70;
      }

      .side-menu__label {
        @apply text-white/60!;
      }

      &.active {
        @apply text-white!;

        .side-menu__icon {
          @apply fill-white! text-white!;
        }

        .side-menu__label {
          @apply text-white!;
        }
      }

      &:hover {
        @apply text-white!;

        .side-menu__icon {
          @apply fill-white! text-white!;
        }
      }

      &.active {
        @apply bg-white/10;
      }
    }

    .slide-menu {
      &.child1,
      &.child2,
      &.child3 {
        .side-menu__item {
          @apply text-white/70 before:border-white/70;

          &.active {
            @apply text-white!;

            &::before {
              @apply border-white!;
            }

            .side-menu__angle {
              @apply text-white!;
            }
          }

          &:hover {
            @apply text-white!;

            &::before {
              @apply border-white!;
            }

            .side-menu__angle {
              @apply text-white!;
            }
          }
        }
      }
    }

    .slide__category {
      @apply text-white/50;
    }
  }

  &[data-vertical-style="overlay"][data-toggled="icon-overlay-close"] {
    &:not([icon-overlay="open"]) {
      .app-sidebar {
        .header-logo {
          img {
            @apply h-8 leading-8;
          }
          .toggle-white {
            @apply block!;
          }

          .desktop-logo,
          .desktop-dark,
          .toggle-dark,
          .toggle-logo {
            @apply hidden!;
          }
        }
      }
    }
  }

  &[data-nav-style="icon-click"][data-toggled="icon-click-closed"],
  &[data-nav-style="icon-hover"][data-toggled="icon-hover-closed"] {
    .app-sidebar {
      .header-logo {
        .toggle-white {
          @apply block!;
        }

        .desktop-logo,
        .desktop-dark,
        .toggle-dark,
        .toggle-logo {
          @apply hidden!;
        }
      }
    }
  }

  &[data-vertical-style="icontext"][data-toggled="icon-text-close"] {
    &:not([icon-text="open"]) {
      .app-sidebar {
        .header-logo {
          img {
            @apply h-8 leading-8;
          }

          .desktop-white {
            @apply block!;
          }

          .desktop-logo,
          .desktop-dark,
          .toggle-logo,
          .toggle-dark,.toggle-white {
            @apply hidden!;
          }
        }
      }
    }
  }

  @media (min-width: 992px) {
    &[data-nav-style="menu-click"][data-toggled="menu-click-closed"],
    &[data-nav-style="menu-hover"][data-toggled="menu-hover-closed"],
    &[data-nav-style="icon-click"][data-toggled="icon-click-closed"],
    &[data-nav-style="icon-hover"][data-toggled="icon-hover-closed"] {
      &:not([data-nav-layout="horizontal"]) {
        .app-sidebar {
          .header-logo {
            &.toggle-logo,&.toggle-dark {
              @apply hidden!;
            }

            &.toggle-white {
              @apply block!;
            }
          }

          .slide__category {
            @apply before:!border-white/60 ;
          }

          .slide.has-sub .slide-menu {
            @apply bg-gradient-to-b from-primary to-secondary! -z-[1]! before:!-z-[1] before:absolute! before:!h-full before:!w-full before:!inset-0 ;
          }

          .slide.side-menu__label1 {
            @apply border-white/20! text-white! ;
          }
        }
      }
    }

    &[data-vertical-style="doublemenu"] {
      &:not([data-nav-layout="horizontal"]) {
        .app-sidebar {
          .header-logo {
            &.toggle-logo,&.toggle-dark{
              @apply lg:!hidden;
            }

            &.toggle-white {
              @apply lg:!block;
            }
          }

          .slide.has-sub .slide-menu {
            @apply bg-gradient-to-b from-primary to-secondary! -z-[1]! before:!-z-[1] before:!absolute before:!h-full before:!w-full before:!inset-0;

            &.child2,
            &.child3 {
              @apply bg-transparent! !bg-none before:!bg-none ;
            }
          }

          .slide.side-menu__label1 {
            @apply border-white/20! text-white!;
          }
        }
      }
    }

    &[data-nav-layout="horizontal"] {
      .app-sidebar {
        @apply border-white/20! ;
        @apply bg-gradient-to-r from-primary to-secondary before:!absolute before:!h-full before:!w-full before:!inset-0;

        .slide.has-sub .slide-menu {
          &.child1,
          &.child2,
          &.child3 {
            @apply bg-gradient-to-b from-primary to-secondary! border-white/20! ;
          }
        }

        .slide.side-menu__label1 {
          @apply border-white/20! text-white! ;
        }

        .main-menu-container {
          .slide-left,
          .slide-right {
            @apply bg-black/20 text-white border-white/10;

            svg {
              @apply fill-white;
            }
          }
        }
      }
    }
  }

  .dark {
    .main-sidebar-header {
      @apply bg-primary!;
    }
  }
}

[data-menu-styles="light"] {
  .app-sidebar {
    --color-menuprimecolor: rgb(128,135,147);
    @apply bg-white! border-[#f3f3f3]!;

    .slide__category::before {
      @apply border-black/50;
    }

    .main-sidebar-header {
      @apply bg-white! border-[#f3f3f3]! backdrop-blur-3xl!;

      .header-logo {
        img {
          @apply h-8 leading-8;
        }

        .desktop-logo {
          @apply block;
        }

        .desktop-dark,
        .toggle-logo,
        .toggle-dark,
        .desktop-white {
          @apply hidden;
        }
      }
    }

    // .slide-menu .child2 {
    //   @apply bg-white!;
    // }

    .app-sidebar {
      @apply bg-white! border-[#f3f3f3]!;
    }

    .side-menu__label {
      @apply text-[#536485]!;
    }

    .side-menu__icon {
      @apply text-[#536485]!;
    }

    .side-menu__item {
      @apply text-[#536485];

      &:hover {
        @apply text-[#536485]! bg-[#f3f6f8]!;

        .side-menu__label,
        .side-menu__angle {
          @apply text-[#536485];
        }

        .side-menu__icon {
          @apply text-[#536485]! fill-[#536485]!;
        }
      }

      &.active {
        @apply font-semibold bg-[#f3f6f8];
      }
    }

    .slide-menu {
      &.child1,
      &.child2,
      &.child3 {
        .side-menu__item {
          @apply text-[#536485] before:border-[#536485]/80;

          &.active,
          &:active,
          &:hover,
          &.hover {
            @apply text-[#536485]! before:!border-[#536485];

            .side-menu__angle {
              @apply text-[#536485]!;
            }
          }
        }
      }
    }

    .slide__category {
      @apply text-[#536485];
    }
  }

  &[data-vertical-style="overlay"][data-toggled="icon-overlay-close"] {
    &:not([icon-overlay="open"]) {
      .app-sidebar {
        .header-logo {
          img {
            @apply h-8 leading-8;
          }

          .toggle-logo {
            @apply block;
          }

          .desktop-dark,
          .desktop-white,
          .desktop-logo,
          .toggle-dark,
          .toggle-white {
            @apply hidden;
          }
        }
      }
    }

    &[data-vertical-style="icontext"][data-toggled="icon-text-close"] {
      &:not([icon-text="open"]) {
        .app-sidebar {
          .header-logo {
            img {
              @apply h-8 leading-8;
            }

            .toggle-logo {
              @apply block;
            }

            .desktop-dark,
            .desktop-logo,
            .toggle-dark,
            .toggle-white {
              @apply hidden;
            }
          }
        }
      }
    }

    @media (min-width: 992px) {
      &[data-nav-style="menu-click"][data-toggled="menu-click-closed"],
      &[data-nav-style="menu-hover"][data-toggled="menu-hover-closed"],
      &[data-nav-style="icon-click"][data-toggled="icon-click-closed"],
      &[data-nav-style="icon-hover"][data-toggled="icon-hover-closed"],
      &[data-vertical-style="doublemenu"] {
        &:not([data-nav-layout="horizontal"]) {
          .app-sidebar {
            .header-logo {
              &.toggle-logo {
                @apply lg:!block;
              }

              &.toggle-dark {
                @apply lg:!hidden;
              }
            }

            .slide.has-sub .slide-menu {
              @apply bg-white! border-gray-200!;
            }

            .side-menu__label1 {
              @apply text-defaulttextcolor!;
            }

            .slide.side-menu__label1 {
              @apply border-gray-200! text-[#536485]!;
            }
          }
        }
      }

      &[data-nav-layout="horizontal"] {
        .app-sidebar {
          @apply border-gray-200!;

          .slide.has-sub .slide-menu {
            &.child1,
            &.child2,
            &.child3 {
              @apply bg-white border-gray-200;
            }
          }

          .slide.side-menu__label1 {
            @apply border-gray-200! text-[#536485]!;
          }

          .main-menu-container {
            .slide-left,
            .slide-right {
              @apply bg-white text-[#536485] border-gray-200;

              svg {
                @apply fill-[#536485];
              }
            }
          }
        }
      }
    }
  }

  &[data-vertical-style="icontext"][data-toggled="icon-text-close"] {
    &:not([icon-text="open"]) {
      .app-sidebar {
        .header-logo {
          img {
            @apply h-8 leading-8;
          }

          .desktop-logo {
            @apply block!;
          }

          .desktop-white,
          .desktop-dark,
          .toggle-logo,
          .toggle-dark {
            @apply hidden!;
          }
        }
      }
    }
  }

  @media (min-width: 992px) {
    &[data-nav-style="menu-click"][data-toggled="menu-click-closed"],
    &[data-nav-style="menu-hover"][data-toggled="menu-hover-closed"],
    &[data-nav-style="icon-click"][data-toggled="icon-click-closed"],
    &[data-nav-style="icon-hover"][data-toggled="icon-hover-closed"],
    &[data-vertical-style="doublemenu"] {
      &:not([data-nav-layout="horizontal"]) {
        .app-sidebar {
          .slide.has-sub .slide-menu {
            @apply bg-white! border-[#f3f3f3]!;
          }

          .slide-menu .child2 {
            @apply bg-white! border-[#f3f3f3]!;
          }

          .slide.side-menu__label1 {
            @apply border-[#f3f3f3]! text-[#222528]! font-semibold!;
          }
        }
      }
    }

    &[data-nav-layout="horizontal"] {
      .app-sidebar {
        @apply border-white/10!;

        .slide.has-sub .slide-menu {
          &.child1,
          &.child2,
          &.child3 {
            @apply bg-white border-white/10;
          }
        }

        .slide.side-menu__label1 {
          @apply border-[#f3f3f3]! text-[#222528]! font-semibold!;
        }

        .main-menu-container {
          .slide-left,
          .slide-right {
            @apply bg-black/20 text-white border-white/10;

            svg {
              @apply fill-white;
            }
          }
        }
      }

      &.dark {
        .app-sidebar {
          .slide.has-sub .slide-menu {
            &.child1,
            &.child2,
            &.child3 {
              @apply bg-white! border-white/10!;
            }
          }
        }
      }
    }
  }

  &.dark {
    .app-sidebar {
      --color-menuprimecolor: rgb(128,135,147);
      @apply bg-white! border-[#f3f3f3]!;

      .main-sidebar-header {
        @apply border-[#f3f3f3] bg-white;

        .header-logo {
          img {
            @apply h-8 leading-8;
          }

          .desktop-logo {
            @apply block;
          }

          .desktop-dark,
          .toggle-logo,
          .toggle-dark,
          .desktop-white {
            @apply hidden;
          }
        }
      }

      // .slide-menu .child2 {
      //   @apply bg-white!;
      // }

      .app-sidebar {
        @apply bg-white! border-[#f3f3f3]!;
      }

      .side-menu__label {
        @apply text-[#536485]!;
      }

      .side-menu__icon {
        @apply text-[#536485]!;
      }

      .side-menu__item {
        @apply text-[#536485];

        &:hover {
          @apply text-[#536485]! bg-[#f3f6f8]!;

          .side-menu__label,
          .side-menu__angle {
            @apply text-[#536485];
          }

          .side-menu__icon {
            @apply text-[#536485]! fill-[#536485]!;
          }
        }

        &.active {
          @apply font-semibold bg-[#f3f6f8];
        }
      }

      .slide-menu {
        &.child1,
        &.child2,
        &.child3 {
          .side-menu__item {
            @apply text-[#536485] before:border-[#536485]/80;

            &.active,
            &:active,
            &:hover,
            &.hover {
              @apply text-[#536485]! before:!border-[#536485];

              .side-menu__angle {
                @apply text-[#536485]!;
              }
            }
          }
        }
      }

      .slide__category {
        @apply text-[#536485];
      }
    }

    &[data-vertical-style="overlay"][data-toggled="icon-overlay-close"] {
      &:not([icon-overlay="open"]) {
        .app-sidebar {
          .header-logo {
            img {
              @apply h-8 leading-8;
            }

            .toggle-logo {
              @apply block;
            }

            .desktop-dark,
            .desktop-logo,
            .toggle-dark {
              @apply hidden;
            }
          }
        }
      }

      &[data-vertical-style="icontext"][data-toggled="icon-text-close"] {
        &:not([icon-text="open"]) {
          .app-sidebar {
            .header-logo {
              img {
                @apply h-8 leading-8;
              }

              .toggle-logo {
                @apply block;
              }

              .desktop-dark,
              .desktop-logo,
              .toggle-dark {
                @apply hidden;
              }
            }
          }
        }
      }

      @media (min-width: 992px) {
        &[data-nav-style="menu-click"][data-toggled="menu-click-closed"],
        &[data-nav-style="menu-hover"][data-toggled="menu-hover-closed"],
        &[data-nav-style="icon-click"][data-toggled="icon-click-closed"],
        &[data-nav-style="icon-hover"][data-toggled="icon-hover-closed"],
        &[data-vertical-style="doublemenu"] {
          &:not([data-nav-layout="horizontal"]) {
            .app-sidebar {
              .header-logo {
                &.toggle-logo {
                  @apply lg:!block;
                }

                &.toggle-dark {
                  @apply lg:!hidden;
                }
              }

              .slide.has-sub .slide-menu {
                @apply bg-white! border-gray-200!;
              }

              .side-menu__label1 {
                @apply text-defaulttextcolor!;
              }

              .slide.side-menu__label1 {
                @apply border-gray-200! text-[#536485]!;
              }
            }
          }
        }

        &[data-nav-layout="horizontal"] {
          .app-sidebar {
            @apply border-gray-200!;

            .slide.has-sub .slide-menu {
              &.child1,
              &.child2,
              &.child3 {
                @apply bg-white border-gray-200;
              }
            }

            .slide.side-menu__label1 {
              @apply border-gray-200! text-[#536485]!;
            }

            .main-menu-container {
              .slide-left,
              .slide-right {
                @apply bg-white text-[#536485] border-gray-200;

                svg {
                  @apply fill-[#536485];
                }
              }
            }
          }
        }
      }
    }

    &[data-nav-style="icon-click"][data-toggled="icon-click-closed"],
    &[data-nav-style="icon-hover"][data-toggled="icon-hover-closed"] {
      .app-sidebar {
        .header-logo {
          .toggle-logo {
            @apply block!;
          }

          .desktop-logo,
          .desktop-dark,
          .toggle-dark {
            @apply hidden!;
          }
        }
      }
    }
  }
}

[data-menu-styles="transparent"] {
  .app-sidebar {
    --color-menuprimecolor: rgb(128,135,147);
    @apply bg-bodybg border-black/[0.07];

    .slide__category::before {
      @apply border-black/50;
    }

    .main-sidebar-header {
      @apply border-black/[0.07]! backdrop-blur-3xl!;

      .header-logo {
        img {
          @apply h-8 leading-8;
        }

        .desktop-logo {
          @apply block;
        }

        .desktop-dark,
        .toggle-logo,
        .toggle-white,
        .toggle-dark,
        .desktop-white {
          @apply hidden;
        }
      }
    }

    .side-menu__item {
      @apply text-[#536485];

      .side-menu__icon {
        @apply fill-[#536485] text-[#536485];
      }

      .side-menu__label {
        @apply text-[#536485];
      }

      &.active,
      &:hover {
        @apply text-[#536485]! before:!text-[#536485];

        .side-menu__icon {
          @apply fill-[#536485] text-[#536485];
        }
        .side-menu__angle {
          @apply fill-[#536485] text-[#536485];
        }
      }

      &.active {
        @apply bg-black/[0.05];
      }
    }

    .slide-menu {
      &.child1,
      &.child2,
      &.child3 {
        .side-menu__item {
          @apply text-[#536485]/80 before:border-[#536485]/80;

          &:hover {
            @apply text-[#536485]! before:!border-[#536485] bg-black/[0.05]! ;

            .side-menu__angle {
              @apply text-[#536485];
            }
          }
        }
      }
    }

    .slide__category {
      @apply text-[#536485];
    }
  }

  &[data-vertical-style="doublemenu"] {
    .app-sidebar {
      .main-sidebar{
      @apply border-black/[0.07]!;
      }

      .slide .side-menu__label1 {
        @apply text-defaulttextcolor! font-normal! ;
      }
    }
  }

  &[data-vertical-style="overlay"][data-toggled="icon-overlay-close"] {
    &:not([icon-overlay="open"]) {
      .app-sidebar {
        .header-logo {
          img {
            @apply h-8 leading-8;
          }

          .toggle-logo {
            @apply block;
          }

          .desktop-dark,
          .desktop-logo,
          .toggle-white,
          .toggle-dark,
          .desktop-white {
            @apply hidden;
          }
        }
      }
    }
  }

  &[data-vertical-style="icontext"][data-toggled="icon-text-close"] {
    &:not([icon-text="open"]) {
      .app-sidebar {
        .header-logo {
          img {
            @apply h-8 leading-8;
          }

          .desktop-logo {
            @apply block!;
          }

          .desktop-white,
          .desktop-dark,
          .toggle-logo,
          .toggle-white,
          .toggle-dark {
            @apply hidden!;
          }
        }
      }
    }
  }

  @media (min-width: 992px) {
    &[data-nav-style="menu-click"][data-toggled="menu-click-closed"],
    &[data-nav-style="menu-hover"][data-toggled="menu-hover-closed"],
    &[data-nav-style="icon-click"][data-toggled="icon-click-closed"],
    &[data-nav-style="icon-hover"][data-toggled="icon-hover-closed"],
    &[data-vertical-style="doublemenu"] {
      &:not([data-nav-layout="horizontal"]) {
        .app-sidebar {
          .header-logo {
            &.toggle-logo,
            .toggle-white{
              @apply lg:!hidden;
            }

            &.toggle-dark {
              @apply lg:!block;
            }
          }

          .slide.has-sub .slide-menu {
            @apply bg-bodybg! border-black/[0.07]!;
          }

          .slide.side-menu__label1 {
            @apply border-black/[0.07]! ;
          }
        }
      }
    }

    &[data-nav-layout="horizontal"] {
      .app-sidebar {
        @apply border-b!;

        .slide.has-sub .slide-menu {
          &.child1,
          &.child2,
          &.child3 {
            @apply bg-bodybg! border-black/[0.07]!;
          }
        }

        .slide.side-menu__label1 {
          @apply border-black/[0.07]!  text-primary!;
        }

        .main-menu-container {
          .slide-left,
          .slide-right {
            @apply bg-bodybg text-[#536485] border-black/[0.07] ;

            svg {
              @apply fill-[#536485];
            }
          }
        }
      }

      &.dark {
        .app-sidebar {
          @apply border-white/10!;

          .slide.has-sub .slide-menu {
            &.child1,
            &.child2,
            &.child3 {
              @apply bg-bodybg2! border-white/10!;
            }
          }
        }

        .main-menu-container {
          .slide-left,
          .slide-right {
            @apply border-white/10;
          }
        }
      }
    }
  }

  &.dark {
    .app-sidebar {
      @apply bg-bodybg2! border-white/10!;

      .main-sidebar-header {
        @apply backdrop-blur-3xl! bg-bodybg2! border-white/10!;
      }

      .side-menu__item {
        @apply text-white/60!;

        .side-menu__icon {
          @apply fill-white/60! text-white/60!;
        }

        .side-menu__label {
          @apply text-white/60!;
        }

        &.active,
        &:hover {
          @apply text-white/60! before:!text-white/60;

          .side-menu__icon {
            @apply fill-white/60! text-white/60!;
          }
        }

        &.active {
          @apply bg-white/[0.05];
        }
      }

      .slide-menu {
        &.child1,
        &.child2,
        &.child3 {
          .side-menu__item {
            @apply text-white/60 before:border-white/60;

            &:hover {
              @apply text-white/60! before:!border-white/60 before:!text-white/60 bg-white/[0.05]!;

              .side-menu__angle {
                @apply text-white/60!;
              }
            }
          }
        }
      }

      .slide__category {
        @apply text-white/60 before:border-white/70;
      }

      .header-logo {
        img {
          @apply h-8 leading-8;
        }

        .desktop-white {
          @apply block;
        }

        .desktop-logo,
        .toggle-logo,
        .toggle-dark,
        .toggle-white,
        .desktop-dark {
          @apply hidden;
        }
      }

      &[data-nav-style="icon-click"][data-toggled="icon-click-closed"],
      &[data-nav-style="icon-hover"][data-toggled="icon-hover-closed"] {
        .app-sidebar {
          .header-logo {
            .toggle-logo {
              @apply block!;
            }

            .desktop-logo,
            .desktop-dark,
            .desktop-white,
            .toggle-white,
            .toggle-dark {
              @apply hidden!;
            }
          }
        }
      }
    }

    .app-sidebar {
      @apply border-white/10;

      .main-sidebar-header {
        @apply border-white/10;

        .header-logo {
          &.desktop-logo {
            @apply hidden;
          }

          &.desktop-dark {
            @apply block;
          }
        }
      }

      .side-menu__item {
        @apply text-white/70;

        .side-menu__icon {
          @apply fill-white/70 text-white/70;
        }

        &.active,
        &:hover {
          @apply text-white!;

          .side-menu__icon {
            @apply fill-white! text-white!;
          }
        }
      }

      .slide-menu {
        &.child1,
        &.child2,
        &.child3 {
          .side-menu__item {
            @apply text-white/70 before:border-white/80;

            &.active {
              @apply text-white!;

              &::before {
                @apply border-white!;
              }

              .side-menu__angle {
                @apply text-white!;
              }
            }

            &:hover {
              @apply text-white!;

              &::before {
                @apply border-white!;
              }

              .side-menu__angle {
                @apply text-white!;
              }
            }
          }
        }
      }

      .slide__category {
        @apply text-white/50;
      }
    }

    &[data-vertical-style="overlay"][data-toggled="icon-overlay-close"] {
      &:not([icon-overlay="open"]) {
        .app-sidebar {
          .header-logo {
            &.toggle-logo,
            .toggle-dark {
              @apply lg:hidden;
            }

            &.toggle-white {
              @apply lg:block;
            }
          }
        }
      }
    }

    &[data-vertical-style="icontext"][data-toggled="icon-text-close"] {
      &:not([icon-text="open"]) {
        .app-sidebar {
          .header-logo {
            img {
              @apply h-8 leading-8;
            }

            .desktop-white {
              @apply block!;
            }

            .desktop-logo,
            .desktop-dark,
            .toggle-white,
            .toggle-logo,
            .toggle-dark {
              @apply hidden!;
            }
          }
        }
      }
    }

    @media (min-width: 992px) {
      &[data-nav-style="menu-click"][data-toggled="menu-click-closed"],
      &[data-nav-style="menu-hover"][data-toggled="menu-hover-closed"],
      &[data-nav-style="icon-click"][data-toggled="icon-click-closed"],
      &[data-nav-style="icon-hover"][data-toggled="icon-hover-closed"],
      &[data-vertical-style="doublemenu"] {
        &:not([data-nav-layout="horizontal"]) {
          .app-sidebar {
            .header-logo {
              &.toggle-logo,
              .toggle-dark {
                @apply lg:!hidden;
              }

              &.toggle-white {
                @apply lg:!block;
              }
            }

            .slide.has-sub .slide-menu {
              @apply bg-bodybg2! border-white/10!;
            }

            .slide.side-menu__label1 {
              @apply border-white/10!;
            }
          }
        }
      }

      &[data-nav-layout="horizontal"] {
        .app-sidebar {
          @apply border-white/10!;

          .slide.side-menu__label1 {
            @apply border-white/10!;
          }

          .main-menu-container {
            .slide-left,
            .slide-right {
              @apply text-white border-white/10;

              svg {
                @apply fill-white;
              }
            }
          }
        }

        &.dark {
          .app-sidebar {
            @apply border-white/10!;
          }

          .main-menu-container {
            .slide-left,
            .slide-right {
              @apply border-white/10;
            }
          }
        }
      }
    }
  }
}

/* End Menu Styles */