@import "theme.css";

/* ───────────────────────────────────────────────────────────────┤ global ├───
*/
* {
  min-height: 0;
  border: none;
  margin: 0;
  padding: 0;
}

/* ──────────────────────────────────────────────────────────┤ drop shadow ├───
*/
window#waybar {
  background: @shadow;
}

/* ───────────────────────────────────────────────────────────┤ background ├───
*/
window#waybar > box {
  background: @main-bg;
  margin: 2px;
}

/* ─────────────────────────────────────────────────────────────┤ tooltips ├───
*/
tooltip {
  background: @main-bg;
  border: 1.5px solid @main-br;
  border-radius: 8px;
}

tooltip label {
  color: @main-fg;
  margin: -1.5px 3px;
}

/* ──────────────────────────────────────────────────────────────┤ general ├───
*/
#custom-ws,
#workspaces,
#window,
#custom-temperature,
#memory,
#cpu,
#idle_inhibitor,
#clock,
#custom-wifi,
#bluetooth,
#custom-update,
#mpris,
#pulseaudio,
#backlight,
#battery,
#custom-power {
  opacity: 1;
  color: @module-fg;
  padding: 0 4px;
}

#custom-left1,
#custom-left2,
#custom-left3,
#custom-left4,
#custom-left5,
#custom-left6,
#custom-left7,
#custom-left8 {
  margin-bottom: 0;
  text-shadow: -2px 0 2px rgba(0, 0, 0, 0.5);
}

#custom-right1,
#custom-right2,
#custom-right3,
#custom-right4,
#custom-right5 {
  margin-bottom: 0;
  padding-right: 3px;
  text-shadow: 2px 0 2px rgba(0, 0, 0, 0.5);
}

/* ──────────────────────────────────────────────────────────┤ window icon ├───
*/
#custom-ws {
  background: @main-bg;
}

#custom-ws:hover {
  color: @hover-fg;
}

/* ───────────────────────────────────────────────────────────┤ workspaces ├───
*/
#custom-left1 {
  color: @workspaces;
  background: @main-bg;
  margin-bottom: 0;
  padding-left: 2px;
}

#workspaces {
  background: @workspaces;
}

#workspaces button {
  color: @module-fg;
  border-radius: 8px;
  box-shadow: none;
  margin: 2px 0;
  padding: 0 2px;
  transition: none;
}

#workspaces button:hover {
  color: @hover-fg;
  background: @hover-bg;
  text-shadow: none;
}

#workspaces button.active {
  color: @active-fg;
  background: @active-bg;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.4);
  margin: 2px;
  padding: 0 6px;
}

#custom-right1 {
  color: @workspaces;
  background: @main-bg;
  text-shadow: 3px 0 2px rgba(0, 0, 0, 0.4);
  margin-bottom: 0;
}

/* ──────────────────────────────────────────────────────────┤ temperature ├───
*/
#custom-paddc {
  padding-right: 22px;
}

#custom-left2 {
  color: @temperature;
  background: @main-bg;
  padding-left: 3px;
}

#custom-temperature {
  background: @temperature;
  padding: 0 0 0 1px;
}

/* ───────────────────────────────────────────────────────────────┤ memory ├───
*/
#custom-left3 {
  color: @memory;
  background: @temperature;
  padding-left: 3px;
}

#memory {
  background: @memory;
  padding: 0 0 0 1px;
}

#memory.warning {
  color: @warning;
}

#memory.critical {
  color: @critical;
}

/* ──────────────────────────────────────────────────────────────────┤ cpu ├───
*/
#custom-left4 {
  color: @cpu;
  background: @memory;
  padding-left: 3px;
}

#cpu {
  background: @cpu;
}

#custom-leftin1 {
  color: @cpu;
  margin-bottom: -1px;
}

/* ──────────────────────────────────────────────────────────┤ distro icon ├───
*/
#custom-left5 {
  color: @distro-bg;
  background: @main-bg;
  text-shadow: none;
  margin-bottom: -2px;
  padding-left: 3px;
}

#custom-distro {
  color: @distro-fg;
  background: @distro-bg;
  margin: 0 -1px -2px 0;
  padding: 0 0 0 3px;
  text-shadow: 0 0 1.5px rgba(0, 0, 0, 1);
}

#custom-right2 {
  color: @distro-bg;
  background: @main-bg;
  text-shadow: none;
  margin-bottom: -2px;
}

/* ─────────────────────────────────────────────────────────────────┤ time ├───
*/
#custom-rightin1 {
  color: @time;
  margin-bottom: -1px;
}

#idle_inhibitor {
  background: @time;
  padding: 0 0 0 7px;
}

#idle_inhibitor:hover {
  color: @hover-fg;
}

#clock.time {
  background: @time;
  margin-left: -2px;
  padding: 0 3px 0 0;
}

#custom-right3 {
  color: @time;
  background: @date;
}

/* ─────────────────────────────────────────────────────────────────┤ date ├───
*/
#clock.date {
  background: @date;
}

#clock.date:hover {
  color: @hover-fg;
}

#custom-right4 {
  color: @date;
  background: @tray;
}

/* ────────────────────────────────────────────────────────────────┤ wi-fi ├───
*/
#custom-wifi {
  background: @tray;
  padding: 0 8px 0 5px;
}

#custom-wifi:hover {
  color: @hover-fg;
}

/* ────────────────────────────────────────────────────────────┤ bluetooth ├───
*/
#bluetooth {
  background: @tray;
  padding-right: 5px;
}

#bluetooth:hover {
  color: @hover-fg;
}

/* ────────────────────────────────────────────────────────┤ system update ├───
*/
#custom-update {
  padding-right: 8px;
  background: @tray;
}

#custom-update:hover {
  color: @hover-fg;
}

#custom-right5 {
  color: @tray;
  background: @main-bg;
}

/* ───────────────────────────────────────────────────────────┤ media info ├───
*/
#mpris {
  background: @main-bg;
  padding: 0 8px 0;
}

#mpris:hover {
  color: @hover-fg;
}

/* ────────────────────────────────────────────────────────┤ output device ├───
*/
#custom-left6 {
  color: @pulseaudio;
  background: @main-bg;
  padding-left: 3px;
}

#pulseaudio {
  background: @pulseaudio;
}

#pulseaudio:hover {
  color: @hover-fg;
}

/* ───────────────────────────────────────────────────────────┤ brightness ├───
*/
#custom-left7 {
  color: @backlight;
  background: @pulseaudio;
  padding-left: 2px;
}

#backlight {
  background: @backlight;
}

/* ──────────────────────────────────────────────────────────────┤ battery ├───
*/
#custom-left8 {
  color: @battery;
  background: @backlight;
  padding-left: 2px;
}

#battery {
  color: @module-fg;
  background: @battery;
}

#battery.warning {
  color: @warning;
}

#battery.critical {
  color: @critical;
}

#battery.charging {
  color: @charging;
}

/* ─────────────────────────────────────────────────────────┤ power button ├───
*/
#custom-leftin2 {
  color: @battery;
  background: @main-bg;
  margin-bottom: -1px;
}

#custom-power {
  color: @main-bg;
  background: @power;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.6);
  border-radius: 10px;
  margin: 2px 4px 2px 0;
  padding: 0 6px 0 9px;
}

#custom-power:hover {
  color: @hover-fg;
  background: @hover-bg;
  text-shadow: none;
  box-shadow: none;
}

/* ───────────────────────────────────────────────────────────┤ font sizes ├───
*/
/*
  NOTE: Be careful when changing font sizes, as they can affect alignment.

  Try adjusting whole numbers first, then refine with decimals.

  If you increase or decrease a value, make the same change to all properties
  in this section to keep the layout consistent.
*/

* {
  font-family: "JetBrainsMono Nerd Font";
  font-size: 13px;
  font-weight: normal;
}

tooltip label,
#window label,
#mpris {
  font-weight: normal;
}

/* ──────────────────────────────────────────────────┤ left & right arrows ├───
*/
#custom-left1,
#custom-left2,
#custom-left3,
#custom-left4,
#custom-left5,
#custom-left6,
#custom-left7,
#custom-left8,
#custom-right1,
#custom-right2,
#custom-right3,
#custom-right4,
#custom-right5 {
  font-size: 16.68px;
}

/* ─────────────────────────────────────────────────┤ left & right inverse ├───
*/
#custom-leftin1,
#custom-leftin2,
#custom-rightin1 {
  font-size: 18.5px;
}

/* ──────────────────────────────────────────────────────────┤ distro icon ├───
*/
#custom-distro {
  font-size: 17.6px;
}

#custom-left5,
#custom-right2 {
  font-size: 18.68px;
}

/*
  Adjust these properties as well to keep the design consistent.
*/

/* ───────────────────────────────────────────────────────────┤ workspaces ├───
*/
#workspaces button {
  border-radius: 8px;
  padding: 0 2px;
}

#workspaces button.active {
  padding: 0 6px;
}

/* ─────────────────────────────────────────────────────────┤ power button ├───
*/
#custom-power {
  border-radius: 10px;
  padding: 0 6px 0 9px;
}