@import "_variables";

@Tabs-BG:        #323334;
@Tabs-FG:        #c0c4c8;
@Tabs-Active-BG: #0572ce;
@Tabs-Active-FG: #FFFFFF;

.t-NavTabs {
  background-color: @Tabs-BG;
  &::-webkit-scrollbar-thumb {
      background-color: contrast(@Tabs-Active-BG, darken(@Tabs-Active-BG,  3%), lighten(@Tabs-Active-BG,  3%),  43%);
      box-shadow: inset 1px 0 0 0 @Tabs-BG;
      &:hover {background-color: contrast(@Tabs-Active-BG, darken(@Tabs-Active-BG,  15%), lighten(@Tabs-Active-BG,  15%),  43%);}
  }
  &::-webkit-scrollbar-track {
      background: @Tabs-BG;
      &:hover {background-color: contrast(@Tabs-BG, darken(@Tabs-BG,  15%), lighten(@Tabs-BG,  15%),  43%);}
  }
}
.t-NavTabs-item {
  color: @Tabs-FG;
  border-color: #323334;
  &:hover,
  &.is-active {
    background-color: @Tabs-Active-BG;
    color: @Tabs-Active-FG;
  }
}
.t-NavTabs-badge {
  background-color: @Tabs-Active-FG;
  color: @Tabs-Active-BG;
}


/* Navigation Tab Positioning Overrides
   ========================================================================== */
@media (min-width: 769px) {
  .t-Header-nav .t-NavTabs {
    margin: 0 20px;
    border-radius: 2px;
  }  
}