.hover-arrow {
  --arrow-spacing: 5px;
  --arrow-hover-transition: 150ms cubic-bezier(0.215, 0.61, 0.355, 1);
  --arrow-hover-offset: translateX(3px);
  --arrow-tip-transform: none;
  --arrow-line-opacity: 0;

  position: relative;
  top: var(--arrow-top, -1px);
  margin-left: var(--arrow-spacing);
  stroke-width: 2px;
  fill: none;
  stroke: currentColor;

  .hover-arrow-line {
    opacity: var(--arrow-line-opacity);
    transition: opacity var(--hoverTransition, var(--arrow-hover-transition));
  }
  .hover-arrow-tip {
    transform: var(--arrow-tip-transform);
    transition: transform var(--hoverTransition, var(--arrow-hover-transition));
  }
}

@media (pointer: fine) {
  a:hover, button:hover {
    .hover-arrow-line {
      --arrow-line-opacity: 1;
    }
    .hover-arrow-tip {
      --arrow-tip-transform: var(--arrow-hover-offset);
    }
  }
}