////
///
/// Visibility Mixins
/// ===========================================================================
///
/// Visibility and accessibility mixins for showing/hiding elements.
///
/// @group Mixins.HeadLayout.Display
/// @author Scape Agency
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

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

// ============================================================================
// Visibility
// ============================================================================

/// Mixin to make an element visible.
@mixin visible {
    visibility: visible;
    display: block !important;
}

/// Mixin to make an element invisible.
@mixin invisible {
    visibility: hidden;
    display: none !important;
}

/// Visually hides an element while keeping it accessible to screen readers.
@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;
}

/// Resets visually hidden state
@mixin visually-hidden--reset {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: normal;
}