// Variables
//------------------------------------------------------
$tab-background-color:                 $lightgray-dark !default;
$tab-background-color-hover:           $lightgray-light !default;
$tab-radius:                           4px !default;

$tab-font-color:                       $darkgray-dark !default;
$tab-font-color-acitve:                $white !default;

$tab-aside-width:                      74px !default;

$tab-border-color:                     $mediumgray-light !default;
// Exports
//------------------------------------------------------

@include exports("tab") {

  /**
   * tab
   * --------------------------------------------------
   */
  .nav-tabs {
      border-bottom: none;
      background-color: $tab-background-color;
      @include radius($type: border-radius, $value: $tab-radius $tab-radius 0 0);

      & > li {
        margin-bottom: 0;
        border-left: 1px solid $tab-border-color;
      }
      & > li:first-child {
        border-left: none;
      }
      & > li > a {
          margin-right: 0;
          border: none;
          @include radius($type: border-radius, $value: 0);
          color: $tab-font-color;
      }
      & > li:first-child > a {
        @include radius($type: border-radius, $value: $tab-radius 0 0 0);
      }
      & > li > a:focus,
      & > li > a:hover {
          border: none;
          background-color: $tab-background-color-hover; 
      }
      & > li.active > a, 
      & > li.active > a:focus, 
      & > li.active > a:hover {
          border: none;
          background-color: $tab-font-color-acitve !important;
      }

      & .dropdown-toggle,
      & .dropdown-toggle:hover,
      & .dropdown-toggle:focus {
          color: $tab-font-color;
      }

      & li.dropdown.open .dropdown-toggle {
          color: $tab-font-color;
          background-color: $tab-background-color-hover;          
      } 
      & li.dropdown.active.open .dropdown-toggle {
          color: $tab-font-color;
      }
      & li.dropdown.active.open .dropdown-toggle .caret,
      & li.dropdown.active .dropdown-toggle .caret {
          border-top-color: $tab-font-color;
          border-bottom-color: $tab-font-color;
      }
      & li.dropdown.open .caret,
      & li.dropdown.open.active .caret,
      & li.dropdown.open a:hover .caret,
      & li.dropdown.open a:focus .caret,
      & .dropdown-toggle .caret,
      & .dropdown-toggle:hover .caret,
      & .dropdown-toggle:focus .caret {
          border-top-color: $tab-font-color;
          border-bottom-color: $tab-font-color;
      }

      &.nav-justified > li > a {
          margin-bottom: 0;
          text-align: center;
      }
      &.nav-justified > .dropdown .dropdown-menu {
          top: auto;
          left: auto;
      }
      &.nav-justified > li > a {
          @include radius($type: border-radius, $value: 0);
      }
      &.nav-justified > li:first-child > a {
          @include radius($type: border-radius, $value: $tab-radius 0 0 0);        
      }
      &.nav-justified > li:last-child > a {
          @include radius($type: border-radius, $value: 0 $tab-radius 0 0);        
      }
      &.nav-justified > .active > a,
      &.nav-justified > .active > a:hover,
      &.nav-justified > .active > a:focus {
          border: none;
      }
      @media (min-width: 768px) {
        &.nav-justified > li > a {
            border-bottom: none;
            @include radius($type: border-radius, $value: 0);
        }
        &.nav-justified > .active > a,
        &.nav-justified > .active > a:hover,
        &.nav-justified > .active > a:focus {
            border-bottom: none;
        }
      }

      @at-root .tab-content {
          padding: 10px;
      }
  }

  .tabs-below {
      & .nav-tabs {
          @include radius($type: border-radius, $value: 0 0 $tab-radius $tab-radius);
      }
      & .nav-tabs > li:first-child > a {
          @include radius($type: border-radius, $value: 0 0 0 $tab-radius);
      }
      & .nav-tabs.nav-justified > li:last-child > a {
          @include radius($type: border-radius, $value: 0 0 $tab-radius 0);        
      }
  }

  .tabs-left .nav-tabs > li,
  .tabs-right .nav-tabs > li {
      float: none;
      border-left: none;
      border-top: 1px solid $tab-border-color; 
  }
  .tabs-left .nav-tabs > li:first-child,
  .tabs-right .nav-tabs > li:first-child {
      border-top: none;
  }
  .tabs-left .nav-tabs > li > a,
  .tabs-right .nav-tabs > li > a {
      min-width: $tab-aside-width;
      margin-right: 0;
  }
  .tabs-left {
    & .nav-tabs {
        float: left;
        margin-right: 19px;
        @include radius($type: border-radius, $value: $tab-radius 0 0 $tab-radius);
    }
    & .nav-tabs > li:first-child > a {
        @include radius($type: border-radius, $value: $tab-radius 0 0 0);      
    }
    & .nav-tabs > li:last-child > a {
        @include radius($type: border-radius, $value: 0 0 0 $tab-radius);      
    }
  }
  .tabs-right {
    & .nav-tabs {
        float: right;
        margin-left: 19px;
        @include radius($type: border-radius, $value: 0 $tab-radius $tab-radius 0);
    }
    & .nav-tabs > li:first-child > a {
        @include radius($type: border-radius, $value: 0 $tab-radius 0 0);      
    }
    & .nav-tabs > li:last-child > a {
        @include radius($type: border-radius, $value: 0 0 $tab-radius 0);      
    }
  }

}