/*
 * text-underline-offset doesn't work in Chrome at all 👎
 * But looks nice in Safari/Firefox, so let's keep it and
 * maybe Chrome will support it soon.
 */
a {
  cursor: pointer;
  color: var(--wp--style--color--link, var(--global--color-primary-base));
  text-underline-offset: 3px;
  text-decoration-skip-ink: all;
}

a:hover {
  text-decoration-style: dotted;
  text-decoration-skip-ink: none;
}

.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {

  /* Only visible in Windows High Contrast mode */
  outline: 2px solid transparent;

  text-decoration: underline 1px dotted currentColor;
  text-decoration-skip-ink: none;
  background: rgba(255, 255, 255, .9);

  // Change text color when the body background is dark.
  .is-dark-theme &,
  .is-dark-theme & .meta-nav {
    color: var(--wp--style--color--link, var(--global--color-background));
  }

  // Change colors when the body background is white.
  .has-background-white & {
    background: rgba(0, 0, 0, .9);
    color: var(--wp--style--color--link, var(--global--color-invert));

    .meta-nav {
      color: var(--wp--style--color--link, var(--global--color-invert));
    }
  }

  &.skip-link {

    /* Only visible in Windows High Contrast mode */
    outline: 2px solid transparent;
    outline-offset: -2px;

    &:focus {
      color: #21759b;
      background-color: #f1f1f1;
    }
  }

  img {
    outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary-base));
  }
}

// Enforce the custom link color even if a custom background color has been set.
// The extra specificity here is required to override the background color styles.
.has-background {
  // Target both current level and nested block.
  .has-link-color a,
  &.has-link-color a {
    color: var(--wp--style--color--link, var(--global--color-primary-base));
  }
}

/**
 * Extends
 */
%heading-link-hover {
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: var(--primary-nav--border-color);
  text-decoration-thickness: 2px;
}