// ==========================================================================
// HTML5 Media Player
// ==========================================================================

// Variables
// -------------------------------
// Colors
@blue:          			#3498DB;
@gray-dark: 				#343f4a;
@gray: 						#565d64;
@gray-light: 				#cbd0d3;

// Controls
@controls-bg: 				@gray-dark;
@control-color: 			@gray-light;
@control-color-active: 		@blue;
@control-color-inactive: 	@gray;
@control-spacing: 			10px;

// Progress
@progress-bg: 				@gray;
@progress-value-bg: 		@blue;

// Range
@range-track-height: 		6px;
@range-thumb-height: 		(@range-track-height * 2);
@range-thumb-width: 		(@range-track-height * 2);
@range-thumb-bg: 			@control-color;
@range-thumb-bg-focus: 		@control-color-active;

// Utility classes & mixins
// -------------------------------
// Screen reader only
.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;
}
// Contain floats: nicolasgallagher.com/micro-clearfix-hack/
.clearfix() {
	zoom: 1;
	&:before, 
	&:after { content: ""; display: table; }
	&:after { clear: both; }
}

// Tab focus styles
.tab-focus() {
	outline: thin dotted #000;
	outline-offset: 1px;
}


// Range styling
// ---------------------------------------
.range-thumb() {
	height: @range-thumb-height;
	width: @range-thumb-width;
	background: @range-thumb-bg;
	border: 0;
	border-radius: (@range-thumb-height / 2);
	transition: background .3s ease;
	cursor: ew-resize;
}
.range-track() {
	height: @range-track-height;
	background: @gray;
	border: 0;
	border-radius: (@range-track-height / 2);
}

// Font smoothing
// ---------------------------------------
.font-smoothing(@mode: on) when (@mode = on) {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}
.font-smoothing(@mode: on) when (@mode = off) {
	-moz-osx-font-smoothing: auto;
	-webkit-font-smoothing: subpixel-antialiased;
}

// Styles
// -------------------------------
// Base 
.player {
	position: relative;
	max-width: 100%;
	min-width: 290px;
	overflow: hidden; // For the controls
	background: #000;

	// BORDER-BOX ALL THE THINGS! 
	// http://paulirish.com/2012/box-sizing-border-box-ftw/
	&,
	*,
	*::after,
	*::before { 
		box-sizing: border-box; 
	}

	// For video
	&-video {
		position: relative;
	}

	video {
		width: 100%;
		height: auto;
		vertical-align: middle;
	}

	// Captions
	&-captions {
		display: none;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 20px;
		min-height: 2.5em;
		color: #fff;
		font-size: 16px;
		text-shadow: 0 1px 1px rgba(0,0,0, .75);
		text-align: center;
		.font-smoothing();

		@media (min-width: 560px) {
			font-size: 24px;
		}
	}
	&.captions-active &-captions {
		display: block;
	}

	// Player controls
	&-controls {
		.clearfix();
		.font-smoothing();
		position: relative;
		padding: (@control-spacing * 2) @control-spacing @control-spacing;
		background: @controls-bg;
		line-height: 1;

		// Layout
		&-sound {
			display: inline-block;
			margin-top: @control-spacing;
		}
		@media (min-width: 560px) {
			&-playback {
				float: left;
			}
			&-sound {
				float: right;
				margin-top: 0;
			}
		}
		
		input + label, 
		button {
			display: inline-block;
			vertical-align: middle;
			margin: 0 2px;
			padding: (@control-spacing / 2) @control-spacing;
			
			transition: background .3s ease;
			border-radius: 3px;
			cursor: pointer;

			svg {
				width: 18px;
				height: 18px;
				display: block;
				fill: currentColor;
				transition: fill .3s ease;
			}
		}
		input + label,
		input.inverted:checked + label {
			color: @control-color-inactive;
		}
		button, 
		input.inverted + label,
		input:checked + label {
			color: @control-color;
		}
		button {
			border: 0;
			background: transparent;
			overflow: hidden;
		}
		button:hover,
		label:hover {
			background: @control-color-active;

			svg {
				fill: #fff;
			}
		}
		input:focus + label,
		button:focus {
			.tab-focus();

			svg {
				fill: #fff;
			}
		}
		.icon-exit-fullscreen,
		.icon-muted {
			display: none;
		}
		.player-time {
			display: inline-block;
			vertical-align: middle;
			margin-left: @control-spacing;
			color: #fff;
			font-weight: 600;
			font-size: 14px;
			.font-smoothing();
		}
	}

	// Player progress
	// <progress> element
	&-progress {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: @control-spacing;
		margin: 0;
		vertical-align: top;
		
		&[value] {
			-webkit-appearance: none;
			border: none;
			background: @progress-bg;
			cursor: pointer;
			color: @progress-value-bg;

			&::-webkit-progress-bar {
				background: @progress-bg;
			}

			// Inherit from currentColor;
			&::-webkit-progress-value {
				background: currentColor;
			}
			&::-moz-progress-bar {
				background: currentColor;
			}
		}
	}

	// States
	&-controls [data-player='pause'],
	&.playing .player-controls [data-player='play'] {
		display: none;
	}
	&.playing .player-controls [data-player='pause'] {
		display: inline-block;
	}

	// Muted
	&.muted .player-controls .icon-muted {
		display: block;

		& + svg {
			display: none;
		}
	}

	// Volume control
	// <input[type='range']> element
	&-volume {
		vertical-align: middle;
		-webkit-appearance: none;
		-moz-appearance: none;
		//height: 6px;
		width: 100px;
		margin: 0 @control-spacing 0 0;
		padding: 0;		
		cursor: pointer;
		background: none;
		
		// Webkit
		&::-webkit-slider-runnable-track {
			.range-track();
		}
		&::-webkit-slider-thumb {
			-webkit-appearance: none;
			margin-top: -((@range-thumb-height - @range-track-height) / 2);
			.range-thumb();
		}

		// Mozilla
		&::-moz-range-track {
			.range-track();
		}
		&::-moz-range-thumb {
			.range-thumb();
		}
		
		// Microsoft
		&::-ms-track {
			height: @range-track-height;
			background: transparent;
			border-color: transparent;
			border-width: ((@range-thumb-height - @range-track-height) / 2) 0;
			color: transparent;
		}
		&::-ms-fill-lower,
		&::-ms-fill-upper {
			.range-track();
		}
		&::-ms-thumb {
			.range-thumb();
		}

		&:focus {
			outline: 0;

			&::-webkit-slider-thumb {
				background: @range-thumb-bg-focus;
			}
			&::-moz-range-thumb {
				background: @range-thumb-bg-focus;
			}
			&::-ms-thumb {
				background: @range-thumb-bg-focus;
			}
		}
	}

	// Full screen mode
	&:fullscreen {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100%;
		width: 100%;

		.player-video {
			height: 100%;
			width: 100%;

			video {
				height: 100%;
			}
			.player-captions {
				top: auto;
				bottom: 90px;

				@media (min-width: 560px) and (max-width: 767px) {
					bottom: 60px;
				}

				@media (min-width: 768px) {
					bottom: 80px;
				}
			}

		}
		.player-controls {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;

			.icon-exit-fullscreen {
				display: block;

				& + svg {
					display: none;
				}
			}
		}
	}

	// Some options are hidden by default
	[data-player='captions'],
	[data-player='captions'] + label,
	[data-player='fullscreen'],
	[data-player='fullscreen'] + label {
		display: none;
	}
	&.captions-enabled [data-player='captions'],
	&.captions-enabled [data-player='captions'] + label,
	&.fullscreen-enabled [data-player='fullscreen'],
	&.fullscreen-enabled [data-player='fullscreen'] + label {
		display: inline-block;
	}
}

// Fixing display for IE10+
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.video-controls .player-volume {
		position: relative;
		padding: 0;
	}
	.player-time {
		margin-top: 4px;
	}
	.player-captions {
		padding: 8px;
		min-height: 36px;
	}
}