@import "Styles/base.scss";

ScoreboardUI {
	position: absolute;
	top: 0;
	right: 2rem;
	left: 2rem;
	bottom: 0;
	justify-content: space-between;
	flex-direction: row;
	align-items: center;
	color: white;
	font-family: 'Baloo 2';
	z-index: 2;
	
	.container {
		width: 500px;
		border-radius: 8px;
		min-height: 500px;
		max-height: 680px;
		background-color: $background-primary;
		backdrop-filter-blur: $blur-frame;
		align-items: flex-start;
		flex-direction: column;
		position: relative;
	}

	.title {
		font-size: 24px;
		padding: 12px;
		background-color: $background-header;
		border-radius: 8px 8px 0 0;
		width: 100%;
		justify-content: center;
		letter-spacing: 4px;
		text-transform: uppercase;
		font-weight: 400;
		flex-shrink: 0;
	}

	.scrollable {
		max-height: 100%;
		width: 100%;
		flex-direction: column;
		overflow-y: scroll;
		overflow-x: hidden;
		pointer-events: all;
		padding-right: 14px;
	}

	.row {
		width: 100%;
		flex-shrink: 0;
		padding: 8px 14px;
		font-size: 22px;
		gap: 8px;
		align-items: center;
		justify-content: space-between;

		&:nth-child(odd) {
			background-color: rgba(220, 220, 220, 0.02);
		}
	}
	
	.host {
		pointer-events: all;
	}
	
	.name-col {
		align-items: center;
		gap: 12px;
	}
	
	.avatar {
		height: 32px;
		width: 32px;
		border-radius: 50%;
	}
	
	.material-icon {
		height: 48px;
		width: 48px;
		margin: -12px; // space offset
	}
	
	.money {
		align-items: center;
		pointer-events: all;
	}
}