/* wc.debug.common.scss */
// CSS for common debug mode diagnostics
// There may be cases where a component has more than one of info, warning or error attributes. In all cases we should
// arrange the CSS such that component < info < warn < error.
@import 'mixins_common.scss';

// next used only in debug mode
$wc-ui-color-debug-fg: $std-color-primary;

// body element required to differentiate from other elements in a debug state or type
// scss-lint:disable QualifyingElement
body.debug:before {
	background-color: $wc-ui-color-highlight-bg;
	color: $wc-ui-color-highlight-fg;
	content: 'Client debug/diagnostic mode is on.';
	display: block;
	padding: 0.5em;
}

// The attribute inclusion here doesn't work in IE8 so there is no point including it in the :before
body.debug::before {
	content: 'Client debug/diagnostic mode: document has ' attr(data-wc-nodeCount) ' elements.';
}
// scss-lint:enable QualifyingElement
[data-wc-dubugdebug] {
	@include outline($color: $wc-ui-color-debug-fg, $style: dashed, $offset: -1px);
}

[ata-wc-debuginfo] {
	@include outline($color: $wc-ui-color-info-fg, $style: dotted, $width: 2px, $offset: -2px);
}

[data-wc-debugwarn] {
	@include outline($color: $wc-ui-color-warning-fg, $style: dashed, $width: 3px, $offset: -3px);
}

[data-wc-debugerr] {
	@include outline($color: $wc-ui-color-error-fg, $style: dashed, $width: 3px, $offset: -3px);
}

// Inline containers in an error or warning state should be set to inline-block
// to ensure the outline is rendered_
// This may have to be extended on a component-by-component basis.
span,
label {
	[data-wc-debugwarn],
	[data-wc-debugerr] {
		display: inline-block;
	}
}

h3 {
	&.wc_error {
		color: $wc-ui-color-error-fg;
	}

	&.wc_warn {
		color: $wc-ui-color-warning-fg;
	}

	&.wc_info {
		color: $wc-ui-color-info-fg;
	}

	&.wc_debug {
		color: $wc-ui-color-debug-fg;
	}
}
/* end wc.debug.common.scss */
