/*------------------------------------------------------------------
[Audioplayer main styles]
-------------------------------------------------------------------*/
@audioplayer-height: 55px;
@audioplayer-bar-height: 4px;
@audioplayer-primary-color: transparent;
@audioplayer-time-width: 60px;
@audioplayer-playpause-width: @audioplayer-height;
@audioplayer-volume-section-width: @audioplayer-height;
@audio-volume-adjust-height: 100px;

.audioplayer-enable-icon(@font-size: 15px, @color: @title-color) {
	font-family: @font-icons-main;
	text-indent: 0px;
	color: @color;
	font-size: @font-size;
	font-style: normal !important;
	font-weight: normal !important;
	font-variant: normal !important;
	text-transform: none !important;
	speak: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

.audioplayer {
	.rel();
	z-index: 1;
	height: @audioplayer-height;
	color: @title-color;
	background: @audioplayer-primary-color;
	border: 2px solid @third-site-dark-color;
	//border: 1px solid @border-color;
	
	&:not(.audioplayer-playing) .audioplayer-playpause a {
		&:before {
			content: "\e8ce"; // icon-play-1
			.vertical-align();
			.audioplayer-enable-icon(17px, @title-color);
			//.audioplayer-enable-icon(17px, @main-site-dark-color);
			position: absolute;
			left: 2px;
			width: 100%;
			text-align: center;
			.transition(color .3s ease);
		}
		&:hover {
			&:before {
				color: @main-site-light-color;
			}
		}
	}
	&.audioplayer-playing .audioplayer-playpause a {
		&:before {
			content: "\e8b7"; // icon-pause-1
			.vertical-align();
			position: absolute;
			left: 0;
			width: 100%;
			text-align: center;
			.audioplayer-enable-icon(12px, @title-color);
			.transition(color .3s ease);
			//.audioplayer-enable-icon(12px, @main-site-dark-color);
		}
		&:hover {
			&:before {
				color: @main-site-light-color;
			}
		}
	}
	&:not(.audioplayer-mute) .audioplayer-volume .audioplayer-volume-button > a {
		&:before {
			content: "\e8e5"; // volume-medium-1
		}
	}

	&.audioplayer-mute .audioplayer-volume .audioplayer-volume-button > a {
		&:before {
			content: "\e8e8"; // volume-mute-1
		}
	}
	
	.mejs-container {
		.hide();
	}
	> div {
		.abs();
	}
	.audioplayer-playpause {
		z-index: 2;
		top: 0;
		left: 0;
		//top: -1px;
		//left: -1px;
		width: @audioplayer-playpause-width;
		height: 100%;
		//height: @audioplayer-height;
		cursor: pointer;
		text-align: left;
		text-indent: -9999px;
		background: transparent;
		border-right: 1px solid @border-color;
		//background: @main-site-light-color;
		a {
			display: block;                
			.abs();
			top: 0; bottom: 0;
			left: 0; right: 0;
		}
	}

	.audioplayer-time {
		font-size: @subtitles-font-size - 1;
		//font-family: @subtitles-font-family;
		//font-style: @subtitles-font-style;
		top: 0;
		width: @audioplayer-time-width;
		height: 100%;
		text-align: center; 
		line-height: @audioplayer-height;
		color: @title-color;
		z-index: 2;
		&.audioplayer-time-current {
			left: @audioplayer-playpause-width;
		}
		&.audioplayer-time-duration {
			right: @audioplayer-volume-section-width;
		}
	}

	.audioplayer-bar {
		top: 50%;
		left: @audioplayer-playpause-width + @audioplayer-time-width;
		right: @audioplayer-volume-section-width + @audioplayer-time-width;   
		height: @audioplayer-bar-height;
		margin-top: -(@audioplayer-bar-height / 2);
		cursor: pointer;
		background-color: transparent;
		&:before {
			content: "";
			.block();
			height: 100%;
			.abs();
			left: 1px;
			right: 1px;
			border: 1px solid @border-color;
		}
		z-index: 1;
		.audioplayer-bar-loaded {
			.abs();
			top: 0;
			left: 0;
			height: 100%;
			background: fade(@main-site-dark-color, 50%);
			z-index: -1;
		}

		.audioplayer-bar-played {
			.rel();
			z-index: 2;
			top: 0;
			height: @audioplayer-bar-height;
			width: 0%;
			background: @title-color;
		}
	}

	.audioplayer-volume {
		z-index: 2;
		top: 0;
		right: 0;
		width: @audioplayer-volume-section-width;
		height: 100%;
		text-indent: -9999px;
		cursor: pointer;
		border-left: 1px solid @border-color;
		.audioplayer-volume-button {
			.abs();
			width: 100%;
			height: 100%;
			> a {
				.abs();
				z-index: 1;
				top: 0; bottom: 0;
				left: 0; right: 0;
				display: block;

				&:before {
					content: '';
					.vertical-align();
					.abs();
					.audioplayer-enable-icon();
					left: 0; right: 0;
					text-align: center;
					.transition(color .3s ease);
				}
				&:hover {
					&:before {
						color: @main-site-light-color;
					}
				}
			}
		}
		.audioplayer-volume-adjust {
			z-index: 1;
			.abs();
			top: 0;
			right: 100%;
			width: 0;
			height: @audioplayer-volume-section-width - 4;
			background: @main-site-dark-color;
			cursor: default;
			border-left: 1px solid @border-color;
			overflow: hidden;
			.transition(~"width .3s ease, opacity .0s ease, visibility .0s ease");

			 > div {
				.rel();
				z-index: 1;
				margin-top: 24px;
				margin-left: 20px;
				cursor: pointer;
				width: @audio-volume-adjust-height - 30;
				height: @audioplayer-bar-height;
				background: transparent;
				&:before {
					content: "";
					.block();
					height: 100%;
					.abs();
					left: 1px;
					right: 1px;
					border: 1px solid @border-color;
				}
				> div {
					.abs();
					bottom: 0;
					left: 0;
					top: 0;
					width: @audio-volume-adjust-height - 20;
					height: @audioplayer-bar-height;
					background-color:@third-site-dark-color;
					overflow: hidden;
				}
			}
		}
		&:hover {
			.audioplayer-volume-adjust {
				width: @audio-volume-adjust-height;
				.opacity(1);
				visibility: visible;
			}
		}
	}
}


.audioplayer-novolume .audioplayer-time-duration {
	right: 0;
}

.audioplayer-novolume .audioplayer-bar {
	right: 4.375em;  
	
	div {
		.abs();
		left: 0;
		top: 0;
		width: 0;
		height: 100%;
	}
}


.audioplayer-novolume .audioplayer-volume {
	display: none;
}