.battery {
  display: inline-flex;
  align-items: center;
  gap: 0;               /* IMPORTANT: no gap between body and cap */
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

.battery__cap {
  width: 3px;
  height: 12px;
  border: 1px solid currentColor;
  border-left: 0;
  border-radius: 0 2px 2px 0;
  opacity: 0.9;
  flex-shrink: 0;
}

.battery__body {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid currentColor;
  border-radius: 3px;
}

.battery__seg {
  width: 6px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid currentColor;
  opacity: 0.25;
  flex-shrink: 0;
}

.battery__seg.is-filled {
  opacity: 1;
  background: currentColor;
}

.battery__label {
  margin-left: 6px;  /* spacing to text, not between icon parts */
}

/* sizes */
.battery--sm .battery__seg { width: 5px; height: 9px; }
.battery--sm .battery__cap { width: 3px; height: 10px; flex-shrink: 0; }
.battery--lg .battery__seg { width: 7px; height: 14px; }
.battery--lg .battery__cap { width: 4px; height: 16px; flex-shrink: 0; }

/* state colors (override currentColor) */
.battery--ok   { color: #2e7d32; }  /* green */
.battery--warn { color: #ed6c02; }  /* orange */
.battery--crit { color: #d32f2f; }  /* red */