// ---
// title: Nav
// description: Creates simple nav pattens to extend.
// ---

// ### Default

// <div class="example html">
//   <ul class="lego-nav">
//     <li><a href="#">Home</a></li>
//     <li><a href="#">About</a></li>
//     <li><a href="#">Portfolio</a></li>
//     <li><a href="#">Contact</a></li>
//   </ul>
// </div>

// ### Stacked

// <div class="example html">
//   <ul class="lego-nav lego-nav--stacked">
//     <li><a href="#">Home</a></li>
//     <li><a href="#">About</a></li>
//     <li><a href="#">Portfolio</a></li>
//     <li><a href="#">Contact</a></li>
//   </ul>
// </div>

// ### Banner (Centered)

// <div class="example html">
//   <ul class="lego-nav lego-nav--center">
//     <li><a href="#">Home</a></li>
//     <li><a href="#">About</a></li>
//     <li><a href="#">Portfolio</a></li>
//     <li><a href="#">Contact</a></li>
//   </ul>
// </div>

// ### Fit

// <div class="example html">
//   <ul class="lego-nav lego-nav--fit">
//     <li><a href="#">Home</a></li>
//     <li><a href="#">About</a></li>
//     <li><a href="#">Portfolio</a></li>
//     <li><a href="#">Contact</a></li>
//   </ul>
// </div>

// [---]

%#{$namespace}nav,
.#{$namespace}nav {
  @include display(flex);

  > li {
    margin-right: spacer(1);

    > a {
      display: block;
    }
  }

  &--stacked {
    display: block;

    > li {
      margin-right: 0;
    }
  }

  &--center {
    @include justify-content(center);

    > li {
      margin-left: spacer(0.5);
      margin-right: spacer(0.5);
    }
  }

  &--fit {
    @include display(flex);

    > li {
      @include flex(1);

      > a {
        display: block;
      }
    }
  }
}