// Links within content must be visually underlined
// @link https://make.wordpress.org/themes/handbook/review/accessibility/required/#content-links
@mixin link() {
  // Create your own default content link styles here
  // for pages and Gutenberg
  border-bottom: 1px solid var(--color-link-border-bottom);
  box-shadow: inset 0 0 0 var(--color-link-background-hover);
  color: var(--color-link-text);
  display: inline;
  text-decoration: none;
  transition: box-shadow .1s cubic-bezier(.19, 1, .22, 1), color .1s cubic-bezier(.19, 1, .22, 1);

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

  &:hover {
    border-color: transparent;
    box-shadow: inset 0 -3.3rem 0 var(--color-link-background-hover);
    color: var(--color-link-text-hover);

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

  &:focus {
    background-color: transparent;
    border-color: var(--color-link-border-focus);
    box-shadow: none;
    color: var(--color-link-text-focus);
    text-decoration: none;

    // 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) {
      outline-offset: 5px;
      transition: outline-offset .25s ease;
    }

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