@import "settings";

// Give the tabs something to sit on
.nav-tabs {
  border-bottom: 1px solid $nav-tabs-border-color;
  > li {

    // Actual tabs (as links)
    > a {

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

    // Active state, and its :hover to override normal :hover
    &.active > a {
      &,
      &:hover,
      &:focus {
        color: $nav-tabs-active-link-hover-color;
        background-color: $nav-tabs-active-link-hover-bg;
        border: 1px solid $nav-tabs-active-link-hover-border-color;
      }
    }
  }

}


.nav-tabs > li {

  > a {

    &:hover,
    &:focus {
      background-color: $gray-lighter;
      border-bottom-color: $gray-lighter;
    }

  }

  // Active state, and its :hover to override normal :hover
  &.active > a {
    &,
    &:hover,
    &:focus {
      font-weight: 500;
      color: $nav-tabs-active-link-hover-color;
      background-color: $nav-tabs-active-link-hover-bg;

      @include for-tablet-landscape-up {
        border-bottom: 2px solid $brand-primary;
      }

    }
  }

}

// Tabs Left and Right
// -------------------------

.tabs-left > .nav-tabs .active > a {
	&, &:hover, &:focus {
		border-right: 2px solid $brand-primary;
	}
}

.tabs-right > .nav-tabs .active > a {
	&, &:hover, &:focus {
		border-left: 2px solid $brand-primary;
	}
}

.tabs-left > .nav-tabs {
  border-radius: $border-radius-base 0 0 $border-radius-base;
}

.tabs-right > .nav-tabs {
  border-radius: 0 $border-radius-base $border-radius-base 0;
}
