.pf-icon-link {
  $color-check: currentColor;
  $color-check-hover: currentColor;
  $transition-speed-quick: 200ms;
  $boundary: 1.5em;
  $icon-height: 1em;

  display: inline-block;
  width: $boundary;
  height: $boundary;
  text-align: center;

  svg {
    transition: fill $transition-speed-quick;
    width: $icon-height;
    height: $icon-height;
    fill: $color-check;
  }

  &:hover,
  &:focus {
    text-decoration: none;

    svg {
      fill: $color-check-hover;
    }
  }
}

.pf-icon-link--primary {
  $color-check: $color-blue-check;
  $color-check-hover: $color-blue-check-hover;

  svg {
    fill: $color-check;
  }

  &:hover,
  &:focus {
    svg {
      fill: $color-check-hover;
    }
  }
}