_state.scss

// Globally applicable state styles only!
// Module-specific states belong with their module as a regular modifier class.
// e.g .my-module--is-loading

.is-hidden{
	display: none;
}

.no-js .is-hidden--no-js{
	display: none;
}

.js .is-hidden--js{
	display: none;
}

// Hide only visually, but have it available for screenreaders: h5bp.com/v
.is-visually-hidden{
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

// Extends the .is-visually-hidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p
.is-visually-hidden.focusable:active,
.is-visually-hidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

// Hide visually and from screenreaders, but maintain layout
.is-invisible {
    visibility: hidden;
}