{
  options,
  config,
  pkgs,
  lib,
  inputs,
  ...
}:
with lib;
with lib.frajul;
let
  cfg = config.modules.desktop.addons.waybar;
  inherit (inputs.nix-colors.colorschemes.${builtins.toString config.modules.desktop.colorscheme})
    palette
    ;
in
{
  options.modules.desktop.addons.waybar = with types; {
    enable = mkBoolOpt false "Enable or disable waybar";
  };

  config = mkIf cfg.enable {
    programs.waybar = {
      enable = true;
      systemd.enable = true;
      settings.mainBar = builtins.fromJSON (builtins.readFile ./config.json);
      style = ''
        * {
          /* `otf-font-awesome` is required to be installed for icons */
          font-family: JetBrainsMono Nerd Font;
          font-size: 16px;
        }

        #clock,
        #custom-notification,
        #custom-launcher,
        #custom-power-menu,
        /*#custom-colorpicker,*/
        #custom-window,
        #memory,
        #disk,
        #network,
        #battery,
        #custom-spotify,
        #pulseaudio,
        #window,
        #idle_inhibitor,
        #cpu,
        #tray {
          padding: 0 15px;
          border-radius: 12px;
          background: #${palette.base00};
          color: #${palette.base07};
          margin-top: 0px;
          margin-bottom: 0px;
          margin-right: 2px;
          margin-left: 2px;
          transition: all 0.3s ease;
        }

        #window {
          background-color: transparent;
          box-shadow: none;
        }

        window#waybar {
          background-color: rgba(0, 0, 0, 0.096);
          border-radius: 17px;
        }

        window * {
          background-color: transparent;
          border-radius: 0px;
        }

        #workspaces button label {
          color: #${palette.base07};
        }

        #workspaces button.active label {
          color: #${palette.base00};
          font-weight: bolder;
        }

        #workspaces button:hover {
          box-shadow: #${palette.base07} 0 0 0 1.5px;
          background-color: #${palette.base00};
          min-width: 50px;
        }

        #workspaces {
          background-color: transparent;
          border-radius: 17px;
          padding: 0 0px;
          margin-top: 2px;
          margin-bottom: 2px;
        }

        #workspaces button {
          background-color: #${palette.base00};
          border-radius: 12px;
          margin-left: 4px;

          transition: all 0.3s ease;
        }

        #workspaces button.active {
          min-width: 50px;
          box-shadow: rgba(0, 0, 0, 0.288) 2 2 5 2px;
          background-color: #${palette.base0F};
          background-size: 400% 400%;
          transition: all 0.3s ease;
          background: linear-gradient(
            58deg,
            #${palette.base0E},
            #${palette.base0E},
            #${palette.base0E},
            #${palette.base0D},
            #${palette.base0D},
            #${palette.base0E},
            #${palette.base08}
          );
          background-size: 300% 300%;
          animation: colored-gradient 20s ease infinite;
        }

        @keyframes colored-gradient {
          0% {
            background-position: 71% 0%;
          }
          50% {
            background-position: 30% 100%;
          }
          100% {
            background-position: 71% 0%;
          }
        }

        #custom-power-menu {
          margin-right: 10px;
          padding-left: 12px;
          padding-right: 15px;
          padding-top: 3px;
        }

        #custom-spotify {
          margin-left: 5px;
          padding-left: 15px;
          padding-right: 15px;
          padding-top: 3px;
          color: #${palette.base07};
          background-color: #${palette.base00};
          transition: all 0.3s ease;
        }

        #custom-spotify.playing {
          color: rgb(180, 190, 254);
          background: rgba(30, 30, 46, 0.6);
          background: linear-gradient(
            90deg,
            #${palette.base02},
            #${palette.base00},
            #${palette.base00},
            #${palette.base00},
            #${palette.base00},
            #${palette.base02}
          );
          background-size: 400% 100%;
          animation: grey-gradient 3s linear infinite;
          transition: all 0.3s ease;
        }

        @keyframes grey-gradient {
          0% {
            background-position: 100% 50%;
          }
          100% {
            background-position: -33% 50%;
          }
        }

        #tray menu {
          background-color: #${palette.base00};
          opacity: 1.0;
        }

        #battery.warning {
          color: #${palette.base08};
        }

        #pulseaudio.muted {
          color: #${palette.base08};
          padding-right: 16px;
        }

        #custom-notification.collapsed,
        #custom-notification.waiting_done {
          min-width: 12px;
          padding-right: 17px;
        }

        #custom-notification.waiting_start,
        #custom-notification.expanded {
          background-color: transparent;
          background: linear-gradient(
            90deg,
            #${palette.base02},
            #${palette.base00},
            #${palette.base00},
            #${palette.base00},
            #${palette.base00},
            #${palette.base02}
          );
          background-size: 400% 100%;
          animation: grey-gradient 3s linear infinite;
          min-width: 500px;
          border-radius: 17px;
        }
      '';
    };
  };
}