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

/**
 * Simple hide the element
 */
.u-hide {
	display: none !important; /* stylelint-disable-line */
}

/**
 * Hide the element on mobile
 */
.u-mobile-hide {

	@include respond-to($screen-small-base) {
		display: none !important; /* stylelint-disable-line */
	}
}

/**
 * Show the element on mobile
 */
.u-mobile-show {

	@include respond-at($screen-small-base) {
		display: none !important; /* stylelint-disable-line */
	}
}

/**
 * Hide the element on tablet
 */
.u-tablet-hide {

	@include respond-to($screen-medium-base) {
		display: none !important; /* stylelint-disable-line */
	}
}

/**
 * Show the element on tablet
 */
.u-tablet-show {

	@include respond-at($screen-medium-base) {
		display: none !important; /* stylelint-disable-line */
	}
}

/**
 * Hide the element on desktop
 */
.u-desktop-hide {

	@include respond-to($screen-medium-base) {
		display: none !important; /* stylelint-disable-line */
	}
}

/**
 * Show the element on desktop
 */
.u-desktop-show {

	@include respond-at($screen-medium-base) {
		display: none !important; /* stylelint-disable-line */
	}
}