// ============================================================================
// :: Visibility
// ============================================================================
/**
 * These classes determine based on the breakpoints set up in the
 * src/scss/general/settings/_media.scss file when to hide or when to display
 * an element.
 */

/**
 * Simple hide the element
 */
%__hide {
  display: none !important;
}

.u-hide {
  @extend %__hide;
}

/**
 * Hide visually but keep available to assistive tech.
 */
.sr-only,
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}

/**
 * Hide the element on mobile
 */
%__mobile-hide {
  @include respond-to($breakpoint-mobile-default) {
    display: none !important;
  }
}

.u-mobile-hide {
  @extend %__mobile-hide;
}

/**
 * Show the element on mobile
 */
%__mobile-show {
  @include respond-at($breakpoint-mobile-default) {
    display: none !important;
  }
}

.u-mobile-show {
  @extend %__mobile-show;
}

/**
 * Hide the element on tablet
 */
%__tablet-hide {
  @include respond-to($breakpoint-tablet-default) {
    display: none !important;
  }
}

.u-tablet-hide {
  @extend %__tablet-hide;
}

/**
 * Show the element on tablet
 */
%__tablet-show {
  @include respond-at($breakpoint-tablet-default) {
    display: none !important;
  }
}

.u-tablet-show {
  @extend %__tablet-show;
}

/**
 * Hide the element on desktop
 */
%__desktop-hide {
  @include respond-to($breakpoint-desktop-large + 100px) {
    display: none !important;
  }
}

.u-desktop-hide {
  @extend %__desktop-hide;
}

/**
 * Show the element on desktop
 */
%__desktop-show {
  @include respond-at($breakpoint-desktop-large + 100px) {
    display: none !important;
  }
}

.u-desktop-show {
  @extend %__desktop-show;
}

// ============================================================================
// :: Responsive-suffixes
// ============================================================================
.u-hide\@above-mobile-default {
  @include respond-at($breakpoint-mobile-default) {
    display: none !important;
  }
}

.u-hide\@above-tablet-default {
  @include respond-at($breakpoint-tablet-default) {
    display: none !important;
  }
}

.u-hide\@above-desktop-default {
  @include respond-at($breakpoint-desktop-default) {
    display: none !important;
  }
}

.u-hide\@above-desktop-large {
  @include respond-at($breakpoint-desktop-large) {
    display: none !important;
  }
}

.u-hide\@below-mobile-default {
  @include respond-to($breakpoint-mobile-default) {
    display: none !important;
  }
}

.u-hide\@below-tablet-default {
  @include respond-to($breakpoint-tablet-default) {
    display: none !important;
  }
}

.u-hide\@below-desktop-default {
  @include respond-to($breakpoint-desktop-default) {
    display: none !important;
  }
}

.u-hide\@below-desktop-large {
  @include respond-to($breakpoint-desktop-large) {
    display: none !important;
  }
}