// ---
// title: Tabs
// description: Creates a set of tabs.
// ---

// <div class="example html">
//   <div class="lego-tabs" v-tabs="tabContainer">
//     <ul class="lego-tabs-nav">
//       <li class="lego-tabs-nav__item tab-active">Tab One</li>
//       <li class="lego-tabs-nav__item">Tab Two</li>
//       <li class="lego-tabs-nav__item">Tab Three</li>
//     </ul>
//   </div>
//   <div id="tabContainer">
//     <div class="lego-tabs-pane tab-active">Tab Content One</div>
//     <div class="lego-tabs-pane">Tab Content Two</div>
//     <div class="lego-tabs-pane">Tab Content Three</div>
//   </div>
// </div>

// <div class="example html">
//   <div class="lego-tabs lego-tabs--small" v-tabs="smallTabContainer">
//     <ul class="lego-tabs-nav">
//       <li class="lego-tabs-nav__item tab-active">Tab One</li>
//       <li class="lego-tabs-nav__item">Tab Two</li>
//       <li class="lego-tabs-nav__item">Tab Three</li>
//     </ul>
//   </div>
//   <div id="smallTabContainer">
//     <div class="lego-tabs-pane tab-active">Tab Content One</div>
//     <div class="lego-tabs-pane">Tab Content Two</div>
//     <div class="lego-tabs-pane">Tab Content Three</div>
//   </div>
// </div>

// <div class="example html">
//   <div class="lego-tabs lego-tabs--small" v-tabs="tabs-container">
//     <ul class="lego-tabs-nav">
//       <li class="lego-tabs-nav__item tab-active">Tab One</li>
//       <li class="lego-tabs-nav__item">Tab Two</li>
//       <li class="lego-tabs-nav__item">Tab Three</li>
//     </ul>
//   </div>
//   <div id="tabs-container" class="lego-tabs-container">
//     <div class="lego-tabs-pane tab-active">Tab Content One</div>
//     <div class="lego-tabs-pane">Tab Content Two</div>
//     <div class="lego-tabs-pane">Tab Content Three</div>
//   </div>
// </div>

// <div class="example html">
//   <div class="lego-tabs lego-tabs--small lego-tabs--center" v-tabs="centerTabContainer">
//     <ul class="lego-tabs-nav">
//       <li class="lego-tabs-nav__item tab-active">Tab One</li>
//       <li class="lego-tabs-nav__item">Tab Two</li>
//       <li class="lego-tabs-nav__item">Tab Three</li>
//     </ul>
//   </div>
//   <div id="centerTabContainer">
//     <div class="lego-tabs-pane tab-active">Tab Content One</div>
//     <div class="lego-tabs-pane">Tab Content Two</div>
//     <div class="lego-tabs-pane">Tab Content Three</div>
//   </div>
// </div>

// <div class="example html">
//   <div class="lego-tabs lego-tabs--small lego-tabs--sub" v-tabs="subTabContainer">
//     <ul class="lego-tabs-nav">
//       <li class="lego-tabs-nav__item tab-active">Tab One</li>
//       <li class="lego-tabs-nav__item">Tab Two</li>
//       <li class="lego-tabs-nav__item">Tab Three</li>
//     </ul>
//   </div>
//   <div id="subTabContainer">
//     <div class="lego-tabs-pane tab-active">Tab Content One</div>
//     <div class="lego-tabs-pane">Tab Content Two</div>
//     <div class="lego-tabs-pane">Tab Content Three</div>
//   </div>
// </div>

// ### Tabs with relationship defined by data attribute

// <div class="example html">
//   <div class="lego-tabs" v-tabs="dataTabContainer">
//     <ul class="lego-tabs-nav">
//       <li class="lego-tabs-nav__item tab-active" data-tab-related="one">Tab One</li>
//       <li class="lego-tabs-nav__item" data-tab-related="two">Tab Two</li>
//       <li class="lego-tabs-nav__item" data-tab-related="three">Tab Three</li>
//     </ul>
//   </div>
//   <div id="dataTabContainer">
//     <div class="lego-tabs-pane tab-active" data-tab-related="one">Tab Content One</div>
//     <div class="lego-tabs-pane" data-tab-related="two">Tab Content Two</div>
//     <div class="lego-tabs-pane" data-tab-related="three">Tab Content Three</div>
//   </div>
// </div>

// [---]

.#{$namespace}tabs-nav {
  @include display(flex);
  border-bottom: 3px solid map-fetch($color, ui base);

  &__item {
    position: relative;
    text-align: center;
    padding: spacer(1) spacer(1.5);
    border: 1px solid map-fetch($color, ui base);
    border-right: 0;
    border-bottom: 0;
    color: map-fetch($color, text medium);
    font-weight: 400;
    background-color: map-fetch($color, background faint);
    cursor: pointer;

    &:first-child {
      border-top-left-radius: map-fetch($border-radius, big);
    }

    &:last-child {
      border-top-right-radius: map-fetch($border-radius, big);
      border-right: 1px solid map-fetch($color, ui base);
    }

    &:hover,
    &.tab-active {
      color: map-fetch($color, text brand);
    }

    &.tab-active {
      background-color: map-fetch($color, background white);
      cursor: default;

      &::after { // Creates the white bar under the active tab.
        content: '';
        display: block;
        height: 3px;
        background: map-fetch($color, background white);
        position: absolute;
        left: 0;
        right: 0;
        bottom: -3px;
      }
    }
  }
}

.#{$namespace}tabs--small {

  .#{$namespace}tabs-nav {
    border-width: 1px;
  }

  .#{$namespace}tabs-nav__item {
    background-color: transparent;
    padding: spacer(0.5) spacer(1);
    font-size: map-fetch($font, size milli);
  }
}

.#{$namespace}tabs--center {
  .#{$namespace}tabs-nav {
    @include justify-content(center);
  }

  .#{$namespace}tabs-nav__item:first-child {
    margin-left: spacer(0.5);
  }
}

.#{$namespace}tabs--sub {
  .#{$namespace}tabs-nav__item {
    border: 0;

    &.tab-active::after {
      height: 2px;
      background: map-fetch($color, background brand);
      bottom: -1px;
    }

    &.tab-disabled {
      @extend %link--disabled;
      cursor: default;
    }
  }
}

.#{$namespace}tabs-pane {
  display: none;

  &.tab-active {
    display: block;
  }
}

.#{$namespace}tabs-container {
  margin-bottom: spacer(2);

  .#{$namespace}tabs-pane {
    padding: spacer(2);
    border: 1px solid map-fetch($color, ui base);
    border-top: 0;
  }
}