/* =========================================================
   Component — Arrow link

   A link that carries its own direction. The chevron is two borders
   rotated into place, so RTL and LTR need no separate glyph — only a
   different angle.
   ========================================================= */
.link-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-inline-end: 1.15em;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-primary-text);
}
.link-arrow::after {
  content: "";
  position: absolute;
  inset-inline-end: 0.2em;
  top: 50%;
  width: 0.42em;
  height: 0.42em;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  translate: 0 -50%;
  rotate: -45deg;
  transition: translate var(--dur-fast) var(--ease-out);
}
:root[dir="rtl"] .link-arrow::after { rotate: 135deg; }
.link-arrow:hover::after { translate: 0.22em -50%; }
:root[dir="rtl"] .link-arrow:hover::after { translate: -0.22em -50%; }

/* An inline link cannot take a 44px box without tearing a hole in
   the paragraph it sits in, so it takes the height in padding and
   gives the line back the same amount in a negative margin. The
   text stays where it was; the target is twice the size. */
@media (pointer: coarse) {
  .link-arrow {
    padding-block: var(--space-3);
    margin-block: calc(var(--space-3) * -1);
  }
}