/* ============================================================================
   @UTILITIES -> TOGGLE VISIBILITY
   ========================================================================= */


/**
 * Simply toggling the visibility of an element via a state class:
 * `is-visible` (or whatever you choose) which is powered by JavaScript. For
 * non-JavaScript users the element will always show.
 *
 * All the utilities (available as silent placeholder selectors also):
 *
   .u-toggle-visibility
   .u-toggle-visibility-inline
   .u-toggle-visibility-inline-block
 */


/**
 * Settings.
 */

/**
 * Apply at these breakpoints (turned off by default).
 */

$u-toggle-visibility-apply-at-breakpoints:                   $default-breakpoints !default;

// From the above breakpoints choose which utilities you wish to apply it too
$u-toggle-visibility-apply-at-breakpoints-for-default:       false !default;

$u-toggle-visibility-apply-at-breakpoints-for-inline:        false !default;

$u-toggle-visibility-apply-at-breakpoints-for-inline-block:  false !default;

// The state class that is powered by JavaScript
$u-toggle-visibility-state-class:                            is-visible !default;


%u-toggle-visibility,
.u-toggle-visibility {
  display: none !important;

  // Show via state class and for non-JavaScript users
  &.#{$u-toggle-visibility-state-class},
  .no-js & {
    display: block !important;
  }
}

@if $u-toggle-visibility-apply-at-breakpoints-for-default {
  @include generate-at-breakpoints('.u-toggle-visibility',
    $u-toggle-visibility-apply-at-breakpoints) {
    display: none !important;

    &.#{$u-toggle-visibility-state-class},
    .no-js & {
      display: block !important;
    }
  }
}


/**
 * For `inline` elements.
 */

%u-toggle-visibility-inline,
.u-toggle-visibility-inline {
  display: none !important;

  // Show via state class and for non-JavaScript users
  &.#{$u-toggle-visibility-state-class},
  .no-js & {
    display: inline !important;
  }
}

@if $u-toggle-visibility-apply-at-breakpoints-for-inline {
  @include generate-at-breakpoints('.u-toggle-visibility-inline',
    $u-toggle-visibility-apply-at-breakpoints) {
    display: none !important;

    &.#{$u-toggle-visibility-state-class},
    .no-js & {
      display: inline !important;
    }
  }
}


/**
 * For `inline-block` elements.
 */

%u-toggle-visibility-inline-block,
.u-toggle-visibility-inline-block {
  display: none !important;

  // Show via state class and for non-JavaScript users
  &.#{$u-toggle-visibility-state-class},
  .no-js & {
    display: inline-block !important;
  }
}

@if $u-toggle-visibility-apply-at-breakpoints-for-inline-block {
  @include generate-at-breakpoints('.u-toggle-visibility-inline-block',
    $u-toggle-visibility-apply-at-breakpoints) {
    display: none !important;

    &.#{$u-toggle-visibility-state-class},
    .no-js & {
      display: inline-block !important;
    }
  }
}