@import "/UI/Style.scss";

Scoreboard {
	z-index: 80;

	pointer-events: none;

	position: absolute;

	width: 1300px;
	height: 900px;
	gap: 10px;

	flex-direction: column;
	font-family: $font-main;

	color: $white;

	transition:
		transform 0.25s ease-in-out,
		opacity 0.2s ease-in-out;

	transform: scaleY(0);
	opacity: 0;

	&.visible {
		transform: scaleY(1);
		transform-origin: center;
		opacity: 1;
		pointer-events: all;
	}

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

		&.yellow {
			color: $score;
		}
	}

	> .top {
		flex-direction: row;
		height: 90px;
		flex-wrap: wrap;
		background-color: $gray-darker;
		z-index: 2;

		.padding {
			flex-grow: 1;
			height: 100%;
			background-color: $gray-darker;
			align-items: center;
			padding: 0px 60px;
		}

		.timer {
			width: 250px;
			height: 100%;
			justify-content: center;
			align-items: center;
			background-color: $gray-brighter;
			font-size: 48px;
		}
	}

	> .content {
		width: 100%;
		height: 100%;
		flex-direction: column;

		> .header {
			background-color: $gray-brighter;
			width: 100%;
			justify-content: space-between;
			align-items: center;
			padding: 10px 40px;
			font-size: 32px;

			> .title {
				gap: 10px;
				text-transform: uppercase;
			}

			> .players {
				align-items: center;
				justify-content: center;
				text-align: center;
				font-size: 24px;
				gap: 16px;

				p {
					height: 100%;
				}
			}
		}

		> .player-list {
			height: 100%;
			width: 100%;
			background-color: $gray;
			flex-direction: row;
			gap: 4px;
			font-size: 24px;
		}

		> .performance {
			position: relative;
			height: 150px;
			width: 100%;
			padding: 30px 50px 20px 40px;
			background: $gray-brighter;

			> .header {
				position: absolute;
				bottom: 100%;
				background-color: $white;
				color: $gray-darker;
				padding: 0px 25px;
				font-size: 28px;
				margin-bottom: -20px;
			}

			> .content {
				width: 100%;
				justify-content: space-between;
				flex-direction: row;

				> .profile {
					flex-direction: row;
					gap: 20px;
					font-size: 32px;

					> img {
						border: 4px $gray-darker;
						height: 100%;
						aspect-ratio: 1;
						background-size: 100%;
					}

					> .info {
						color: $white;
						flex-direction: column;

						> .row {
							font-size: 24px;
							white-space: pre;
						}
					}
				}
			}
		}
	}
}