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

.mplayer-basic {
	// ----------------------------------------------
	$btn-width: 50px;
	$btn-height: 45px;
	$border-color: #030303;
	$highlight-color: rgba(255,255,255,.1);
	// ----------------------------------------------

	box-sizing: border-box;
	display: inline-block;
	text-align: left;
	line-height: 1;
	background: #000;
	border: 1px solid $border-color;
	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;
			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: 80px;
		height: 80px;
		margin: -40px 0 0 -40px;
		background: rgba(0,0,0,.4) url('img/ico-play-large.png') no-repeat 62% 50%;
		border-radius: 40px;
		box-shadow: 0 0 20px rgba(255,255,255,.3);
		border: 1px solid rgba(0,0,0,.3);
		opacity: 0;
		position: absolute;
		top: 50%;
		left: 50%;
		transition: all .2s;
		transform: scale(1.3);
	}

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

	.mp-controls {
		display: flex;
		width: 100%;
		font-size: 0;
		background: #030303;
		background: linear-gradient(to bottom, #212121 0%,#030303 100%); 
		border-top: 1px solid $border-color;
		position: absolute;
		bottom: 0;
		left: 0;
		transition: all .4s .7s;

		> * {
			vertical-align: top;
			box-shadow: inset -1px 1px 0 $highlight-color;
		}

		> *:not(:last-child) {
			border-right: 1px solid $border-color;
		}
	}

	&.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;

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

	.mp-slider {
		flex: 1;
		width: 100%;
		height: 11px;
		margin: 0 8px;
		position: relative;
		z-index: 1;

		&:after {
			content: '';
			box-sizing: content-box;
			display: block;
			width: 100%;
			height: 100%;
			padding: 0 8px;
			background: #222;
			border: 1px solid $border-color;
			border-radius: 5px;
			box-shadow: 0 1px 0 #242424;
			position: absolute;
			top: 0;
			left: -8px;
		}

		.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%;
				padding: 0 8px;
				background: #626f7d;
				background: linear-gradient(to bottom, #626f7d 0%,#4a5662 50%,#38414e 51%,#303a46 100%);
				border-radius: 5px;
				position: absolute;
				top: 1px;
				left: -8px;
			}

			&:after {
				content: '';
				box-sizing: content-box;
				display: block;
				width: 22px;
				height: 22px;
				margin-right: -11px;
				background: url('img/ico-slider.png') no-repeat;
				position: absolute;
				top: -3px;
				right: 0;
			}
		}

		.mp-buffered {
			box-sizing: content-box;
			display: block;
			width: 0;
			height: 100%;
			margin-left: -7px;
			padding: 0 8px;
			background: #fff;
			border-radius: 5px;
			opacity: .2;
			position: absolute;
			top: 1px;
			left: 0;
			z-index: 1;
		}
	}

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

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

	.mp-time-wrap {
		padding-left: 15px;
		line-height: 11px;
		font-family: tahoma;
		font-size: 9px;
		color: #8f8f8f;
		text-shadow: 0 1px 0 $border-color;
		white-space: nowrap;
	}

	.mp-volume-wrap {
		display: flex;
		width: 100px;
		padding: 17px 15px 0;
		white-space: nowrap;

		.mp-volume {
			width: 50px;
		}
	}

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

	.mp-btn-mute {
		width: 14px;
		height: 12px;
		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;

		&.mp-is-fullscreen {
			background-image: url('img/ico-fullscreen-cancel.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: 20px !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: 33px;
		// ----------------------------------------------
	
		.mp-media-el:after,
		.mp-poster:after {
			transform: scale(.8);
		}

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

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

		.mp-progress-wrap {
			padding: 11px 10px 0;
		}

		.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 {
			width: 70px;
			padding: 11px 10px 0;
		}

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

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