{ config, ... }:
let
  paddingV = "0";
  paddingH = "12px";
in
{
  # ISSUE: https://github.com/Alexays/Waybar/issues/3303
  # This way I am forced to apply the padding to children of each group
  # instead of the whole group.
  text = ''
    #clock,
    #custom-display,
    #language,
    #mpris,
    #pulseaudio,
    #scratchpad,
    #tray {
      padding: ${paddingV} ${paddingH};
      border-top: ${toString config.style.window.border}px solid transparent;
      border-bottom: ${toString config.style.window.border}px solid transparent;
    }

    #cpu,
    #battery {
      padding-left: ${paddingH};
    }

    #custom-powersave,
    #custom-powerlimit {
      padding-right: ${paddingH};
    }

    #clock {
      font-weight: bold;
    }

    #custom-powerlimit,
    #custom-powersave,
    #memory,
    #temperature {
      padding-left: 4px;
      border-top: ${toString config.style.window.border}px solid transparent;
      border-bottom: ${toString config.style.window.border}px solid transparent;
    }

    #batteryinfo:hover,
    #clock:hover,
    #custom-display:hover,
    #hardware:hover,
    #language:hover,
    #mpris:hover,
    #pulseaudio:hover,
    #scratchpad:hover,
    #tray:hover,
    #workspaces button:hover {
      background-color: rgba(${config.style.color.border-r},${config.style.color.border-g},${config.style.color.border-b},${toString config.style.opacity.desktop});
    }

    #pulseaudio.muted,
    #pulseaudio.source-muted,
    #battery.critical,
    #temperature.critical,
    #tray.needs-attention,
    #custom-display.modified {
      border-top: ${toString config.style.window.border}px solid #${config.style.color.accent};
    }

    #workspaces button {
      padding: ${paddingV} 4px;
      border-top: ${toString config.style.window.border}px solid transparent;
      border-bottom: ${toString config.style.window.border}px solid transparent;
      border-radius: 0;
    }

    #workspaces button.focused {
      border-top: ${toString config.style.window.border}px solid #${config.style.color.accent};
    }
  '';
}