// =============================================================================
// _RESPONSIVE.SCSS
// -----------------------------------------------------------------------------
// Site styles.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. New Responsive Styles
//   02. Old Responsive Styles
// =============================================================================

// New Responsive Styles
// =============================================================================

@media (min-width: $breakLarge) {
  .x-hide-xl { display: none !important; }
}

@media (min-width: $breakMediumLarge + 1) and (max-width: $breakLarge - 1) {
  .x-hide-lg { display: none !important; }
}

@media (min-width: $breakMedium + 1) and (max-width: $breakMediumLarge) {
  .x-hide-md { display: none !important; }
}

@media (min-width: $breakSmall + 1) and (max-width: $breakMedium) {
  .x-hide-sm { display: none !important; }
}

@media (max-width: $breakSmall) {
  .x-hide-xs { display: none !important; }
}



// Old Responsive Styles
// =============================================================================

.x-visible-phone       { display: none !important;    }
.x-visible-tablet      { display: none !important;    }
.x-visible-desktop     { display: inherit !important; }
span.x-visible-desktop { display: inline !important;  }
.x-hidden-phone        {                              }
.x-hidden-tablet       {                              }
.x-hidden-desktop      { display: none !important;    }

@include break(old-bear) {
  .x-visible-tablet     { display: inherit !important; }
  span.x-visible-tablet { display: inline !important;  }
  .x-hidden-tablet      { display: none !important;    }
  .x-hidden-desktop     { display: inherit !important; }
  span.x-hidden-desktop { display: inline !important;  }
  .x-visible-desktop    { display: none !important;    }
}

@include break(middle-bear) {
  .x-visible-phone      { display: inherit !important; }
  span.x-visible-phone  { display: inline !important;  }
  .x-hidden-phone       { display: none !important;    }
  .x-hidden-desktop     { display: inherit !important; }
  span.x-hidden-desktop { display: inline !important;  }
  .x-visible-desktop    { display: none !important;    }
}