* {
  font-family: JetBrains Mono;
  font-size: 11px;
}

@define-color base #24273a;
@define-color surface-1 #494d64;
@define-color surface-2 #5b6078;
@define-color overlay-1 #8087a2;
@define-color text #cad3f5;
@define-color red #ed8796;
@define-color blue #8aadf4;
@define-color maroon #ee99a0;
@define-color teal #8bd5ca;
@define-color lavender #b7bdf8;
@define-color pink #f5bde6;
@define-color flamingo #f0c6c6;
@define-color rosewater #f4dbd6;
@define-color mauve #c6a0f6;

window#waybar {
  background: @base;
  color: @text;
}

window#waybar.hidden {
  opacity: 0.2;
}

button {
  border: none;
  border-radius: 0;
}

#cpu,
#memory,
#network,
#pulseaudio {
  padding: 0px 8px;
  background: transparent;
  color: @text;
}

#workspaces button,
#language,
#custom-swaync,
#backlight,
#bluetooth,
#battery {
  color: @base;
}

#mode,
#language,
#custom-swaync,
#clock,
#custom-weather,
#tray,
#backlight,
#battery,
#mpris {
  border-radius: 6px;
}

#workspaces button {
  margin: 0 6px;
  padding: 0px;
  min-width: 28px;
  background: @surface-1;
}
#workspaces button:first-child {
  margin: 6px 6px 0;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
#workspaces button:last-child {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
#workspaces button:hover,
#mode:hover,
#custom-swaync:hover,
#network:hover,
#pulseaudio:hover,
#bluetooth:hover,
#tray:hover,
#mpris:hover {
  background: @surface-2;
}
#workspaces button.focused {
  color: @blue;
}
#workspaces button.urgent {
  background: @red;
}

#mode {
  margin: 6px 6px 0px;
  padding: 8px 0;
  border-color: @red;
  background: @surface-1;
}

#language:hover { background: @pink; }
#custom-swaync:hover { background: @flamingo; }
#backlight:hover { background: @mauve; }

#language,
#custom-swaync,
#battery,
#custom-weather,
#clock, #workspaces button { font-weight: bold; }

#clock {
  margin: 6px 6px 0px;
  padding: 8px 0;
  background: @surface-1;
  color: @text;
}

#custom-weather {
  margin: 6px 6px 0px;
  padding: 8px 0;
  background: @overlay-1;
  color: @base;
}

#network.disconnected,
#pulseaudio.muted { color: @red; }

#tray {
  margin: 0 6px;
  padding: 8px 0;
  box-shadow: none;
  background: @surface-1;
}
#tray > .needs-attention {
  -gtk-icon-effect: highlight;
  background: @red;
}

#bluetooth {
  margin: 0px 6px 0px;
  padding: 8px 0;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  background: @surface-1;
  color: @blue;
}
#bluetooth.disabled { background: @red; }

#mpris { margin: 0px 6px; }

#backlight {
  margin: 6px 6px 0px;
  padding: 8px 0;
  background: @lavender;
}

#battery {
  margin: 6px 6px 0px;
  padding: 8px 0;
  background: @teal;
  color: @base;
}

#pulseaudio {
  margin: 0 6px;
  padding: 8px 0;
  background: @surface-1;
  color: @rosewater;
}

#network {
  margin: 6px 6px 0px;
  padding: 8px 0;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  background: @surface-1;
  color: @mauve;
}

#language {
  margin: 6px 6px;
  padding: 8px 0;
  background: @mauve;
}

#custom-swaync {
  margin: 6px 6px 0px;
  padding: 8px 0;
  min-width: 14px;
  background: @pink;
}

