// 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-links);
  box-shadow: inset 0 0 0 var(--color-links);
  color: var(--color-links);
  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-links);
    color: var(--color-white);

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

  &:focus {
    border-color: var(--color-black);
    color: var(--color-black);
    text-decoration: none;

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