/* wc.debug.axs.scss */
// CSS for the AXE/AXS output in debug mode

@import 'mixins-common';

.wc_a11y {
	@include border;
	margin: $wc-gap-large;

	> a {
		margin: 0 $wc-gap-small;
	}

	&.warning { // I have never seen a warning level issue in WComponents which has NOT been a false negative.
		border-color: $wc-ui-color-warning-fg;

		&:before {
			background-color: $wc-ui-color-warning-fg;
			content: 'A11Y: WARNING';
		}
	}

	&.severe {
		border-color: $wc-ui-color-error-fg;

		&:before {
			background-color: $wc-ui-color-error-fg;
			content: 'A11Y: SEVERE';
		}
	}

	&.warning,
	&.severe {
		&:before {
			@include border-box;
			color: $wc-ui-color-global-bg;
			display: block;
			font-weight: bold;
			margin-bottom: $wc-gap-normal;
			padding: $wc-gap-small;
			text-align: center;
			width: 100%;
		}
	}
}
