@import 'theme.scss';

.album-page-container {
	$album-header-height: calc(40% - 2px);
	
	width: $center-viewport-width;
	max-height: $center-viewport-height;

	overflow: hidden;

	margin-top:2px;

	.album-header {
		$album-header-padding: 20px;

		height: $album-header-height;
		width: calc(100% - 2*$album-header-padding);
		margin: 2px;
		
		padding: $album-header-padding;

		background-image: linear-gradient($accent-color, $background-color);
		border-radius: 15px;

		.album-info {
			width: 100%;
			height: 100%;
		}
	}

	.album-songs {
		width: 100%;
		max-height: calc(100% - $album-header-height);
		overflow-x: hidden;
		overflow-y: scroll;
	}
}

.album-info {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;

	.album-image {
		max-width: 80%;
		max-height: 80%;
		box-shadow: 10px 10px 50px -10px $background-color;
	}

	.album-body {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;

		.album-title {
			color: $text-controls-color;
			font-size: 40px;
			font-weight: bold;
			margin:15px;
			text-align: center;
		}

		.album-artists {
			display: flex;
			flex-flow: row wrap;
			justify-content: space-around;
			align-content: space-around;
			margin:15px;

			color: $text-controls-color;
			font-size: 20px;
			
			.album-artist {
				margin: 5px;
				text-align: center;
				text-decoration: underline;
			}
		}
	}

	a {
		color: $text-controls-color;
	}
	a:visited {
		color: $text-controls-color;
	  }
	a:hover {
		color: $controls-hover-color;
	}

	a:active {
		color: $controls-click-color;
	}
	
}