@import 'settings';

.mediaplayer {
	font-size:19.2px;
	height: 2.5em; /* 40 */
	color: #FFF;
	xxtext-shadow: 1px 1px 0 #000;
	position: relative;
	z-index: 1;
	background: @colorHighlight;

	&.video {
		background: transparent;
		position:relative;
		
		height:100%;
		overflow:hidden;
	}
	&.mediaplayer-mini
	{
		width: 2.5em; /* 40 */
		margin: 0 auto;
	}
.controls {
	position:absolute;
	bottom:0;
	width:100%;
	height:2.5em;
	background-color: rgba(0,0,0,0.2);
	transform:translateY(0px);
	transition:transform 0.3s;
}
&.idle.mediaplayer-playing .controls {
	transform:translateY(100%);
	transition-delay:0.5s;
}
	& > div,
	& .controls > div
	{
		position: absolute;
	}

	
	.mediaplayer-control-fullscreen {
		position:absolute;
		top:0;
		right:0;
		width:2.5em;
		height:2.5em;
		cursor:pointer;
	}
	@media screen and(max-width:767px) {
		.mediaplayer-control-fullscreen {
			//display:none;
		}
	}
		.mediaplayer-control-fullscreen.hover
		{
			background-color: rgba(255, 255, 255, 0.4);
		}
		.output & .mediaplayer-control-fullscreen span.Icon {
			display:block;
			position:absolute;
			top:50%;
			left:50%;
			margin-left:-0.5em;
			margin-top:-0.5em;
			color:#FFF;
		}

		&:not(.mediaplayer-fullscreen) .mediaplayer-control-fullscreen span.Icon.rcOutput-FullscreenOff,
		&.mediaplayer-fullscreen .mediaplayer-control-fullscreen span.Icon.rcOutput-FullscreenOn {
			display:none;
		}
		
	.mediaplayer-playpause
	{
		width: 2.5em; /* 40 */
		height: 100%;
		text-align: center;
		
		cursor: pointer;
		z-index: 2;
		top: 0;
		left: 0;
	}
	.mediaplayer-playpause span.Text {
		text-indent: -9999px;
		display:none;
	}
		/*
		.mediaplayer:not(.mediaplayer-mini) .mediaplayer-playpause
		{
			border-right: 1px solid #fff;
			xxborder-right-color: rgba( 255, 255, 255, .1 );
		}
		.mediaplayer-mini .mediaplayer-playpause
		{
			width: 100%;
		}
		*/
		.mediaplayer-playpause.hover  {
			background-color: rgba(255, 255, 255, 0.4);
		}
		.mediaplayer-playpause a {
			display: block;
			width:100%;
			height:100%;
			padding-top:calc(1.25em - 0.5rem);
			box-sizing:border-box;
		}
		.mediaplayer-playpause a span.Icon {
			vertical-align:top;
			color:#FFF;
		}

		&:not(.mediaplayer-playing) .mediaplayer-playpause a span.Icon.rcOutput-Pause {
			display:none;
		}
		&.mediaplayer-playing .mediaplayer-playpause a span.Icon.rcOutput-Start {
			display:none;
		}


	.mediaplayer-time
	{
		width: 4.375em; /* 70 */
		height: 100%;
		line-height: 2.5em; /* 38 */
		text-align: center;
		z-index: 2;
		top: 0;
	}
	.mediaplayer-time span.Text {
		display:inline-block;
		width:2.5em;
		font-size:18px;
		text-align:left;
	}
		.mediaplayer-time-current
		{
			border-left: 1px solid #fff;
			left: 2.5em; /* 40 */
		}
		.mediaplayer-time-duration
		{
			border-right: 1px solid #fff;
			right: 2.5em; /* 40 */
		}
			.mediaplayer-novolume .mediaplayer-time-duration {
				border-right: 0;
				right: 0;
			}
			@media screen and(max-width:767px) {
				.mediaplayer-time-duration {
					border-right: 0;
					right: 0;
				}
			}
	.mediaplayer-bar
	{
		height: 0.875em; /* 14 */
		background-color: rgba(255,255,255,0.4);
		cursor: pointer;
		z-index: 1;
		top: 50%;
		right: 6.875em; /* 110 */
		left: 6.875em; /* 110 */
		margin-top: -0.438em; /* 7 */
	}
		.mediaplayer-novolume .mediaplayer-bar
		{
			right: 4.375em; /* 70 */
		}
		@media screen and(max-width:767px) {
			.mediaplayer-bar {
				right: 4.375em; /* 70 */
			}
		}
		.mediaplayer-bar div
		{
			width: 0;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}
		.mediaplayer-bar-loaded
		{
			xxbackground-color: #fff;
			z-index: 1;
		}
		.mediaplayer-bar-played
		{
			background: #fff;
			z-index: 2;
		}
	.mediaplayer-volume
	{
		width: 2.5em; /* 40 */
		height: 100%;
		xxborder-left: 1px solid #00f;
		xxborder-left-color: rgba( 255, 255, 255, .25 );
		text-align: center;
		xxtext-indent: -9999px;
		cursor: pointer;
		z-index: 2;
		top: 0;
		right: 0;
	}
		.mediaplayer-volume-button {
			width: 100%;
			height: 100%;
			padding-top:calc(1.25em - 12px);
			box-sizing:border-box;
		}
		.mediaplayer-volume-button span.Text {
			text-indent: -9999px;
			display:none;
		}
		.mediaplayer-volume-button.hover
		{
			background-color: rgba(255, 255, 255, 0.4);
		}
		.mediaplayer-volume-button a {
			display: block;
		}
		.mediaplayer-volume-button a span.Icon {
			vertical-align:top;
			color:#FFF;
		}
		&:not(.mediaplayer-mute) .mediaplayer-volume-button a span.Icon.rcOutput-VolumeOff {
			display:none;
		}
		&.mediaplayer-mute .mediaplayer-volume-button a span.Icon.rcOutput-VolumeOn {
			display:none;
		}

		.mediaplayer-volume-adjust
		{
			touch-action: none;
			
			height: 9em; /* 100 */
			cursor: default;
			position: absolute;
			z-index:10;
			left: 0;
			right: 0px;
			top: -9999px;
			background-color:@colorHighlight;
			
			video-background-color: rgba(255, 255, 255, 0.4);
			
			-webkit-border-top-left-radius: 2px;
			-webkit-border-top-right-radius: 2px;
			-moz-border-radius-topleft: 2px;
			-moz-border-radius-topright: 2px;
			border-top-left-radius: 2px;
			border-top-right-radius: 2px;
			
			border-bottom:1px solid #FFF;
			box-sizing:border-box;
		}
		&.video .mediaplayer-volume-adjust {
			background-color: rgba(0, 0, 0, 0.2);
		}
		
			.mediaplayer-volume:not(.showVolume) .mediaplayer-volume-adjust
			{
				opacity: 0;
			}
			.mediaplayer-volume.showVolume .mediaplayer-volume-adjust
			{
				top: auto;
				bottom: 100%;
			}
			.mediaplayer-volume-adjust > div {
				xxwidth: 2em;
				xxheight: 70%;
				cursor: pointer;
				xxposition: relative;
				z-index: 1;
				xxmargin: 40% auto 0;
				position:absolute;
				top:1.5em;
				bottom:1.5em;
				width:100%;
				
			}
			.mediaplayer-volume-adjust > div:before {
				content:'';
				display:block;
				position:absolute;
				top:0;
				left:50%;
				bottom:0;
				width:2px;
				margin-left:-1px;
				background-color:#FFF;
				background-color:rgba(255,255,255,0.4);
				border-radius: 100px;
				
				pointer-events:none;
			}
				.mediaplayer-volume-adjust div div {
					position:absolute;
					left:50%;
					bottom:0;
					width:2px;
					margin-left:-1px;
					background: #FFF;
					border-radius: 100px;
					
					pointer-events:none;
				}
				.mediaplayer-volume-adjust > div div:before,
				&.video .mediaplayer-volume-adjust > div div:after {
					content:'';
					display:block;
					position:absolute;
					top:1px;
					left:1px;
					width:16px;
					height:16px;
					margin-left:-8px;
					margin-top:-8px;
					background: #FFF;
					border-radius: 100px;
					border:2px solid @colorHighlight;
					z--index:1;
					
					box-sizing:border-box;
					
					pointer-events:none;
				}
				&.video .mediaplayer-volume-adjust > div div:before {
					border-color:rgba(0,0,0,0.2);
					xxborder-color:rgba(0,0,0,0.4);
					background-color:transparent;
				}
				&.video .mediaplayer-volume-adjust > div div:after {
					border:0px none;
					width:12px;
					height:12px;
					margin-left:-6px;
					margin-top:-6px;
				}
		@media screen and(max-width:767px) {
			.mediaplayer-volume {
				display: none;
			}
		}

	.mediaplayer-bar,
	.mediaplayer-volume-adjust > div div
	{
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 100px;
	}
	.mediaplayer-bar {
		overflow:hidden;
	}

	*,
	*:before,
	*:after
	{
		-webkit-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
		-moz-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
		-ms-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
		-o-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
		transition: color .25s ease, background-color .25s ease, opacity .5s ease;
		
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		-webkit-touch-callout: none;
		-webkit-user-select: none;
	}
	
}