////
///
/// Debug Utilities
/// ===========================================================================
///
/// Debug mixin to output property values directly into the DOM for quick
/// debugging purposes during development.
///
/// @group Dev.Debug
/// @author Scape Agency
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

// ============================================================================
// Mixin
// ============================================================================

/// Outputs a debug label showing property and value in the DOM
///
/// Adds a yellow debug block after the element showing the specified
/// property and value. Useful for rapid visual debugging.
///
/// @param {String} $property - The CSS property name to display
/// @param {*} $value - The value to display
///
/// @example scss - Usage
///   .element {
///     width: 100px;
///     @include debug("width", 100px);
///   }
///
@mixin debug($property, $value) {
    &:after {
        content: "#{$property}: #{$value}";
        display: block;
        background-color: yellow;
        color: black;
        font-size: q(12);
        padding: q(2);
    }
}