$font-family: "Inter";
$font-weight: 700;
$font-weight-bold: bold;
$primary-color: rgba(232, 255, 244, 0.8);
$secondary-color: #809F91;

StatsScreen {
	position: absolute;
	color: white;
	width: 320px;
	//max-height: 90%;
	right: 56px;
	top: 90px;
	align-items: center;
	justify-content: flex-start;
	font-family: Inter;
	font-weight: 800;
	font-size: 12px;
	//background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
	//backdrop-filter: blur(22px);
	//opacity: 0;
	opacity: 1;
	pointer-events: all;
	z-index: 1000;
	overflow: visible;

	.list_container {
		position: relative;
	}

	.list {
		position: relative;
		//width: 100%;
		height: 30px;
		padding: 2px 4px;
		margin-left: 4px;
		margin-right: 5px;
		flex-shrink: 0;
		//backdrop-filter: blur(10px);
		//.icon {
		//	mix-blend-mode: lighten;
		//	font-size: 24px;
		//	color: rgba(232, 255, 244, 0.5);
		//	padding-right: 4px;
		//	padding-top: 1px;
		//}
	}

	.stat_name {
		position: relative;
		//font-size: 14px;
		align-items: center;
		color: rgba(232, 255, 244, 0.8);
	}

	.stat_value {
		position: relative;
		font-size: 16px;
		align-items: center;
	}

	.title {
		position: absolute;
		color: #FDD3D1AA;
		font-size: 38px;
		align-items: center;
		text-align: center;
		width: 100%;
		height: 40px;
		//margin-bottom: auto;
		//background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(31, 37, 44, 0.125) 0.0%, rgba(43, 47, 66, 0.5) 100%);
		//background-color: rgba(0, 0, 0, 0.5);
		//box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.35);
		//backdrop-filter: blur(10px);
		flex-shrink: 0;
		width: 100%;
		top: -40px;
		right: 0px;
		flex-direction: row;
		justify-content: center;
		//opacity: 0.6;
		cursor: pointer;
		background-image: url("/textures/ui/panel/stats_header.png");
		background-position: center;
		background-size: 100% 100%;

		&:hover {
			filter: brightness(1.2);
			//opacity: 0.75;
		}

		&:active {
			//opacity: 0.95;
			filter: brightness(1.5);
		}
	}

	.ctrl {
		position: absolute;
		right: 0px;
		//height: 50px;
		text-align: center;
		align-items: center;
		align-content: center;
		justify-content: center;
		color: #88B19E;
		width: 48px;
		height: 48px;

		img {
			width: 100%;
			height: 100%;
		}
		//font-family: 'Inter-Black';
		//background-color: rgba(0,0,0,0.0);
		//box-shadow: -1px 2px 20px rgba( black, 0.7 );
		//backdrop-filter: blur(10px);
		//font-size: 13px;
		//width: 50px;
		//padding: 2px;

		img {
			//background-image-tint: rgba(232, 255, 244, 0.4);
		}
	}

	.panel {
		position: relative;
		width: 100%;
		height: 100%;
		justify-content: flex-end;
		flex-direction: column;
		text-align: center;
		//background-color: rgba(0, 0, 0, 0.5);
		//box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.35);
		//backdrop-filter: blur(10px);
		//border-image: url("/textures/ui/panel/stats_panel_border2.png") 16 / 16px;
		background-image: url("/textures/ui/panel/stats_panel_border3.png");
		//background-position-x: 0px;
		//background-position-y: 900px;
		//background-position: center;
		background-repeat: repeat-y;
		background-size: 100% 180px;

		.scrollbar {
			position: absolute;
			width: 4px;
			background-color: #ffffff44;
			right: -8px;
			top: 0px;
			border-radius: 3px;
		}
	}

	.flat {
		.contents {
			position: relative;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			align-content: stretch;
			width: 100%;
			height: 100%;
		}

		.label {
			font-weight: $font-weight;
			font-family: $font-family;
		}

		.center {
			align-items: center;
		}

		.bold {
			font-weight: $font-weight-bold;
		}

		.primary {
			font-size: 18px;
			color: $primary-color;
		}

		.large {
			font-size: 22px;
		}

		.secondary {
			font-size: 16px;
			color: $secondary-color;
		}

		.grey {
			position: relative;
			mix-blend-mode: lighten;
			font-size: 22px;
			color: rgba(232, 255, 244, 0.5);
			padding-right: 8px;
		}
		//i, .icon {
		//	position: relative;
		//	align-items: center;
		//	font-family: Material Icons;
		//}

		.icon_container {
			position: relative;
			width: 30px;
			height: 30px;
			margin-top: -3px;
			margin-left: -6px;
		}

		.icon {
			position: relative;
			width: 100%;
			height: 100%;
			//background-color: blue;
			background-position: center;
			background-size: 100% 100%;
			//background-image: url("/textures/ui/stats/bullet.png");
			transform: scale(0.7);
			//mask-image: url("/textures/ui/stats/bullet.png");
			mask-size: 70% 70%;
			mask-repeat: no-repeat;
			mask-position: center;
			//image-rendering: pixelated;
			//filter: blur(10px);
		}

		.space-between {
			position: relative;
			justify-content: space-between;
		}

		.container {
			position: relative;
			background-color: rgba(0, 0, 0, 0.2);
			backdrop-filter: blur(10px);
		}

		.column {
			position: relative;
			width: 100%;
			flex-direction: column;
		}

		.section {
			position: relative;
			width: 100%;
			padding: 16px;
			flex-direction: column;

			&.tight {
				padding: 8px;
				padding-left: 16px;
				padding-right: 16px;
			}

			&.dark {
				background-color: rgba(0, 0, 0, 0.35);
			}

			&.row {
				flex-direction: row;
			}
		}
	}
}