@import "/UI/Style.scss";

TeamSelection {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	flex-direction: column;
	font-family: $font-main;
	color: $white;
	align-items: center;
	font-size: 32px;
	transition: opacity 0.4s ease-in-out;

	&:intro {
		opacity: 0;
	}

	> .header {
		justify-content: space-between;
		padding: 40px 60px;
		height: 180px;
		width: 100%;
		background-color: $gray-darker;
		align-items: center;

		> button {
			background-color: $red;
			height: 50px;
			width: 250px;
		}

		> .title {
			font-size: 72px;
		}

		> .time {
			width: 250px;
			padding: 10px 0px;
			justify-content: center;
			align-items: center;
			background-color: $gray;
		}
	}

	> .server-info {
		width: 100%;
		justify-content: center;
		align-items: center;
		padding: 10px 0px;
		gap: 10px;
		text-transform: uppercase;
		background-color: $light-gray;

		> p {
			&.dark {
				color: $white-dark;
			}
		}
	}

	> .team-selection {
		flex-grow: 1;
		width: 100%;
		flex-shrink: 0;
		flex-direction: row;
		backdrop-filter: blur(20px);

		> .side {
			position: relative;
			width: 100%;

			&.blur {
				backdrop-filter: blur(5px);
			}

			> .versus {
				position: absolute;
				top: 200px;
				right: 100%;
				transform: translateX(50%);
				font-size: 82px;
				color: $white;
				z-index: 2;
			}
		}
	}

	> .bottom-bar {
		height: 50px;
		width: 100%;
		background-color: $gray;
	}

	> .loadout-container {
		position: absolute;
		align-items: center;
		bottom: 0px;
		border-top: 10px $gray;
		background-color: $gray-darker;
		justify-content: center;
		flex-direction: row;
		padding: 30px 40px;
		gap: 10px;

		> .title {
			position: absolute;
			bottom: 100%;
			left: 40px;
			margin-bottom: -15px;
			padding: 4px 40px;
			background-color: $white;
			color: $gray-darker;
			font-size: 32px;
		}

		> LoadoutSelector {
			width: 300px;
		}

		> Button {
			height: 60px;
			margin-top: 15px;
		}

		> .go-skip {
			justify-content: center;
			align-items: center;

			> .waiting {
				font-size: 48px;
			}

			> Button {
				font-size: 48px;
				background-color: $red;
				color: $white;
			}
		}

		> .deploy {
			> Button {
				font-size: 48px;
				background-color: $white;
				color: $gray-darker;
			}
		}
	}
}