/* One underline and one motion for every text-and-arrow action. */
:root {
  --text-link-rule: 1.5px;
  --link-motion: .24s cubic-bezier(.2, .65, .3, 1);
}

body[data-page] a.text-arrow-link {
  --text-arrow-color: var(--blue-hover);
  text-decoration: none;
}
body[data-page] a.text-arrow-link--on-dark {
  --text-arrow-color: var(--blue);
}
body[data-page] a.text-arrow-link--neutral {
  --text-arrow-color: currentColor;
}
body[data-page] a.text-arrow-link:not(.text-arrow-link--neutral) {
  border-bottom: 0;
}
body[data-page] a.text-arrow-link > span {
  position: relative;
  min-width: 0;
  padding-block: 0;
}
body[data-page] a.text-arrow-link > span::after {
  content: '';
  position: absolute;
  inset: auto 0 -.25em;
  height: var(--text-link-rule);
  background: var(--text-arrow-color);
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--link-motion);
  pointer-events: none;
}
body[data-page] a.text-arrow-link > svg {
  flex-shrink: 0;
  transform: none;
  transition: transform var(--link-motion);
}

@media (hover: hover) and (pointer: fine) {
  body[data-page] a.text-arrow-link:hover > span::after {
    transform: scaleX(1);
  }
  body[data-page] a.text-arrow-link:hover > svg {
    transform: translateX(2px);
  }
}

/* Native press feedback also works without a mouse or an extra tap. */
@media (hover: none), (pointer: coarse) {
  body[data-page] a.text-arrow-link:not(.text-arrow-link--neutral):is(:active, :focus-visible) {
    color: var(--text-arrow-color);
  }
}

body[data-page] a.text-arrow-link:is(:active, :focus-visible) > span::after {
  transform: scaleX(1);
}
body[data-page] a.text-arrow-link:is(:active, :focus-visible) > svg {
  transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
  body[data-page] a.text-arrow-link > span::after,
  body[data-page] a.text-arrow-link > svg {
    transition: none;
  }
  body[data-page] a.text-arrow-link:is(:hover, :active, :focus-visible) > svg {
    transform: none;
  }
}