import "frappe.css";
* {
  font-family: FantasqueSansMono Nerd Font;
  border: none;
  box-shadow: none;
  font-size: 1.25rem;
}

#waybar {
  background: u/base;
}

#custom-fuzzel,
#clock,
#workspaces,
#custom-leave,
#mpris,
#battery,
#pulseaudio,
#backlight,
#cpu,
#memory,
#network,
#taskbar,
#temperature {
  background-color: u/surface0;
  border-radius: 0.25rem;
}

#custom-fuzzel,
#pulseaudio,
#battery,
#backlight,
#cpu,
#memory,
#workspaces,
#network,
#taskbar,
#temperature {
  margin-right: 0.375rem;
}

#clock,
#mpris,
#battery,
#pulseaudio,
#backlight,
#cpu,
#memory,
#network,
#taskbar,
#temperature {
  padding: 0.5rem;
}

#custom-fuzzel,
#custom-leave {
  color: u/crust;
  min-width: 3rem;
}

#custom-fuzzel:hover,
#custom-leave:hover {
  transition: all 0.3s ease-in;
  opacity: 0.7;
}

#workspaces button {
  color: u/lavender;
}

#workspaces button.active {
  color: u/sky;
}

#workspaces button:hover {
  color: u/sapphire;
  background: inherit;
  transition: all 0.3s ease-in;
}

#clock {
  color: u/text;
}

#mpris {
  color: u/mauve;
}

#battery {
  color: u/green;
}

#battery.warning:not(.charing) {
  color: u/peach;
}

u/keyframes blink {
  to {
    color: #000000;
  }
}

/* Using steps() instead of linear as a timing function to limit cpu usage */
#battery.critical:not(.charging),
#temperature.critical {
  color: u/red;
  animation-name: blink;
  animation-duration: 1s;
  animation-timing-function: steps(12);
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

#pulseaudio {
  color: u/maroon;
}

#backlight {
  color: u/yellow;
}

#cpu {
  color: u/rosewater;
}

#memory {
  color: u/teal;
}

#network {
  color: u/blue;
}

#temperature {
  color: u/pink;
}

#taskbar.empty {
  background: none;
}

#taskbar * {
  background: inherit;
  outline: none;
  border: none;
  box-shadow: none;
}

#taskbar button:not(:last-child) {
  border-right: 2px solid u/crust;
}