@import "/UI/Style.scss";

VotingScreen {
	position: absolute;
	z-index: -50;

	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	gap: 18;

	color: $white;
	font-size: 32px;
	font-family: $font-main;

	flex-direction: row;
	align-items: center;
	justify-content: space-evenly;

	pointer-events: all;
	// backdrop-filter: blur(2px);

	transition: opacity 0.4s ease-in-out;

	&:intro {
		opacity: 0;
	}

	> .side {
		width: 20%;
		height: 100%;
	}

	> .left {
		width: 300px;
		// padding: 20;
		padding-bottom: 50;
		gap: 20;

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

		flex-direction: column;

		> .hr {
			background-color: $white;
			width: 250px;
			height: 3;

			margin-top: 5;
			margin-bottom: 5;
		}

		> button {
			background-color: $red;
			padding-left: 50;
			padding-right: 50;
			flex-shrink: 0;
		}
	}

	> .right {
		width: 330;
		// padding-left: 20;
		// padding-right: 20;
		gap: 15;

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

		overflow-y: scroll;

		background-color: #3f4037;

		> .head {
			width: 100%;
			height: 50;
			margin-bottom: 25;
			font-size: 35;
			justify-content: center;
			align-items: center;
			flex-shrink: 0;
			background-color: #4b4f47;
		}

		> VotingMap {
			position: relative;
			width: 300;
			gap: 2;

			flex-direction: column;
			align-items: center;
			flex-shrink: 0;

			cursor: pointer;

			> .frame {
				width: 100%;
				height: 150;
				margin: 0 20 0 20; // left and right
				flex-shrink: 1;

				background-color: #323232;

				> img {
					width: 100%;
				}

				> &:not(:hover, .selected) {
					border: 10 #323232;
				}

				&:hover {
					border: 10 #e2bc34;
				}

				&.selected {
					border: 10 #e2bc34;
				}

				> .pips {
					position: absolute;
					width: 260;
					height: 150;
					margin: 20;
					gap: 10;

					flex-wrap: wrap;
					flex-direction: row;

					> .pip {
						position: relative;
						width: 16;
						height: 16;
						flex-shrink: 0;
						background-color: #ffd43e;
					}
				}
			}

			> .info {
				width: 300;
				font-size: 22;
				justify-content: space-between;

				.info-left {
					gap: 10;

					> .name {
						color: $white;
					}

					> .mode {
						color: #e7d07b;
					}
				}

				> .votes {
					color: $smoke-gray;
				}
			}
		}
	}

	> .middle {
		width: 60%;
		max-width: 1200px;
		height: 100%;

		flex-grow: 1;
		flex-shrink: 1;
		flex-direction: column;

		justify-content: space-between;

		> .upper {
			width: 100%;
			gap: 50;

			flex-direction: column;

			> .winner {
				width: 100%;
				padding-top: 30;
				gap: 10;

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

				font-size: 70;

				background-color: #3f4037;

				> .objective {
					width: 100%;
					padding-top: 15;
					padding-bottom: 15;

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

					font-size: 35;
					color: $white;

					background-color: $gray-brighter;
				}
			}

			> .highlight {
				width: 100%;
				height: 100px;
				gap: 50;

				flex-direction: row;
				background-color: #3f4037;

				> .portrait {
					width: 120;
					height: 120;
					margin-left: 50;
					margin-top: -10;
					margin-bottom: -10;
					justify-content: center;
					align-items: center;
					background-color: #323232;
					transform: rotateZ(-2);
					flex-shrink: 0;

					> img {
						width: 100;
						height: 100;
					}
				}

				> .text {
					height: 100%;
					justify-content: center;
					flex-direction: column;

					> .premise {
						font-size: 36;
					}

					> .accomplishment {
						font-size: 30;
						color: #b5a39d;
					}
				}
			}
		}

		> .lower {
			position: relative;
			width: 100%;
			margin-bottom: 50;
			max-height: 50%;

			flex-direction: column;
			background-color: #4b4f47;

			.head {
				width: 100%;
				height: 50;
				flex-shrink: 0;
				text-align: center;
				align-items: center;
				justify-content: center;
			}

			> .teams {
				gap: 4;
				flex-shrink: 1;
				flex-direction: row;
				overflow: scroll;
			}

			> .foot {
				width: 100%;
				padding: 10;
				padding-left: 50;
				padding-right: 50;
				flex-shrink: 0;

				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				font-size: 40;
			}
		}
	}
}