//------------------------------------------------------------------------------
// @utilities: Visibility
//------------------------------------------------------------------------------
// @author: hanakin -- midaym
// @version: 1.0.3
// @description:
//
// Responsive visibility classes derived from bootstrap.
//
//------------------------------------------------------------------------------

//
// #scss

//
// Only display content to screen readers
// http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
.u-sr-only {
	border: 0;
	position: absolute;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
}

//
// Extends the .sr-only class to allow the element
// to be focusable when navigated to via the keyboard:
// https://www.drupal.org/node/897638
.u-sr-only.focusable:active,
.u-sr-only.focusable:focus {
	position: static;
	overflow: visible;
	clip: auto;
	width: auto;
	height: auto;
	margin: 0;
}

// Hide visually and from screen readers
.u-hidden {
	display: none !important;
}

// Responsive visibility utilities

// hide on xxs
@media (max-width: ($xs - 1)) {
	.u-hidden-xxs-down {
		display: none !important;
	}
}

// visible only & xxs
@media (min-width: $xs) {
	.u-hidden-xs-up {
		display: none !important;
	}
}

// hide on xs & down
@media (max-width: ($sm - 1)) {
	.u-hidden-xs-down {
		display: none !important;
	}
}

// visible only xs & down
@media (min-width: $sm) {
	.u-hidden-sm-up {
		display: none !important;
	}
}

// hide on sm & down
@media (max-width: ($md - 1)) {
	.u-hidden-sm-down {
		display: none !important;
	}
}

// visible only sm & down
@media (min-width: $md) {
	.u-hidden-md-up {
		display: none !important;
	}
}

// hide on md & down
@media (max-width: ($lg - 1)) {
	.u-hidden-md-down {
		display: none !important;
	}
}

// visible only md & down
@media (min-width: $lg) {
	.u-hidden-lg-up {
		display: none !important;
	}
}

// hide on lg & down
@media (max-width: ($xl - 1)) {
	.u-hidden-md-down {
		display: none !important;
	}
}

// visible only lg & down
@media (min-width: $xl) {
	.u-hidden-lg-up {
		display: none !important;
	}
}