// Videos
//
//  - Build your media with accessibility in mind! It is much easier to work accessibility into the beginning than trying to tack it on later. This is true of all components, but especially for media components.
//  - Make sure your player is accessible and includes control elements to pause, stop, and play your media.
//  - Do not auto-play your media. This can cause confusion as well as annoyance.
//  - Make sure your media has alternative methods to get to the content. For example, add captions to your videos and/or provide a transcript for your users to read.
//  - Make sure your media does not cause seizures! Use the Photosensitive Epilepsy Analysis Tool (PEAT) to check your media before you add it to your website.
//
// <blockquote>There are a ton of WCAG Guidelines for media on websites for a reason...there are a lot of factors to consider. Don't let that scare you though, there are also some easy wins. Just including alternatives to the media you present (ex. transcript for a video) is half the battle.</blockquote>
//
// <section data-action="aria-toggle" class="atblock"><h3 class="atblock__title"><a href="#video_res">Resources</a></h3><div id="video_res" class="atblock__panel"><ul><li><a href="https://www.sitepoint.com/accessible-video" target="_blank">8 Steps to Creating Accessible Video</a></li><li><a href="https://www.w3.org/2008/06/video-notes" target="_blank">Multimedia Accessibility FAQ</a></li><li><a href="http://trace.umd.edu/peat" target="_blank">Photosensitive Epilepsy Analysis Tool</a> - tests your visual media to see if it will trigger seizures or other light disorder issues in viewers</li></ul></div></section>
//
//
//
// <section data-action="aria-toggle" class="atblock"><h3 class="atblock__title"><a href="#video_guide">WCAG 2.1 Guidelines</a></h3><div id="video_guide" class="atblock__panel guidelines"><p><a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=131#text-equiv-all" target="_blank">1.1.1 Non-text Content</a> - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose (some exceptions). (Level A)<br><br><a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=131#media-equiv-av-only-alt" target="_blank">1.2.1 Audio-only and Video-only (Prerecorded)</a> - Prerecorded Video-only: Either an alternative for time-based media or an audio track is provided that presents equivalent information for prerecorded video-only content. (Level A)<br><br><a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=131#media-equiv-captions" target="_blank">1.2.2 Captions (Prerecorded)</a> - Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such. (Level A)<br><br><a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=131#media-equiv-audio-desc" target="_blank">1.2.3 Audio Description or Media Alternative (Prerecorded)</a> - An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media, except when the media is a media alternative for text and is clearly labeled as such. (Level A)<br><br><a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=131#media-equiv-audio-desc-only" target="_blank">1.2.5 Audio Description (Prerecorded)</a> - Provide an audio (spoken) version of information that is provided visually so that it is possible for people who cannot see to be able to understand audio-visual material. (Level AA)<br><br><a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=131#media-equiv-sign" target="_blank">1.2.6 Sign Language (Prerecorded)</a> - Sign language interpretation is provided for all prerecorded audio content in synchronized media. (Level AAA)<br><br><a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=131#media-equiv-text-doc" target="_blank">1.2.8 Media Alternative (Prerecorded)</a> - An alternative for time-based media is provided for all prerecorded synchronized media and for all prerecorded video-only media. (Level AAA)</p></div><div class="markup"></div></section>
//
//
//
// Markup: videos.twig
//
// Style guide: Media.videos

// Import site utilities.
@import '../../global/utils/init';

// sass-lint:disable-all
.videos {
  margin: 0;
}

// Code from Accessible HTML5 Video Player
// http://paypal.github.io/accessible-html5-video-player/css/px-video.css
/* utilities */
.pull-left {
	float: left;
}
.sr-only {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	padding: 0 !important;
	border: 0 !important;
	height: 1px !important;
	width: 1px !important;
	overflow: hidden;
}
.hide {
    display: none;
}
.show-inline {
	display: inline-block;
}

/* containers */
.px-video-img-captions-container * {
	box-sizing: border-box;
}

.px-video-img-captions-container {
	position: relative;
}

/* progress indicator */
.px-video-progress {
	width: 100%;
	height: 10px;
}
.px-video-progress[value] {
	/* Reset the default appearance */
	-webkit-appearance: none;
	border: none;
}
.px-video-progress[value]::-webkit-progress-bar {
	background-color: #E6E6E6;
}
.px-video-progress[value]::-webkit-progress-value {
	background-color: #009CDF;
}

/* time */
.px-video-time {
	font-family: 'Open Sans', 'Arial', sans-serif;
	float: right;
	margin-top: 2px;
	font-size: 14px;
}

/* caption area */
.px-video-captions {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: .5em;
	min-height: 2.5em;
	background-color: #000;
	color: #fff;
	font-size: 1.1em;
	text-align: center;
	opacity: 0.75;
}

/* buttons */
.px-video-controls button {
	border: 1px #fff solid;
	background: transparent;
	padding: 0;
	margin: 0 5px;
	width: 25px;
	height: 20px;
	overflow: hidden;
	background: no-repeat url("#{$asset-path}/px-video-sprite.png");
}
.px-video-controls button:focus {
	border: 1px #999 dotted;
	outline: none;
}
.px-video-controls button {
	cursor: pointer;
}

/* restart button */
.px-video-controls button.px-video-restart {
	background-position: -6px -333px;
	margin-left: 0;
}
.px-video-controls button.px-video-restart:hover,
.px-video-controls button.px-video-restart:focus {
	background-position: -6px -297px;
}

/* rewind button */
.px-video-controls button.px-video-rewind {
	background-position: -6px -189px;
}
.px-video-controls button.px-video-rewind:hover,
.px-video-controls button.px-video-rewind:focus {
	background-position: -6px -153px;
}

/* play button */
.px-video-controls button.px-video-play {
	background-position: -6px -45px;
}
.px-video-controls button.px-video-play:hover,
.px-video-controls button.px-video-play:focus {
	background-position: -6px -9px;
}

/* pause button */
.px-video-controls button.px-video-pause {
	background-position: -6px -117px;
}
.px-video-controls button.px-video-pause:hover,
.px-video-controls button.px-video-pause:focus {
	background-position: -6px -81px;
}

/* forward button */
.px-video-controls button.px-video-forward {
	background-position: -6px -261px;
}
.px-video-controls button.px-video-forward:hover,
.px-video-controls button.px-video-forward:focus {
	background-position: -6px -225px;
}

.px-video-fullscreen-btn-container label {
	display: inline-block;
	width: 25px;
	height: 20px;
	margin-left: 10px;
	background: no-repeat url("#{$asset-path}/px-video-sprite.png");
	background-position: -6px -907px;
}
.px-video-fullscreen-btn-container input[type="checkbox"]:focus+label {
	outline: 1px #999 dotted;
	background-position: -6px -943px;
}
.px-video-fullscreen-btn-container input[type="checkbox"]:hover+label {
	background-position: -6px -943px;
	cursor: pointer;
}
.px-video-fullscreen-btn-container input[type="checkbox"]:focus+label {
	outline: 1px #999 dotted;
	background-position: -6px -943px;
}
.px-video-fullscreen-btn-container input[type="checkbox"]:checked+label {
	background-position: -6px -979px;
}
.px-video-fullscreen-btn-container input[type="checkbox"]:checked:hover+label {
	background-position: -6px -1015px;
}

/* captions button */
.px-video-captions-btn-container label {
	display: inline-block;
	width: 25px;
	height: 20px;
	margin-left: 10px;
	background: no-repeat url("#{$asset-path}/px-video-sprite.png");
	background-position: -6px -835px;
}
.px-video-captions-btn-container input[type="checkbox"]:focus+label {
	outline: 1px #999 dotted;
	background-position: -6px -799px;
}
.px-video-captions-btn-container input[type="checkbox"]:hover+label {
	background-position: -6px -799px;
	cursor: pointer;
}
.px-video-captions-btn-container input[type="checkbox"]:focus+label {
	outline: 1px #999 dotted;
	background-position: -6px -799px;
}
.px-video-captions-btn-container input[type="checkbox"]:checked+label {
	background-position: -6px -871px;
}

/* mute button */
.px-video-mute-btn-container label {
	display: inline-block;
	width: 25px;
	height: 20px;
	margin-left: 240px;
	margin-top: 2px;
	background: no-repeat url("#{$asset-path}/px-video-sprite.png");
	background-position: -6px -476px;
}
.px-video-mute-btn-container input[type="checkbox"]:focus+label {
	outline: 1px #999 dotted;
	background-position: -6px -440px;
}
.px-video-mute-btn-container input[type="checkbox"]:hover+label {
	background-position: -6px -440px;
	cursor: pointer;
}
.px-video-mute-btn-container input[type="checkbox"]:focus+label {
	outline: 1px #999 dotted;
	background-position: -6px -440px;
}
/* checked state of mute button */
.px-video-mute-btn-container input[type="checkbox"]:checked+label {
	background-position: -6px -692px;
}
.px-video-mute-btn-container input[type="checkbox"]:checked:hover+label,
.px-video-mute-btn-container input[type="checkbox"]:checked:focus+label {
	background-position: -6px -656px;
}

/* volume range input */
.px-video-controls input[type='range'] {
	-webkit-appearance: none;
	height: 6px;
	width: 100px;
	margin-top: 8px;
	background-color: #E6E6E6;
	outline:none;
}
.px-video-controls input[type='range']:focus::-webkit-slider-thumb {
	outline: 1px #999 dotted;
}
.px-video-controls input[type='range']::-moz-range-track {
	-moz-appearance: none;
	height: 6px;
	background-color: #E6E6E6;
	border: none;
}
.px-video-controls input[type='range']::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	height: 10px;
	width: 6px;
	background-color: #666;
}
.px-video-controls input[type='range']::-moz-range-thumb {
	height: 12px;
	width: 8px;
	background-color: #666;
}
/* fixing display for IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.px-video-controls input[type='range'] {
		position: relative;
		padding: 0;
		height: 8px;
		top: -3px;
	}
	.px-video-time {
		margin-top: 4px;
	}
	.px-video-captions {
		padding: 8px;
		min-height: 36px;
	}
}

.px-video-container.fullscreen {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	-webkit-cursor-visibility: auto-hide;
}

/* Fullscreen styles */

/* style applied through js */
.px-video-controls.js-fullscreen-controls {
	position: absolute;
	bottom: 0;
	width: 100%;
	z-index: 940;
	background: white;
}

.px-video-captions.js-fullscreen-captions {
	min-height: 3.5em;
	font-size: 2.5em;
	padding: 1em;
}

.px-timetip {
	padding: 5px 10px;
	font-family: 'Open Sans', 'Arial', sans-serif;
	font-size: 14px;
	background: rgba(0,0,0,0.83);
	border-radius: 3px;
	color: #fff;
	width: auto;
}

.px-timetip:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(43, 43, 43, 0);
	border-top-color: #2b2b2b;
	border-width: 10px;
	margin-left: -10px;
}

// sass-lint:enable-all
