/* Decorative arrows are paths, never font glyphs or platform emoji. */
.arrow-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: -.125em;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.arrow-icon path { transform-origin: 12px 12px; }
.arrow-ne path { transform: rotate(-45deg); }
.arrow-se path { transform: rotate(45deg); }
.arrow-sw path { transform: rotate(135deg); }
.arrow-nw path { transform: rotate(-135deg); }
.arrow-down path { transform: rotate(90deg); }
.arrow-left path { transform: rotate(180deg); }
.arrow-up path { transform: rotate(-90deg); }
/* Flex controls center the SVG box, without an inline baseline spacer. */
.button > span:has(> .arrow-icon) { display: inline-flex; align-items: center; flex-shrink: 0; }
.button > .arrow-icon, .button > span > .arrow-icon { display: block; }
.back-to-top .arrow-icon { display: block; width: 22px; height: 22px; }