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

  @include min(desktop) {
    background-color: var(--nav-background-color-desktop, var(--nav-background-color));
    position: inherit;

    @include flex-align(stretch, center);

    height: 100%;
    overflow: visible;
    border-top: 0;
  }
}

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

.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));
    }
  }
}