@import "reset";

// Fonts
@fonts-path: '../../fonts';

@import "fonts/Oswald";
@import "fonts/Roboto";
@import "fonts/entypo";

@import "colors";
@import "mixins";


html, body {
	height: 100%;
	overflow: hidden;
}

body {
	color: #fff;
	background-color: #292929;
	font-family: 'Oswald', Roboto, Arial, sans-serif;
	letter-spacing: 0.2px;
	font-weight: 300;
	-webkit-user-select: none;
	font-size: 24px;
}

p {
	font-weight: 300;
	line-height: 1.4;
}

input {
	 -webkit-appearance: none;
	 border-radius: 0;
}

.button {
	text-align: center;
	box-sizing: border-box;
	border: 2px solid transparent;
	color: #fff;
	opacity: 0.5;

	&:active {
		border-color: #fff;
		opacity: 1;
		background-color: rgba(255, 255, 255, 0.15);
	}

	&.text-button {
		display: block;
		border-color: #fff;
		line-height: 60px;
		font-weight: 300;
		background-color: rgba(255, 255, 255, 0.1);
	}
}

.popup {
	display: none;
	background-color: rgba(0, 0, 0, 0.9);
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: 100;

	align-items: center;
	justify-content: center;

	.wrap {
		padding: 0 20px;
		width: 100%;
		max-width: 640px;
	}
	h2 {
		font-size: 32px;
		line-height: 1.3;
		font-weight: 300;
		margin-bottom: 15px;
	}
	.button {
		margin: 15px 0;
	}

	&.show {
		// display: block;
		display: flex;
	}

	& > .close {
		position: absolute;
		right: 10px;
		top: 10px;
		width: 50px;
		height: 50px;
		line-height: 50px;
		margin: 0;
	}
}

.tracks-list {
	li {
		margin: 10px 0;
		padding: 15px;
		border: 2px solid transparent;
		color: rgba(255, 255, 255, 0.5);
		background-color: rgba(255, 255, 255, 0.1);
		font-weight: 300;

		i {
			float: right;
			font-size: 20px;
			transition: all 0.3s;
			transform: translateX(200%) translateZ(0);
			opacity: 0;
			color: #fff;
		}

		&.selected {
			i {
				transform: translateX(0) translateZ(0);
				opacity: 1;
			}
		}

		&:active {
			color: #fff;
			border-color: #fff;
			background-color: rgba(255, 255, 255, 0.15);
		}

		&:first-child {
			margin-top: 0;
		}
		&:last-child {
			margin-bottom: 0;
		}
	}
}

.search {
	input[type="text"] {
		font-family: 'Oswald', Roboto, Arial, sans-serif;
		font-weight: 300;
		background: transparent;
		border: 2px solid #fff;
		padding: 12px 12px 12px 44px;
		box-sizing: border-box;
		width: 100%;
		color: #fff;
		background: url(/app/assets/img/search.png);
		background-position: 12px center;
		background-repeat: no-repeat;
		background-size: 24px;
		font-size: 18px;
		letter-spacing: 0.2px;
		outline: none;

		&::-webkit-input-placeholder {
		    color: rgba(255, 255, 255, 0.5);
		}
	}
}

.remote {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	&.blur {
		// filter: blur(20px);
	}
}

.remote-head {
	box-sizing: border-box;
	height: 80px;
	padding: 10px;
	background-color: @top-menu-color;

	.right {
		float: right;
	}

	.button {
		height: 50px;
		width: 50px;
		line-height: 50px;
		margin: 5px;
		font-size: 24px;
	}

	.toggle-fullscreen {
		.icon-resize-small {
			display: none;
		}
		&.full {
			.icon-resize-full {
				display: none;
			}
			.icon-resize-small {
				display: block;
			}
		}
	}

	.toggle-search .icon {
		height: 28px;
		width: 28px;
		display: block;
		background: url(/app/assets/img/search.png);
		background-size: 100%;
		background-position: 0 0;
		background-repeat: no-repeat;
		margin: 9px;
	}

	.default-title {
		img {
			height: 60px;
			width: 60px;
			float: left;
			margin-right: 10px;
		}
		span {
			display: block;
			line-height: 60px;
			overflow: hidden;
			font-size: 24px;
			.line-ellipsis();
		}
	}

	.playing-item {
		display: none;
		img {
			height: 60px;
			width: 40px;
			float: left;
			margin-right: 10px;
		}

		.info {
			overflow: hidden;
			line-height: 1.4;
			padding: 3px 0;

			span {
				display: block;
				.line-ellipsis();
			}
			.title {
				font-size: 24px;
			}
			.more {
				font-size: 16px;
				color: rgba(255, 255, 255, 0.5);
			}
		}
	}
}

.show-player {
	.nav-controls {
		display: none;
	}
	.player-controls {
		display: block;
	}
}

.show-playing-item {
	.remote-head {
		.default-title {
			display: none;
		}
		.playing-item {
			display: block;
		}
	}
}

.remote-body {
	position: absolute;
	width: 100%;
	top: 80px;
	bottom: 0;
}

.main-controls {
	& > span, .frame > span {
		display: block;
		position: absolute;
		text-align: center;
		vertical-align: middle;

		i {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 80px;
			height: 80px;
			margin: -40px 0 0 -40px;
			font-size: 30px;
			line-height: 80px;
		}

		&.center {
			left: 50%;
			margin-top: -40px;
		}
		&.middle {
			top: 50%;
			margin-top: -40px;
		}
		&.top {
			top: 0;
			width: 100%;
			height: 25%;
			z-index: 3;
		}
		&.left {
			left: 0;
			width: 35%;
			height: 100%;
			z-index: 2;
		}
		&.right {
			right: 0;
			width: 35%;
			height: 100%;
			z-index: 2;
		}
		&.bottom {
			bottom: 0;
			width: 100%;
			height: 25%;
			z-index: 3;
		}
	}
}

.nav-controls {
	& > span {
		&[data-key="enter"] {
			display: block;
			height: 38px;
			width: 38px;
			margin: -59px 0 0 -59px;
			padding: 40px;
			z-index: 4;

			span {
				display: block;
				height: 38px;
				width: 38px;
				border-radius: 50%;
				border: 3px solid #fff;
				background-color: transparent;
				opacity: 0.5;
				box-sizing: border-box;
			}

			&:active span {
				opacity: 1;
			}
		}
	}
}

.player-controls {
	display: none;

	.frame {
		position: absolute;
		top: 60px;
		width: 100%;
		bottom: 0;
	}

	& > span, .frame > span {
		i {
			font-size: 40px;
		}

		&.close-player {
			width: 100%;
			height: auto;
			background-color: rgba(44, 142, 217, 0.4);
			border: 0;
			opacity: 1;

			&:active {
				background-color: rgba(44, 142, 217, 0.5);
			}
		}

		&.play-pause {
			top: 0;
			height: 60%;

			i {
				font-size: 100px;
				margin: -70px 0 0 -70px;
				width: 140px;
				height: 140px;
			}

			.icon-pause {
				display: none;
			}

			&.playing {
				.icon-play {
					display: none;
				}
				.icon-pause {
					display: block;
				}
			}
		}

		&.line-icons {
			left: 0;
			right: 0;
			height: 20%;
			& > span {
				display: block;
				position: relative;
				text-align: center;
				vertical-align: middle;
				i {
					font-size: 20px;
				}
			}
		}

		&.volume-track {
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.2);
			.bar {
				height: 100%;
				position: relative;
				margin: 0 29%;

				.track {
					position: relative;
					display: block;
					height: 6px;
					background-color: rgba(0, 0, 0, 0.5);
					top: 50%;
					margin: -3px 0 0;
					span {
						display: block;
						height: 100%;
						width: 50%;
						background-color: rgba(255, 255, 255, 0.8);
					}
				}

				.handle {
					position: absolute;
					z-index: 2;
					height: 32px;
					width: 32px;
					margin: -14px 0 0 -16px;
					top: 50%;
					border-radius: 50%;
					background-color: #fff;
					box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
				}
			}
			.mute {
				float: left;
				position: relative;
				width: 23%;
				height: 100%;
				i {
					font-size: 20px;
				}
				.icon-mute {
					display: none;
				}
				&.muted {
					.icon-sound {
						display: none;
					}
					.icon-mute {
						display: block;
					}
				}
			}

			.tracks {
				float: right;
				width: 23%;
				height: 100%;
				i {
					font-size: 28px;
					line-height: 3;
				}
			}
		}
		
		&.playing-track {
			bottom: 20%;
			background-color: rgba(0, 0, 0, 0.1);

			& > span {
				position: absolute;
				i {
					font-size: 22px;
				}
			}

			.time {
				left: 0;
				width: 50%;
				height: 100%;
				overflow: hidden;
				display: table;
				padding-left: 10px;
				span {
					position: relative;
					display: table-cell;
					vertical-align: middle;
					width: 50%;

					&.current-time {
						// padding-right: 10px;
					}
					&.total-time {
						color: #777;
					}
				}
			}
			.backward {
				right: 23%;
				width: 23%;
				height: 100%;
			}
			.forward {
				right: 0;
				width: 23%;
				height: 100%;
			}	
		}
	}
}

// Hide some buttons in landscape mode for small screens
@media screen and (max-width: 767px) and (orientation:landscape) {
	.player-controls {
		.volume-track {
			display: none !important;
		}
		.play-pause {
			height: 70% !important;
			i {
				font-size: 80px !important;
				margin-top: -55px !important;
			}
		}
		.playing-track {
			height: 30% !important;
			bottom: 0 !important;
		}
	}
}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}