// Debug classes

// Alert User that debug mode is on
body.debug {
  &:before {
    content: "DEBUG MODE ON";
    width: 100%;
    text-align: center;
    display: block;
    background-color: #000;
    color: #fff;
    padding: .5rem;
  }

  .debug {
    outline: 5px solid red;
  }

  // Error: Highlight images without an ALT
  img:not([alt]) {
    outline: 5px solid red;
  }

  // Warning: Highlight images with a bad ALT
  img[alt*=".jpg"],
  img[alt*=".jpeg"],
  img[alt*=".gif"],
  img[alt*=".webp"],
  img[alt*=".png"],
  img[alt*="Photographer"],
  img[alt*="Image of"],
  img[alt*="Photo of"] {
    outline: 5px solid orange;
  }
}