/// Simple toggle for switching debugging on and off
/// @access public
/// @group debug
/// @type bool
$DBdebug: false !default;

/// Mixin that gives visual feedback in the DOM if a selector is used outside of
/// a given context. Useful for detecting misused Elements in BEM.
/// @example scss
///  .simple {
///    font-weight: bold;
///  }
///
///    .simple__usage {
///      color: red;
///      @include nest-check(".simple");
///    }
/// @access public
/// @group debug
/// @author Harry Roberts (@csswizardry)
/// @param {selector} $element - element to check if not nested
@mixin nest-check($element) {
    @if ($DBdebug == true) {
        position: relative;

        outline: 1px solid color(red);

        &::after {
            content: "Error: Element `." attr(class) "` should be within `#{$element}`.";
            position: absolute;
            bottom: 100%;
            left: 0;
            white-space: nowrap;

            font-family: monospace;

            color: color(red);
            background-color: color(white);
        }

        #{$element} & {
            outline: none;

            &::after {
                content: normal;
            }
        }
    }
}

/// If an element has a class attribute containing two hyphens but no space
/// (i.e. only one class is being used, and it's a Modifier), provide visual
/// feedback in the DOM.
///
/// N.B. This isn't bulletproof: `class="foo--bar baz"` would pass, as would
///      `class=" foo--bar"`. Use with a pinch of salt.
///
/// @access public
/// @group debug
/// @param {bool} $debug [$DBdebug] - flag to turn this feature on/off
@mixin debug-modifier-warning($debug: $DBdebug) {
    @if ($debug == true) {
        [class*="--"]:not([class*=" "]) {
            position: relative;

            outline: 1px solid red;

            &:after {
                content: "Error: Cannot have a Modifier (i.e. `." attr(class) "`) without a Block.";
                position: absolute;
                bottom: 100%;
                left: 0;
                white-space: nowrap;

                font-family: monospace;

                color: red;
                background-color: white;
            }
        }
    }
}
@include debug-modifier-warning;
