@import "colors";
@import "breakpoints";
@import "specific/form";

main#homepage {
	width: calc(100% - 24px);
	margin-left: 12px;
	margin-right: 12px;
	overflow: hidden;

	.stations {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: -12px -12px 12px -12px;

		.station-card {
			width: 296px;
			background-color: $musare_color_white;
			position: relative;
			margin: 12px;

			.station-media {
				width: 296px;
				height: 296px;
				display: block;

				> * {
					width: 296px;
					height: 296px;
					display: block;
				}
			}

			.station-media-icon {
				background-color: $musare_color_primary_blue;
				color: #EFEFEF; //TODO Change this color and figure out proper sizes

				.create-station-header {
					height: 50px;
					width: 100%;
					background-color: hsla(0,0,100%,.25); //TODO Change this color and figure out proper sizes

					h3 {
						font-size: 22px;
						line-height: 50px;
						color: $musare_color_white;
						text-align: center;
					}
				}

				> i {
					margin-top: -25px;
					font-size: 296px;
					cursor: pointer;
					user-select: none;
				}
			}

			.station-body {
				padding: 20px;
				display: block;
				color: $musare_color_primary_gray;

				h3 {
					font-size: 23px;
					line-height: 31px;
					margin-bottom: 6px;
				}

				p {
					font-size: 15px;
					line-height: 20px;
					font-weight: 300;
					height: 60px;
					display: block;
				}

				label:first-child {
					margin-bottom: 6px;

					input {
						border: 0;
						padding: 0;
						font-size: 23px;
						line-height: 31px;
						height: 31px;

						color: $musare_color_primary_gray;

						@include forPlaceholder() {
							opacity: .75;
						}
					}
				}

				label:last-child {
					margin-bottom: 0;

					textarea {
						border: 0;
						padding: 0;
						font-size: 15px;
						line-height: 20px;
						height: 60px;
						font-weight: 300;

						color: $musare_color_primary_gray;

						@include forPlaceholder() {
							opacity: .75;
						}
					}
				}
			}

			.station-footer {
				padding: 0 20px 20px 20px;
				display: flex;
				align-items: flex-end;
				justify-content: space-between;

				.user-count {
					height: 27px;
					display: flex;
					align-items: flex-end;

					i {
						margin-right: 6px;
					}

					span {
						font-size: 20px;
						line-height: 27px;
					}
				}

				.nameContainer {
					display: flex;
					padding-top: 6px;

					span {
						font-size: 16px;
						line-height: 21px;
						height: 21px;
					}

					label {
						margin-bottom: 0;

						input {
							border: 0;
							padding: 0;
							font-size: 16px;
							line-height: 21px;
							font-weight: 300;

							color: $musare_color_primary_gray;

							@include forPlaceholder() {
								opacity: .75;
							}
						}
					}
				}

				i {
					margin-left: 10px;
					cursor: pointer;
					user-select: none;

					&.active {
						color: $musare_color_primary_blue;
					}
				}
			}

			> a {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;

				border: 1px solid hsla(204, 3, 60, .5); //TODO Change this later and/or add to colors
				box-shadow: 0 2px 3px hsla(0,0,0,.1); //TODO Change this later and/or add to colors
				transition: .2s ease;

				&:hover, &:focus {
					border-color: $musare_color_primary_blue;
					box-shadow: 0 2px 3px hsla(0,0,0,.3); //TODO Change this later and/or add to colors
					outline: 0;
				}
			}
		}
	}

	h2 {
		font-size: 20px;
		line-height: 27px;
		margin-bottom: 12px;
		text-align: center;
	}
}