@import "/UI/Style.scss";

LobbyCreator {
	position: relative;

	width: 100%;
	height: auto;

	flex-direction: column;

	> .title {
		background-color: $gray-brighter;
		color: $white-dark;
		text-transform: uppercase;
		justify-content: center;
		font-size: 34px;
		padding: 5px 0px;
	}

	> .gamemode {
		width: 100%;
		height: 270px;
		position: relative;

		> .bg {
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			width: 100%;
			height: 100%;
		}

		> .gradient {
			position: absolute;
			background: linear-gradient(to right, #000000e8 0%, #000000c0 40%, #00000000 100%);
			width: 100%;
			height: 100%;
		}

		> .content {
			position: absolute;
			width: 80%;
			height: 100%;
			justify-content: center;
			padding: 0px 60px;
			flex-direction: column;

			> .name {
				font-size: 48px;
				color: $white;
				text-transform: uppercase;
			}

			> .recommendation {
				white-space: pre;
				font-size: 18px;
				padding-bottom: 15px;
				text-transform: uppercase;

				> .players {
					color: $white;
				}

				> .count {
					color: $white-dark;
				}
			}

			> .desc {
				color: $white-dark;
				font-size: 26px;
				height: 60px;
			}

			> .buttons {
				gap: 10px;
			}
		}
	}

	> .map-list {
		overflow-y: hidden;
		overflow-x: scroll;

		gap: 10px;
		width: 100%;
		height: auto;

		padding: 10px;

		> .map {
			position: relative;

			width: 350px;
			height: 200px;
			flex-shrink: 0;

			padding: 10px;

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

			background-color: $gray;
			border: 8px;
			border-color: $gray;

			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;

			.name {
				position: absolute;
				padding: 5px 10px;
				background-color: $white;
				color: $gray;
				font-size: 28px;
				right: 10px;
				bottom: 10px;
			}

			img {
				position: absolute;
				height: 100%;
				width: 100%;

				background-position: center;
				background-size: cover;
				background-repeat: no-repeat;
			}

			.missing {
				color: $white-dark;
				font-size: 40px;
			}

			&:hover {
				cursor: pointer;
				sound-in: "hover";
				border-color: $white;
			}

			:active {
				sound-in: "light_click";
			}

			&.selected {
				border-color: $gold;

				text {
					background-color: $gold;
				}
			}
		}
	}

	> .footer {
		position: relative;
		bottom: 0px;

		gap: 25px;
		width: 100%;
		flex-shrink: 0;

		padding: 6px;
		padding-left: 10px;
		padding-right: 25px;

		background-color: $gray;

		justify-content: space-between;

		> .create {
			gap: 10px;

			width: 250px;
			max-width: 20%;
			flex-shrink: 0;

			align-items: center;

			Button {
				width: 100%;
			}
		}

		.tick-boxes {
			height: 100%;
			flex-shrink: 0;

			justify-content: center;

			InputCheckbox {
				gap: 10;
				width: auto;

				align-items: center;
				justify-content: center;
				flex-direction: row-reverse;

				text {
					margin-right: 0; // HACK

					font-size: 30;
					text-align: center;
				}

				.checkbox {
					width: auto;
					height: 30;
				}
			}
		}

		> .info {
			width: 200px;

			align-items: center;
			flex-direction: column;
			justify-content: center;

			text-transform: uppercase;

			font-size: 24px;

			text {
				width: 100%;
				text-align: left;
				// white-space: pre;
			}

			.title {
				color: $white;
			}

			.subtitle {
				color: $white-dark;
			}
		}
	}
}