.battery{
  display: flex;
  align-items: center;
}

#top-bar .battery{
  width: 25px;
}

#now .battery-wrapper{
  width: 30px;
  margin-right: 10px;
}

/* Battery */
.battery-wrapper {
  position: relative;
}
.battery-wrapper .battery {
  border: 2.5px solid var(--paragraph);
  aspect-ratio: 2/1;
  padding: 2px;
  border-radius: 4px;
  position: relative;
}
.battery-wrapper .battery:before {
  content: "";
  height: 75%;
  width: 7%;
  background: white;
  display: block;
  position: absolute;
  top: 50%;
  border-radius: 0px 0.4em 0.4em 0px;
  right: -15%;
  transform: translateY(-50%);
}
.battery-wrapper .battery:after {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: 1px solid #fff;
  border-radius: 2px;
}

.battery-level {
  background: #30b455;
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  height: 100%;
}
.battery-wrapper.warn .battery-level {
  background-color: #efaf13;
}
.battery-wrapper.alert .battery-level {
  background-color: #e81309;
}

.charging.battery-wrapper.battery-wrapper:before {
  background-repeat: no-repeat;
  background-size: contain;
  height: 100%;
  width: 35%;
  content: "";
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-38%);
  z-index: 99;
}

.charging.battery-wrapper:before {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C%21DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%3E%3C%2Fg%3E%20%3Cpath%20style%3D%22stroke%3A%20white%3B%20stroke-width%3A%201px%3B%20stroke-linejoin%3A%20round%3B%22%20fill%3D%22%23000000%22%20d%3D%22M17.927%2012l2.68-10.28c0.040-0.126%200.060-0.261%200.060-0.4%200-0.726-0.587-1.32-1.314-1.32-0.413%200-0.78%200.187-1.019%200.487l-13.38%2017.353c-0.18%200.227-0.287%200.513-0.287%200.827%200%200.733%200.6%201.333%201.333%201.333h8.073l-2.68%2010.28c-0.041%200.127-0.060%200.261-0.060%200.4%200.001%200.727%200.587%201.32%201.314%201.32%200.413%200%200.78-0.186%201.020-0.487l13.379-17.353c0.181-0.227%200.287-0.513%200.287-0.827%200-0.733-0.6-1.333-1.333-1.333h-8.073z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}