@import "/UI/Style.scss";

LobbyCreator {
	width: 100%;
	height: 100%;
	flex-direction: column;
	position: relative;

	>.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;
			}
		}
	}

	>.list {
		overflow-y: hidden;
		overflow-x: scroll;
		width: 100%;
		padding: 10px;
		gap: 10px;

		>.map {
			position: relative;
			width: 350px;
			height: 200px;
			background-color: $gray;
			flex-shrink: 0;
			justify-content: center;
			align-items: center;
			padding: 10px;
			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: absolute;
		padding: 0px 50px;
		bottom: 0px;
		width: 100%;
		background-color: $gray;
		gap: 20px;
		justify-content: space-between;

		>.create {
			align-items: center;
			gap: 20px;

			InputCheckbox {
				padding-left: 15px;
			}
		}

		>.info {
			align-items: center;
			text-transform: uppercase;
			gap: 20px;
			font-size: 24px;
			white-space: pre;

			.title {
				color: $white;
			}

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