@if $debug-mode == true {
	/*------------------------------------*\
		$DEBUG
	\*------------------------------------*/
	/**
	 * Enable this stylesheet to visually detect any improperly nested or
	 * potentially invalid markup, or any potentially inaccessible code.
	 *
	 * Red          ==      definite error
	 * Yellow       ==      double-check
	 * None         ==      should be fine
	 *
	 * Please note that this method of checking markup quality should not be relied
	 * upon entirely. Validate your markup!
	 */

	/**
	 * Are there any empty elements in your page?
	 */
	:empty {
		outline: 5px solid yellow;
	}

	/**
	 * Images require `alt` attributes, empty `alt`s are fine but should be
	 * double-checked, no `alt` is bad and is flagged red.
	 */
	img {
		outline: 5px solid red;
	}
	img[alt] {
		outline: none;
	}
	img[alt=""] {
		outline: 5px solid yellow;
	}

	/**
	 * Links sometimes, though not always, benefit from `title` attributes. Links
	 * without are never invalid but it’s a good idea to check.
	 */
	a {
		outline: 5px solid yellow;
	}
	a[title] {
		outline: none;
	}

	/**
	 * Double-check any links whose `href` is something questionable.
	 */
	a[href="#"],
	a[href*="javascript"] {
		outline: 5px solid yellow;
	}

	/**
	 * The `target` attribute ain’t too nice...
	 */
	a[target] {
		outline: 5px solid yellow;
	}

	/**
	 * Ensure any lists only contain `li`s as children.
	 */
	ul,
	ol {
		> *:not(li) {
			outline: 5px solid red;
		}
	}

	/**
	 * It’s always nice to give `th`s `scope` attributes.
	 */
	th {
		outline: 5px solid yellow;
	}
	th[scope] {
		outline: none;
	}

	/**
	 * `tr`s as children of `table`s ain’t great, did you need a `thead`/`tbody`?
	 */
	table > tr {
		outline: 5px solid yellow;
	}

	/**
	 * `tfoot` needs to come *before* `tbody`.
	 */
	tbody + tfoot {
		outline: 5px solid yellow;
	}

	/**
	 * Forms require `action` attributes
	 */
	form {
		outline: 5px solid red;
	}
	form[action] {
		outline: none;
	}

	/**
	 * Various form-field types have required attributes. `input`s need `type`
	 * attributes, `textarea`s need `rows` and `cols` attributes and submit buttons
	 * need a `value` attribute.
	 */
	textarea,
	input {
		outline: 5px solid red;
	}
	input[type] {
		outline: none;
	}
	textarea[rows][cols] {
		outline: none;
	}
	input[type=submit] {
		outline: 5px solid red;
	}
	input[type=submit][value] {
		outline: none;
	}

	/**
	 * Avoid inline styles where possible.
	 */
	[style] {
		outline: 5px solid yellow;
	}

	/**
	 * You should avoid using IDs for CSS, is this doing any styling?
	 */
	[id] {
		outline: 5px solid yellow;
	}

	/**
	 * Are you using the grid system correctly?
	 */
	.gw > :not(.g),
	.grid-wrapper > :not(.grid),
	.gw--rev > :not(.g),
	.grid-wrapper--rev > :not(.grid) {
		outline: 5px solid red;
	}

}

/* endif */
