Arrow Button

---
/**
 * ArrowButton — the arrow leaves and a new one arrives on hover, zero JS.
 * Two copies of the icon share one clipped cell; hover translates the first
 * out and the second in on the preset's spring, so the arrow reads as one
 * that kept going. `direction` rotates the cell, so up, down and left travel
 * the way they point; on a right-to-left page right and left are mirrored,
 * so right still points past the end of the label. Hover is read from the
 * button itself or from the link or button around it; :focus-visible draws
 * the same state.
 */
import type { HTMLAttributes } from 'astro/types';

type Direction = 'right' | 'left' | 'up' | 'down';

interface Props extends HTMLAttributes<'button'> {
  /** Element to render. `span` for a label inside your own link or button. */
  as?: 'button' | 'a' | 'span';
  /** For `as="a"`. */
  href?: string;
  /** Where the arrow points and travels. */
  direction?: Direction;
}

const ROT: Record<Direction, number> = { right: 0, down: 90, left: 180, up: -90 };
const { as: Tag = 'button', href, direction = 'right', class: className, style, ...rest } = Astro.props;
const vars = [`--ma-arrow-rot:${ROT[direction]}deg`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
---

<Tag class:list={['ma-arrow', className]} data-dir={direction} href={Tag === 'a' ? href : undefined} type={Tag === 'button' ? 'button' : undefined} style={vars} {...rest}>
  <span class="ma-arrow__label"><slot /></span>
  <span class="ma-arrow__box" aria-hidden="true">
    <svg class="ma-arrow__icon ma-arrow__icon--out" viewBox="0 0 16 16"><path d="M2 8h11M9 4l4 4-4 4" /></svg>
    <svg class="ma-arrow__icon ma-arrow__icon--in" viewBox="0 0 16 16"><path d="M2 8h11M9 4l4 4-4 4" /></svg>
  </span>
</Tag>

<style is:global>
  @layer components {
    :where(.ma-arrow) {
      display: inline-flex;
      align-items: center;
      gap: 0.5em;
      padding: 0.65em 1.1em;
      border: 1px solid var(--ma-edge);
      border-radius: 0.6em;
      background: var(--ma-panel);
      color: var(--ma-ink);
      font: inherit;
      font-weight: 500;
      line-height: 1.2;
      text-decoration: none;
      cursor: pointer;
      transition:
        border-color var(--ma-duration-fast) var(--ma-ease-out),
        background-color var(--ma-duration-fast) var(--ma-ease-out);
    }
    :where(.ma-arrow[data-dir='left'] .ma-arrow__box) {
      order: -1;
    }
    :where(.ma-arrow__box) {
      display: inline-grid;
      width: 1.1em;
      height: 1.1em;
      overflow: clip;
      rotate: var(--ma-arrow-rot, 0deg);
      flex: none;
    }
    :where(.ma-arrow__icon) {
      grid-area: 1 / 1;
      width: 100%;
      height: 100%;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: translate var(--ma-duration) var(--ma-ease);
    }
    :where(.ma-arrow__icon--in) {
      translate: -110% 0;
    }
    /* right to left, a horizontal arrow is mirrored: right points to the inline end (left on the page), away from the
       label as it does left to right, and travels that way; left mirrors back. The mirror is on the cell, so the travel
       inside it follows. [dir] and not :dir(): Chrome has :dir() only from 120, and a build that targets an older
       Chrome rewrites it into a guess from lang, which a page that sets only dir never matches. An ltr island one level
       inside an rtl page is set back */
    :where([dir='rtl'] .ma-arrow:is([data-dir='right'], [data-dir='left']) .ma-arrow__box, .ma-arrow[dir='rtl']:is([data-dir='right'], [data-dir='left']) .ma-arrow__box) {
      scale: -1 1;
    }
    :where([dir='rtl'] [dir='ltr'] .ma-arrow .ma-arrow__box, [dir='rtl'] .ma-arrow[dir='ltr'] .ma-arrow__box) {
      scale: none;
    }
    @media (hover: hover) {
      :where(.ma-arrow:hover),
      :where(:is(a, button, label):hover .ma-arrow) {
        border-color: color-mix(in srgb, var(--ma-ink) 40%, transparent);
      }
      :where(.ma-arrow:hover .ma-arrow__icon--out),
      :where(:is(a, button, label):hover .ma-arrow .ma-arrow__icon--out) {
        translate: 110% 0;
      }
      :where(.ma-arrow:hover .ma-arrow__icon--in),
      :where(:is(a, button, label):hover .ma-arrow .ma-arrow__icon--in) {
        translate: 0 0;
      }
    }
    :where(.ma-arrow:focus-visible),
    :where(:is(a, button):focus-visible .ma-arrow) {
      outline: 2px solid currentColor;
      outline-offset: 2px;
    }
    :where(.ma-arrow:focus-visible .ma-arrow__icon--out),
    :where(:is(a, button):focus-visible .ma-arrow .ma-arrow__icon--out) {
      translate: 110% 0;
    }
    :where(.ma-arrow:focus-visible .ma-arrow__icon--in),
    :where(:is(a, button):focus-visible .ma-arrow .ma-arrow__icon--in) {
      translate: 0 0;
    }
    @media (prefers-reduced-motion: reduce) {
      :where(.ma-arrow__icon) {
        transition: none;
      }
      :where(.ma-arrow__icon--out) {
        translate: 0 0;
      }
      :where(.ma-arrow__icon--in) {
        translate: -110% 0;
      }
    }
  }
</style>