.tab {
  @include textstyle-smallbold;
  border-radius: 500px; // Large value creates pill shape
  color: $color-interactive1;
  padding: $gridspacing $gridspacing * 1.5;
  transition: background-color $transition-duration $transition-easing,
              color $transition-duration $transition-easing;
  will-change: background-color, color;

  &:hover {
    background-color: $color-interactive1;
    color: $color-light1;
  }

  &.tab-is-active {
    background-color: $color-interactive2;
    color: $color-light1;

    &:hover {
      background-color: $color-interactive1;
      color: $color-light1;
    }
  }
}