// ============================================================================
// 02-TOOLS -> MIXINS -> #VISUALLY-HIDDEN
// ============================================================================

/// Visually hidden
/// 
/// Visually hides an element whilst allowing it to remain available to
/// assistive technologies.
///
/// @example scss
///  .class-name {
///    @include visually-hidden;
///  }
///
/// @access public

@mixin visually-hidden {
    border-width: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}