////
///
/// Responsive Display Mixins
/// ===========================================================================
///
/// Responsive display mixins for breakpoint-based visibility control.
///
/// @group Mixins.HeadLayout.Display
/// @author Scape Agency
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

@use "sass:map";
@use "../../../variables" as *;

// ============================================================================
// Responsive Display
// ============================================================================

/// Mixin for generating responsive display utilities.
/// @param {Map} $displays - A map of breakpoints and corresponding display values.
@mixin responsive-display($displays: ()) {
    @each $breakpoint, $display in $displays {
        $bp-value: map.get($breakpoints, $breakpoint);
        @media (min-width: $bp-value) {
            display: $display;
        }
    }
}

/// Hide element below a certain breakpoint
/// @param {String} $breakpoint - The breakpoint name
@mixin hide-below($breakpoint) {
    @media (max-width: map.get($breakpoints, $breakpoint)) {
        display: none !important;
    }
}

/// Hide element above a certain breakpoint
/// @param {String} $breakpoint - The breakpoint name
@mixin hide-above($breakpoint) {
    @media (min-width: map.get($breakpoints, $breakpoint)) {
        display: none !important;
    }
}

/// Show element only at a specific breakpoint range
/// @param {String} $min - Minimum breakpoint
/// @param {String} $max - Maximum breakpoint
@mixin show-between($min, $max) {
    display: none !important;
    @media (min-width: map.get($breakpoints, $min)) and (max-width: map.get($breakpoints, $max)) {
        display: block !important;
    }
}