// @import "../_vars.scss";

$bg: #f5c243;
$box-bg: #e17148;
$button-bg: #d33d00;

@import "./Scoreboard.razor.scss";

Menu {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: $bg;
	
	.terry {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		// background-color: rgba(0, 0, 0, 0.8);
		background-image: url('/ui/bg.png');
		opacity: 0.5;
		
		// colorful
		// filter: glow(0.1, 0.1, 0.1, 0.5);
	}
	
	.target {
		position: absolute;
		width: 300px;
		height: 300px;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		font-size: 300px;
		align-content: center;
		justify-content: center;
		display: flex;
		opacity: 0.5;
		// mix-blend-mode: screen;
	}
	
	align-items: center;
	font-weight: bold;
	pointer-events: all;
	flex-direction: column;
	// padding-top: 50px;
    color: #fff;
	
	font-family: Roboto;
	font-size: 25px;
	font-weight: 300;
	
	align-items: center;
	justify-content: center;
	gap: 20px;
	
	h1 {
		font-family: Poppins;
		font-weight: 800;
		font-size: 48px;
		margin-bottom: 20px;
		width: 100%;
		flex-grow: 1;
		// flex-basis: 100%;
	}
	
	.menu-box {
		display: flex;
		flex-wrap: wrap;
		max-width: 700px;
		background-color: $box-bg;
		// padding: 20px;
		box-shadow: 10px 10px 0px 0 rgba(0, 0, 0, 0.5);
		.content {
			padding: 20px;
			flex-grow: 1;
			flex-basis: 100%;
		}
		
		h1 {
			font-size: 30px;
			padding: 5px 20px;
			margin: 0;
			background-color: darken($box-bg, 10%);
		}
	}
	
	.lobby-list, .map-list {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 10px;
		width: 100%;
		overflow-y: scroll;
		height: 300px;
	}
	
	.lobby-list {
		height: 300px;
	}
	
	.lobby {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 5px 10px;
		&:hover {
			background-color: lighten($box-bg, 3%);
		}
	}

	.logo {
		margin-bottom: 10px;
		font-family: Poppins;
		font-weight: 800;
		font-size: 120px;
		color: #fff;
		
		// text-shadow: 5px 5px 0px rgba(0, 0, 0, 0.5);
		
		img {
			max-height: 256px;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
		}
	}
	
	.split {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 20px;
		.left {
			flex-direction: column;
			gap: 20px;
			flex-grow: 1;
		}
		.right {
			flex-direction: column;
			gap: 20px;
			flex-grow: 1;
			height: 100%;
		}
	}

	.settings {
		flex-grow: 1;
		height: 100%;		
	}
		
	.branding {
		position: absolute;
		bottom: 50px;
		right: 50px;
		font-size: 40px;
		font-weight: 800;
		color: #fff;
		text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5);
	}
	
	.button {
		padding: 5px 15px;
		border-radius: 5px;
		background-color: $button-bg;
		cursor: pointer;
		transition: background-color 0.1s;
		flex-wrap: wrap;
		flex-shrink: 0;
		&:hover {
			background-color: darken($button-bg, 10%);
		}
		&.fullwidth {
			width: 100%;
		}
		h1, h2, h3, h4, h5, h6 {
			width: 100%;
			font-weight: 800;
		}
	}
	
	.small {
		font-size: 20px;
	}
		
	
}