/**
 * Improved screen reader only CSS class
 * Source : https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034
 *
 * 1.
 *      @note `clip` is deprecated but works everywhere
 *      @see https://developer.mozilla.org/en-US/docs/Web/CSS/clip
 *
 * 2.
 *		@note `clip-path` is the future-proof version, but not very well supported yet
 *		@see https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
 *		@see http://caniuse.com/#search=clip-path
 *		@author Yvain Liechti
 *		@see https://twitter.com/ryuran78/status/778943389819604992
 *
 * 3.
 *		@note preventing text to be condensed
 *		author J. Renée Beach
 *		@see https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 *		@note Drupal 8 goes with word-wrap: normal instead
 *		@see https://www.drupal.org/node/2045151
 *		@see http://cgit.drupalcode.org/drupal/commit/?id=5b847ea
 *
 * 4.
 *		@note !important is important
 *		@note Obviously you wanna hide something
 *		@author Harry Roberts
 *		@see https://csswizardry.com/2016/05/the-importance-of-important/
 *
 * @param $focusable
 *
 * Examples :
 *
 *      my-sr-element {
 *          @include sr-only();
 *      }
 *
 *      my-sr-element-focusable {
 *          @include sr-only(true);
 *      }
 *
 */

@mixin sr-only($focusable: false) {
	position: absolute;
	top: auto !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
	clip-path: inset(50%) !important; /* 2 */
	white-space: nowrap !important; /* 3 */
	border: 0 !important;

	@if $focusable {
		&:focus,
		&:active {
			width: auto !important;
			height: auto !important;
			margin: auto !important;
			overflow: visible !important;
			clip: auto !important;
			clip-path: none !important;
			white-space: normal !important;
		}
	}
}
