// List
//
// Weight: 1
//
// Basic styling for lists.
//
// Markup:
// <ul class="list {{{modifier_class}}}">
//   <li>All</li>
//   <li>Articles</li>
//   <li>News</li>
//   <li>Events</li>
//   <li>Links</li>
// </ul>
//
// .list--unstyled - Remove default bullets and padding.
//
// Styleguide Components.list.default-list
.list {
  margin-bottom: 20px;

  &--unstyled {
    list-style-type: none;
    padding: 0;
  }
}


// Advanced list
//
// Weight: 2
//
// Advanced list styling.
//
// Markup:
// <ul class="list list--unstyled list-categories {{{modifier_class}}}">
//   <li class="list-categories__item list-categories__item--active">All</li>
//   <li class="list-categories__item">Articles</li>
//   <li class="list-categories__item">News</li>
//   <li class="list-categories__item">Events</li>
//   <li class="list-categories__item">Links</li>
// </ul>
//
// .list--unstyled.list-categories--pretty - "Know How" page add top border to categories list.
//
// Styleguide Components.list.advanced-list
.list-categories {
  @include breakpoint-max($tablet-breakpoint) {
    margin-left: rem(-16);
  }

  &__item {
    color: $primary-font-color;
    opacity: .25;
    transition: $transition-time color, $transition-time opacity;
    padding: .1rem 1rem;
    text-transform: uppercase;
    font-weight: 700;
    position: relative;
    display: inline-block;
    letter-spacing: 1px;

    @include breakpoint-min($tablet-breakpoint) {
      border-bottom: 1px dotted $primary-font-color;
      display: block;
      padding: .5rem 1rem;
      padding-left: 0;
      font-size: rem(18);
    }

    &::after {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      border: 1px dotted $primary-font-color;
      width: 1px;
      height: 80%;

      @include breakpoint-max($tablet-breakpoint) {
        content: "";
      }
    }

    &--active {
      opacity: 1;
    }

    &:hover {
      opacity: 1;
      cursor: pointer;
    }
  }

  &--pretty {
    @include breakpoint-min($tablet-breakpoint) {
      border-top: 3px solid $primary-font-color;
    }
  }
}