{

  xdg.configFile."waybar/config".text = /* json */ ''
{
    "layer": "top",
    "position": "top",
    "height": 20,
    "exclusive": true,
    "passthrough": false,
    "gtk-layer-shell": true,
    "modules-left": [
        "temperature",
        "cpu",
        "memory"
    ],
    "modules-center": ["hyprland/window"],
    "modules-right": [
        "battery",
        "clock"
    ],

    "hyprland/window": {
        "format": "{}"
    },
    "clock": {
      "format": "{:%H:%M}",
      "format-alt": "{:%b %d %Y}",
      "tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>",
    },
    "cpu": {
      "interval": 10,
      "format": "  {}%",
      "max-length": 10,
      "on-click": "",
    },
    "memory": {
        "interval": 30,
        "format": " {}%",
        "format-alt":" {used:0.1f}GB",
        "max-length": 10,
    },
    "temperature": {
        "interval": 10,
        "format": " {temperatureC}°C",
        "format-alt":"temprature",
        "max-length": 10,
    },
    "battery": {
      "bat": "BAT0",
      "adapter": "ADP0",
      "interval": 60,
      "states": {
          "warning": 30,
          "critical": 15
      },
      "max-length": 20,
      "format": "{icon}",
      "format-warning": "{icon}",
      "format-critical": "{icon}",
      "format-charging": "<span font-family='Font Awesome 6 Free'></span>",
      "format-plugged": "󰚥", 
      "format-notcharging": "󰚥",
      "format-alt": "{icon}<small> {time}</small>",
      "format-full": "󰂄", 
      "format-icons": ["󱊡", "󱊢", "󱊣"]
    },
}
  '';
  xdg.configFile."waybar/style.css".text = /* css */ ''
* {
  /* `otf-font-awesome` is required to be installed for icons */
  font-family: Material Design Icons, JetBrainsMono Nerd Font, Iosevka Nerd Font;
  font-size: 12px;
  border: none;
  border-radius: 0;
  min-height: 0;
}

window#waybar {
  background-color: rgba(26, 27, 38, 0.5);
  color: #ffffff;
  transition-property: background-color;
  transition-duration: 0.5s;
}

window#waybar.hidden {
  opacity: 0.1;
}

#window {
  color: #64727d;
}

#clock,
#temperature,
#mpris, 
#cpu,
#memory {
  color: #e5e5e5;
  border-radius: 6px;
  padding: 2px 10px;
  background-color: #252733;
  border-radius: 8px;
  font-size: 16px;

  margin-left: 4px;
  margin-right: 4px;

  margin-top: 8.5px;
  margin-bottom: 8.5px;
}
#temperature{
  color: #7a95c9;
}
#cpu {
  color: #fb958b;
}

#memory {
  color: #a1c999;
}

#battery {
  background-color: #252733;
  padding: 0em 2em;

  font-size: 14px;

  padding-left: 7.5px;
  padding-right: 7.5px;

  padding-top: 3px;
  padding-bottom: 3px;

  margin-top: 7px;
  margin-bottom: 7px;
  
  font-size: 20px;
}

#battery {
  color: #8fbcbb;
  border-radius: 0px 8px 8px 0px;
  padding-right: 2px;
  font-size: 16px;
}

#battery.critical,
#battery.warning,
#battery.full,
#battery.plugged {
  color: #8fbcbb;
  padding-left: 6px;
  padding-right: 12px;
  font-size: 16px;
}

#battery.charging { 
  font-size: 18px;
  padding-right: 13px;
  padding-left: 4px;
}

#battery.full,
#battery.plugged {
  font-size: 22.5px;
  padding-right: 10px;
}

@keyframes blink {
  to {
    background-color: rgba(30, 34, 42, 0.5);
    color: #abb2bf;
  }
}

#battery.warning {
  color: #ecd3a0;
}

#battery.critical:not(.charging) {
  color: #fb958b;
}

#clock {
  color: #8a909e;
  font-weight: bold;
  margin-top: 7px;
  margin-bottom: 7px;
}

tooltip {
  font-family: Iosevka Nerd Font;
  border-radius: 15px;
  padding: 15px;
  background-color: #1f232b;
}

tooltip label {
  font-family: Iosevka Nerd Font;
  padding: 5px;
}

label:focus {
  background-color: #1f232b;
}

#custom-wallpaper {
  color: #dbd9d8;
  padding-right: 5;
  padding-left: 0;
}

  '';
}