// @page Pattern Library/JavaScript
// @name Tabs
//
// @description
//   These are the basic tabs used for landing pages. You can either reference a data-target for the urls or href for the target tabs. They have a non-js fallback and fold over to accordion when in small tablet view. They are initialised on page load if the tabs classes exist.
//
// @javascript
//   var tabs = new Tabs({
//     tabContainer: ".us-tabs",
//     tabLinks: ".us-tabs-nav-mainlink",
//     tabTitle: "us-tab-title",
//     activeClass: "active",
//     changeUrls: true,
//     collapsible: true,
//     autoScroll: false
//   });
//
// @markup
//   <div class='us-tabs'>
//     <nav class='us-tabs-nav'>
//       <div class='us-tabs-nav-wrapper'>
//         <div class='us-tabs-nav-menu'>
//           <a class="us-tabs-nav-mainlink us-tabs-nav-link" href="#tab1">Tab 1</a>
//           <a class="us-tabs-nav-mainlink us-tabs-nav-link" href="#tab2">Tab 2</a>
//           <a class="us-tabs-nav-mainlink us-tabs-nav-link" href="#tab3">Tab 3</a>
//         </div>
//       </div>
//     </nav>
//     <div class='us-tabs-container'>
//       <div class='us-tab' id='tab1'>
//         <h2 class='us-tab-title'>
//           <a class="us-tabs-nav-mainlink us-icon--after us-icon--chevron-right--after us-icon--small--after us-icon--inputgrey--after" href="#tab1">Test 1</a>
//         </h2>
//         <div class='us-tab-content'>
//           <p>Fatback capicola leberkas pork loin pork jowl. Meatloaf shoulder pancetta, salami prosciutto ribeye andouille chuck landjaeger short loin filet mignon sirloin. Pork chop tri-tip ham pork hamburger frankfurter leberkas short ribs biltong. Prosciutto ham hock rump, andouille tongue flank sirloin tri-tip ball tip frankfurter ham drumstick meatloaf pork loin.</p>
//         </div>
//       </div>
//       <div class='us-tab' id='tab2'>
//         <h2 class='us-tab-title'>
//           <a class="us-tabs-nav-mainlink us-icon--after us-icon--chevron-right--after us-icon--small--after us-icon--inputgrey--after" href="#tab2">Test 2</a>
//         </h2>
//         <div class='us-tab-content'>
//           <p>Kielbasa tenderloin spare ribs, andouille doner brisket chuck drumstick bresaola short loin pork t-bone ground round jowl. Ball tip pork loin doner tongue filet mignon biltong hamburger leberkas. Filet mignon kielbasa kevin short ribs, drumstick chuck shankle spare ribs tri-tip.</p>
//         </div>
//       </div>
//       <div class='us-tab' id='tab3'>
//         <h2 class='us-tab-title'>
//           <a class="us-tabs-nav-mainlink us-icon--after us-icon--chevron-right--after us-icon--small--after us-icon--inputgrey--after" href="#tab3">Test 3</a>
//         </h2>
//         <div class='us-tab-content'>
//           <p>Pig pastrami pork loin kielbasa, filet mignon meatloaf short ribs tenderloin. Pork loin leberkas kevin fatback porchetta bresaola. Cow rump shoulder pastrami. Andouille pork belly t-bone short ribs brisket. Bresaola pork belly tail salami capicola meatball. Pork belly beef ham landjaeger.</p>
//         </div>
//       </div>
//     </div>
//   </div>

$tab-width: col-width(2) !default;
$tab-border-color: #fff;
$tab-active-color: $tab-border-color;

@keyframes tab-show {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

// Tab nav
.us-tabs-nav {
  display: none;
  background-color: $c-bggrey;

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

  .js.ie8 & {
    display: block;
  }
}

.us-tabs-nav-wrapper {
  @extend %container;
}

.us-tabs-nav-menu {
  display: table;
  display: -webkit-flex;
  display: flex;
  width: 100%;
  overflow: hidden;
  flex-flow: row;
}

.us-tabs-nav-link {
  display: table-cell;
  width: $tab-width;
  padding: 14px 1em 12px;
  text-align: center;
  vertical-align: middle;
  border-right: 1px solid $tab-border-color;
  border-radius: 0;
  transition: none;

  @include respond-to(tablet) {
    font-size: em(14px);
    line-height: 1.25em;
  }

  @include respond-to(desktop) {
    font-size: em($base-font-size);
  }

  @include respond-to(large-desktop) {
    font-size: em(18px);
  }

  &:last-child {
    border-right: 0;
  }

  &:hover,
  &.active {
    color: $c-typecyan;

    &:before {
      background-color: $c-typecyan;
    }
  }

  &.active {
    cursor: default;
    background-color: $tab-active-color;

    &:hover {
      background-color: $tab-active-color;
    }
  }
}

.us-tabs-nav-mainlink {
  @include link-colors($c-inputgrey, $c-typecyan, $c-typecyan, $c-inputgrey);
  position: relative;
  background-color: $c-bggrey;
  transition: color 300ms, background-color 300ms;

  &:before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    background-color: $c-bggrey;
    content: "";
    transition: background-color 300ms;
  }

  &:hover {
    background-color: rgba(255,255,255,.35);
  }
}

// scss-lint:disable Comment, MergeableSelector
.us-tabs-nav-link {
  /* autoprefixer: off */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-flow: column;
  -ms-flex-flow: column;
}
// scss-lint:enable Comment, MergeableSelector

// Tabs
.us-tabs-container {
  @extend %container;

  @include respond-to(to-tablet) {
    padding: 0 !important;
  }
}

.us-tab-title {
  @include heading(4);
  position: relative;
  margin: 0;
  font-weight: normal;
  border-bottom: 1px solid #fff;

  @include respond-to(tablet) {
    .js & {
      display: none;
    }
  }

  .js.ie8 & {
    display: none;
  }

  .us-tabs-nav-mainlink {
    display: block;
    padding: .75em ($gutter-width / 2) .5em;

    &:after {
      position: absolute;
      right: ($gutter-width / 2);
    }

    .us-tab.active & {
      color: $c-typecyan;
      background-color: $tab-active-color;
    }

    &:hover:after,
    .us-tab.active &:after {
      @include icon-color("typecyan");
      transform: rotate(90deg);
    }

    &:hover:before,
    .us-tab.active &:before {
      background-color: $c-typecyan;
    }
  }
}

.us-tab-content {
  display: block;
  overflow: hidden;
  opacity: 1;

  @include respond-to(to-tablet) {
    padding-right: ($gutter-width / 2);
    padding-left: ($gutter-width / 2);
  }

  .js & {
    max-height: 0;

    @include respond-to(tablet) {
      display: none;
      max-height: none;
    }
  }

  .ie8.js & {
    display: none;
    max-height: none;
  }

  .us-tab.active & {
    max-height: 9999px;
    padding-top: 1em;

    @include respond-to(tablet, true) {
      display: block;
      animation-duration: 1s;
      animation-name: tab-show;
      animation-fill-mode: forwards;
    }
  }
}