// stylelint-disable declaration-no-important
.sidebar-main-menu {
  overflow: auto;
  overflow-x: hidden;
  // So the last items in the menu will be seen when the menu is vertically scrollable
  margin-bottom: 52px;
  // Scrollbar styling for firefox
  scrollbar-color: theme('colors.grey.200');
  scrollbar-width: thin;

  @include transition(margin-bottom $menu-transition-duration ease);

  //Custom scrollbar styling for windows/mac and slim mode
  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-button {
    @apply w-hidden;
    // Hide the scrollbar arrows on windows
  }

  &::-webkit-scrollbar-thumb {
    @apply w-bg-grey-200 w-rounded-sm;
  }

  &::-webkit-scrollbar-track {
    @apply w-bg-transparent;
  }

  &--open-footer {
    margin-bottom: 127px;
  }

  &__list {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  *:focus {
    @include show-focus-outline-inside;
  }

  .icon--menuitem {
    width: 1.25em;
    height: 1.25em;
    min-width: 1.25em;
    margin-inline-end: 0.5em;
    vertical-align: text-top;
  }

  .icon--submenu-header {
    display: block;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 0.8em;
    opacity: 0.15;
  }

  > ul > li > a {
    // Need !important to override body.ready class
    transition: padding $menu-transition-duration ease !important;

    .menuitem-label {
      transition: opacity $menu-transition-duration ease;
    }
  }
}

.sidebar-footer {
  @apply w-bg-primary w-bottom-0 w-fixed;
  transition: width $menu-transition-duration ease !important; // Override body.ready
  width: $menu-width;

  > ul,
  ul > li {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  ul > li {
    position: relative;

    @include transition(border-color $menu-transition-duration ease);
  }

  > ul {
    @include transition(max-height $menu-transition-duration ease);
    visibility: hidden;

    max-height: 0;

    a {
      border-inline-start: 3px solid transparent;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      &:before {
        font-size: 1rem;
        margin-inline-end: 0.5em;
        vertical-align: -10%;
      }
    }
  }

  &__account {
    @include show-focus-outline-inside();

    &-toggle {
      @apply w-pl-2 w-inline-flex w-justify-between w-w-full w-translate-x-0 w-transition w-duration-150;
    }

    &-label {
      @apply w-text-white w-text-left w-overflow-hidden w-whitespace-nowrap w-text-ellipsis;
    }
  }

  @at-root .sidebar--slim #{&} {
    width: $menu-width-slim;

    &__account {
      @apply w-px-0 w-pb-3 w-justify-center;
    }

    &__account-toggle {
      @apply w-hidden;
    }
  }

  &--open {
    width: $menu-width !important; // Override collapsed style

    > ul {
      max-height: $nav-footer-submenu-height;
      visibility: visible;
    }
  }
}