/**
 * With trepidation I went ahead and elected to use classless styles for links.
 * They really ought to match the UI styling of the entire app and especially
 * the customized focus ring that we use. I was noticing how awful links were looking
 * against the other AgnosticUI components when focused and elected to do this.
 *
 * To customize links, define CSS property below as you wish.
 */
a {
  --agnostic-link-color: var(--agnostic-primary, #077acb);

  color: var(--agnostic-link-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:focus {
  box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);

  /* Needed for High Contrast mode */
  outline:
    var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style)
    var(--agnostic-focus-ring-outline-color);
  transition: box-shadow var(--agnostic-timing-fast) ease-out;
}

@media (prefers-reduced-motion), (update: slow) {
  a:focus {
    transition-duration: 0.001ms !important;
  }
}
