@import '../../styles/mixins.styl';

$primaryColor = #e91e63;
$secondaryColor = #c2185b;
$lightColor = #f8bbd0;

fullscreen() {
  width: 100%;
  height: 100%;
  position: fixed;
  
  .muse-drawer {
  	height: calc(100% - 70px);
  }
}

.muse-player.muse-layout-landscape {
	width: 100%;
	height: 70px;
	position: relative;
	
	background: $primaryColor;
	box-shadow: 0.06rem 0.06rem 0.1rem rgba(0,0,0,.2), -0.06rem 0 0.06rem rgba(0,0,0,.1);
	
	transition(.5s all ease-in-out)!important;
	
	&.muse-root__state-drawer-open {
		height: 370px;
	}

	.muse-cover {
		width: 70px;
		height: 70px;
		
		position: static;
	}

	/* Progress */
	.muse-progress {
		background: $secondaryColor;
		position: absolute;
		top: -1px;
	}

	.muse-progress__played {
		background: $lightColor;
	}
	
	.muse-progress__handle {
		border: 2px solid $lightColor;
	}

	/* Controller */
	.muse-controller {
		width: calc(100% - 70px);
		height: 70px;
		
		position: absolute;
		top: 0px;
		left: 70px;
	
		background: $primaryColor;

	}

	.muse-selector {
		display: none;
	}
	

	/* Drawer & Lyric */
	.muse-drawer {
		width: 100%;
		height: 300px;
		
		position: absolute;
		top: 70px;
		
		padding: 0px;
		background: $primaryColor;
		border-top: 1px solid rgba(51, 51, 51, 0.05);
		
		&.muse-drawer__state-close {
			.muse-lyric__item {
				text-shadow: none;
			}
		}
		
		&.muse-drawer__state-close {
			height: 0px;
			background: $primaryColor;
		}
		
		.muse-drawer__panel-toggler {
			display: none;
		}
		
		.muse-drawer__lyric {
			width: 65%;
			height: 100%;
		}
		
		.muse-drawer__playList {
			width: 35%;
			height: 100%;
			position: static;
			float: left;
			
			border-left: 1px solid rgba(51, 51, 51, 0.05);
		}
	}
	
	.muse-lyric__translation, .muse-musicDetail__artist {
		color: #fff;
	}
	
	.muse-drawer .muse-drawer__playList .muse-playList__item.muse-playList__item-state-playing {
		border-left: 3px solid $lightColor;
	}
	
	.muse-lyric__text, .muse-lyric__translation {
		color: darken(#fff, 8%)!important;
	}
	
	.muse-lyric__state-active {
		color: #fff!important;
		font-size: 20px;
		font-weight: bold;
	}
	
	&[data-length='1'] {
		.muse-drawer__container {
			width: 100%!important;
		}		
		.muse-drawer__lyric {
			width: 100%!important;
		}
		.muse-drawer__playList {
			display: none;
		}
	}
	
	// conflict wth default layout
	.muse-drawer .muse-drawer__state-playlist-active {
		transform(translateX(0px));
	}	
	
	/* Responsive */
	&[responsive='650px'] {
		.muse-drawer {
			overflow-x: auto;
		}
		
		.muse-drawer__container {
			width: 200%;
		}
		
		.muse-drawer__playList, .muse-drawer__lyric {
			width: 50%;
		}
	}	
}

/* fullscreen related */
.muse-player.muse-layout-landscape:-webkit-full-screen {
  fullscreen();
}
.muse-player.muse-layout-landscape:-moz-full-screen {
  fullscreen();
}
.muse-player.muse-layout-landscape:full-screen {
  fullscreen();
}