/* FILE: starter/base/__classes.scss */

//
// Basic, generic CSS classes
//





// Screen reader

	%screen_reader_hiding {
		clip: rect( 1px, 1px, 1px, 1px );
		clip-path: inset( 50% );
		position: absolute !important;
		height: 1px;
		width: 1px;
		line-height: 1px;
		overflow: hidden;
	}

	%screen_reader_hiding_disable {
		clip: auto;
		clip-path: none;
		position: static !important;
		height: auto;
		width: auto;
		line-height: normal;
		overflow: visible;
	}

	.screen-reader-text {
		@extend %screen_reader_hiding;
		padding: 0;
		margin: -1px;
		word-wrap: normal !important;
		border: 0;

		&:hover,
		&:active,
		&:focus {
			clip: auto !important;
			clip-path: none;
			display: block;
			width: auto;
			height: auto;
			#{$left}: $golden_minor + rem; // {{RTL}}
			top: $golden_minor + rem;
			padding: 1rem;
			margin: 0;
			font-size: 14px;
			font-size: .81rem;
			font-weight: 700;
			line-height: normal;
			text-decoration: none;
			background-color: #47c;
			color: #fff;
			z-index: 100000; /* Above WP toolbar. */
		}

	}

	.focus-position-static {

		&:hover,
		&:active,
		&:focus {
			position: static !important;
			margin: 1px; // For focus outline
			text-align: center;
		}

	}



// Overflow

	.overflow-hidden {
		overflow: hidden;
	}



// Vertical alignment

	%vertical_align_top {
		vertical-align: top;
	}

	%vertical_align_middle {
		vertical-align: middle;
	}

	%vertical_align_baseline {
		vertical-align: baseline;
	}

	%vertical_align_bottom {
		vertical-align: bottom;
	}



	.vertical-align-top {
		@extend %vertical_align_top;
	}

	.vertical-align-middle {
		@extend %vertical_align_middle;
	}

	.vertical-align-baseline {
		@extend %vertical_align_baseline;
	}

	.vertical-align-bottom {
		@extend %vertical_align_bottom;
	}