.audiobar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	padding: 0;
	background: #f7f7f7;
}
.audiobar-layout {
	display: table;
	.audiobar-image {
		display: table-cell;
		vertical-align: top;
		position: relative;
		width: 60px;
		img {
			height: 60px;
			width: 60px;
		}
	}
	.audiobar-info-container {
		display: table-cell;
		vertical-align: top;
		position: relative;
		.audiobar-info {
			position: absolute;
			left: 0;
			right: 0;
			text-align: center;
			padding: 13px 15px;
			h3 {
				font-size: 1.2em;
				margin: 0;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			h4 {
				font-size: 1.1em;
				margin: 0;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				line-height: 1.1em;
			}
		}
	}
	.audiobar-controls-container {
		display: table-cell;
		vertical-align: middle;
		position: relative;
		width: 1%;
		.audiobar-controls {
			white-space: nowrap;
			button {
				border: 0;
				background: transparent;
				margin-right: 15px;
				outline: none;
				height: 44px;
				width: 44px;
				ion-spinner {
					width: 44px;
					height: 44px;
				}
			}
		}
	}
}
.elapsed-container {
	position: relative;
	height: 3px;
	width: 100%;
	padding: 0;
	margin: 0;
}
.percent-elapsed {
	position: absolute;
	line-height: 3px;
	height: 3px;
	background-color: black;
}
.percent-loaded {
	position: absolute;
	line-height: 3px;
	height: 3px;
	background-color: rgba(0,0,0,0.4);
}
.track-detail-panel {
	button {
		border: 0;
		background: transparent;
		outline: none;
	}
	.panel-controls {
		text-align: right;
	}
	.image-container {
		text-align: center;
		.pause-state {
			//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
			transform: scale(0.8);
			//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
			transition: 300ms cubic-bezier(0.855, 0.005, 0.175, 1);
		}
		.play-state {
			//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
			transform: scale(1);
			//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
			transition: 300ms cubic-bezier(0.855, 0.005, 0.175, 1);
		}
	}
	.track-time-layout {
		display: table;
		padding: 10px;
		.track-time-elapsed {
			display: table-cell;
			vertical-align: top;
			position: relative;
			width: 1%;
		}
		.track-time-spacer {
			display: table-cell;
			vertical-align: top;
			position: relative;
		}
		.track-time-remaining {
			display: table-cell;
			vertical-align: top;
			position: relative;
			width: 1%;
		}
	}
	.track-controls-layout {
		text-align: center;
		padding: 10px;
		.controls-pp {
			margin-left: 20px;
			margin-right: 20px;
			min-width: 60px;
		}
	}
	.track-progress-slider {
		text-align: center;
	}
	.track-detail-info {
		text-align: center;
		padding: 10px;
		h1 {
			margin: 0;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		h3 {
			margin: 0;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
}