/* LINK WITH ARROW */
a.link.subheading,
button.link.subheading {
  font-size: 1rem;
  background: none;

  &:after {
    content: "";
    display: inline-block;
    margin-left: 0.5rem;
    width: 0.7rem;
    height: 0.7rem;
    mask-image: url('data:image/svg+xml;utf8,<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="currentColor" stroke-width="4" d="M1 18h32M16.5 1.5 33 18 16.5 34.5"></path></svg>');
    mask-size: auto 0.7rem;
    mask-repeat: no-repeat;
    background-color: currentcolor;
    transition: transform 0.2s;
  }

  &:hover:after {
    transform: translateX(0.3em);
  }
}

/* BUTTON WITH BACKGROUND & with outline */
a.button,
button.button {
  --button-padding-block: 0.625rem !important;
  --button-padding-inline: 2rem !important;
  .button__content {
    font-size: 0.875rem;
    text-transform: uppercase;
  }
}