@use '../../variables' as var;

@use '../focus';

$-border-radius: var.$border-radius;
$-color-link: var.$color-link;
$-color-link--hover: var.$color-link--hover;

@mixin link {
  @include focus.outline-on-keyboard-focus;
  // Ensure the tag has width in order for :focus styling to render correctly.
  display: inline-block;
  color: $-color-link;
  text-decoration: none;
  // Give links a radius to allow :focus styling to appear similar to that of buttons
  border-radius: $-border-radius;

  &:active,
  &:focus {
    text-decoration: none;
  }

  &:hover {
    text-decoration: none;
    color: $-color-link--hover;
  }
}