/**
 * @file
 * Audio reader styles — indicates clickable text and highlights read elements.
 */

/* Indicate that text elements are interactive when audio reader is active. */
body.a11y-audioreader p,
body.a11y-audioreader h1,
body.a11y-audioreader h2,
body.a11y-audioreader h3,
body.a11y-audioreader h4,
body.a11y-audioreader h5,
body.a11y-audioreader h6,
body.a11y-audioreader li,
body.a11y-audioreader td,
body.a11y-audioreader th,
body.a11y-audioreader blockquote,
body.a11y-audioreader figcaption,
body.a11y-audioreader label,
body.a11y-audioreader dt,
body.a11y-audioreader dd {
  cursor: pointer;
}

/* Do not alter widget elements. */
body.a11y-audioreader .a11y-widget p,
body.a11y-audioreader .a11y-widget h1,
body.a11y-audioreader .a11y-widget h2,
body.a11y-audioreader .a11y-widget h3,
body.a11y-audioreader .a11y-widget h4,
body.a11y-audioreader .a11y-widget h5,
body.a11y-audioreader .a11y-widget h6,
body.a11y-audioreader .a11y-widget li,
body.a11y-audioreader .a11y-widget label {
  cursor: default;
}

/* Visual highlight on the element currently being read. */
.a11y-audioreader-reading {
  transition: background-color 0.2s ease;
  border-radius: 2px;
  outline: 2px solid currentColor;
  outline-offset: 2px;
  background-color: rgb(255, 255, 0, 0.2);
}