/***
 *  Main Nav
 *
 *  html:
 *    <nav class="nav-main">
 *      <ul class="nav-main__list">
 *        <li class="nav-main__item"><a class="nav-main__link" href="#/colors">Colors</a></li>
 *        <li class="nav-main__item"><a class="nav-main__link" href="#/fonts">Fonts</a></li>
 *        <li class="nav-main__item">
 *          <a href="#/quarks" class="nav-main__link">Quarks</a>
 *          <ul class="nav-main__subnav">
 *            <li class="nav-main__item">
 *              <a href="#/quarks/blockquote" class="nav-main__link">Blockquote</a>
 *            </li>
 *            <li class="nav-main__item">
 *              <a href="#/quarks/code" class="nav-main__link">Code</a>
 *            </li>
 *          </ul>
 *        </li>
 *        <li class="nav-main__item">
 *          <a href="#/atoms" class="nav-main__link">Atoms</a>
 *        </li>
 *      </ul>
 *    </nav>
 */
.nav-main {
  max-height: 100%;
  padding: $vr * 2 $wr;
  overflow: auto;
  overflow: -moz-scrollbars-none;
  &::-webkit-scrollbar {
    width: $wr * .25;
  }

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

    // > .nav-main__item > .nav-main__link {
    //   @each $i in $icons {
    //     &--#{$i} {
    //       @include icon($i);
    //     }
    //   }
    // }
  }
  &__item {
    margin: 0;
  }
  &__subnav {
    @include small;
    margin: 0;
    padding: 0;
    list-style-type: none;

    @for $i from 1 through 5 {
    $nest-selector: '& ';
      @if ($i > 1) {
        @for $j from 2 through $i {
          $nest-selector: $nest-selector '& ';
        }
      }
      #{$nest-selector} .nav-main__link {
          padding-left: $wr * ($i);
      }
    }
  }
  &__link {
    display: block;
    position: relative;

    // &::before {
    //   position: absolute;
    //   left: 0;
    //   margin-right: $wr / 2;
    //   vertical-align: top;
    // }
  }
}