This is a <a href="#">regular link with no class,</a> it is regular. <br>

<a class="link" href="#">
  Standalone Text Link
  <svg viewBox="0 0 18 12"><use href="/main-icons-sprite.svg#arrow-right" /></svg>
</a> <br>

Adipisicing eius quis perferendis dicta aut aliquid Autem pariatur harum nesciunt dicta recusandae. Libero molestiae fugit totam odio cumque commodi. Provident earum quis magni excepturi porro nemo? <a class="link" href="">Praesentium ex architecto <svg viewBox="0 0 18 12"><use href="/main-icons-sprite.svg#arrow-right" /></svg></a>

<ul>
  <li>
    <a class="-wide accent-primary" href="#">
      Primary Text Link
      <svg viewBox="0 0 18 12"><use href="/main-icons-sprite.svg#arrow-right" /></svg>
    </a>
  </li>
  <li>
    <a class="-wide info" href="#">
      <svg viewBox="0 0 18 12"><use href="/main-icons-sprite.svg#arrow-left" /></svg>
      Info Text Link
    </a>
  </li>
  <li>
    <a class="-wide warning" href="#">
      Warning Text Link
      <svg viewBox="0 0 18 12"><use href="/main-icons-sprite.svg#arrow-right" /></svg>
    </a>
  </li>
  <li>
    <a class="-wide error" href="#">
      <svg viewBox="0 0 18 12"><use href="/main-icons-sprite.svg#arrow-left" /></svg>
      Error Text Link
    </a>
  </li>
  <li>
    <a class="-wide success" href="#">
      Success Text Link
      <svg viewBox="0 0 18 12"><use href="/main-icons-sprite.svg#arrow-right" /></svg>
    </a>
  </li>
</ul>

a,
.link {
  --accent-color: var(--link-color, var(--color-blue));

  color: var(--accent-color);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 1em;

  &:where(button) {
    appearance: none;
    background: #0000;
    border: 0;
  }

  svg {
    display: inline;
    height: 1cap;
  }

  &:hover {
    color: var(--accent-color-700);
  }

  &__icon {
    aspect-ratio: 1.5;
    color: inherit;
    flex: 0 0 auto;
    max-height: 1cap;
    transition: color var(--root-duration-fast) var(--root-ease-out);
  }

  &.-wide {
    align-items: center;
    display: inline-flex;
    gap: 1rem;
  }
}