{pkgs, config, ...}: let
  colors = config.lib.stylix.colors;
in {
  home.packages = with pkgs; [
    waybar
  ];

  xdg.configFile."waybar/config".text = builtins.toJSON {
    layer = "top";
    position = "top";
    height = 34;
    spacing = 8;
    margin-top = 8;
    margin-left = 8;
    margin-right = 8;
    "modules-left" = [
      "hyprland/workspaces"
    ];
    "modules-center" = [
      "hyprland/window"
    ];
    "modules-right" = [
      "tray"
      "network"
      "pulseaudio"
      "clock"
    ];

    "hyprland/workspaces" = {
      format = "{name}";
      "disable-scroll" = true;
      "all-outputs" = true;
      "on-click" = "activate";
    };

    "hyprland/window" = {
      format = "{}";
      "max-length" = 80;
      "separate-outputs" = true;
    };

    tray = {
      "icon-size" = 18;
      spacing = 10;
    };

    network = {
      format-wifi = "󰖩 {signalStrength}%";
      format-ethernet = "󰈀 {ifname}";
      format-linked = "󰈀 {ifname}";
      format-disconnected = "󰖪 Disconnected";
      tooltip-format = "{ifname} via {gwaddr}";
    };

    pulseaudio = {
      format = "󰕾 {volume}%";
      format-muted = "󰖁 Muted";
      tooltip = true;
    };

    clock = {
      format = " {:%H:%M}";
      tooltip-format = "<big>{:%A, %B %d, %Y}</big>";
    };
  };

  xdg.configFile."waybar/style.css".text = ''
    * {
      border: none;
      border-radius: 0;
      min-height: 0;
      font-family: "${config.stylix.fonts.sansSerif.name}", "${config.stylix.fonts.monospace.name}", sans-serif;
      font-size: 13px;
    }

    window#waybar {
      background: #${colors.base00}E6;
      color: #${colors.base05};
    }

    #waybar {
      background: transparent;
    }

    #workspaces,
    #window,
    #tray,
    #network,
    #pulseaudio,
    #clock {
      margin: 8px 0;
      padding: 0 12px;
      border-radius: ${toString config.theme.bar-rounding}px;
      background: #${colors.base01}E6;
      border: 1px solid #${colors.base02};
    }

    #workspaces button {
      padding: 0 10px;
      margin: 0 2px;
      border-radius: ${toString config.theme.bar-rounding}px;
      color: #${colors.base05};
      background: transparent;
    }

    #workspaces button.active {
      background: #${colors.base0D};
      color: #${colors.base00};
    }

    #workspaces button:hover {
      background: #${colors.base02};
    }

    #window {
      min-width: 180px;
    }

    #network.disconnected,
    #pulseaudio.muted {
      color: #${colors.base08};
    }
  '';

  wayland.windowManager.hyprland.settings.exec-once = [
    "waybar"
  ];
}