/* Gauges: small instruments drawn from boxes and panels.
 *
 * Firmware: gui/common/BatteryGauge.hpp, BubbleVial.hpp. */

:root {
  /* the battery at scale 1: a box as large as the firmware's symbol
   * (BatteryGauge.hpp:19-20), so every place it stands in stays right, and
   * in it a flatter, rounded body with its terminal */
  --battery-w: 26px;
  --battery-h: 20px;
  --battery-body-w: 24px;
  --battery-body-h: 13px;
  --battery-wall: 1.5px;
  --battery-gap: 1.5px;         /* between the wall and the charge */
  --battery-radius: 4px;
  --battery-nub-w: 2px;
  --battery-nub-h: 5px;
}

/* BatteryGauge: an outline that is always there, faint, and in it the
 * charge - one rounded block, a third of the body for every bar the voltage
 * is worth against the stored thresholds.
 *   data-bars="0".."3"   0: outline and a sliver of charge in red
 *   data-unknown         no fresh voltage: grey outline, no charge
 * --battery-scale doubles it on the battery settings page (setScale).
 *
 * The firmware draws a square shell with three separate bars; the elements
 * are still those (components/gauge.js), drawn another way: the first bar is
 * the charge, the well and the other two bars are not drawn. */
.battery {
  --s: var(--battery-scale, 1);
  --battery-shell: var(--color-ink);
  --battery-charge: var(--color-alarm);
  --battery-share: 0.16;        /* how much of the body the charge fills */
  --battery-inset: calc((var(--battery-wall) + var(--battery-gap)) * var(--s));
  --battery-top: calc((var(--battery-h) - var(--battery-body-h)) / 2 * var(--s));
  --w: calc(var(--battery-w) * var(--s));
  --h: calc(var(--battery-h) * var(--s));
  pointer-events: none;
}

.battery[data-bars="3"] { --battery-charge: var(--color-battery-full); --battery-share: 1; }
.battery[data-bars="2"] { --battery-charge: var(--color-battery-mid);  --battery-share: 0.66; }
.battery[data-bars="1"] { --battery-charge: var(--color-battery-low);  --battery-share: 0.33; }
/* empty: there is no charge to carry the colour, so the shell wears all of it */
.battery[data-bars="0"] { --battery-shell: var(--color-alarm); --battery-shell-share: 100%; }
.battery[data-unknown]  { --battery-shell: var(--color-inactive); }

.battery > * {
  position: absolute;
}

.battery-shell {
  left: 0;
  top: var(--battery-top);
  width: calc(var(--battery-body-w) * var(--s));
  height: calc(var(--battery-body-h) * var(--s));
  border: calc(var(--battery-wall) * var(--s)) solid color-mix(in srgb, var(--battery-shell) var(--battery-shell-share, 45%), transparent);
  border-radius: calc(var(--battery-radius) * var(--s));
}

.battery-nub {
  left: calc((var(--battery-body-w) + 1px) * var(--s));
  top: calc((var(--battery-h) - var(--battery-nub-h)) / 2 * var(--s));
  width: calc(var(--battery-nub-w) * var(--s));
  height: calc(var(--battery-nub-h) * var(--s));
  border-radius: 0 calc(var(--battery-nub-w) * var(--s)) calc(var(--battery-nub-w) * var(--s)) 0;
  background-color: color-mix(in srgb, var(--battery-shell) var(--battery-shell-share, 45%), transparent);
}

.battery-inner,
.battery-bar.bar-2,
.battery-bar.bar-3 {
  display: none;
}

/* the charge */
.battery-bar.bar-1 {
  left: var(--battery-inset);
  top: calc(var(--battery-top) + var(--battery-inset));
  width: calc((var(--battery-body-w) * var(--s) - 2 * var(--battery-inset)) * var(--battery-share));
  height: calc(var(--battery-body-h) * var(--s) - 2 * var(--battery-inset));
  border-radius: calc((var(--battery-radius) - var(--battery-wall) - var(--battery-gap) + 0.5px) * var(--s));
  background-color: var(--battery-charge);
  transition: width 0.3s var(--ease), background-color 0.3s;
}

.battery[data-unknown] > .battery-bar {
  display: none;
}

/* BubbleVial: a round glass, a ring in its middle and the bubble. Its size is
 * --vial (the diameter); the ring, the bubble and the ticks are worked out of
 * it by gauge.js exactly as BubbleVial::init does, in whole pixels.
 *   data-state="unknown"  no reading: grey bubble
 *   data-state="level"    within a degree both ways: green
 *   (none)                accent */
.vial {
  --w: var(--vial);
  --h: var(--vial);
  --vial-rim: var(--color-tilt-border);
  --vial-bubble: var(--color-accent);
}

.vial[data-state="unknown"] { --vial-bubble: var(--color-inactive); }
.vial[data-state="level"]   { --vial-bubble: var(--color-confirm); }

.vial-glass,
.vial-ring {
  --panel-fill: var(--color-vial);
  --panel-border: var(--vial-rim);
}

.vial-glass {
  --w: var(--vial);
  --h: var(--vial);
}

.vial-bubble {
  --panel-fill: var(--vial-bubble);
  --panel-border: var(--vial-bubble);
}

.vial-tick {
  background-color: var(--color-inactive);
}