/**
 * States
 *
 * Description: Common classes used for layout/display/states
 * Version: 1.0.11
 * -----------------------------------------------------------------------------
 */

/**
 * Table of Contents: 
 *
 * 1.0 - Visibillity states
 * 2.0 - Usability
 * -----------------------------------------------------------------------------
 */



/**
 * 1.0 - Visibillity states
 * -----------------------------------------------------------------------------
 */

.is-hidden {
	display: none !important;
	visibility: hidden;
}
html.js .is-hidden-js {
	display: none;
}
.is-visible-nojs {
	display: none;
}
html.no-js .is-visible-nojs {
	display: block;
	visibility: visible;
}
html.no-js .is-hidden-nojs {
	display: none !important;
}
.is-visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.is-visuallyhidden.is-focusable:active, .is-visuallyhidden.is-focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;

	&.is-focusable-with-margin {
		margin-bottom: 1em;
		display: inline-block;
	}
}
.is-visible {
	visibility: visible;
	opacity: 1;
	@include transition(opacity $transition-time-short ease-in);
}
.is-invisible {
	visibility: hidden;
	opacity: 0;
	@include transition(visibility 0s $transition-time-short, opacity $transition-time-short ease-in);
}
.is-collapsed .is-visible-expanded {
	display: none;
}
.is-expanded .is-visible-collapsed {
	display: none;
}
.is-relative {
	position: relative;
}
.is-visibile-pinboard {
	display: none;
}


@media (min-width: $device-large-min) {
	.is-hidden-large, .is-visible-medium, .is-visible-small {
		display: none !important;
	}
}

@media (min-width: $device-medium-min) and (max-width: $device-medium-max) {
	.is-hidden-medium, .is-visible-small, .is-visible-large {
		display: none !important;
	}
	.is-visible-medium {
		display: block !important;
	}
}

@media (min-width: $device-small-min) and (max-width: $device-small-max) {
	.is-hidden-small, .is-visible-medium, .is-visible-large {
		display: none !important;
	}
	.is-visible-small {
		display: block !important;
	}
}


.is-visible-loading, .is-loading .is-hidden-loading {
	display: none;
}
.is-loading .is-visible-loading {
	display: inherit;
}



/**
 * 2.0 - Usability
 * -----------------------------------------------------------------------------
 */

a, button, .btn, input[type="checkbox"], input[type="radio"] {
	&:focus {
		//box-shadow: 0 0 0 3px $accent-color-negative-dark;
		outline: 3px solid $accent-color-negative-dark;
		//outline: none;

		&:active, &:hover {
			box-shadow: none;
		}
	}

	html.lt-ie9 &:focus {
		outline: 3px solid $accent-color-negative-dark;

		&:active, &:hover {
			outline: none;
		}
	}
}