<style include="cr-shared-style">
:host([is-low-battery_]) #container {
--iron-icon-fill-color: var(--cros-icon-color-alert);
color: var(--cros-text-color-alert);
}
:host([is-multiple-battery_]) #container {
padding-end: 6px;
}
:host(:not([is-low-battery_])) #container {
--iron-icon-fill-color: var(--cros-icon-color-secondary);
color: var(--cros-icon-color-secondary);
}
.battery-icon {
--iron-icon-height: 16px;
--iron-icon-width: 16px;
margin-inline-end: -2px;
padding-bottom: 2px;
}
</style>
<span id="container">
<iron-icon id="batteryIcon" class="battery-icon"
icon="[[getBatteryIcon_(device, batteryType)]]">
</iron-icon>
<span id="batteryPercentage">
[[getBatteryPercentageString_(device, batteryType)]]
</span>
</span>