.app-sidebar {
  @apply block bg-white fixed left-0 transition-[width] duration-150 items-stretch w-full text-gray-50 z-10
    sm:bg-gray-15 sm:border-r sm:border-solid sm:border-gray-25 sm:w-60;
  height: calc(100vh - 4.5rem - 1px);
  top: calc(4.5rem + 1px);

  &__container {
    @apply flex flex-col h-full;
  }

  &__top {
    @apply sm:hidden font-bold pt-10 px-9 text-gray-90 text-[32px];
  }

  &__panel {
    @apply pt-8 px-0 overflow-x-hidden overflow-y-auto flex-1 overscroll-none flex flex-col gap-1
      sm:pt-5;
  }

  &__bottom {
    @apply flex flex-col border-b border-solid border-gray-25 p-6 text-tiny font-semibold gap-2;
  }

  &__logout-link {
    @apply block font-semibold whitespace-nowrap mt-5 mx-6 mb-3.5 px-4 py-2;

    .mdi {
      @apply leading-normal text-body-2;
    }

    .logout-text {
      @apply ml-2 text-body-2;
    }

    &:hover {
      @apply bg-primary text-white rounded-md;
    }
  }

  &__button {
    @apply bg-white border border-solid border-gray-25 rounded-full top-6 -right-4 text-primary p-1.5;
    display: none !important;
    font-size: 20px;
    line-height: 20px;
    position: absolute !important;
    z-index: 11;

    &:hover,
    &:active {
      @apply border-primary;
    }

    .p-togglebutton-label {
      @apply hidden;
    }
  }

  .p-panelmenu {
    @apply flex flex-col gap-1;

    .p-panelmenu-header-action {
      @apply flex items-center gap-2 select-none cursor-pointer relative pl-9 py-3 pr-6 overflow-hidden outline-none text-body-2 font-semibold;
    }

    .p-menuitem-link {
      @apply flex items-center select-none cursor-pointer relative overflow-hidden;
    }
  }

  .p-panelmenu-panel {

    &:first-child {
    }

    &:last-child {
    }
  }

  .p-panelmenu-header {
    @apply outline-none;

    &.p-panelmenu-header-active,
    &:hover {
      @apply bg-support-1 border-l-4 border-primary border-solid text-primary;

      .p-panelmenu-header-action {
        @apply pl-8;
      }
    }

    .p-panelmenu-header-content {

      .p-panelmenu-header-action {

        .p-submenu-icon {
          @apply ml-auto text-body-2 font-semibold;
        }
      }
    }

    > .p-panelmenu-header-content a {
      .p-menuitem-text {
        @apply order-2 grow text-body-2 font-semibold;
      }
    }
  }

  .p-panelmenu-header-content {
  }

  .p-panelmenu-header-link {
  }

  .p-panelmenu-header-icon,
  .p-panelmenu-item-icon {
    // @apply text-gray-50;
  }

  .p-panelmenu-submenu-icon {
    // @apply text-gray-50;
    @apply rtl:rotate-180;
  }

  .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
  }

  .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-icon {
  }

  .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-submenu-icon {
  }

  .p-panelmenu-submenu {
    @apply m-0 p-0 outline-none;

    .p-menuitem-link {
      @apply flex items-center gap-2 select-none cursor-pointer relative pl-9 py-3 pr-6 overflow-hidden outline-none text-body-2;
    }
  }

  .p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover {
  }

  .p-panelmenu-content {

    .p-menuitem {

      > .p-menuitem-content {

        .p-menuitem-link {
          @apply pl-8 py-3 pr-6;

          .p-menuitem-icon {
            @apply mr-2 leading-none;
          }

          .p-menuitem-text {
            @apply text-body-2
              hover:text-primary;
          }
        }
      }

      &.router-link-exact-active,
      &.p-focus {

        > .p-menuitem-content {

          .p-menuitem-link {

            .p-menuitem-text {
              @apply text-primary;
            }
          }
        }
      }
    }
  }

  .router-link-active {
    @apply text-primary;
  }
}

.app-sidebar__topbar-button {
  @apply text-center sm:hidden;
}

#app {
  .app-main {
     @apply overflow-hidden;
  }

  &.app--sidebar-inactive {
    .app-sidebar {
      @apply hidden
        sm:block sm:w-[88px];

      .p-panelmenu-header {
        > .p-panelmenu-header-content a {
          .p-submenu-icon {
            @apply sm:hidden;
          }

          .p-panelmenu-header-label {
            @apply sm:hidden;
          }
        }
      }

      &__bottom {
        @apply p-0;

        * {
          @apply hidden;
        }
      }

      &__logout-link {
        @apply sm:mx-5 sm:my-3 sm:py-3 sm:px-3 text-center;

        .logout-text {
          @apply sm:hidden sm:mr-0;
        }
      }
    }

    .app-sidebar__topbar-button {
      .mdi.mdi-close {
        &::before {
          content: "\F035C";
        }
      }
    }

    .app-main {
      @apply overflow-auto;
    }
  }
}

@media (min-width: 640px) {
  .app-sidebar {
    &__button {
      display: inline-flex !important;
      position: absolute !important;
    }
  }
}
