$hud-bg: #0c202fcc;
$hud-bg-panel: #13161a88;
$hud-element-bg: #0006;
$hud-element-bg-deep: #000a;
$hud-element-bg-subtle: #0003;

$hud-text: #fafaff;
$hud-text-muted: #fffa;
$hud-color: $color-accent;

$hud-radius: 8px;
$hud-radius-sm: 4px;
$hud-radius-pill: 20px;

$hud-icon-size: 30px;
$hud-icon-height: 36px;
$hud-value-size: 29px;
$hud-value-weight: 700;

.hud-panel
{
	flex-direction: row;
	align-items: center;
	gap: 16px;
	padding: 22px 22px;
	background-color: $hud-element-bg;
	border-radius: $hud-radius;
	font-family: $title-font;
	pointer-events: none;

	Image, .icon
	{
		width: $hud-icon-size;
		height: $hud-icon-height;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		flex-shrink: 0;
		background-tint: $hud-color;
	}

	.value
	{
		font-size: $hud-value-size;
		font-weight: $hud-value-weight;
		color: $hud-text;
	}

	.alternate
	{
		font-size: $hud-value-size;
		font-weight: $hud-value-weight;
		color: $hud-text-muted;
	}
}