// 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-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-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-box-shadow                       : 0 1px 1px rgba(0, 0, 0, .05) !default;

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

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

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

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

// Component: `nav-quick`
// ========================================================================
.nav-quick {
  background-color: $nav-quick-bg;
  box-shadow: $nav-quick-box-shadow;
  .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;
  }

  .nav-link.active,
  .nav-item.show .nav-link,
  .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;
    }
  }

  .nav-link.active,
  .nav-item.show .nav-link,
  .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;
    }
  }

  .nav-link.active,
  .nav-item.show .nav-link,
  .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,
  .nav-item.show > .nav-link {
    @include plain-hover-focus {
      border-bottom-color: $nav-tabs-active-border;
    }
  }

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

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

    .nav-item.open > .nav-link,
    .nav-item.show > .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{
    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,
  .nav-item.show .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 {

  .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-bottom-color: transparent;
          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-right-color: transparent;
          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-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-link.active {
    &,
    &:hover,
    &:focus {
      border-color: transparent;
    }
  }

  .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-link.active {
      &,
      &:hover,
      &:focus {
        border-color: transparent;
      }
    }

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