/*
 * Text-only inline link arrow — sitewide reusable pattern.
 *
 * Usage: add class="text-link-arrow" to any plain <a> or text-style btn link.
 * Works with optional .btn__text wrapper (Nuxt btn markup).
 *
 * Arrow inherits link typography and participates in hover/focus states
 * (colour, opacity, underline) via inherit — no separate icon font.
 */
.text-link-arrow > .btn__text::after,
.text-link-arrow:not(:has(> .btn__text))::after {
  color: inherit;
  content: "→";
  display: inline;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin-inline-start: 0.35em;
  text-decoration: inherit;
  transition:
    color var(--timing-fast, 0.25s) var(--easing-out, cubic-bezier(0.16, 1, 0.3, 1)),
    background var(--timing-fast, 0.25s) var(--easing-out, cubic-bezier(0.16, 1, 0.3, 1));
  vertical-align: baseline;
}

.text-link-arrow:has(> .btn__text)::after {
  content: none;
}

@media (hover: hover) and (pointer: fine) {
  .text-link-arrow:hover > .btn__text::after,
  .text-link-arrow:hover:not(:has(> .btn__text))::after {
    background-image: linear-gradient(
      90deg,
      var(--color-error, #f7323f),
      var(--color-pink, #ef2b5c)
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.text-link-arrow:focus-visible > .btn__text::after,
.text-link-arrow:focus-visible:not(:has(> .btn__text))::after {
  background-image: linear-gradient(
    90deg,
    var(--color-error, #f7323f),
    var(--color-pink, #ef2b5c)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}