/* Separate translation preserves arrow rotation and does not move the control. */
:is(svg, span)[data-hover-arrow][aria-hidden] {
  translate: 0 0;
  transition: translate .2s ease-out;
}
span[data-hover-arrow] { display: inline-block; }
:is(a, button, summary):focus-visible [data-hover-arrow] { translate: .25rem 0; }
@media (hover: hover) and (pointer: fine) {
  :is(a, button, summary):hover [data-hover-arrow] { translate: .25rem 0; }
}
@media (prefers-reduced-motion: reduce) {
  :is(svg, span)[data-hover-arrow][aria-hidden] { translate: none !important; transition: none !important; }
}

/* Actual mouse/pen input also works when primary-hover queries report touch. */
:is(a[href], button, summary)[data-arrow-pointer]:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(:active) [data-hover-arrow] {
  translate: .25rem 0;
}
/* Press feedback moves only the icon and keeps existing directional rotation. */
:is(a[href], button, summary)[data-arrow-pointer]:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):active [data-hover-arrow] {
  translate: .1rem 0;
}
/* Unavailable controls never retain native or delegated directional motion. */
:is(a[href], button, summary):is(:disabled, [aria-disabled="true"], [aria-busy="true"]) [data-hover-arrow],
:is([inert], [hidden], [aria-hidden="true"], [aria-disabled="true"], [aria-busy="true"], .header-fit-measure) :is(a[href], button, summary) [data-hover-arrow] {
  translate: none !important;
}
@media (prefers-reduced-motion: reduce) {
  :is(a[href], button, summary)[data-arrow-pointer] [data-hover-arrow] { translate: none !important; transition: none !important; }
}

/* Each icon follows its glyph and rendered rotation; diagonal travel has the
   same total distance as horizontal travel. The control keeps its own layout. */
:is(a[href], button, summary):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):focus-visible [data-hover-arrow] {
  translate: calc(.25rem * var(--arrow-direction-x, 1)) calc(.25rem * var(--arrow-direction-y, 0));
}
@media (hover: hover) and (pointer: fine) {
  :is(a[href], button, summary):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover [data-hover-arrow] {
    translate: calc(.25rem * var(--arrow-direction-x, 1)) calc(.25rem * var(--arrow-direction-y, 0));
  }
}
:is(a[href], button, summary)[data-arrow-pointer]:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(:active) [data-hover-arrow] {
  translate: calc(.25rem * var(--arrow-direction-x, 1)) calc(.25rem * var(--arrow-direction-y, 0));
}
/* The extra availability guard wins over the later shared pressed stylesheet
   for mouse, keyboard and touch presses, retaining the smaller distance. */
:is(a[href], button, summary):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not([hidden]):active [data-hover-arrow],
:is(a[href], button, summary)[data-arrow-pointer]:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):active [data-hover-arrow] {
  translate: calc(.1rem * var(--arrow-direction-x, 1)) calc(.1rem * var(--arrow-direction-y, 0));
}
@media (prefers-reduced-motion: reduce) {
  :is(a[href], button, summary) [data-hover-arrow] { translate: none !important; transition: none !important; }
}