/*
The arrow. One glyph for every arrow in the design — the newsletter "SIGN UP", the "SEE A
SAMPLE REPORT" pill, the services row — so it is a component and not a shape drawn inside
whichever block needed it first.

The path is not a guess. It was measured on the design render at the "SEE A SAMPLE REPORT"
button, where the glyph occupies 18x19 device pixels: a shaft across the full width and a
chevron whose length equals its half-height, i.e. 45 degrees, with round caps. The viewBox
holds those same proportions, so one path is correct at 24px and at 50px alike.

It takes its colour from the text around it (currentcolor) and its size from
--arrow-size, so a block sizes and colours an instance without reaching into these rules.

The direction is a modifier rather than a second path: rotating one glyph keeps the caps,
the stroke and the angle identical in every direction, which drawing four paths would not.
*/
.arrow {
  display: block;
  flex: 0 0 auto;
  width: var(--arrow-size);
  height: var(--arrow-size);
  fill: none;
  stroke: currentcolor;
  stroke-width: var(--arrow-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;

  /*
  Direction is a knob and not only a set of modifier classes, because a block sometimes has to
  turn an arrow it does not print itself: the service pages' "How it works" accordion is the
  shared steps component, and its frame draws the link arrows on the diagonal where the home
  page's draws them flat. A block sets --arrow-rotate on its own instance and the value inherits
  down; reaching in with `.some-block .arrow { … }` would be the descendant selector the design
  system forbids.
  */
  rotate: var(--arrow-rotate, 0deg);
}

.arrow--up {
  --arrow-rotate: -90deg;
}

.arrow--up-right {
  --arrow-rotate: -45deg;
}

.arrow--down {
  --arrow-rotate: 90deg;
}

.arrow--left {
  --arrow-rotate: 180deg;
}