/* **********************************************************/
/*  These CSS utilities are injected into every shadow DOM. */
/*      Using data attributes to increase specificity.      */
/* ******************************************************** */
[data-sa11y-overflow] {
  overflow: auto !important;
}

/* ************************************* */
/*    Links, text, and image borders     */
/* ************************************* */
[data-sa11y-error] {
  outline: 5px solid var(--sa11y-error) !important;
  outline-offset: 2px;
}

[data-sa11y-warning]:not([data-sa11y-error]) {
  outline: 5px solid var(--sa11y-warning) !important;
  outline-offset: 2px;
}

/* *************************************************** */
/*  Pulsing border: https://codepen.io/olam/pen/zcqea  */
/* *************************************************** */

[data-sa11y-pulse-border] {
  outline: 5px solid var(--sa11y-focus-color) !important;
  box-shadow: 0;
  animation: pulse 1s 2;

  &:hover,
  &:focus {
    animation: none;
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 5px var(--sa11y-focus-color);
  }

  50% {
    box-shadow: 0 0 0 12px var(--sa11y-pulse-color);
  }

  100% {
    box-shadow: 0 0 0 5px var(--sa11y-pulse-color);
  }
}

/* Add scale/opacity only for images and headings. */
img[data-sa11y-pulse-border],
h1[data-sa11y-pulse-border],
h2[data-sa11y-pulse-border],
h3[data-sa11y-pulse-border],
h4[data-sa11y-pulse-border],
h5[data-sa11y-pulse-border],
h6[data-sa11y-pulse-border] {
  animation: pulse-scale 1s 2;
}

@keyframes pulse-scale {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.7;
    transform: scale(1.02);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-sa11y-pulse-border] {
    animation: none !important;
  }
}

/* ****************************************************** */
/*   High contrast mode should preserve outlines colours  */
/* ****************************************************** */
@media (forced-colors: active) {
  [data-sa11y-error],
  [data-sa11y-warning],
  [data-sa11y-good],
  [data-sa11y-error-inline],
  [data-sa11y-warning-inline],
  [data-sa11y-pulse-border] {
    forced-color-adjust: none;
  }
}