/* fx.css · micro/button-arrow, the arrow slides out and the next one slides in · owner: Lizzy East · all rights reserved */

/* Two copies of the arrow share one small window (data-fx-arrow). On hover or keyboard
   focus the first leaves forward and the second arrives from behind it; the window
   clips both, so the button never changes size. data-fx-arrow="up" is the diagonal
   version, for links that leave the page. CSS only. */
[data-fx~="micro/button-arrow"] [data-fx-arrow] {
  display: inline-grid;
  flex: none;
  width: var(--fx-arrow-size, 1.15em);
  height: var(--fx-arrow-size, 1.15em);
  overflow: clip;
  vertical-align: -0.2em;
}
[data-fx~="micro/button-arrow"] [data-fx-arrow] > * {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
}
[data-fx~="micro/button-arrow"] [data-fx-arrow] > :last-child { translate: -110% 0; }
[data-fx~="micro/button-arrow"] [data-fx-arrow="up"] > :last-child { translate: -110% 110%; }
@media (prefers-reduced-motion: no-preference) {
  [data-fx~="micro/button-arrow"] [data-fx-arrow] > * {
    transition: translate var(--fx-arrow-dur, 460ms) var(--fx-arrow-ease, cubic-bezier(0.7, 0, 0.2, 1));
  }
  [data-fx~="micro/button-arrow"] [data-fx-arrow] > :last-child { transition-delay: 70ms; }
}
@media (hover: hover) and (pointer: fine) {
  [data-fx~="micro/button-arrow"]:hover [data-fx-arrow] > :first-child { translate: 110% 0; }
  [data-fx~="micro/button-arrow"]:hover [data-fx-arrow="up"] > :first-child { translate: 110% -110%; }
  [data-fx~="micro/button-arrow"]:hover [data-fx-arrow] > :last-child { translate: 0 0; }
}
[data-fx~="micro/button-arrow"]:focus-visible [data-fx-arrow] > :first-child { translate: 110% 0; }
[data-fx~="micro/button-arrow"]:focus-visible [data-fx-arrow="up"] > :first-child { translate: 110% -110%; }
[data-fx~="micro/button-arrow"]:focus-visible [data-fx-arrow] > :last-child { translate: 0 0; }