// @page Pattern Library/Components
// @name Tab navigation
//
// @description
//   Above table, tab-style navigation
//
// @markup
// <div class="us-tabs us-tabs--page-nav">
//   <div class="us-tabs__inner">
//     <ul class="us-tabs__links">
//       <li class="us-tabs__links-item us-tabs__links-item--active"><a href="#">Link here</a></li>
//       <li class="us-tabs__links-item"><a>Link here</a></li>
//       <li class="us-tabs__links-item"><a>Link here</a></li>
//       <li class="us-tabs__links-item"><a>Link here</a></li>
//       <li class="us-tabs__links-item"><a>Link here</a></li>
//       <li class="us-tabs__links-item"><a>Link here</a></li>
//       <li class="us-tabs__links-item"><a>Link here</a></li>
//       <li class="us-tabs__links-item"><a>Link here</a></li>
//       <li class="us-tabs__links-item"><a>Link here</a></li>
//       <li class="us-tabs__links-item"><a>Link here</a></li>
//       <li class="us-tabs__links-item"><a>Link here</a></li>
//     </ul>
//   </div>
// </div>

.us-tabs {
  &--page-nav {
    display: none;
    background-color: $c-super-light-grey;

    @include respond-to(tablet) {
      display: block;
    }
  }

  &__inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }

  &__links {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  &__links-item {
    position: relative;
    display: flex;
    max-width: 180px;
    margin: 0;
    text-align: center;
    cursor: pointer;
    border-right: 3px solid #fff;
    transition: background-color .2s;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    font-size: .875em;
    line-height: 1.25em;

    @include respond-to(desktop) {
      font-size: 1em;
      line-height: 1.5em;
    }

    a {
      display: block;
      color: $c-darker-grey;
      transition: color .2s;
      padding: .825em 1em;
      text-decoration: none;
    }

    &:last-child {
      border: 0;
    }

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      border-top: 5px solid $c-uswitch-navy;
      content: "";
      opacity: 0;
      transition: opacity .2s;
    }
  }

  &__links-item:hover {
    background-color: #f4f5f6;

    a { color: $c-uswitch-navy; }

    &::before { opacity: 1; }
  }

  &__links-item--active {
    background-color: #fff;
    border-right: 0;

    a { color: $c-uswitch-navy; }

    &::before { opacity: 1; }
  }
}