/**
* @stylesheet indicators.css Indicators
* @parent ux.ui-elements
**/

/**
* @styles 0-indicators-focus Focus Indicator
* The focus indicator displays on the UI element that currently has focus (i.e., when the user has clicked, tapped, or navigated to the element using keyboard controls). The indicator is rendered as a hairline dotted outline for all student-facing UI elements. To ensure visibility, the indicator’s color typically matches that of the element’s content (e.g., a button with white text will also have a white focus indicator).
* @iframe ../../demos/indicators/focus-indicator.html 125
*
*
* Additional examples of focus indicators can be viewed by selecting interactive elements in demos throughout the guide.
**/

::-moz-focus-inner,
input[type=range]::-moz-focus-outer { /* Prevents double focus outlines in FireFox */
  border: 0;
}

:focus,
#video-hero-play:focus:before {
	outline: thin dotted;
}

.wri-btn:focus {
	outline-offset: -0.24em;
}

.wri-btn.close-dialog-btn:focus {
	outline-color: #000;
}

.ee-tabarea li:focus,
input[type=button]:focus,
button:focus {
	outline-offset: -.2em;
}

.wri-dialog .prev-btn:focus,
.wri-dialog .lookup-btn:focus {
	outline-color: #000;
	outline-offset: -.2rem;
}

.enaepTab li:focus {
	outline-offset: -0.11em;
}

.media-btn:focus,
.sis-text-selection.active.selected:focus,
.mc-eliminate-choice:focus,
.footnote-btn:focus,
.footnote-close:focus {
	outline-color: #000;
	outline-offset: 0;
}

.tray-btn:focus,
.system-btn:focus {
	outline-offset: 0;
}

#next-btn:focus,
#back-btn:focus,
.inline-choice:focus,
input[type=text]:focus,
.extendedtext:focus {
	outline-offset: 0.05em;
}

.stimulus-paragraph p.tts-active:focus,
.stem-paragraph-inner.tts-active:focus,
.stem-paragraph p.tts-active:focus,
.standalone-image.tts-active:focus,
.standalone-image-title.tts-active:focus,
.standalone-image-wrapper figcaption.tts-active:focus,
table.grid tr.tts-active .grid-content:focus,
.footnote-paragraph.tts-active:focus,
.list-unordered li.tts-active:focus,
table.mc tr.tts-active .mc-choice-content:focus,
.cta-wrapper p.tts-active:focus,
.char-portrait figcaption p:focus,
.table-content.tts-active:focus {
	outline-color: #000;
	outline-offset: 0.05em;
}

.wri-dialog textarea:focus,
.wri-dialog input[type=text]:focus,
.wri-dialog select:focus {
	outline-offset: 0.06em;
}

.wri-editor-actual:focus,
.wri-combobox select:focus {
  outline-offset: 0.12em;
}

#media-volume:focus {
	outline-offset: 0.35em;
}

input[type=range].focus-tabbed:focus {
	outline: thin dotted;
	outline-color: #000;
	outline-offset: 0.05em;
}

.wri-combobox input[type=text]:focus {
  outline: none;
}

:root input[type=checkbox]:focus ~ span {
  outline: thin dotted;
}

.btn.btn-circular:focus {
	outline: none; }
.btn.btn-circular:focus::after {
	border: 0.05em dashed;
	border-radius: 50%;
	content: '';
	display: block;
	height: 95%;
	left: 0.5%;
	position: absolute;
	top: 0.5%;
	width: 95%;
}

.char-wrapper .btn:focus::after {
  height: 89%;
	left: 1.5%;
	top: 3%;
  width: 90%;
}

/**
* @styles 1-indicators-scroll Scroll Indicator
* The scroll indicator appears at the lower right of the screen, adjacent to the scrollbar, when assessment content (other than reading stimulus passages) requires vertical scrolling. The scroll indicator initially appears in the “More” state.
*
* When pressed, the scroll indicator takes the user to the bottom of the content area and then changes to the _Top_ state. The state change will also occur if the user scrolls to the bottom of the content area manually.
*
* Pressing the scroll indicator in the _Top_ state returns the user to the top of the content area, and the indicator then disappears. The state change will also occur if the user scrolls to the top of the content area manually. Once it has disappeared from a screen, the scroll indicator will not return on that screen during the current session.
*
*The scroll indicator does not increase in size at higher zoom levels.
* @iframe ../../demos/indicators/scroll-indicator.html 200
**/

.scroll-indicator {
	background: #2b5b8c;
	border: 0.17em solid #2b5b8c;
	border-radius: 50%;
	bottom: 1.15em;
	color: #fff;
	cursor: pointer;
	font-family: Calibri, Arial, sans-serif;
	font-size: 20px;
	height: 3.33em;
	line-height: 1;
	opacity: .85;
	padding-top: 0.65em;
	position: absolute;
	right: 2.3em;
	text-align: center;
	transition: visibility 0s, opacity .3s 0s, left .3s;
	width: 3.33em;
	z-index: 4;
}

.scroll-indicator.more::after,
.scroll-indicator.top::before {
	display: block;
	font-family: 'icons';
	font-size: 1.4em;
}

.scroll-indicator.more::before { content: 'More'; }

.scroll-indicator.more::after {
	content: '\e90e';
	line-height: 0.75;
}

.scroll-indicator.top {
	background-color: #434343;
	border-color: #434343;
	padding-top: 0.65em;
}

.scroll-indicator.top::before {
	content: '\e90f';
	line-height: 0.5;
}

.scroll-indicator.top::after { content: 'Top'; }

.scroll-indicator.inactive {
	opacity: 0;
	transition: visibility 0s .3s, opacity .3s 0s;
	visibility: hidden;
}

/**
* @styles 2-indicators-loading Loading Indicator
* When the system is processing data or loading content and cannot be interacted with, the loading indicator displays in the center of the screen on top of a semi-transparent gray background.
*
* The loading indicator does not increase in size at higher zoom levels.
* @iframe ../../demos/indicators/loading-indicator.html 125
**/

.loading-spinner {
	align-items: center;
	background: #9B9B9B;
	background: rgba(130,130,130,0.8);
	display: flex;
	height: 100%;
	justify-content: center;
	position: absolute;
	width: 100%;
}

.loading-spinner-content {
	background-color: #1b891b;
	border-radius: 0.33em;
	color: #fff;
	font-size: 18px;
	letter-spacing: 0.03em;
	line-height: 1;
	padding: 0.75em 0.9em;
}

.loading-spinner-content:before {
	animation: spin 1s infinite linear;
	content: '\e912';
	display: inline-block;
	font-family: 'icons';
	font-size: 0.67em;
	letter-spacing: normal;
	margin-right: 0.2em;
	speak: none;
}

@keyframes spin {
		0% { transform: rotate(0); }
		100% { transform: rotate(360deg); }
}