// ┌──────┐
// │ Tabs │
// └──────┘
//  ↳ http://esri.github.io/calcite-web/documentation/patterns/#tabs
//  ↳ patterns → _tabs.md

@mixin tab-nav(){
  @include clearfix();
}

@mixin tab-title() {
  @include box-sizing(border-box);
  @include font-size(-2);
  @include transition(background, $transition);
  padding: $baseline/4 $baseline/2;
  float: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: $off-white;
  border: 1px solid $lighter-gray;
  margin-right: -1px;
  cursor: pointer;
  &:focus {
    outline: none;
  }
  &:hover, &:focus {
    background-color: mix($white, $off-white);
    text-decoration: none;
    @include prefixer(background-image,linear-gradient(to top, transparent 94%, $blue 96%, $blue 100%), webkit moz o);
    background-image:linear-gradient(to top, transparent 94%, $blue 96%, $blue 100%);
  }
  &.is-active {
    border-bottom: 1px solid $white;
    background-color: $white;
    &:hover {
      background-color: $white;
    }
  }
  @if ($include-right-to-left) {
    html[dir="rtl"] & {
      float: right;
      margin-right: 0;
      margin-left: -1px;
    }
  }
}

@mixin tab-contents() {
  @include box-sizing(border-box);
  border: 1px solid $lighter-gray;
  margin-top: -1px;
}

@mixin tab-section() {
  @include box-sizing(border-box);
  background-color: $white;
  display: none;
  padding: $baseline/2;
  &.is-active {
    display: block;
  }
  pre {
    margin: 0;
  }
}

@mixin tabs-gray() {
  .tab-title    {
    background-color: $white;
    &.is-active {
      background-color: $off-white;
      border-bottom: 1px solid $off-white;
    }
  }
  .tab-section  {
    background-color: $off-white;
  }
  pre code {
    padding: 0;
    border: none;
    background-color: transparent;
  }
}

@mixin tabs-transparent() {
  .tab-title    {
    background-color: transparent;
    border: 1px solid transparent;
    border-bottom: 1px solid $lighter-gray;
    &:hover {
      border-bottom: 1px solid $lighter-gray;
    }
    &.is-active {
      @include transition(backround, $transition);
      background-color: transparent;
      border: 1px solid $lighter-gray;
      border-bottom: 1px solid $white;
    }
  }
  .tab-contents {
    border-bottom: none;
    border-left: none;
    border-right: none;
  }
  .tab-section  {
    background-color: transparent;
    padding-left: 0;
    padding-right: 0;
  }
}

@mixin tabs-translucent() {
  .tab-title {
    background-color: $transparent-white;
    background-image: none;
    border: none;
    border-top: 2px solid $transparent-white;
    color: $off-black;
    margin-right: 2px;
    margin-bottom: 3px;
    transition: none;
    &:hover, &:focus {
      background-color: $opaque-white;
      border-top-color: $blue;
      background-image: none;
    }
    &.is-active {
      background-image: none;
      background-color: $opaque-white;
      border-top-color: $blue;
      border-bottom: 2px solid $opaque-white;
      margin-bottom: 0;
    }
  }
  .tab-contents {
    border: none;
  }
  .tab-section  {
    background-color: $opaque-white;
  }
}

@mixin tabs-dark() {
  .tab-title    {
    background-color: $transparent-black;
    color: $white;
    border-top: 2px solid $transparent-black;
    &:hover, &:focus {
      background-color: $opaque-black;
      border-top-color: $white;
    }
    &.is-active {
      background-color: $opaque-black;
      border-top-color: $white;
      border-bottom: 2px solid transparent;
    }
  }

  .tab-section  {
    background-color: $opaque-black;
    color: $white;
  }
}

@if $include-tabs == true {
  .tab-nav         { @include tab-nav(); }
  .tab-title       { @include tab-title(); }
  .tab-contents    { @include tab-contents(); }
  .tab-section     { @include tab-section(); }
  .tabs-gray       { @include tabs-gray(); }
  .tabs-transparent{ @include tabs-transparent(); }
  .tabs-translucent{ @include tabs-translucent();}
  .tabs-dark       { @include tabs-translucent(); @include tabs-dark(); }
}
