$iphone-color: white;
$primary-color: $alizarin;

body {
	color: white;
	display: flex;
	align-items: center;
  justify-content: center;
	height: 100vh;
	width: 100vw;
	background: lighten($alizarin, 15%);
	font-family: $font;
	@include transition(background 0.25s ease);
}

.svg {
	path {
		fill: white;
	}
}

h3 {
	cursor: default;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 1px;
	margin: 0 0 15px;
	text-transform: uppercase;
}

p {
	cursor: default;
	
	&.info-text {
		color: darken(white, 30%);
		font-size: 10px;
	}
}

.fa.add {
	position: relative;
	
	&::after {
		background: #444444;
		border-radius: 100px;
		content: '\f055';
		font-size: 10px;
		left: 2px;
		position: absolute;
		top: -1px;
		width: 10px;
		height: 11px;
	}
}

div#iphone {
	background: $iphone-color;
	border: 4px solid darken($iphone-color, 7.5%);
	border-radius: 30px;
	max-width: 257px;
	padding: 10px;
	@include box-shadow(0px 10px 25px rgba(51, 51, 51, 0.3));
	
	div#camera {
		cursor: default;
		margin: 5px auto 20px;
		width: 100%;
		text-align: center;
		@include user-select(none);
		
		span {
			background: darken($iphone-color, 7.5%);
			display: inline-block;
			
			&:nth-child(1) {
				$camera-size: 7px;
				border-radius: $camera-size;
				height: $camera-size;
				margin-right: 7px;
				position: relative;
				top: 1px;
				width: $camera-size;
			}
			&:nth-child(2) {
				border-radius: 5px;
				height: 5px;
				width: 35px;
			}
		}
	}
	
	div#screen {
		background: darken($iphone-color, 60%);
		border: 2px solid darken($iphone-color, 5%);
		border-radius: 4px;
		height: 400px;
		overflow: hidden;
		position: relative;
		width: 225px;
		z-index: 1;
		
		&::after {
			background: darken($iphone-color, 50%);
			content: '';
			display: block;
			height: 130%;
			left: 60%;
			opacity: 0.15;
			position: absolute;
			pointer-events: none;
			top: -25%;
			width: 100%;
			@include transform(rotate(-20deg));
		}
	}
	
	div#home-btn {
		$button-size: 35px;
		border: 3px solid darken($iphone-color, 7.5%);
		border-radius: $button-size;
		cursor: pointer;
		height: $button-size;
		margin: 10px auto 5px;
		width: $button-size;
	}
}

div#content-wrap {
	background: #333;
	height: 100%;
	overflow: hidden;
	position: relative;
	z-index: 5;
	@include transition(transform 0.25s ease);
	
	&.minimized {
		@include transform(scale(0));
	}
	
	&.inactive {
		@include transform(scale(0.85) translate(0, 60%));
		
		div#overlay {
			display: block;
		}
	}
}

div#overlay {
	cursor: pointer;
	display: none;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 3;
}

div#content {
	padding: 15px;
	position: relative;
	z-index: 2;
}

div#background {
	background-size: cover;
	background-position: center;
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;
	@include filter(blur, 10px);
	@include transition(background-image 0.25s ease);
	
	&::before {
		background: #333;
		content: '';
		display: block;
		height: 100%;
		opacity: 0.5;
		position: absolute;
		width: 100%;
	}
	
	&::after {
		content: '';
		display: block;
		height: 100%;
		position: absolute;
		width: 100%;
		@include linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(50, 50, 50, 1) 100%);
	}
}

div#header {
	color: white;
	@extend .clearfix;
	
	span {
		cursor: pointer;
		font-size: 20px;
		
		.svg {
			height: 16px;
			width: 16px;
		}
		
		&#menu-btn {
			float: left;
		}
		&#options-btn {
			float: right;
		}
	}
}

div.jcarousel {
	left: -15px;
	width: calc(100% + 30px);
	position: relative;
	overflow: hidden;
	
	ul#songs {
		width: 20000em;
		position: relative;
		
		li.song {
			float: left;
			margin: 10px 15px;
			text-align: center;
			width: calc(225px - 30px);

			img {
				width: 92.5%;
				@include box-shadow(0px 5px 25px rgba(50, 50, 50, 0.5));
			}

			p {
				color: white;
				text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);

				&.song-title {
					font-size: 16px;
					font-weight: 600;
					margin: 10px 0 5px;
				}
				&.song-artist {
					color: darken(white, 30%);
					font-size: 12px;
					margin: 0;
				}
			}
		}
	}
}

div#controls {
	color: white;
	display: table;
	margin: 10px auto 25px;
	text-align: center;
	width: 75%;
	
	span {
		display: table-cell;
		font-size: 20px;
		vertical-align: middle;
		
		&#play-btn {
			font-size: 34px;
		}
		
		i {
			cursor: pointer;
		}
	}
}

div#sub-controls {
	color: darken(white, 40%);
	cursor: default;
	font-size: 14px;
	margin: 15px 0 0;
	text-align: center;
	@include user-select(none);
	
	.svg {
		height: 14px;
		position: relative;
		top: 2px;
		width: 14px;
		
		path {
			fill: darken(white, 40%);
		}
	}
	
	i, .svg {
		cursor: pointer;
		margin: 0 15px;
		
		&.active {
			color: $primary-color;
		}
	}
}

div#timeline {
	position: relative;
	margin: 0 auto;
	width: 92.5%;
	
	span {
		color: darken(white, 30%);
		font-size: 7px;
		position: absolute;
		top: -10px;
		
		&#current-time {
			left: 0;
		}
		&#total-time {
			right: 0;
		}
	}
	
	div.slider {
		background-color: darken(white, 50%);
		border-radius: 2px;
		cursor: pointer;
		height: 2px;
		position: relative;
		width: 100%;
		
		div.progress {
			background-color: $primary-color;
			height: 100%;
			pointer-events: none;
			position: absolute;
			width: 0;
			
			div.pin {
				background-color: white;
				border-radius: 8px;
				height: 8px;
				position: absolute;
				pointer-events: all;
				right: -5px;
				top: -3px;
				width: 8px;
				@include box-shadow(0px 1px 1px 0px rgba(0,0,0,0.32));
				@include transition(transform 0.25s ease);
				
				&:active {
					@include transform(scale(1.5));
				}
			}
		}
	}
}

div#sidemenu {
	background: #444;
	box-sizing: border-box;
	height: 100%;
	left: 0;
  padding: 20px 10px;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;
	
	&.active {
		ul {
			@include transform(scale(1));
		}
	}
	
	ul {
		color: white;
		font-size: 18px;
		@include transition(transform 0.25s ease);
		@include transform(scale(0.8));
		
		li {
			cursor: pointer;
			font-weight: 300;
			padding: 8px 5px;
			
			&:nth-child(1) {
				margin-top: -8px;
			}
			
			&:hover {
				background: lighten(#444, 5%);
				border-radius: 5px;
				
				.svg, i {
					opacity: 1;
				}
			}
		
			.svg {
				display: inline-block;
				height: 16px;
				padding: 0 0.2em;
				position: relative;
				top: 2px;
				width: 16px;
			}
			
			.svg, i {
				margin-right: 5px;
				opacity: 0.75;
				@include transition(opacity 0.25s ease);
			}
		}
	}
}

div#song-options {
	div#song-info {
		margin: 0 0 20px;
		position: relative;
		@extend .clearfix;
		
		img {
			float: left;
			width: 50px;
			@include box-shadow(0 2px 5px rgba(50, 50, 50, 0.2));
		}
		
		div.artist-wrap {
			box-sizing: border-box;
			float: right;
			padding: 0 0 0 8px;
			width: calc(100% - 50px);
			
			p {
				bottom: 4px;
				font-size: 16px;
				position: absolute;
				
				span {
					display: block;
					
					&.artist {
						font-size: 12px;
						font-weight: 300;
						margin: 4px 0 0;
					}
				}
			}
		}
	}
	
	ul {
		font-size: 16px;
	}
}

div#bluetooth-devices {
	ul {
		margin: 5px 0 15px;
		
		li {
			&.connected {
				border: 1px solid rgba(255, 255, 255, 0.2);
				font-size: 14px;
				
				span {
					display: block;
				}
				
				i {
					color: $primary-color;
				}
				
				.svg path {
					fill: $primary-color !important;
				}
				
				.svg, i {
					opacity: 1;
					position: relative;
					top: -5px;
				}
			}
			
			p {
				display: inline-block;
				
				span {
					display: none;
					font-size: 10px;
					margin: 2px 0 0;
					opacity: 0.75;
				}
			}
		}
	}
}

div.menu {
	background: #444;
	box-sizing: border-box;
	display: block;
	height: 100%;
	padding: 0 20px;
	position: absolute;
	top: 100%;
	width: 100%;
	z-index: 10;
	@include transition(top 0.25s ease);
	
	&.active {
		top: 0;
	}
	
	span.close-btn {
		color: darken(white, 30%);
		cursor: pointer;
		display: block;
		font-size: 14px;
		margin: 5px auto 15px;
		padding: 0 8px 4px;
		text-align: center;
		width: 50px;
		@include transition(color 0.25s ease);
		
		&:hover {
			color: darken(white, 10%);
		}
		
		span {
			font-size: 1.6em;
			position: relative;
			top: 3px;
		}
	}
	
	li {
		border-radius: 5px;
		cursor: pointer;
		font-weight: 300;
		margin-bottom: 4px;
		padding: 8px 5px;

		&:nth-child(1) {
			margin-top: -8px;
		}

		&:hover {
			background: lighten(#444, 5%);

			.svg, i {
				opacity: 1;
			}
		}
		
		.svg {
				display: inline-block;
				height: 14px;
				padding: 0 0.2em;
				position: relative;
				top: 2px;
				width: 14px;
			}

		.svg, i {
			margin-right: 5px;
			opacity: 0.75;
			@include transition(opacity 0.25s ease);
		}
		
		i {
			position: relative;
			top: 1px;
		}
	}
}

div#home-screen {
	@include linear-gradient(to bottom, lighten($wet-asphalt, 15%), lighten($wet-asphalt, 5%));
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	visibility: hidden;
	z-index: 2;
	@extend .flex-center;
	
	&.active {
		visibility: visible;
	}
	
	div.home-content {
		margin: 15px;
		padding-bottom: 80px;
		text-align: center;
		
		h2 {
			font-size: 22px;
			font-weight: 600;
		}
		
		p {
			font-size: 13px;
			line-height: 1.5;
			margin: 5px 0;
			
			&#made-by {
				
				a {
					color: white;
				}
			}
			
			&#icons-by {
				color: lighten($wet-asphalt, 30%);
				bottom: 15px;
				font-size: 11px;
				left: 0;
				position: absolute;
				text-align: center;
				width: 100%;
			}
			
			a {
				color: lighten($wet-asphalt, 40%);
				border-bottom: 1px solid lighten($wet-asphalt, 30%);
				text-decoration: none;
				padding: 0 1px;
				@include transition(border-color 0.25s ease, color 0.25s ease);
				
				&:hover {
					color: lighten($wet-asphalt, 50%);
					border-color: lighten($wet-asphalt, 50%);
				}
			}
		}
		
		div.app-icon {
			cursor: pointer;
			border-radius: 10px;
			height: 40px;
			margin: 30px auto 0;
			position: relative;
			width: 40px;
			@extend .flex-center;
			@include linear-gradient(to bottom, $primary-color, darken($primary-color, 10%));
			
			&:hover {
				@include linear-gradient(to bottom, darken($primary-color, 5%), darken($primary-color, 15%));
			}
			
			&::after {
				content: 'Music Player';
				font-size: 10px;
				position: absolute;
				top: 45px;
				white-space: nowrap;
			}
			
			.svg {
				height: 60%;
				width: 60%;
			}
		}
	}
}