@import "/UI/Style.scss";

ScoreboardTeam {
	width: 100%;
	flex-grow: 1;
	flex-direction: column;

	> .header {
		position: relative;
		height: 40px;
		flex-shrink: 0;

		gap: 10px;
		padding: 6px 40px;

		align-items: center;

		color: $white-dark;
		background-color: $gray-darker;

		> .stats {
			position: absolute;
			right: 40;

			gap: 5px;
			align-self: flex-end;

			> .stat {
				justify-content: center;
			}

			> .n {
				width: 40;
			}

			> .s {
				width: 65;
			}

			> .m {
				width: 60;
			}
		}
	}

	> .scroll {
		flex-direction: column;
		width: 100%;
		overflow: scroll;

		> .player {
			height: 52px;
			width: 100%;
			flex-shrink: 0;
			background-color: $gray;
			padding: 6px 40px;
			justify-content: space-between;

			&:nth-child(odd) {
				background-color: $gray-darkerer;
			}

			&:nth-child(even) {
				background-color: $gray-darker;
			}

			> .avatar {
				height: 100%;
				max-width: 250px;
				gap: 15px;

				align-items: center;

				font-size: 24px;
				text-overflow: ellipsis;

				> img {
					height: 100%;
					aspect-ratio: 1;
				}

				> .icon {
					height: 75%;
					aspect-ratio: 1;
					image-rendering: pixelated;
				}
			}

			> .stats {
				justify-content: space-evenly;
				gap: 5px;
				align-items: center;

				> p {
					flex-grow: 1;
					justify-content: center;
				}

				> .n {
					width: 40;
					max-width: 40;
				}

				> .s {
					width: 65;
					max-width: 65;
				}

				> .m {
					width: 60;
					max-width: 60;
				}

				> .kills {
					color: $white;
				}

				> .deaths {
					color: $deaths;
				}

				> .score {
					color: $score;
				}

				> .mute {
					// width: 70;

					> Checkbox {
						height: 70%;
						aspect-ratio: 1;
					}
				}
			}
		}
	}
}