.player {

	.current-track {
		font-size: 16px;
		text-transform: uppercase;
		text-align: center;
		padding-bottom: 15px;

		.title {
			@include one_line_text;
		}

		.artist-sentence {
			opacity: 0.5;
			display: block;
			@include one_line_text;

			.artist {
				color: inherit;
				text-decoration: none;
				border-bottom: 1px dotted transparent;
			}
		}
	}

	.controls {
		text-align: center;

		a {
			cursor: pointer;
			font-size: 14px;
			padding: 8px;
			display: inline-block;
			opacity: 0.8;

			&.active {
				color: $turquoise;
			}

			&:hover {
				opacity: 1.0;
			}
		}
	}

	.slider.horizontal {
		margin-bottom: 0;

		.progress{
			@include animate(1s);
		}
	}

	&.mini-player {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 220px;
		box-sizing: border-box;
		z-index: 97;
		padding: 14px;
		color: #FFFFFF;

		.artist-sentence {
			.artist:hover {
				border-color: #FFFFFF !important;
			}
		}

		@include responsive( $bp_medium, null, $bp_shallow ){
			right: 0;
			width: auto;
			background: $dark_grey;

			.controls {
				position: absolute;
				top: 10px;
				left: 10px;

				a {
					padding: 13px;
				}

				.volume-control {
					display: none;
				}
			}

			.slider.progress {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				margin: 0;
				height: 2px;

				.track {
					top: 0px;
					background: transparent;
				}
			}

			.current-track {
				font-size: 12px;
				padding-bottom: 0;
			}
		}
	}
}

.volume-control {
	position: relative;

	a {
		position: relative;
		z-index: 99;
	}

	&:hover {
		.slider-wrapper {
			display: block;
		}
	}

	.slider-wrapper {
		display: none;
		position: absolute;
		bottom: -6px;
		left: -4px;
		height: 80px;
		padding: 10px 5px 35px 5px;
		background: rgba(0,0,0,0.8);
		z-index: 98;
	}
}