// 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-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-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                : transparent !default;

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

$nav-quick-bg                               : $inverse !default;
$nav-quick-hover-bg                         : $bg-color-base !default;

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

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

.nav-link {

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

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



// Component: `nav-quick`
// ========================================================================
.nav-quick {
  background-color: $nav-quick-bg;
  
  .nav-link {
    color: $nav-tabs-color;
    &:hover {
      background-color: $nav-quick-hover-bg;
    }
  }

  &-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-link {
   
    color: $nav-tabs-color;
    @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;
    }
  }
}

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

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

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


// 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 {
    background-color: $nav-tabs-solid-bg;
  }

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


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

.nav-tabs-line {

  .nav-link {
    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;
    }
  }

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

  > .nav-tabs-autoline {
    background-color: $nav-tabs-active-bg;
  }

  &.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;
      }
    }
  }
}

// CLASS [tab-line-top]
// ========================================================================
.tabs-line-top{
  border-bottom: 1px solid $nav-tabs-line-border;
  .nav-link,
  .nav-item .nav-link{
    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;
    }
  }
}


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

.nav-tabs-vertical {

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

    .nav-link {

      &: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 {
    border-right: none;
    border-left: 1px solid $nav-tabs-border-color;

    .nav-link {

      &: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;
        }
      }
    }

    &.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-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;
        }
      }
    }
  }
}


// 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;
  }
}