@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;
}