// @page Pattern Library/Components
// @name Link lists
//
// @description
//   The default list styling for lists that have anchors to take you to other pages.
//
// @markup
//   <ul class='us-list'>
//     <li><a href="#">List item 1</a></li>
//     <li><a href="#">List item 2</a></li>
//     <li><a href="#">List item 3</a></li>
//   </ul>
//

%list,
.us-list {
  @extend %reset-box-model;
  list-style: none;

  li {
    font-size: 16px;
    margin: 0; 
  }

  a {
    @extend %anchor-link;
    display: block;
    padding-top: .5em;
    padding-bottom: .5em;
  }

  a:hover {
    color: $c-darker-grey;
  }

  .us-hero & {
    margin-top: 1em;
  }
}