// Links within content must be visually underlined
// @link https://make.wordpress.org/themes/handbook/review/accessibility/required/#content-links
@mixin link() {
  color: var(--color-link-text);

  // Override possible flex styles to enable link wrapping
  // stylelint-disable-next-line declaration-no-important
  display: inline !important;
  // Create your own default content link styles here
  // for pages and articles
  text-decoration: underline;
  text-decoration-color: var(--color-link-text);
  text-underline-offset: 6px;
  transition: all .18s ease-in-out;

  &::after {
    background-image: url('../../svg/external-link-styled-links.svg');
  }

  &:hover,
  &:focus {
    color: var(--color-link-text-hover);
    text-decoration-color: var(--color-link-text-hover);

    &::after {
      background-image: url('../../svg/external-link-black.svg');
    }
  }

  // Make focus a little more engaging
  // @source https://twitter.com/argyleink/status/1387072095159406596
  // @link https://codepen.io/argyleink/pen/JjEzeLp
  @media (prefers-reduced-motion: no-preference) {
    &:focus {
      outline-offset: 5px;
      transition: outline-offset .25s ease;
    }
  }
}