{config, ...}: let
  best = config.theme.pine;
  better = config.theme.foam;
  good = config.theme.iris;
  bad = config.theme.rose;
  worse = config.theme.gold;
  worst = config.theme.love;
  charging = config.theme.highlight-high;
in {
  style = ''
    * {
        font-size: 1px;
    }

    window#waybar {
        background: rgba(0, 0, 0, 0);
    }

    #battery {
        border: none;
        border-radius: 4px;
        min-height: 4px;
        min-width: 720px;
        margin: 2px;
        background: ${best};
    }
    #battery.better {
        background: ${better};
    }
    #battery.good {
        background: ${good};
    }
    #battery.bad {
        background: ${bad};
    }
    #battery.worse {
        background: ${worse};
    }
    #battery.worst {
        background: ${worst};
    }

    #battery.charging {
        background: linear-gradient(0deg, ${charging}, ${best});
    }
    #battery.better.charging {
        background: linear-gradient(0deg, ${best}, ${better});
    }
    #battery.good.charging {
        background: linear-gradient(0deg, ${better}, ${good});
    }
    #battery.bad.charging {
        background: linear-gradient(0deg, ${good}, ${bad});
    }
    #battery.worse.charging {
        background: linear-gradient(0deg, ${bad}, ${worse});
    }
    #battery.worst.charging {
        background: linear-gradient(0deg, ${worse}, ${worst});
    }
  '';
}
