@import "theme";

.leaderboard-page
{
	width: 100%;
	height: 100%;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	padding: $deadzone-y $deadzone-x;
	padding-top: 128px;
}

.eyebrow
{
	font-family: $display-font;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 4px;
	color: $accent-red;
}

.page-title
{
	font-family: $header-font;
	font-size: 44px;
	font-weight: 800;
	color: $text-bright;
	margin-bottom: 8px;
}

.filter-row
{
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	width: 100%;
	max-width: 560px;
	cursor: pointer;

	.filter-label
	{
		font-family: $display-font;
		font-size: 12px;
		font-weight: 800;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: $hud-text-muted;
	}
}

.checkbox
{
	width: 26px;
	height: 26px;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background-color: $surface-mid;
	border: 2px solid rgba( 0, 0, 0, 0.1 );
	box-shadow: 0px 2px 0px $shadow-chunky;
	transition: transform 0.12s ease-out;

	&:hover { transform: translateY( -1px ); }
	&:active { transform: translateY( 1px ); }

	&.checked
	{
		background-color: $accent-green;
	}

	.check-glyph
	{
		font-size: 15px;
		font-weight: 800;
		color: white;
	}
}

.board
{
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	width: 100%;
	max-width: 560px;
	max-height: 460px;
	overflow-y: scroll;
}

.board-msg
{
	font-family: $display-font;
	font-size: 16px;
	font-weight: 700;
	color: $hud-text-muted;
	align-items: center;
	justify-content: center;
	padding: 40px 0;
}

// Smoked-glass standings pills; the local player's row flips to a solid white pill.
.row
{
	flex-direction: row;
	align-items: center;
	height: 44px;
	gap: 10px;

	.row-pos
	{
		min-width: 36px;
		justify-content: flex-end;
		font-family: $display-font;
		font-size: 21px;
		font-weight: 900;
		color: $text-bright;
		text-shadow: $hud-shadow;
	}

	.row-pill
	{
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		flex-grow: 1;
		height: 100%;
		padding: 0 18px;
		background-color: $pill-dark;
		border-radius: $pill-radius;
		backdrop-filter: blur( 4px );

		.row-name
		{
			font-family: $header-font;
			font-size: 16px;
			font-weight: 700;
			color: $text-bright;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			max-width: 320px;
		}

		.row-time
		{
			font-family: $display-font;
			font-size: 16px;
			font-weight: 800;
			color: $text-bright;
		}
	}

	&:not(.local)
	{
		opacity: 0.8;
	}

	&.local .row-pill
	{
		background-color: $surface-deep;
		box-shadow: 0px 4px 12px $shadow-chunky;

		.row-name,
		.row-time
		{
			color: $text-default;
		}
	}
}

.footer-row
{
	flex-direction: row;
	align-items: center;
	gap: 18px;
	margin-top: 14px;
}

.back-btn
{
	flex-direction: row;
	align-items: center;
	gap: 10px;
	padding: 14px 22px 14px 18px;
	border-radius: 28px;
	background-color: $surface-mid;
	border: 2px solid rgba( 0, 0, 0, 0.1 );
	cursor: pointer;
	box-shadow: 0px 3px 0px $shadow-chunky;
	transition: transform 0.12s ease-out;

	&:hover { transform: translateY( -2px ); }
	&:active { transform: translateY( 2px ); }

	.back-glyph
	{
		width: 24px;
		height: 24px;
	}

	.back-label
	{
		font-family: $display-font;
		font-size: 14px;
		font-weight: 800;
		letter-spacing: 2px;
		color: $text-default;
	}
}

.back-btn,
.filter-row
{
	pointer-events: none;
}

.leaderboard-page.mouse .back-btn,
.leaderboard-page.mouse .filter-row
{
	pointer-events: all;
}