ui/bossnametag.razor.scss
BossNametag {
	position: absolute;
	bottom: 10px;
	width: 80%;
	left: 10%;
	right: 10%;
	right: 0px;
	flex-direction: column;
	justify-content: center;
	z-index: 992;

	&.invisible {
		display: none;
	}

	.hpbar {
		position: relative;
		width: 600px;
		height: 32px;
		background-image: url("/textures/ui/panel/boss_healthbar.png");
		background-position: center;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		align-self: center;
		overflow: visible;
		//border-left: 2px solid #fff;
		//border-right: 2px solid #fff;
		flex-direction: row;
		justify-content: center;
		gap: 4px;

		&.invisible {
			display: none;
		}

		.bar_container {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			overflow: visible;
			mask-size: 100% 100%;
			mask-repeat: no-repeat;
			mask-position: center;
			background-color: #00000077;
		}

		.hpbaroverlay {
			//background-color: green;
			position: absolute;
			bottom: 0px;
			top: 0px;
			left: 0px;
			transition: opacity 0.25s linear, background-color 0.25s linear;

			&.invisible {
				display: none;
			}
		}

		.hpbardelta {
			position: absolute;
			bottom: 0px;
			top: 0px;
			left: 0px;
			//background-color: white;
			position: absolute;
			align-self: center;
			transform-origin: left;
			transition: width 0.9s linear;
			opacity: 1;
		}
	}

	.label {
		position: relative;
		color: white;
		text-align: center;
		//width: 100%;
		height: 100%;
		font-family: "Inter";
		font-weight: bold;
		font-size: 16px;
		text-stroke: 5px black;
		align-items: center;
		opacity: 0.7;
	}

	.hp_label {
		position: absolute;
		right: 8px;
		justify-content: center;
		gap: 4px;
		height: 100%;
		opacity: 0.7;
	}

	.name_label {
		position: absolute;
		left: 8px;
		height: 100%;
	}
}