@import "../_variables";

.t-NavTabs {
  background-color: @g_neutral-150;
}

.t-NavTabs-item {
  font-weight: 600;
  font-size: 16px;
  line-height: 32px;
  border-right: 0;

  &.is-active,
  &.is-active:hover {
    font-weight: 700;
    box-shadow: inset 0 4px 0 @g_brand;

    background-color: @g_neutral-20;
    color: @g_neutral-190;
  }

  &:hover {
    background-color: rgba(255, 255, 255, .1);
  }

  &:hover,
  &.is-active {
    @media (max-width: @display-xs) {
      // background-color: transparent;
      // box-shadow: inset 0 4px 0 @g_brand;
    }
  }
}

.t-NavTabs-link {
  padding: 12px 16px;
}