// CSS for common debug mode diagnostics
// NOTE FOR MARK
// YES, that means **YOU** Mark
// Next time you decide to delete all of the debug Sass and stop building it:
// ### **DON'T** ###
// Really, just don't otherwise you will have to put some of it back again and
// that is a PITA.
@import 'mixins/common';

body {
  &::before {
    background-color: $wc-clr-highlight-bg;
    color: $wc-clr-highlight-fg;
    content: 'Client debug/diagnostic mode: document has ' attr(data-wc-nodeCount) ' elements.';
    display: block;
    padding: $wc-gap-normal;
  }

  &.wc_loggedwarn {
    background-color: $wc-clr-warning-fg;
  }

  &.wc_loggederror { //the error style MUST TRUMP the warn style
    background-color: $wc-clr-error-fg;
  }
}

// Some elements should not exist but people persist in using them.
applet,
acronym,
bgsound,
dir,
frame,
frameset,
noframes,
isindex,
listing,
nextid,
noembed,
plaintext,
rb,
strike,
xmp,
basefont,
big,
blink,
center,
font,
marquee,
multicol,
nobr,
spacer,
tt,
// sass-lint:disable no-qualifying-elements
img[border='0'],
a[name],
input[type='number'][maxlength] {
  @include outline($color: $wc-clr-error-fg);
}
// sass-lint:enable no-qualifying-elements

@import 'wc.debug.axs';
@import 'wc.debug.invalid';
