@import "globals.scss";

TeamSelectPanel {
	width: 500px;
	height: 700px;
	margin: 25px;
	align-items: center;
	pointer-events: all;
	flex-direction: column;
	background-color: $dark-background;

	&.left {
		&:hover {
			background-image: linear-gradient(to right, transparent, $red);
		}
	}

	&.right {
		&:hover {
			background-image: linear-gradient(to left, transparent, $blue);
		}
	}

	.header {
		width: 100%;
		height: 55px;
		justify-content: center;
		align-items: center;
		font-size: 45px;
		color: whitesmoke;

		&.red {
			flex-direction: row-reverse;
			background-color: $red;
		}

		&.blue {
			flex-direction: row;
			background-color: $blue;
		}
	}

	.player-row {
		width: 100%;
		height: 50px;
		color: white;
		align-items: center;
		font-size: 25px;

		&.red {
			flex-direction: row-reverse;
			background-image: linear-gradient(to right, transparent, $red);
		}

		&.blue {
			flex-direction: row;
			background-image: linear-gradient(to left, transparent, $blue);
		}

		&.ready {
		}
	}
}