@import "theme";

GameOverlay
{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	justify-content: center;
	align-items: center;
	font-weight: bold;

	.mute
	{
		position: absolute;
		top: $deadzone-y;
		right: $deadzone-x;
		font-size: 25px;
		font-family: Poppins;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 8px;
		padding: 12px;
		color: $text-default;
		border-radius: 18px;
		background-color: $surface-deep;
		box-shadow: 0px 8px 0px rgba( 0, 0, 0, 0.06 ), 0px 24px 48px $shadow-soft;
		transition: all 0.2s ease;
		transform: scale( 1 );

		// Track info: collapsed by default, expands open when a track starts.
		.track
		{
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			overflow: hidden;
			max-width: 0px;
			opacity: 0;
			transition: all 0.3s ease;

			.track-title
			{
				font-size: 16px;
				white-space: nowrap;
			}

			.track-artist
			{
				font-size: 12px;
				font-weight: normal;
				opacity: 0.7;
				white-space: nowrap;
			}
		}

		&.expanded .track
		{
			max-width: 320px;
			opacity: 1;
		}

		&.active
		{
			opacity: 1;
			transform: scale(0.8);
			background-color: $surface-deep;
		}

		// In-game: smoked-glass pill matching the lap pill / standings.
		&.in-game
		{
			color: white;
			background-color: $pill-dark;
			border-radius: $pill-radius;
			backdrop-filter: blur( 4px );
			box-shadow: none;
		}
	}
}