// ===================================================
// Placeholder Class
// ===================================================

/// Visually hide elements without hiding them from screen readers or crawlers.
///
/// @param {bool} $extend [true] - Set it on false the mixin will used as regular mixin
///
/// @group core - placeholder
///
/// @example scss - scss
///   .box-1 {
///     @include visually-hidden();
///   }
///   .box-2 {
///     @include visually-hidden();
///   }
///   .box-3 {
///     @include break(4) {
///       @include visually-hidden(false);
///     }
///   }
///
/// @example css - css
///   .box-1, .box-2 {
///       position: absolute;
///       height: 1px;
///       width: 1px;
///       margin: -1px;
///       border: 0;
///       padding: 0;
///       clip-path: inset(50%);
///       clip: rect(0,0,0,0);
///       white-space: nowrap;
///       overflow: hidden; }
///
///   @media screen and (min-width: 768px) {
///     .box-3 {
///       position: absolute;
///       height: 1px;
///       width: 1px;
///       margin: -1px;
///       border: 0;
///       padding: 0;
///       clip-path: inset(50%);
///       clip: rect(0,0,0,0);
///       white-space: nowrap;
///       overflow: hidden; } }
@mixin visually-hidden($extend: true) {
  @if $extend {
    @extend %visually-hidden;

  }

  @else {
    position: absolute;
    height: 1px;
    width: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    clip-path: inset(50%);
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    overflow: hidden;
  }
}

// Placeholder Class
%visually-hidden {
  @include visually-hidden(false);
}