//
// SKIN.SCSS
// 스킨명 : mplayer-minimal
// 설명 : MPlayer minimal 스킨 (video / audio 공용)
// --------------------------------------------------

.mplayer-minimal {
	// ----------------------------------------------
	$btn-width: 50px;
	$btn-height: 35px;
	// ----------------------------------------------

	box-sizing: border-box;
	display: inline-block;
	text-align: left;
	background: #000;
	position: relative;
	overflow: hidden;

	* {
		box-sizing: border-box;
	}

	.mp-media-el {
		height: 100%;

		video {
			display: block;
			width: 100%;
			height: auto;
			outline: 0 none;

			&::-webkit-media-controls {
				display: none;
			}
		}
	}

	// flexible
	&.mp-is-flexible {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		
		video {
			width: 100%;
			height: 100%;
			position: absolute;
			position: absolute;
			top: 0;
			left: 0;
		}
	}

	// full-screen
	&.mp-is-fullscreen {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999999;
		
		video {
			width: 100%;
			height: 100%;
		}
	}

	.mp-poster {
		width: 100%;
		height: 100%;
		background-size: cover;
		background-position: 50%;
		position: absolute;
		top: 0;
		left: 0;
		cursor: pointer;
		
		&.mp-hide {
			display: none;
		}
	}
	
	/* 센터 플레이 아이콘 */
	.mp-media-el:after,
	.mp-poster:after {
		content: '';
		box-sizing: border-box;
		display: block;
		width: 120px;
		height: 120px;
		margin: -60px 0 0 -60px;
		background: rgba(255,255,255,0) url('img/ico-play-large.png') no-repeat 61% 50%;
		border-radius: 60px;
		box-shadow: 0 0 15px rgba(0,0,0,.3);
		border: 5px solid rgba(255,255,255,.3);
		opacity: 0;
		position: absolute;
		top: 50%;
		left: 50%;
		transition: all .2s;
		transform: scale(1);
	}

	&:not(.mp-is-playing) .mp-media-el:after,
	&:not(.mp-is-playing) .mp-poster:after {
		opacity: 1;
		transform: scale(.8);
	}

	.mp-controls {
		display: flex;
		width: 100%;
		font-size: 0;
		background: #030303;
		background: rgba(0,0,0,.8); 
		position: absolute;
		bottom: 0;
		left: 0;
		transition: all .4s .7s;

		> * {
			vertical-align: top;
		}
	}

	&.mp-is-playing .mp-controls {
		opacity: 0;
		bottom: -($btn-height + 1);
	}

	&.mp-is-playing.mp-is-active .mp-controls {
		opacity: 1;
		bottom: 0;
		transition: all .4s .15s;
	}

	&.mp-is-playing.mp-is-active-focus .mp-controls {
		opacity: 1;
		bottom: 0;
		transition: none;
	}

	.mp-btn-play-puase {
		width: $btn-width;
		height: $btn-height;
		color: transparent;
		background: url('img/ico-play.png') no-repeat 50% 50%;
		border: 0 none;
		overflow: hidden;
		cursor: pointer;

		&:hover,
		&:focus {
			background-image: url('img/ico-play-on.png');
		}

		&.mp-is-paused {
			background-image: url('img/ico-pause.png');

			&:hover,
			&:focus {
				background-image: url('img/ico-pause-on.png');
			}
		}
	}

	.mp-progress {
		flex: 1;
		width: 100%;
		height: 16px;
		position: relative;
		z-index: 1;

		&:after {
			content: '';
			box-sizing: content-box;
			display: block;
			width: 100%;
			height: 4px;
			background: rgba(74,74,74,.5);
			position: absolute;
			top: 6px;
			left: 0;
		}

		.mp-btn {
			display: block;
			width: 0;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
		
			&:before {
				content: '';
				box-sizing: content-box;
				display: block;
				width: 100%;
				height: 4px;
				background: #d51414;
				position: absolute;
				top: 6px;
				left: 0;
			}
		}

		.mp-buffered {
			box-sizing: content-box;
			display: block;
			width: 0;
			height: 4px;
			background: #4a4a4a;
			position: absolute;
			top: 6px;
			left: 0;
			z-index: 1;
		}
	}

	.mp-progress-wrap {
		display: flex;
		flex: 1;
		padding: 10px 0 0;
		white-space: nowrap;

		.mp-progress {
			width: 100%;
		}
	}

	.mp-time-wrap {
		padding-left: 15px;
		line-height: 16px;
		font-family: tahoma;
		font-size: 9px;
		color: rgba(255,255,255,.4);
		white-space: nowrap;
	}

	.mp-volume {
		width: 23px;
		height: 13px;
		position: relative;
		z-index: 1;

		&:after {
			content: '';
			box-sizing: content-box;
			display: block;
			width: 100%;
			height: 100%;
			background: #4a4a4a;
			background: repeating-linear-gradient(
							90deg,
							#4a4a4a 0px,
							#4a4a4a 3px,
							transparent 3px,
							transparent 5px
						);
			position: absolute;
			top: 0;
			left: 0;
		}

		.mp-btn {
			display: block;
			width: 0;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
		
			&:before {
				content: '';
				box-sizing: content-box;
				display: block;
				width: 100%;
				height: 100%;
				background: #d51414;
				background: repeating-linear-gradient(
								90deg,
								#d51414 0px,
								#d51414 3px,
								transparent 3px,
								transparent 5px
							);
				position: absolute;
				top: 0;
				left: 0;
			}
		}
	}

	.mp-volume-wrap {
		display: flex;
		padding: 12px 0 0 15px;
		white-space: nowrap;
	}

	// iOS일때 볼륨콘트롤 숨김
	&.mp-is-ios .mp-volume-wrap {
		display: none;
	}

	.mp-btn-mute {
		width: 14px;
		height: 11px;
		margin-top: 1px;
		margin-right: 3px;
		color: transparent;
		background: url('img/ico-volume.png') no-repeat;
		border: 0 none;
		overflow: hidden;
		cursor: pointer;

		&.mp-is-muted {
			background-image: url('img/ico-volume-off.png');
		}
	}

	.mp-btn-fullscreen {
		width: $btn-width;
		height: $btn-height;
		color: transparent;
		background: url('img/ico-fullscreen.png') no-repeat 50% 50%;
		border: 0 none;
		overflow: hidden;
		cursor: pointer;

		&:hover,
		&:focus {
			background-image: url('img/ico-fullscreen-on.png');
		}
	}

	// audio
	&.mp-is-audio {
		width: 100%;

		.mp-controls {
			opacity: 1;
			border-top: 0 none;
			position: relative;
			bottom: 0;
		}
	}

	// ie9
	&.mp-is-ie9 {
		.mp-controls {
			display: table;

			> * {
				display: table-cell;
				font-size: 0 !important;
			}
		}

		.mp-progress-wrap {
			font-size: 0;

			&:after {
				content: '';
				display: block;
				clear: both;
			}
		}

		.mp-progress {
			float: left;
			width: 70%;
		}

		.mp-time-wrap {
			float: left;
			transition: none !important;
		}

		&.mp-is-small .mp-time-wrap {
			display: none;
		}

		&.mp-is-seeking .mp-time-wrap {
			display: block;
		}

		.mp-volume-wrap {
			width: 23px !important;
			font-size: 0;
		}

		.mp-volume {
			display: inline-block;
			vertical-align: top;
		}

		.mp-btn-mute {
			display: inline-block;
			vertical-align: top;
		}
	}

	// small size
	&.mp-is-small {
		// ----------------------------------------------
		$btn-width: 33px;
		$btn-height: 35px;
		// ----------------------------------------------
	
		.mp-media-el:after,
		.mp-poster:after {
			transform: scale(.7);
		}

		&:not(.mp-is-playing) .mp-media-el:after,
		&:not(.mp-is-playing) .mp-poster:after {
			transform: scale(.5);
		}

		.mp-btn-play-puase {
			width: $btn-width;
			height: $btn-height;
		}

		.mp-time-wrap {
			display: none;
			width: auto;
			padding: 0;
			line-height: 1.2;
			text-align: center;
			font-size: 20px;
			color: #fff;
			text-shadow: 0 1px 0 rgba(0,0,0,.7);
			transform: translateX(-50%);
			position: absolute;
			bottom: $btn-height + 13;
			left: 50%;
		}

		&.mp-is-seeking .mp-time-wrap {
			display: block;
		}
		
		.mp-volume-wrap {
			padding: 12px 0 0 10px;
		}

		.mp-btn-mute {
			display: none;
		}

		.mp-btn-fullscreen {
			width: $btn-width;
			height: $btn-height;
		}
	}
}