/* Shared arrow feedback for every page; only the icon moves, never its target. */
:where(a, button, [role="button"]) :is(
  .td-arrow,
  .fa-arrow-right,
  .fa-arrow-left,
  .fa-arrow-up,
  .fa-arrow-down,
  .fa-arrow-up-right-from-square,
  .fa-arrow-right-from-bracket,
  .fa-right-to-bracket,
  .fa-angle-left,
  .fa-angle-right,
  .fa-angles-left,
  .fa-angles-right
) {
  display: inline-block;
  translate: 0 0;
}

:is(.fa-arrow-right, .fa-arrow-right-from-bracket, .fa-right-to-bracket, .fa-angle-right, .fa-angles-right),
.td-arrow[data-direction="right"] {
  --td-arrow-x: 3px;
  --td-arrow-y: 0px;
}

:is(.fa-arrow-left, .fa-angle-left, .fa-angles-left),
.td-arrow[data-direction="left"] {
  --td-arrow-x: -3px;
  --td-arrow-y: 0px;
}

.fa-arrow-up,
.td-arrow[data-direction="up"] {
  --td-arrow-x: 0px;
  --td-arrow-y: -3px;
}

.fa-arrow-down,
.td-arrow[data-direction="down"] {
  --td-arrow-x: 0px;
  --td-arrow-y: 3px;
}

.fa-arrow-up-right-from-square,
.td-arrow[data-direction="up-right"] {
  --td-arrow-x: 2px;
  --td-arrow-y: -2px;
}

.td-arrow[data-direction="up-left"] {
  --td-arrow-x: -2px;
  --td-arrow-y: -2px;
}

.td-arrow[data-direction="down-right"] {
  --td-arrow-x: 2px;
  --td-arrow-y: 2px;
}

.td-arrow[data-direction="down-left"] {
  --td-arrow-x: -2px;
  --td-arrow-y: 2px;
}

/* Keep arrows stationary when reduced motion is requested. */
@media (prefers-reduced-motion: no-preference) {
  :where(a, button, [role="button"]) :is(
    .td-arrow,
    .fa-arrow-right,
    .fa-arrow-left,
    .fa-arrow-up,
    .fa-arrow-down,
    .fa-arrow-up-right-from-square,
    .fa-arrow-right-from-bracket,
    .fa-right-to-bracket,
    .fa-angle-left,
    .fa-angle-right,
    .fa-angles-left,
    .fa-angles-right
  ) {
    transition: translate var(--td-motion, 180ms) var(--td-ease, cubic-bezier(.2, .7, .2, 1));
  }

  :where(a, button, [role="button"]):not(:disabled, [aria-disabled="true"], .disabled):is(:hover, :focus-visible) :is(
    .td-arrow,
    .fa-arrow-right,
    .fa-arrow-left,
    .fa-arrow-up,
    .fa-arrow-down,
    .fa-arrow-up-right-from-square,
    .fa-arrow-right-from-bracket,
    .fa-right-to-bracket,
    .fa-angle-left,
    .fa-angle-right,
    .fa-angles-left,
    .fa-angles-right
  ) {
    translate: var(--td-arrow-x, 0px) var(--td-arrow-y, 0px);
  }
}