@import "_variables";

// @Tabs-BG:        @g_Accent-BG;
// @Tabs-FG:        contrast(@g_Accent-BG, darken(@g_Accent-BG,   75%), lighten(@g_Accent-BG,   75%),  43%);
// @Tabs-Active-BG: darken(@Tabs-BG,3%);
// @Tabs-Active-FG: contrast(@Tabs-Active-BG, darken(@Tabs-Active-BG,   75%), lighten(@Tabs-Active-BG,   75%),  43%);

@Tabs-BG:        @g_Nav-BG;
@Tabs-FG:        @g_Nav-FG;
@Tabs-Active-BG: @g_Nav-Active-BG;
@Tabs-Active-FG: @g_Nav-Active-FG;

.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: contrast(@Tabs-Active-BG, darken(@Tabs-Active-BG,  15%), lighten(@Tabs-Active-BG,  15%),  43%);
  &:hover,
  &.is-active {
    background-color: @Tabs-Active-BG;
    color: @Tabs-Active-FG;
  }
}
.t-NavTabs-badge {
  background-color: @Tabs-Active-FG;
  color: @Tabs-Active-BG;
}