/* CSS to flag some accessibility issues when content authors preview posts and pages. */

.caa11yp-error,
.caa11yp-error:hover {
  display: inline-block !important;
  position: relative !important;
  outline: solid 3px gold;
}
/* .caa11yp-error::after {
  content: attr(data-caa11yp-label);
  display: block;
  position: absolute;
  top: 100%;
  right: 0;
  background-color: white;
  font-size: 0.5em;
} */
.caa11yp-error-low,
.caa11yp-error-low:hover {
  outline-color: gold;
}
.caa11yp-error-medium,
.caa11yp-error-medium:hover {
  outline-color: orange;
}
.caa11yp-error-high,
.caa11yp-error-high:hover {
  outline-color: red;
}

.caa11yp-messages {
  display: inline-block;
  position: absolute;
  margin: 0;
  cursor: pointer;
}
.caa11yp-messages ul {
  direction: rtl;
  margin: 0 100% 0 0;
  list-style: none;
}
@media (any-hover: hover) {
  /* If we have a hover pointing device */
  .caa11yp-messages ul {
    transition: transform 0.5s;
    transform: scaleY(0);
    transform-origin: 50% 0%;
  }
  .caa11yp-error:active + .caa11yp-messages ul,
  .caa11yp-error:focus + .caa11yp-messages ul,
  .caa11yp-error:hover + .caa11yp-messages ul,
  .caa11yp-messages:active ul,
  .caa11yp-messages:focus ul,
  .caa11yp-messages:hover ul {
    transform: scaleY(1);
  }
}
.caa11yp-messages li {
  background-color: white;
  color: black;
  font-size: 0.9em;
  font-family: sans-serif;
  padding: 0 0.4em;
  width: auto;
  width: fit-content;
  width: max-content;
}
.caa11yp-messages li.low {
  background-color: gold;
}
.caa11yp-messages li.medium {
  background-color: orange;
}
.caa11yp-messages li.high {
  background-color: red;
  color: white;
}

.caa11yp-heading-empty,
.caa11yp-a-empty,
.caa11yp-button-empty,
.caa11yp-th-empty,
.caa11yp-td-empty {
  min-width: 5em;
  min-height: 1em;
}