/*
  Multimedia Player Code
 */

%multimedia-display-none {
	display: none;
}

%multimedia-controls-outline {
	&:focus {
		outline: 1px solid $mm-ctrl-outline-color;
	}
}

%slider-polyfill-background {
	background: $mm-volume-bg-color;
	border: 0;
}

%multimedia-xxsmall-ui-panels {
	padding-top: 2em;
}

@mixin multimedia_overlay_loading {
	.display {
		@extend %global-loading;
		position: relative;

		&:before,
		&:after {
			display: block;
		}
	}
}

@mixin multimedia_overlay_base {
	.display {
		@extend %global-centered-overlay;
		cursor: pointer;
		position: relative;
	}
}

@mixin multimedia_overlay_play {
	.display {
		&:before {
			text-align: center;
		}

		&:after {
			color: #fff;
			content: "";
			// TODO: Use bootstratop placeholder when nested extends are supproted
			font-family: "Glyphicons Halflings";
			font-size: 65px;
			text-align: center;
		}
	}
}

%controls-offset {
	display: block;
	width: 100%;
}

%captions_hidden {
	max-height: 0;
	padding: 0;
}

%captions_text_box {
	display: table-cell;
	height: 3em;
	vertical-align: middle;
}

.wb-mltmd {
	// lets fight the FOUC
	// base state
	display: block;
	position: relative;

	&.video {

		&:not(.playing):not(.waiting) {
			@include multimedia_overlay_base;
			@include multimedia_overlay_play;
		}

		&.playing {

			.errmsg {
				display: none;
			}
		}

		&.waiting {
			@include multimedia_overlay_loading;
		}
	}

	&.audio {
		.lastpnl {
			@extend %multimedia-display-none;
		}

		object {
			position: absolute;
		}
	}

	video {
		@extend %controls-offset;
		height: auto;
		width: 100%;
	}

	object,
	iframe {
		@extend %controls-offset;
	}

	&.cc_on {
		.wb-mm-cc {
			display: table;
			height: 4em;
			padding: .5em;
		}

		.cc {
			&:after {
				border-bottom: 3px solid $mm-ctrl-cc-color;
				content: " ";
				display: block;
				margin-left: -2px;
				width: 1.2em;
			}
		}
	}

	&.youtube {
		&.cc_on {
			.wb-mm-cc {
				@extend %multimedia-display-none;
			}
		}
	}

	/*
	  Light Skinning of mediacontrols
	 */
	&.skn-lt {
		border-bottom: 1px solid #ddd;
		color: #000;

		.wb-mm-ctrls {
			background: #fff;
			color: #000;

			.btn {
				background: #fff;
				border: 0;
				color: #000;
			}
		}
	}

	.wb-share {
		text-align: right;
	}

}

.wb-mm-cc {
	@extend %captions_hidden;
	background-color: $mm-cc-bg-color;
	color: $mm-cc-fg-color;
	text-align: center;
	transition: all .26s ease;
	width: 100%;

	&:before {
		@extend %captions_text_box;
		content: " ";
	}

	div {
		@extend %captions_text_box;
	}
}

%pnl {
	display: table-cell;
	vertical-align: middle;
}

.wb-mm-ctrls {
	background: $mm-ctrl-bg-color;
	color: $mm-ctrl-fg-color;
	display: table;
	padding-top: 2em;
	position: relative;
	width: 100%;

	.btn {
		@extend %multimedia-controls-outline;
		background: transparent;
		border: 0;
		border-top: {
			left-radius: 0 !important;
			right-radius: 0 !important;
		}
		color: $mm-ctrl-fg-color;
		font-size: 130%;
	}

	.frstpnl {
		@extend %pnl;
		text-align: center;
		width: 13em;
	}

	.lastpnl {
		@extend %pnl;
		text-align: center;
		width: 3em;
	}

	.tline {
		@extend %pnl;

		.wb-mm-tmln-crrnt {
			&:after {
				content: " / ";
				padding: 0 .5em;
			}
		}
	}

	.wb-mm-txtonly {
		padding: 0 1em;

		p {
			display: inline;
		}
	}

	.wb-mm-txtonly,
	.wb-mm-prgrss {
		display: table-cell;
		vertical-align: middle;
	}

	/* Progress Bar */
	progress {
		@extend %multimedia-controls-outline;
		/* Important Thing */
		-webkit-appearance: none;
		background: $mm-progress-bg-color;
		background-clip: padding-box;
		border: 7px solid #3e3e3e;
		border-radius: 14px;
		color: $mm-progress-fg-color;
		display: block;
		height: 30px;
		left: 0;
		padding: 2px;
		position: absolute;
		top: 0;
		width: 100%;

		&.wb-progress-inited {
			overflow: hidden;
			padding: 0;
		}

		&::-webkit-progress-bar {
			background: $mm-progress-bg-color;
		}

		&::-webkit-progress-value {
			background: $mm-progress-fg-color;
			border-radius: 7px;
		}

		&::-moz-progress-bar {
			background: $mm-progress-fg-color;
			border-radius: 7px;
		}
	}

	.progress {
		height: 22px;
	}

	input {
		&[type=range] {
			@extend %multimedia-controls-outline;
			-webkit-appearance: none;
			background: transparent;
			display: inline-block;
			height: 2.5em;
			padding: 0;
			width: 7em;

			&:focus {
				/* Prevent Webkit/Blink browsers from defaulting to a -2px outline offset. */
				outline-offset: 0;
			}

			&::-webkit-slider-runnable-track {
				background: $mm-volume-bg-color;
				height: 4px;
			}

			&::-webkit-slider-thumb {
				-webkit-appearance: none;
				background: $mm-volume-thumb-color;
				border: $mm-volume-thumb-border;
				box-sizing: content-box;
				height: $mm-volume-thumb-height;
				margin-top: -9px;
				width: $mm-volume-thumb-width;
			}

			&::-moz-range-track {
				background: $mm-volume-bg-color;
				border: 0;
			}

			&::-moz-range-thumb {
				background: $mm-volume-thumb-color;
				border: $mm-volume-thumb-border;
				border-radius: 0;
				height: $mm-volume-thumb-height;
				width: $mm-volume-thumb-width;
			}

			&::-ms-track {
				border: 0;
				color: transparent;
				height: 4px;
			}

			&::-ms-fill-upper {
				background: $mm-volume-bg-color;
			}

			&::-ms-fill-lower {
				background: $mm-volume-bg-color;
			}

			&::-ms-thumb {
				background: $mm-volume-thumb-color;
				border: $mm-volume-thumb-border;
				height: $mm-volume-thumb-height;
				width: $mm-volume-thumb-width;
			}
		}
	}

	/* Slider polyfill styles */
	.fd-slider {
		display: inline-block;
		height: 100%;
		margin-top: 10px;
		width: 7em;
	}

	.fd-slider-bar {
		@extend %slider-polyfill-background;
	}

	.fd-slider-range {
		@extend %slider-polyfill-background;
	}

	.fd-slider-handle {
		background: $mm-volume-thumb-color;
		border: $mm-volume-thumb-border;
		box-sizing: content-box;
		width: $mm-volume-thumb-width;
	}
}


.xxsmallview {
	.wb-mm-ctrls {

		.frstpnl {
			@extend %multimedia-xxsmall-ui-panels;
		}

		.lastpnl {
			@extend %multimedia-xxsmall-ui-panels;
		}

		.wb-mm-txtonly {
			left: 0;
			margin-top: -2em;
			position: absolute;
		}
	}
}