/**
*
* List
*
**/

ul,
ol {
  list-style: none;
  margin: 0;

  @include small-only {
    padding-left: 0;
  }
}

ul li {
  position: relative;
  padding-left: 16px;
  @include bullet-type("", icon-bullet);

  &::before {
    font-size: 4px;
  }
}

ol {
  counter-reset: list;
  > li {
    @include numbered-list;
    position: relative;
    padding-left: 32px;

    // This selected every adjacent <li>
    // from the 10th and overrides the
    // content property of each
    &:nth-child(10n) ~ li::before,
    &:nth-child(10n)::before {
      content: counter(list);
    }

  }
}

ul ol,
ol ul {
  padding-top: 0;
}


/*==========  LIST LINKS  ==========*/

ul.list-links {
  li::before {
    display: none;
  }
  a {
    @include bullet-type("", icon-bullet);

    &::before {
      font-size: 4px;
    }

    font-weight: 400;
  }

  &.list-links--primary {
    a {
      @include bullet-type("", icon-chevron-right);
      font-weight: 400;
      font-family: $fontHighlight;
      line-height: 1; // fixes baseline grid alignment
      text-decoration: none;
    }
  }
}

ol.list-links {
  li {
    &::before {
      display: none;
    }

    a {
      display: inline-block;
      @include numbered-list;
      font-weight: 300;
    }

    &:nth-child(10n) ~ li a::before,
    &:nth-child(10n) a::before {
      content: counter(list);
    }
  }

  &.list-links--secondary {
    a::before {
      display: none;
    }
  }
}

.list-links--secondary {
  @include type--base;
  padding-left: 0;

  li {
    padding-left: 0;
  }
}

/*==========  ANCHOR LIST  ==========*/

.list-anchor {
  padding-left: 0;

  li {
    @include type--base;
    padding-top: 0;
    padding-left: 0;

    &::before {
      display: none
    }

  }

  a {
    @include bullet-type("", icon-bullet);
    line-height: 1; // fixes baseline grid alignment
    display: inline-block;
    padding-left: 16px;

    &::before {
      font-size: 4px;
    }
  }
}

/*==========  SMALL LIST  ==========*/

.list-small {

  li {
    @include medium {
      @include type--small;
      padding-top: 0;
    }
  }
}

/*==========  CENTERED LIST  ==========*/

.list-centered {
  text-align: center;
  padding-left: 0;
}

/*==========  FEATURED LIST  ==========*/

.featured-list {
  padding-top: $lineHeight * 3;
  padding-bottom: $lineHeight * 3;
}

.featured-list__item {
  background: #ffffff;
  padding-left: 0;
  padding-top: $lineHeight;
  padding-bottom: $lineHeight;

  @include medium {
    min-height: $lineHeight * 13;
    padding: $lineHeight * 2 32px;
  }

  margin-top: $lineHeight;

  &:first-child {
    margin-top: 0;
  }

  p {
    margin-bottom: $lineHeight;
  }
}

.featured-list__img-wrapper {
  display: none;
  position: relative;
  padding-top: $lineHeight;
  margin: 0 -5%;

  @include medium {
    display: block;
    padding-top: 0;
    margin: 0;
  }
}

.featured-list__img {
  @include medium {
    padding-top: 60.8%;
    padding-bottom: 0;
    height: 0;
    overflow: hidden;
    position: absolute;
    width: 100%;

  }

  img {
    display: block;
    margin: 0 auto;
    max-width: 100%;

    @include medium {
      margin: 0;
      position: absolute;
      top: 0;
      height: 100%;
      width: 100%;
      left: 0;
    }
  }
}

/*==========  RELATED GUIDES LIST  ==========*/
.related-guides-list {
  font-family: $fontHighlight;
  padding-top: 0;
  padding-left: 0;

  @include medium {
    padding-top: $lineHeight
  }

  @include wide {
    padding-top: 0
  }

  p {
    padding-top: 0;
  }

  .tag {
    padding-top: 0;
  }

  li {
    padding-top: $lineHeight;
    padding-bottom: $lineHeight - 1;
    border-bottom: 1px solid $colorGrayKeyline;

    &:last-child {
      border-color: transparent;
    }

    @include medium {
      padding-top: 0;
      padding-bottom: 0;
      border-color: transparent;
    }
  }
}

/*==========  LIST RESET  ==========*/

.list--reset {
  padding-left: 0;

  li {
    padding-left: 0;
  }

  &.list-links a::before,
  & li::before {
    display: none !important; // Fine to use !important when we are forcing an override
  }
}


/*==========  LESSONS  ==========*/
.list-lessons {
  padding-left: 0;

  & a {
    color: #ffffff;
  }

  & .current {
    &,
    a {
      text-decoration: none;
      cursor: default;
    }

    & .icon {
      font-size: $fontSmall;
      display: inline-block;
      background: rgba(#000000, .2);
      border-radius: 100%;
      width: 26px;
      line-height: 26px;
      text-align: center;
      margin-left: 7px;
    }
  }

}


/*==========  GUIDES INTO - used on homepage  ==========*/
.list-guides-intro {
  margin-bottom: $lineHeight*2;

  @include small-only {
    padding-top: $lineHeight*2;
  }

  li {
    border-bottom: 1px solid $colorGrayKeyline;
    padding-bottom: ($lineHeight*2) - 1;
    margin-bottom: ($lineHeight*2);

    @include medium {
      border-color: transparent;
      padding-bottom: 0;
    }

    &:last-child {
      border-bottom: transparent;
      margin-bottom: 0;
    }
  }
}