.menuList {
  background-color: var(--nav-background-color);
  border-top: 1px solid var(--menu-border-color);

  @include min(desktop) {
    position: inherit;
    @include flex-align(stretch, center);
    height: 100%;
    overflow: visible;
    border-top: none;
  }
}

// desktop orientation classes
.horizontal {
  @include min(laptop) {
    flex-direction: row;
  }
}

// mobile animation classes
.collapse {
  @include min-max(mobile-s, laptop) {
    @include collapse;
    display: block !important;
  }
}

.collapseFull {
  @include min-max(mobile-s, laptop) {
    @include collapse-full(0.15s, var(--nav-height));
  }
}

.collapse,
.collapseFull {
  @include min-max(mobile-s, laptop) {
    position: absolute;
    width: 100%;
    left: 0;
    top: 100%;
  
    > li {
      display: none;
    }
  
    &.show {
      overflow-y: auto;
      max-height: calc(100vh - var(--nav-height));
      > li {
        display: flex;
      }
    }
  }
}


.slideLeft {
  @include min-max(mobile-s, laptop) {
    @include slide(left, absolute, -150%);
    top: var(--nav-height);
    width: 100%;
  }
}

.slideTop {
  @include min-max(mobile-s, laptop) {
    @include slide(top, absolute, -100%, var(--nav-height));
    left: 0;
    width: 100%;
    visibility: hidden;
    opacity: 0;

    &.show {
      visibility: visible;
      opacity: 1;
    }
  }
}

.slideLeft,
.slideTop {
  @include min-max(mobile-s, laptop) {
    &.show {
      overflow-y: auto;
      max-height: calc(100vh - var(--nav-height));
    }
  }
}

