{ config, ... }:

{

  programs.waybar.style = "

    /* 
    * Catppuccin Mocha theme from Github
    * Maintainer: rubyowo
    */
    @define-color rosewater #f5e0dc;
    @define-color flamingo #f2cdcd;
    @define-color pink #f5c2e7;
    @define-color mauve #cba6f7;
    @define-color red #f38ba8;
    @define-color maroon #eba0ac;
    @define-color peach #fab387;
    @define-color yellow #f9e2af;
    @define-color green #a6e3a1;
    @define-color teal #94e2d5;
    @define-color sky #89dceb;
    @define-color sapphire #74c7ec;
    @define-color blue #89b4fa;
    @define-color lavender #b4befe;
    @define-color text #cdd6f4;
    @define-color subtext1 #bac2de;
    @define-color subtext0 #a6adc8;
    @define-color overlay2 #9399b2;
    @define-color overlay1 #7f849c;
    @define-color overlay0 #6c7086;
    @define-color surface2 #585b70;
    @define-color surface1 #45475a;
    @define-color surface0 #313244;
    @define-color base #1e1e2e;
    @define-color mantle #181825;
    @define-color crust #11111b;

    * {
    /* `otf-font-awesome` is required to be installed for icons */
    font-family: JetBrainsMono Nerd Font;
    font-size: 15px;
    }

    window#waybar {
      color: @text;
      background-color: transparent;
      transition-property: background-color;
      transition-duration: .7s;
    }

    window#waybar.hidden {
      opacity: 0;
    }

    #workspaces {
      color: @subtext0;
      background-color: @surface0;
      border-radius: 1rem;
      margin: 0.3rem;
      padding: 0.3rem;
    }

    #workspaces:hover {
      color: @subtext0;
      background-color: @surface0;
      border-radius: 1rem;
      margin: 0.3rem;
      padding: 0.3rem;
    }

    #workspaces button {
      color: @subtext0;
      background-color: @surface0;
      border-radius: 2rem;
      margin: 0;
      padding: 0.25rem;
      transition: color 0.5s, background-color 0.5s;
    }

    #workspaces button:hover {
      color: @subtext1;
      background: @surface1;
      box-shadow: none;
      text-shadow: none;
      border: none;
      border-radius: 2rem;
      margin: 0;
      padding: 0.25rem;
    }

    #workspaces button.focused, #workspaces button.active {
      color: @subtext1;
      background-color: @surface1;
    }

    #window {
      color: @subtext0;
      background-color: @surface0;
      border-radius: 1rem;
      margin: 0.3rem 0 0.3rem 0;
      padding: 0 0.5rem 0 0.5rem;
    }

    #custom-nixicon,
    #clock,
    #privacy,
    #network,
    #wireplumber,
    #cpu,
    #memory,
    #disk,
    #temperature,
    #backlight,
    #battery,
    #custom-dunst,
    #tray,
    #custom-power {
      color: @subtext0;
      background-color: @surface0;
      margin: 0.3rem 0.1rem 0.3rem 0.1rem;
      padding: 0.3rem 1rem 0.3rem 1rem;
      border-radius: 1rem; 
    }

    /* If workspaces is the leftmost module, omit left margin */
    .modules-left > widget:first-child > #workspaces {
      margin-left: 0.5rem;
    }

    /* If workspaces is the rightmost module, omit right margin */
    .modules-right > widget:last-child > #workspaces {
       margin-right: 0.5rem;
    }

    #custom-nixicon {
    margin: 0.3rem 0 0.3rem 0.5rem;
    padding: 0 0.5rem 0 0.5rem;
    }

    #clock {
      padding: 0.3rem;
    }

    #custom-dunst {
      padding-right: 1.4rem;
    }

    #custom-power {
      margin-right: 0.5rem;
      padding-right: 1.2rem;
      }
    ";
}