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

// ============================================================================
// Use
// ============================================================================

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

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

///
/// Mixin to make an element visible.
/// @example
/// .element { @include visible(); }
///
@mixin visible {
    visibility: visible;
    // display: inherit;
    display: block !important; // Ensure visibility
}

///
/// Mixin to make an element invisible.
/// Completely hides an element from both visual and screen reader interfaces.
/// @example
/// .element { @include invisible(); }
///
@mixin invisible {
    visibility: hidden;
    display: none !important; // Ensure hidden
}

.visible {
    @include visible;
}

.invisible {
    @include invisible;
}

/// Visually hides an element while keeping it accessible to screen readers.
/// @group Display

@mixin visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: q(1);
    margin: -q(1);
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: q(1);
    white-space: nowrap; // Ensure the element stays on one line
}

.visually-hidden {
    @include visually-hidden;
}