//
// Navs
// --------------------------------------------------

.nav {
  padding-left: 0; // Override default ul/ol
  margin-bottom: 0;
  list-style: none;

  @include clearfix;

  > li {
    position: relative;
    display: block;

    > a {
      position: relative;
      display: block;
      padding: $nav-link-padding;
      font-size: $font-size-base;
      line-height: $nav-line-height;
      font-weight: $font-weight-medium;
      text-transform: uppercase;

      &:hover,
      &:focus {
        text-decoration: none;
      }

      > img {
        max-width: none;
      }
    }

    &:first-child > a {
      padding-left: 0;
    }

    &.disabled > a {
      @include themes(color, nav-disabled-link-color);

      &:hover,
      &:focus {
        text-decoration: none;
        cursor: $cursor-disabled;
        background-color: transparent;

        @include themes(color, nav-disabled-link-hover-color);
      }
    }
  }

  .nav-divider {
    @include nav-divider;
  }

  // Tabs
  // -------------------------

  &-tabs {
    border-bottom-width: 0;
    position: relative;

    &:before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      height: 1px;
      right: 0;
      display: block;

      @include themes(background-color, nav-tabs-border-color);
    }

    > li {
      float: left;

      > a {
        line-height: $nav-line-height;
        border-radius: $border-radius-base $border-radius-base 0 0;
        position: relative;

        @include themes(color, color-new-body-dark);

        &:after {
          position: absolute;
          bottom: 0;
        }

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

          @include themes(color, color-new-heading);

          &:after {
            content: "";
            height: 2px;
            left: $nav-link-padding-x;
            right: $nav-link-padding-x;

            @include border-radius(1px 1px 0px 0px);

            @include themes(background-color, nav-tabs-link-hover-border-color);
          }
        }
      }

      &:first-child {
        > a {
          &:hover,
          &:focus {
            &:after {
              left: 0;
            }
          }
        }
      }

      &.active {
        > a {
          &,
          &:hover,
          &:focus {
            cursor: default;
            border-bottom-color: transparent;
            color: $nav-tabs-active-link-hover-color;
            background-color: transparent;

            &:after {
              content: "";
              height: 2px;
              left: $nav-link-padding-x;
              right: $nav-link-padding-x;

              @include border-radius(1px 1px 0px 0px);
              @include themes(
                background-color,
                nav-tabs-active-link-hover-border-color
              );
            }
          }
        }

        &:first-child {
          > a {
            &,
            &:hover,
            &:focus {
              &:after {
                left: 0;
              }
            }
          }
        }
      }

      &.disabled {
        > a {
          &:hover,
          &:focus {
            &:after {
              content: none;
            }
          }
        }
      }
    }

    .dropdown-menu {
      margin-top: -1px;

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

    // pulling this in mainly for less shorthand
    &.nav-justified {
      @extend .nav-justified;

      border-bottom: 0;

      > li > a {
        border-bottom-width: 0 !important;
        margin-right: 0;
        border-radius: $border-radius-base;

        &:before {
          bottom: -1px;
        }
      }

      > .active > a,
      > .active > a:hover,
      > .active > a:focus {
        border-width: 0;
      }

      @include media-breakpoint-up(md) {
        > li > a {
          border-radius: $border-radius-base $border-radius-base 0 0;

          @include themes-border-bottom(nav-tabs-border-color);
        }

        > .active > a,
        > .active > a:hover,
        > .active > a:focus {
          border-bottom-color: $nav-tabs-active-link-hover-color;
        }
      }
    }
  }
}

// Justified nav links
// -------------------------

.nav-justified {
  width: 100%;

  > li {
    float: none;
    > a {
      margin-bottom: 5px;
      text-align: center;
    }
  }

  > .dropdown .dropdown-menu {
    top: auto;
    left: auto;
  }

  @include media-breakpoint-up(md) {
    > li {
      display: table-cell;
      width: 1%;
      > a {
        margin-bottom: 0;
      }
    }
  }
}

// Tabbable tabs
// -------------------------

.tab-content {
  > .tab-pane {
    display: none;
  }
  > .active {
    display: block;
  }
}