/* battery.css */

/* Enables calc() with % from a number; safe fallback if unsupported */
@property --level {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

.battery {
	--level: 0;               /* 0..100 (integer) */
	--stroke: 3px;
	--radius: 10px;
	--pad: 3px;
	--cap-w: 10px;
	--cap-h: 20px;

	--fill: #3bd100;          /* default fill */
	--bg: #444;
	--stroke-color: #999;

	position: relative;
	display: inline-block;
	width: 150px;
	height: 50px;
	background: var(--bg);
	border: var(--stroke) solid var(--stroke-color);
	border-radius: var(--radius);
	box-sizing: border-box;
}

/* Battery "cap" */
.battery::after {
	content: "";
	position: absolute;
	right: calc(var(--cap-w) * -1);
	top: 50%;
	transform: translateY(-50%);
	width: var(--cap-w);
	height: var(--cap-h);
	background: var(--stroke-color);
	border-radius: 3px;
}

/* Inner fill */
.battery::before {
	content: "";
	position: absolute;
	left: var(--pad);
	top: var(--pad);
	bottom: var(--pad);
	width: calc(clamp(0, var(--level), 100) * 1% - (var(--stroke) + var(--pad)));
	background: var(--fill);
	border-radius: calc(var(--radius) - var(--pad));
	transition: width 200ms ease;
}

/* Lightning bolt (center) */
.battery > .bolt {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
}

.battery > .bolt::before {
	content: "";
	width: 28px;
	height: 52px;
	background: #1f1f1f;
	/* simple bolt shape */
	clip-path: polygon(
			55% 0%,
			10% 58%,
			42% 58%,
			30% 100%,
			90% 42%,
			58% 42%
	);
}

/* Color presets (set these classes server-side based on integer %) */
.battery-low  { --fill: #e50000; }
.battery-mid  { --fill: #ffd400; }
.battery-high { --fill: #35c400; }


/* Label inside */
.battery-label {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;

	font: 700 28px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color: #444;
	letter-spacing: 0.5px;

	/* readable on both white + fill */
	text-shadow:
		0 1px 0 #fff,
		0 -1px 0 #fff,
		1px 0 0 #fff,
		-1px 0 0 #fff;
	user-select: none;
}