Screen Reader Text - SCSS

_screen-reader-text.scss

/**

	Screen Reader Text
	==========

	Apply to text meant only for screen readers.


	Usage
	=========
	.class { @include screen-reader-text(); }

**/

@mixin screen-reader-text() {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;

	clip: rect(1px, 1px, 1px, 1px);

	&:focus {
		@include font-size(14);
		display: block;
		top: 5px;
		left: 5px;
		z-index: 100000; /* Above WP toolbar. */
		border-radius: $font__border-radius--screen-reader-text;
		// box-shadow: 0 0 2px 2px $text__box-shadow--color--screen-reader;
		background-color: $body__background-color--screen-reader-text--focus;
		padding: $font__padding--screen-reader-text;
		width: auto;
		height: auto;
		text-decoration: none;
		line-height: normal;
		color: $body__font-color--screen-reader-text--focus;
		font-weight: bold;

		clip: auto;
	}
}