.u-display-none {
	display: none;
}

/* hide from both screenreaders and browsers */

.u-hide,
.js .u-js-hide {
	@include u-hide;
}

/* show to both screenreaders and browsers */

.u-show,
.js .u-js-show {
	@include u-show;
}

.u-show-inline,
.js .u-js-show-inline {
	@include u-show-inline;
}

/* hide only visually, but have it available for screenreaders */

.u-visually-hidden,
.js .u-js-visually-hidden {
	@include u-visually-hidden;

	&--off {
		@include u-visually-unhide;
	}
}

/* make invisible but retain dimensions */

.u-invisible {
	visibility: hidden;
}

/* hide only the text, keep element visible */

.u-hide-text,
.js .u-js-hide-text {
	@include u-hide-text;
}

/* hiding overflow */

.u-hide-overflow {
	overflow: hidden;
}

.u-hide-sr-only:not(:focus):not(:active) {
	clip: rect(0 0 0 0); 
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap; 
	width: 1px;
  }

@media print {
	.u-hide-print {
		display: none;
	}
}

/**
 * media-query hiding
 * intentionally avoids 'max' and 'range' to prevent bloat
 */

@each $breakpoint, $value in $context--breakpoints {
	@include media-query('#{$breakpoint}') {
		.u-hide-at-#{$breakpoint},
		.js .u-js-hide-at-#{$breakpoint} {
			@include u-hide;
		}

		.u-show-at-#{$breakpoint},
		.js .u-js-show-at-#{$breakpoint} {
			@include u-show;
		}
	}
}
