/* A hand-drawn arrow as a button. The component paints the drawing and
   guarantees the hit area; where the arrow sits is the caller's business, set
   through a positioning class mixed onto the same element.

   Two custom properties feed it: --arrow-image, the chosen drawing, set inline
   per button, and --arrow-width from base/variables.css. */

/* The drawing is wide but shallow — at its ratio a 54px arrow is only 38px
   tall, a mean target for a thumb. The minimums stretch what can be tapped to
   44px square without moving or growing the arrow, which stays centred in
   whatever box that makes. */
.arrow {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* `display` above outranks the UA rule behind the `hidden` attribute, so the
   attribute has to be honoured here explicitly — the arrows ship hidden and are
   revealed by each component's JS. */
.arrow[hidden] {
  display: none;
}

/* The drawing is painted as a mask over the page's text colour rather than
   loaded as an <img>, so it follows the palette an editor sets per page instead
   of staying the black it was drawn in. The ratio is the SVGs' shared viewBox
   (1280 × 902), so the span reserves the right box before the file lands.

   The prefixed line is not redundant: where `mask` is unsupported the colour
   below it still paints, and the arrow degrades to a solid rectangle rather
   than to nothing. */
.arrow__icon {
  display: block;
  width: var(--arrow-width);
  aspect-ratio: 1280 / 902;
  background-color: var(--page-fg, var(--foreground));
  -webkit-mask: var(--arrow-image) center / contain no-repeat;
  mask: var(--arrow-image) center / contain no-repeat;
}

/* Every drawing points right; the "previous" side is the same one mirrored. */
.arrow--prev .arrow__icon {
  scale: -1 1;
}