{pkgs, lib,...}:

{
  programs.waybar.enable = true;
  programs.waybar.settings = [
{
  layer = "top";
  position = "top";
  margin = "5, 5, 5, 5";
  modules-left = [ "hyprland/workspaces"];
  modules-center = [ "mpris" ];
  modules-right = [ "cava" "clock" "network" "pulseaudio/slider" "tray" ];

  cava = {
    bars = 14;
    bar_delimiter = 0;
    format-icons = ["▁" "▂" "▃" "▄" "▅" "▆" "▇" "█"];
  };

  network = {
    format = "󱎔";
    format-disconnected = "";
    format-wifi = "({signalStrength}%) ";
  };

  mpris = {
    format = "{dynamic}";
    dynamic-order = ["title" "album" "artist" "position" "length"];
  };

  tray = {
    spacing = 2;
  };

  "hyprland/workspaces" = {
    active-only = false;
    format = "{icon}";
    format-icons = {
      active = "";
      default = "";
    };
  };

}
  ];

  programs.waybar.style = lib.mkAfter ''
    * {
      font-family: "Roboto";
      font-size: 17px;
      border-radius: 10px;
    }

    window#waybar {
      margin: 0 4px;
    }

    #network {
      padding-left: 4px;
      padding-right: 2px;
    }

    #tray {
      margin-right: 5px;
      margin-left: 5px;
    }

    #cava {
      margin-left: 5px;
    }
    
    #mpris {
      padding: 0 5px;
      margin-left: 5px;
      margin-right: 5px;
    }

    .modules-left {
      background: @base02;
      box-shadow: 0px 0px 5px 0px #101010;
    }

    .modules-center {
      background: @base02;
      box-shadow: 0px 0px 5px 0px #101010;
    }

    .modules-right {
      background: @base02;
      box-shadow: 0px 0px 5px 0px #101010;
    }


    window > box {
      background-color: transparent;
      margin-top: 5px;
      margin-bottom: 5px;
      margin-left: 5px;
      margin-right: 5px;
    }

    #pulseaudio-slider slider {
      min-height: 0px;
      min-width: 0px;

    }

    #pulseaudio-slider trough {
      min-width: 60px;
      border-radius: 10px;
      background-color: @base0D
    }

    #pulseaudio-slider highlight {
      background-color: @base0C;
    }
  '';
}