@import "vars";
@import "animation";
@import "color-palette";
// @import "layout";

$seekbarHeight: 3px;
$seekbarColor: #44FFB4;  // #3FBA97;

.r5-wraper{
	*, *:before, *:after {
		 -webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	width: auto;
	min-width: 200px;
	position: relative;
	overflow: hidden;
	ul{
		list-style: none;
		padding:0;margin:0;
	}
	.r5-content{
		position:absolute;
		width: 100%;
		// height: 100%;
		top:0; left: 0;
		pointer-events: none;
		*{
			pointer-events: auto;
		}
	}
	.r5-overlay{
		width: 100%;
		height: 100%;
		position:absolute;
		top:0;
		left:0;
		// cursor:pointer;
		transition: opacity 0.5s ease;
		opacity: 0.5;
		svg{
			width: 100px;
			height: 100px;
			cursor:pointer;
			position:absolute;
			top: 50%;
			left: 50%;
			margin-left: -50px;
			margin-top: -50px;
		}
		&:hover{
			opacity: 0.9;
		}
	}
	button{
		background:none;
		border:none;
		outline:none;
		opacity:0.8;
		transition: opacity 0.3s ease;
		&:hover{
			opacity:1;
		}
	}
	.r5-seekbar-wraper,.r5-controls{
		width: 100%;
	}
	.r5-controls-hidden{
		display:none;
	}
	.r5-controls{
		text-align: left;
		.r5-panel{
			padding-left: 5px;
			padding-right: 5px;
		}
	}
	.r5-pull-right{ float: right;}
	.r5-timecode{
		font-size: 12px;
		margin-left: 10px;
		position:relative;
		top: -0.5em;
		// opacity:0.8;
		display:inline;
		// transition: opacity 0.3s ease;
	}


	.r5-seekbar-wraper{
		height: $seekbarHeight;
		width: 100%;
		margin-bottom: 5px;
		position:relative;
		overflow:hidden;
		background-color: rgba(255,255,255,0.3);
		transition: height 0.3s ease;
		input[type="range"]{
			width:  100%;
			position: absolute;
			top:-5px;
			opacity:0;
			cursor:pointer;
		}
		&:hover{
			height: $seekbarHeight+2;
		}
	}
	.r5-seekbar{
		background-color: $seekbarColor;
		transition: width 0.1s;
	}
	.r5-seekbar-loaded{
		background-color: rgba(255,255,255,0.5);
	}

	.r5-seekbar,.r5-seekbar-loaded{
		position:absolute;
		top:0;left:0;
		height: $seekbarHeight+5;
	}
	.r5-volume{
		width: 35px;
		display: inline-block;
		position:relative;
		.r5-volume-inner{
			position:absolute;
			left: 31px;
			top: 12px; z-index: 2;
			background-color: rgba(255,255,255,0.5);
			height: 6px;
			opacity:0;
			visibility: hidden;
			transition: visibility 0s 0.3s, opacity 0.3s ease;
		}
		input,.r5-volume-bar{
			position:absolute;
			top: 0;
			left:0;
		}
		input{ 
			width: 100%; 
			margin-top: -5px; opacity:0;
		}
		.r5-volume-bar{
			// top: 10px;
			width: 100%;
			height: 6px;
			background-color: $seekbarColor;
		}
		&:hover .r5-volume-inner{
			transition: visibility 0s, opacity 0.3s ease;
			opacity:1;
			visibility: visible;
		}
		&:hover + .r5-timecode{
			// opacity:0;
			display: none;
		}
	}

	.r5-subtitle{
		position:relative;
		display:inline-block;
		&:hover .r5-subtitle-menu{
			visibility:visible;
			opacity:1;
			transition: visibility 0s , opacity 0.3s ease;
		}
	}
	.r5-subtitle-menu{
		position:absolute;
		padding-bottom: 20px;
		bottom: 20px;
		left: -5px;
		opacity:0;
		visibility: hidden;
		transition: visibility 0s 0.3s, opacity 0.3s ease;
		// background-color: rgba(255,255,255,0.2);
	}
	::cue{ // the subtitle text style
		line-height: 1.4;
		opacity:0.8;
		// margin: 0 1em 1em;
		background: rgba(0,0,0,0.3)
	}

	// ----------------------------------- overlay style ------------------------------------
	.r5-controls.r5-controls--overlay{
		color: #fff;
		padding:0 10px;
		position:absolute;
		bottom: 0;
		left:0;
		background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5)) 0 0px repeat-x;
		button{color: #fff; &.active{color: $seekbarColor }}
		&.r5-auto-hide{
			opacity:0;
			transition: opacity 0.3s ease-out;
		}
	}
	// ----------------------------------- fixed style ------------------------------------
	.r5-controls.r5-controls--fixed{
		height:45px;
		margin-top: -3px;
		background-color: darken(#3FBA97, 10%);
		color: #fff;
		user-select:none;
		button{color:#fff;}
		.r5-seekbar-wraper{
			height: $seekbarHeight+2;
			position:relative;
			overflow:hidden;
			&:hover{
				height: $seekbarHeight+2;
			}
		}
		.r5-seekbar,.r5-seekbar-loaded{
			
		}
	}

}

.r5-wraper:hover .r5-controls--overlay.r5-auto-hide{
	opacity: 1;
	transition: opacity 0.3s ease-in;
}