/* Arrow-prefixed link. The arrow is drawn from CSS content rather than a glyph
   in the template, so its colour resolves through the token contract and never
   ships as a literal in the markup. */

/* The class is combined with the data attribute purely for specificity. Site
   themes style content lists via selectors like `.page-content ul > li`
   (0,1,2), which outranks a lone attribute selector (0,1,1) and loads after
   component CSS - so a bare reset here silently loses. Attribute + class is
   (0,2,0) and wins outright.

   The class is prefixed because `.arrow-link` is already taken: the ecosurfaces
   theme defines its own arrow-link utility with a trailing arrow PNG, and a
   bare name here inherited that arrow, its font size and its side spacing. */
[data-component-id='ecore_common:arrow_link'].ec-arrow-link {
  list-style: none;
  /* Clear the theme's own list treatment: it paints a raster arrow bullet and
     indents for it, which would double up with the arrow drawn below. */
  background-image: none;
  padding-left: 0;
  padding-right: 0;
  margin: 0;

  /* The theme's list treatment also paints an arrow through ::after. */
  &::after {
    content: none;
    background-image: none;
  }

  .arrow-link__link {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    font-family: Silka, sans-serif;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.5;
    letter-spacing: 0.005em;
    color: var(--ec-primary);
    text-decoration: none;
    transition: color 0.2s ease;

    &::before {
      content: '\2192';
      display: inline-block;
      /* The glyph carries the link's colour; the transition is on the arrow
         alone so the label does not appear to shift on hover. */
      transition: transform 0.2s ease;
    }

    &:hover,
    &:focus-visible {
      color: var(--ec-ink-strong);
      text-decoration: underline;
      text-underline-offset: 3px;

      &::before {
        transform: translateX(3px);
      }
    }
  }
}