.aside-holder {
  @include media-breakpoint-down(md) {
    display: none;
  }
}

.aside-nav2__wrapper {
  position: relative;
  z-index: 3;
}

.aside-nav2 {
  padding: 20px 0 0;
  background: $gray-bg;
  color: $gray-dark;

  @include media-breakpoint-down(md) {
    width: 100%;
    position: absolute;
    padding: 0;
    z-index: 2;
  }

  @include media-breakpoint-up(lg) {
    border-bottom: 1px solid $gray;
  }

  &__holder {
    width: 100%;

    & + & {
      &::before {
        display: block;
        padding-top: 15px;
        margin: 0 15px;
        border-top: 1px solid $gray;
        content: '';
      }
    }
  }

  &__list {
    margin: 0;
    padding: 10px 0 5px;
    list-style: none;
    color: $gray-dark;
  }

  &__line {
    margin: 0 0 20px;
    padding: 0 0 5px;
  }

  &__title {
    display: block;
    padding: 0 15px;
    font-weight: 500;
    text-transform: uppercase;

    @include media-breakpoint-only(md) {
      padding: 0 30px;
    }
  }

  &__title-link {
    text-decoration: none;
    color: $black;
  }

  &__item {
    position: relative;

    a {
      @include link-primary;
      display: block;
      padding: 9px 15px;
      font-weight: 400;
      text-decoration: none;

      @include media-breakpoint-only(md) {
        padding: 9px 30px;
      }
    }

    &_active {
      background: $warm-grey;

      a,
      a:hover {
        color: $white;
      }
    }
  }

  &__toggle {
    @include media-breakpoint-up(lg) {
      display: none;
    }
  }

  .accordion {
    padding: 9px 0;
    line-height: 1.5rem;
    border-bottom: 1px solid $gray;

    &.accordion_collapsed {
      border: 0;
    }
  }

  .accordion__content {
    padding: 15px 0 0;

    @include media-breakpoint-down(sm) {
      padding: 20px 0 0;
    }
  }

  .accordion__header-text {
    display: block;
    padding: 5px 15px 0;
    margin-bottom: 0;
    font-weight: 500;
    color: $gray-dark;
    text-transform: uppercase;

    @include media-breakpoint-only(md) {
      padding: 5px 30px 0;
    }

    @include media-breakpoint-down(sm) {
      padding: 0 15px;
    }
  }

  .accordion__header {
    padding-left: 0;
  }

  .accordion__header-icon {
    left: auto;
    right: 10px;
  }

  .aside-nav2__holder {
    &:first-child {
      @include media-breakpoint-down(md) {
        margin-top: -10px;

        .aside-nav2__list {
          padding-top: 0;
        }
      }

      .aside-nav2__title {
        @include media-breakpoint-down(md) {
          display: none;
        }
      }
    }
  }

  .accordion__header-text + .accordion__header-text {
    display: none;
  }
}

// Used on my account pages, could be replaced with '.aside-nav2__item_active' class
$item: 7;
@while $item >= 0 {
  [data-active-index='#{$item}'] [data-index='#{$item}'] {
    background: $warm-grey;

    a {
      color: $white;
    }

  }
  $item: $item - 1;
}

$item: 9;
@while $item >= 0 {
  .account-nav[data-active-index='#{$item}'] [data-index='#{$item}'] {
    background: $ma-white;

    &:hover,
    &:focus {
      background: $white;
    }

    a {
      color: $gray-dark;
    }

  }
  $item: $item - 1;
}