/*----------------------------------------------------------------------------*\
    #DEBUG IMAGES
\*----------------------------------------------------------------------------*/

/**
 * Images require `alt` attributes, empty `alt`s are fine but should be
 * double-checked, no `alt` is bad and is flagged red.
 */

img {
    @include debug-text('no alt attribute'); /* ::after on <img> doesn't display in browsers, but it's here for consistency and element inspection. */
    outline: 5px solid red;
}

img[alt] {
    @include no-debug-text();
    outline: none;
}

img[alt=''] {
    @include debug-text('empty alt attribute');
    outline: 5px solid yellow;
}