// Name:            Nav
//
// Component:       `nav`
//
// Modifiers:       `nav-justified`
//                  `nav-tabs-bottom`
//                  `nav-tabs-solid`
//                  `nav-tabs-reverse`
//                  `nav-tabs-line`
//                  `nav-tabs-vertical`
//                  `nav-tabs-inverse`
//                  `nav-tabs-lg`
//                  `nav-tabs-sm`
//
//
// ========================================================================

// Variables
// ========================================================================
$nav-tabs-link-padding                      : $nav-padding-vertical pxToRem(20px) !default;
$nav-tabs-vertical-link-padding             : $nav-padding-vertical pxToRem(20px) !default;

$nav-tabs-color                             : $text-color !default;
$nav-tabs-active-color                      : $inverse !default;
$nav-tabs-active-bg                         : $brand-primary !default;
$nav-tabs-active-border                     : $brand-primary !default;

$nav-tabs-solid-color                       : $text-color !default;
$nav-tabs-solid-bg                          : $gray-lightest !default;
$nav-tabs-solid-border                      : $gray-lightest !default;

$nav-tabs-solid-content-padding             : pxToRem(20px) !default;
$nav-tabs-vertical-solid-content-padding    : pxToRem(20px) !default;

$nav-tabs-line-border                       : $border-color-base !default;
$nav-tabs-line-hover-border                 : $gray-light !default;
$nav-tabs-line-active-color                 : $brand-primary !default;
$nav-tabs-line-active-border                : $brand-primary !default;
$nav-tabs-line-link-padding                 : $nav-padding-vertical pxToRem(20px) !default;

$nav-tabs-sm-padding                        : pxToRem(5px) pxToRem(10px) !default;
$nav-tabs-sm-font-size                      : $font-size-sm !default;
$nav-tabs-sm-line-height                    : $line-height-sm !default;

$nav-tabs-lg-padding                        : pxToRem(12px) pxToRem(20px) !default;
$nav-tabs-lg-font-size                      : $font-size-lg !default;
$nav-tabs-lg-line-height                    : $line-height-lg !default;

$nav-tabs-inverse-bg                        : $inverse !default;
$nav-tabs-inverse-border                    : $inverse !default;

$nav-quick-margin-bottom                    : $line-height-computed !default;
$nav-quick-bg                               : $inverse !default;
$nav-quick-hover-bg                         : $bg-color-base !default;
$nav-quick-border-radius                    : $border-radius !default;
$nav-quick-box-shadow                       : 0 1px 1px rgba(0, 0, 0, .05) !default;
$nav-quick-icon-font-size                   : (2*$font-size-icon) !default;
$nav-quick-vertical-padding                 : pxToRem(16px) !default;

$nav-quick-lg-icon-font-size                : (2.5*$font-size-icon) !default;
$nav-quick-lg-vertical-padding              : pxToRem(22px) !default;

$nav-quick-sm-icon-font-size                : (1.5*$font-size-icon) !default;
$nav-quick-sm-vertical-padding              : pxToRem(12px) !default;

$nav-quick-border-color                     : $border-color-base !default;

// Component: Nav
// ========================================================================

.nav-link {
  position: relative;  // from---v3
  display: block;      //from---v3
  padding: pxToRem(10px) pxToRem(15px);  //from---v3

  overflow:hidden;

  &:focus {
    outline: none;
  }

  &:focus,
  &:hover {                   // from---v3
    background-color: $nav-link-hover-bg;
  }

  .close {
    display: inline-block;
    margin-left: 10px;
  }

  // Open dropdowns
  // .open > & {
  //   &,
  //   &:hover,
  //   &:focus {
  //     border-color: transparent;
  //   }
  // }
}



// Component: `nav-quick`
// ========================================================================
.nav-quick {
  padding: 0;
  margin-bottom: $nav-quick-margin-bottom;
  background-color: $nav-quick-bg;
  border-radius: $nav-quick-border-radius;
  margin-left: 0;
  margin-right: 0;

  box-shadow: $nav-quick-box-shadow;

  .nav-item {
    position: relative;
    display: block;
    list-style: none;
    padding: 0;
    text-align: center;
  }

  .nav-link {
    display: block;
    padding: $nav-quick-vertical-padding 0;
    color: $nav-tabs-color;

    .icon {
      display: block;
      margin-bottom: 0.2rem;
      font-size: $nav-quick-icon-font-size;
    }

    &:hover {
      text-decoration: none;
      background-color: $nav-quick-hover-bg;
    }
  }

  .tag, .tag-pill {
    position: absolute;
    top: 0;
    right: 0;
  }

  &-sm {
    .nav-link {
      padding: $nav-quick-sm-vertical-padding 0;

      .icon {
        font-size: $nav-quick-sm-icon-font-size;
      }
    }
  }

  &-lg {
    .nav-link {
      padding: $nav-quick-lg-vertical-padding 0;

      .icon {
        font-size: $nav-quick-lg-icon-font-size;
      }
    }
  }

  &-bordered {
    border-top: 1px solid $nav-quick-border-color;
    border-left: 1px solid $nav-quick-border-color;

    .nav-item {
      border-bottom: 1px solid $nav-quick-border-color;
      border-right: 1px solid $nav-quick-border-color;
    }
  }
}

// Component: `nav-tabs`
// ========================================================================
.nav-tabs {
  .nav-item + .nav-item {
    margin-left: 2px;
  }

  .nav-link {
    padding: $nav-tabs-link-padding;
    color: $nav-tabs-color;

    transition: .25s;

    > .icon {
      line-height: 1;
      margin-right: .5em;
    }

    @include hover-focus {
      background-color: $nav-link-hover-bg;
    }

    // &.active {
    //   &,
    //   &:hover,
    //   &:focus {
    //     color: $nav-tabs-active-color;
    //     background-color: $nav-tabs-active-bg;
    //     border-color: transparent;
    //     border-bottom-color: $nav-tabs-active-border;
    //   }
    // }
  }

  .nav-link.active,
  .nav-item.open .nav-link {
    @include plain-hover-focus {
      color: $nav-tabs-active-color;
      background-color: $nav-tabs-active-bg;
      border-color: transparent;
      border-bottom-color: $nav-tabs-active-border;
    }
  }

  .dropup .dropdown-menu {
    margin-bottom: -$nav-tabs-border-width;

    @include border-bottom-radius(0);
  }
}

.nav-pills {
  .nav-link {
    transition: border 0.2s linear 0s, color 0.2s linear 0s, background-color 0.2s linear 0s;
  }
}

.nav-pills-rounded .nav-link {      // add
  padding-right: 20px;
  padding-left: 20px;
  margin-right: 5px;
  margin-left: 5px;
  border-radius: 1000px;
}

// Modifier: `nav-tabs-bottom`
// -------------------------

.nav-tabs.nav-tabs-bottom {
  border-top: 1px solid $nav-tabs-border-color;
  border-bottom: none;

  .nav-item {
    margin-top: -1px;
    margin-bottom: 0;
  }

  .nav-link {
    border-radius: 0 0 $border-radius-large $border-radius-large;

    &:hover,
    &:focus {
      border-bottom-color: transparent;
      border-top-color: $nav-tabs-border-color;
    }
  }
}


// Modifier: `nav-tabs-reverse`
// -------------------------

.nav-tabs-reverse {
  .nav-item {
    float: right;

    + .nav-item {
      margin-left: 0;
      margin-right: 2px;
    }
  }
}


// Modifier: `nav-tabs-solid`
// ========================================================================

.nav-tabs-solid {
  border-bottom-color: $nav-tabs-solid-border;

  .nav-link {
    &:hover {
      border-color: transparent;
    }
  
    // &.active {
    //   &,
    //   &:hover,
    //   &:focus {
    //     color: $nav-tabs-solid-color;
    //     background-color: $nav-tabs-solid-bg;
    //     border-color: transparent;
    //   }
    // }
  }

  .nav-link.active,
  .nav-item.open .nav-link {
    @include plain-hover-focus {
      color: $nav-tabs-solid-color;
      background-color: $nav-tabs-solid-bg;
      border-color: transparent;
    }
  }


  & ~ .tab-content {
    padding: $nav-tabs-solid-content-padding;
    background-color: $nav-tabs-solid-bg;
  }

  &.nav-tabs-bottom {
    .nav-link {
      &.active {
        &,
        &:hover,
        &:focus {
          border: none;
        }
      }
    }
  }
}


// Modifier: `nav-tabs-line`
// ========================================================================

.nav-tabs-line {
  position: relative;

  .nav-link {
    padding: $nav-tabs-line-link-padding;
    border-bottom: 2px solid transparent;

    &:hover,
    &:focus {
      background-color: transparent;
    }

    &:hover {
      border-bottom-color: $nav-tabs-line-hover-border;
    }

    // &.active {
    //   &,
    //   &:hover,
    //   &:focus {
    //     color: $nav-tabs-line-active-color;
    //     background-color: transparent;
    //     border-bottom: 2px solid $nav-tabs-line-active-border;
    //   }
    // }
  }

  .nav-link.active,
  .nav-item.open .nav-link {
    @include plain-hover-focus {
      color: $nav-tabs-line-active-color;
      background-color: transparent;
      border-bottom: 2px solid $nav-tabs-line-active-border;
    }
  }

  .dropdown-menu {
    margin-top: 0;
  }

  .dropup .dropdown-menu {
    margin-bottom: 0;
  }

  // Open dropdowns
  .nav-item.open > .nav-link {
    @include plain-hover-focus {
      border-bottom-color: $nav-tabs-active-border;
    }
  }

  > .nav-tabs-autoline {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: $nav-tabs-active-bg;
    transition-property: left, width;
  }

  &.nav-tabs-bottom {
    .nav-link {
      border-top: 2px solid transparent;
      border-bottom: none;
      &:hover {
        border-top-color: $nav-tabs-line-hover-border;
        border-bottom-color: transparent;
      }

      // &.active {
      //   &,
      //   &:hover,
      //   &:focus {
      //     border-top: 2px solid $nav-tabs-line-active-border;
      //     border-bottom: none;
      //   }
      // }
    }

    .nav-link.active,
    .nav-item.open .nav-link {
      @include plain-hover-focus {
        border-top: 2px solid $nav-tabs-line-active-border;
        border-bottom: none;
      }
    }

    .nav-item.open > .nav-link {
      @include plain-hover-focus {
        border-top-color: $nav-tabs-active-border;
      }
    }

    > .nav-tabs-autoline {
      top: 0;
      bottom: auto;
    }
  }
}

// CLASS [tab-line-top]
// ========================================================================
.tabs-line-top{
  border-bottom: 1px solid $nav-tabs-line-border;
  .nav-link,
  .nav-item .nav-link{
    bottom: -1px;
    border-top: 2px solid transparent;
    border-bottom-color: transparent;
    &:hover{
      border-bottom-color: transparent;
      border-top:2px solid $nav-tabs-line-hover-border;
    }
  }
  .nav-link.active,
  .nav-item.open .nav-link {
    @include plain-hover-focus {
      color: $nav-tabs-line-active-color;
      background-color: transparent;
      border-top: 2px solid $nav-tabs-line-active-border;
      border-left: 1px solid $nav-tabs-line-border;
      border-right: 1px solid $nav-tabs-line-border;
      border-bottom: 1px solid #fff;
    }
  }
}

// Modifier: `nav-tabs-vertical`
// ========================================================================

.nav-tabs-vertical {
  @include clearfix();

  .nav-tabs {
    float: left;
    border-right: 1px solid $nav-tabs-border-color;
    border-bottom: none;

    .nav-item {
      float: none;
      margin-right: -1px;
      margin-bottom: 2px;
      margin-left: 0;
    }

    .nav-link {
      padding: $nav-tabs-vertical-link-padding;
      border-radius: $border-radius-large 0 0 $border-radius-large;

      &:hover {
        border-bottom-color: transparent;
        border-right-color: $nav-tabs-border-color;
      }      

      &.active {
        &,
        &:focus,
        &:hover {
          border-right-color: $nav-tabs-active-border;
        }
      }
    }
  }

  .nav-tabs-reverse {
    float: right;
    border-right: none;
    border-left: 1px solid $nav-tabs-border-color;

    .nav-item {
      margin-right: 0;
      margin-left: -1px;
    }

    .nav-link {
      margin-left: 0;
      border-radius: 0 $border-radius-large $border-radius-large 0;

      &:hover {
        border-right-color: transparent;
        border-left-color: $nav-tabs-border-color;
      }      

      &.active {
        &,
        &:focus,
        &:hover {
          border-left-color: $nav-tabs-active-border;
        }
      }
    }
  }

  .nav-tabs-solid {
    border-right-color: $nav-tabs-solid-border;

    .nav-link {
      &:hover {
        border-color: transparent;
      }
    

      &.active {
        &,
        &:focus,
        &:hover {
          border-color: transparent;
        }
      }
    }

    & + .tab-content {
      padding: $nav-tabs-vertical-solid-content-padding;
    }

    &.nav-tabs-reverse {
      border-left-color: $nav-tabs-solid-border;
    }
  }

  .nav-tabs-line {
    .nav-link {
      border-right: 2px solid transparent;
      border-bottom: none;

      &:hover {
        border-right-color: $nav-tabs-line-hover-border;
      }
    
      &.active {
        &,
        &:hover,
        &:focus {
          border-right: 2px solid $nav-tabs-line-active-border;
          border-bottom: none;
        }
      }
    }

    > .nav-tabs-autoline {
      left: auto;
      right: 0;
      width: 2px;
      height: 0;
      transition-property: top, height;
    }
  }

  .nav-tabs-line.nav-tabs-reverse {
    .nav-link {
      border-right-width: 1px;
      border-left: 2px solid transparent;
      &:hover {
        border-color: transparent;
        border-left-color: $nav-tabs-line-hover-border;
      }
    
      &.active {
        &,
        &:hover,
        &:focus {
          border-right: 1px solid transparent;
          border-left: 2px solid $nav-tabs-line-active-border;
        }
      }
    }

    > .nav-tabs-autoline {
      left: 0;
      right: auto;
    }
  }

  .tab-content {
    overflow: hidden;
  }
}


// Modifier: `nav-tabs-inverse`
// ========================================================================

.nav-tabs-inverse {
  .nav-tabs-solid {
    border-bottom-color: $nav-tabs-inverse-border;

    .nav-link.active {
      &,
      &:hover,
      &:focus {
        color: $nav-tabs-color;
        background-color: $nav-tabs-inverse-bg;
      }
    }
  }

  &.nav-tabs-vertical {
    .nav-tabs-solid {
      border-right-color: $nav-tabs-inverse-border;
      &.nav-tabs-reverse {
        border-left-color: $nav-tabs-inverse-border;
      }
    }
  }

  .tab-content {
    background: $nav-tabs-inverse-bg;
  }
}

// Modifier: `nav-tabs-animate`
// ========================================================================
.nav-tabs-animate {
  .tab-content {
    overflow:hidden;
  }
}

// Size Modifier
// ========================================================================

.nav-tabs-lg {
  @include nav-tabs-size($nav-tabs-lg-font-size, $nav-tabs-lg-line-height, $nav-tabs-lg-padding);
}

.nav-tabs-sm {
  @include nav-tabs-size($nav-tabs-sm-font-size, $nav-tabs-sm-line-height, $nav-tabs-sm-padding);
}