////
///
/// Layout Mixins Module
/// ===========================================================================
///
/// @group Layout
/// @author Scape Agency
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @todo None
/// @access public
///
////

// ============================================================================
// Mixins
// ============================================================================

@use "../../variables" as *;

// ============================================================================
// Layout | Display
// ============================================================================
// Provides utility classes and mixins for controlling the display properties of elements.

/// Ensures elements with the `[hidden]` attribute are not displayed, with better accessibility and compatibility.
/// @group Display
[hidden] {
    // Add the correct display in IE
    display: none;
    &:focus,
    &:active {
        // Maintain `display: none` even if the element is focused or active.
        display: none;
    }
}

// Layout | Display Enhancements
// Provides a more flexible and accessible approach to managing display properties.

/// Utility class for `display: none` with `!important` for higher specificity.
/// @group Display
.display_none {
    display: none !important;
}

/// Utility class for `display: block`.
/// @group Display
.display_block {
    display: block;
}

/// Utility class for `display: inline`.
/// @group Display
.display_inline {
    display: inline;
}

/// Utility class for `display: inline-block`.
/// @group Display
.display_inline-block {
    display: inline-block;
}

/// Utility class for `display: flex`.
/// @group Display
.display_flex {
    display: flex;
}

/// Utility class for `display: grid`.
/// @group Display
.display_grid {
    display: grid;
}

//   // Responsive display utilities, using a mixin to generate classes for different display properties at various breakpoints.
//   $breakpoints: (
//     'sm': 57q(6),
//     'md': 76q(8),
//     'lg': 99q(2),
//     'xl': 1q(200),
//   );

//   @mixin responsive-display($property, $value) {
//     @each $breakpoint, $bp-value in $breakpoints {
//       @media (min-width: $bp-value) {
//         &.#{$property}-#{$breakpoint} {
//           display: $value;
//         }
//       }
//     }
//   }

//   // Example usage of the responsive display mixin for a 'none' display property.
//   .hide-sm-up {
//     @include responsive-display('hide', 'none');
//   }

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

// Usage Example: Hide on small devices, display as block on medium devices, and flex on large devices
//   .element {
//     @include responsive-display((
//       'sm': 'none',
//       'md': 'block',
//       'lg': 'flex'
//     ));
//   }