// Tabs
//
// Tabbed container. Gracefully degrades into plain text if JavaScript is disabled.
// Extends the __Waypoints__ patterns for tab navigation.
//
// Markup:
//   <section class="tabs js-tabs">
//     <a href="#" data-modal-href="#modal-tips-during" class="tabs__modal-toggle">View Tips</a>
//     <h4 class="visually-hidden">Tips</h4>
//     <div class="wrapper">
//       <nav class="tabs__menu">
//         <ul class="waypoints">
//           <li class="is-active"><a href="#tip-1" data-tab="1">Find Maxwell</a></li>
//           <li><a href="#tip-2" data-tab="2">Give Him 'Fee</a></li>
//         </ul>
//       </nav>
//       <ul class="tabs__body">
//         <li id="tip-1" class="tabs__tab">
//           <h5 class="tabs__title">Find Maxwell</h5>
//           <p>He's drinking 'fee. But he needs some more 'fee.</p>
//         </li>
//         <li id="tip-2" class="tabs__tab">
//           <h5 class="tabs__title">Give Him 'Fee</h5>
//           <p>Give him some 'fee. You'll get 300 points in the Intern Scavenger Hunt.</p>
//         </li>
//       </ul>
//     </div>
//   </section>
//   <div data-modal id="modal-tips-during" class="modal--tips" role="dialog">
//     <h2 class="heading -banner">Tips</h2>
//     <div class="modal__block">
//       <h4 class="inline--alt-color">Find Maxwell</h4>
//       <p>He's drinking 'fee. But he needs some more 'fee.</p>
//     </div>
//     <div class="modal__block">
//       <h4 class="inline--alt-color">Give Him 'Fee</h4>
//       <p>Give him some 'fee. You'll get 300 points in the Intern Scavenger Hunt.</p>
//     </div>
//     <div class="modal__block form-actions">
//       <a href="#" class="js-close-modal">Back to main page</a>
//     </div>
//   </div>
//
// Styleguide Tabs


// If JS is disabled, hide interactive tab menu.
.tabs__menu {
  @include visually-hidden();
}

// Containing element for tabs
.tabs__body {
  list-style-type: none;
  margin: 0;
  padding: 0;

  li {
    margin-top: 27px;

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

// Tab headings for when JS is disabled
.tabs__title {
  font-weight: $weight-bold;
  margin-bottom: 9px;
}


// We add interactive elements once we know JS is working.
.modernizr-js {
  .tabs {
    > .wrapper {
      @include visually-hidden();

      @include media($tablet) {
        @include visually-restored();
      }
    }

    // Extends nested `.waypoints` with active "arrow"
    .waypoints {
      z-index: 10;

      li {
        padding: ($base-spacing / 4) 0;
      }

      .is-active {
        position: relative;

        &:after {
          position: absolute;
          top: 100%;
          left: 50%;
          display: block;
          content: "";
          width: 0;
          height: 0;
          border-top: 12px solid #fff;
          border-left: 12px solid transparent;
          border-right: 12px solid transparent;
          margin-left: -12px;
        }
      }
    }
  }

  // For mobile users, show an associated modal link instead.
  .tabs__modal-toggle {
    display: block;

    @include media($tablet) {
      display: none;
    }
  }

  // Once we know JS is enabled, show tab menu
  .tabs__menu {
    @include visually-restored();
  }

  // Inline title is only used for screen readers & no-JS.
  .tabs__title {
    @include visually-hidden();
  }

  // Only display tabs with active class toggled.
  .tabs__tab {
    @include visually-hidden();
    background-color: $light-gray;
    margin-top: 0;
    padding: 18px;

    &.is-active {
      @include visually-restored();
    }
  }

}