{ lib, theme, ... }:

let
  p = theme.palette;
  fonts = theme.fonts;
  terminalFontSize = toString fonts.sizes.terminal;
  defineColors = lib.concatStringsSep "\n" (
    lib.mapAttrsToList (name: value: "@define-color ${name} ${value};") p
  );
in
{
  programs.waybar.style = ''
    ${defineColors}

    * {
      font-family: "${fonts.monospace.name}";
      font-size: ${terminalFontSize}pt;
    }

    window#waybar, tooltip {
      background: alpha(@darkestGray, 1.000000);
      color: @lightGray;
    }

    tooltip {
      border-color: @purple;
    }

    tooltip label {
      color: @lightGray;
    }

    .modules-left #workspaces button,
    .modules-center #workspaces button,
    .modules-right #workspaces button {
      border-bottom: 3px solid transparent;
    }

    .modules-left #workspaces button.focused,
    .modules-left #workspaces button.active,
    .modules-center #workspaces button.focused,
    .modules-center #workspaces button.active,
    .modules-right #workspaces button.focused,
    .modules-right #workspaces button.active {
      border-bottom: 3px solid @lightGray;
    }

    .modules-left #workspaces button.urgent,
    .modules-center #workspaces button.urgent,
    .modules-right #workspaces button.urgent {
      border-bottom: 3px solid @red;
      background-color: @red;
      color: @darkestGray;
    }

    button {
      box-shadow: inset 0 -8px transparent;
      border: none;
      border-radius: 0;
    }
  '';
}