.flowline i { position: relative; background: #30434f; }
.flowline i.solar-active { background: #20e4a1; }
.flowline i.battery-discharge { background: #ff4f72; }
.flowline i.battery-charge { background: #20e4a1; }
.flowline i.solar-active::after,
.flowline i.battery-discharge::after,
.flowline i.battery-charge::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 7px #fff;
  transform: translate(-50%, -50%);
  animation: power-flow max(.45s, calc(var(--flow-speed, 2.3s) - .8s)) linear infinite;
}

@keyframes power-flow {
  from { left: 0; }
  to { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .flowline i::after { animation: none; left: 50%; }
}