ngb-tabset {
  max-width: 100%;
  display: block;
}

.nav-tabs {
  border-bottom: solid 0.0625rem $gray-100;
  padding-bottom: 0.25rem;
  overflow-y: hidden;
  overflow-x: auto;
}

.nav-tabs .nav-item {
  color: $gray-650;
  margin-bottom: -0.25rem;
}

.nav-item .badge {
  margin-top: -0.3125rem;
}

.nav-tabs .nav-link {
  @include brand-font-h3();
  font-size: 0.875em;
  text-transform: uppercase;
  border-radius: 0;
  border-width: 0;
  padding: 0.5rem 0.25rem;
  margin: 0 0.75rem;
  border-bottom: solid 0.25rem transparent;
  color: $gray-650;
  white-space: nowrap;
  cursor: pointer;

  &:hover {
    border-color: $gray-200;
    border-bottom: solid 0.25rem $gray-200;
  }

  &.active,
  &.active:hover,
  &.active:active,
  &.active:focus {
    border-color: $alert-green;
    background-color: transparent;
    cursor: default;
    color: $gray-900;
    font-family: $font-family-brand-bold;
    font-weight: 700;
  }

  &:not(.active) .badge {
    background: $gray-400;
  }
}

.tab-pane {
  padding-top: 2rem;
}

content > tabs > .nav-tabs {
  position: relative;
  border-bottom: none;
  z-index: 1001;
  overflow-y: hidden;
  overflow-x: auto;
  width: 100%;
}

section.content.has-tabs:not(.has-overview) content > tabs > .nav-tabs,
section.content content > tabs > .nav-tabs.sticky-tabs {
  position: fixed;
  top: 62px;
}

section.overview + section.content content > tabs > .nav-tabs.sticky-tabs + .tab-content {
  // Fix the content jump when scrolling and the tabs 'fixed' state is changed
  transform: translateY(40px);
}

@include media-breakpoint-up(sm) {
  //Moved padding to small display to allow enlargement of rightbar-content
  .col .tab-content {
    padding-left: 1rem;
  }
}


.armor-ops-tab a {
  @extend .ico;
  @extend .ico-armor;

  &:before {
    @extend .pr-1;
    color: $intense-orange;
  }
}

.tabset-with-empty-state .nav-tabs > li:nth-of-type(1):not(.menu-header),
.tabset-with-empty-state .nav-tabs > li.menu-header + li {
  display: none;
}

.tab-content .tab-pane.tab-scrollable {
  position: relative;
  max-height: calc(100vh - 105px);
  height: calc(100vh - 105px);
  overflow-y: scroll;
  margin-left: -2.875rem;
  margin-right: -2.875rem;
  padding: 0;
}

.tab-content.has-overview .tab-pane.tab-scrollable {
  max-height: calc(100vh - 281px);
  height: calc(100vh - 281px);
}
