@use '../../../../scss/tools' as *;
@use '../../../../scss/settings' as *;

.sidebar-sub-menu-trigger-icon {
  $root: &;

  @include transition(
    transform $menu-transition-duration ease,
    width $menu-transition-duration ease,
    height $menu-transition-duration ease
  );
  display: block;
  width: 1rem;
  height: 1rem;
  inset-inline-end: 15px;
  margin-inline-start: auto;

  &--open {
    transform-origin: 50% 50%;
    transform: rotate(180deg);
  }

  .sidebar--slim & {
    width: 1rem;
    height: 1rem;
    position: absolute;
    inset-inline-end: 0;
  }
}

.sidebar-sub-menu-panel {
  @apply w-flex w-flex-col w-bg-surface-menu-item-active w-h-screen w-transition-sidebar;
  width: $menu-width;

  > h2,
  &__list {
    width: $menu-width;
  }

  > h2 {
    // w-min-h-[160px] and w-mt-[35px] classes are to vertically align the title and icon combination to the search input on the left
    @apply w-min-h-[180px] w-px-4 w-box-border w-text-center w-text-text-label-menus-default w-mb-0 w-inline-flex w-flex-col w-justify-center w-items-center w-transition-sidebar;
  }

  ul > li {
    @include transition(border-color $menu-transition-duration ease);
    position: relative;
  }

  > ul {
    @apply w-scrollbar-thin;
    flex-grow: 1;
    padding: 0;
    margin: 0;
    overflow-y: auto;
  }

  &__footer {
    margin: 0;
    padding: 0.9em 1.7em;
    text-align: center;
    color: theme('colors.text-label-menus-default');
  }

  &--visible {
    visibility: visible;
    box-shadow: 2px 0 2px theme('colors.black-35');
  }

  // Don't apply this to nested submenus though
  @at-root .sidebar--slim .sidebar-sub-menu-panel #{&} {
    transform: translate3d(0, 0, 0);
  }

  &--open {
    transform: translate3d($menu-width, 0, 0);

    // If another submenu is opening, display this menu behind it
    z-index: -1;

    @at-root .sidebar--slim #{&} {
      transform: translate3d($menu-width-slim, 0, 0);
    }
    // Don't apply this to nested submenus though
    @at-root .sidebar--slim .sidebar-sub-menu-panel #{&} {
      transform: translate3d($menu-width, 0, 0);
    }
  }
}

.sidebar-sub-menu-item {
  &--open {
    border-inline-start: 2px solid
      theme('colors.border-interactive-more-contrast-dark-bg-hover');

    > a {
      text-shadow: -1px -1px 0 theme('colors.black-35');
    }
  }
}

.sidebar-close-menu-button {
  @apply w-grid sm:w-hidden w-place-items-center w-text-text-label-menus-default w-p-0 w-z-sidebar-toggle w-border-transparent w-fixed w-bg-surface-menus w-top-0 w-left-0 w-h-slim-header w-w-slim-header w-rounded-none hover:w-bg-surface-menu-item-active hover:w-text-text-label-menus-active;
}
