// Waypoints
//
// Used to navigate between sections/panels/pages within an interface. Apply `.is-active` class to
// list element for "active" state.
//
// .-vertical - Vertical tab layout (for use in a sidebar).
// .-primary  - Emphasized tabs
//
// Markup:
//   <ul class="waypoints {{modifier_class}}">
//     <li class="is-active"><a href="#">Section One</a></li>
//     <li><a href="#">Section Two</a></li>
//     <li><a class="waypoints__primary-link" href="#">Section Three</a></li>
//   </ul>
//
//
// Styleguide Waypoints
.waypoints {
  list-style: none;
  font-size: $font-regular;
  margin: 0;
  padding: 0;

  li {
    display: inline-block;
    margin: 0 $base-spacing;

    &.is-active {
      // Highlight the active link, but not nested links
      > a {
        color: $black;
      }

      // If there's nested links inside active item, show it.
      ul {
        max-height: 600px;
      }
    }
  }

  a {
    text-decoration: none;
    padding: 0;
  }

  &.-vertical {
    text-align: left;
    padding: 0;

    ul {
      padding: 0 $base-spacing;
      overflow: hidden;
      max-height: 0;
      transition: max-height 0.5s; // used to transition between 0 & auto height via max-width

      ul {
        font-size: $font-small;
      }
    }

    li {
      display: block;
      margin: 0 0 $base-spacing / 4;
    }

    a {
      display: block;
    }
  }

  &.-primary {
    background: $light-gray;
    padding: gutter() 0;

    @include media($medium) {
      padding: gutter();
    }

    li {
      margin: 0 gutter();
    }

    a {
      color: $med-gray;
      text-transform: uppercase;

      &:hover {
        color: $dark-gray;
      }

      &.is-active {
        color: $black;
      }

      &.waypoints__primary-link {
        color: $blue;
      }
    }
  }
}