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

[data-sa11y-clone-image-text] {
  display: none !important;
}

[data-sa11y-readability-period] {
  position: absolute !important;
  display: block !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  white-space: nowrap !important;
  border: 0 !important;
  clip-path: inset(50%) !important;
}

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

[data-sa11y-warning]:not([data-sa11y-error]),
[data-sa11y-warning-inline]:not([data-sa11y-error-inline]) {
  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 2s 3;
}
[data-sa11y-pulse-border]:hover, [data-sa11y-pulse-border]:focus {
  animation: none;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 5px var(--sa11y-focus-color);
  }
  70% {
    box-shadow: 0 0 0 12px var(--sa11y-pulse-color);
  }
  100% {
    box-shadow: 0 0 0 5px var(--sa11y-pulse-color);
  }
}
@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;
  }
}