@mixin theme-color-with-hover(
  $textcolor,
  $bg-color,
  $text-hover-color: null,
  $bg-hover-color: null
) {
  color: $textcolor;
  background-color: $bg-color;

  &:hover {
    @if ($text-hover-color) {
      color: $text-hover-color;
    } @else {
      color: $textcolor;
    }

    @if ($bg-hover-color) {
      background-color: scale-color($bg-hover-color, $lightness: 0%);
    } @else {
      background-color: scale-color($bg-color, $lightness: -20%);
    }
  }
  &:focus{
    background-color: $bg-color;
    color: $textcolor;
  }
}