%link,
link {
  color: $link_color;
  text-decoration: underline;

  &:visited {
    color: $link_visited_color;

    *:selected & { color: mix($selected_fg_color, $link_visited_color, 60%); }
  }

  &:hover {
    $_fg: lighten($link_color, 10%);
    color: $_fg;

    *:selected & { color: mix($selected_fg_color, $_fg, 90%); }
  }

  &:active {
    color: $link_color;

    *:selected & { color: mix($selected_fg_color, $link_color, 80%); }
  }

  &:disabled { color: transparentize(desaturate($link_color, 100%), 0.2); }

  @at-root %link_selected,
  &:selected,
  *:selected & { color: mix($selected_fg_color, $link_color, 80%); }
}

link {
  @include focus-ring();
}

button.link {
  @extend %link;

  &,
  &:hover,
  &:active,
  &:checked {
    @extend %undecorated_button;
  }

  > label {
    text-decoration: underline;
  }
}
