@import "../../../.config/hypr-theme/waybar/global.css";

* {
  border: none;
  border-radius: 4px;
  font-family: Roboto;
  font-size: 10px;
  font-weight: bold;
  color: #fff;
  min-height: 0;
}

window {
  border-radius: 0;
  background-color: @backgrounddark;
}

window>box {
  min-height: 30px;
  padding: 5px 4px;
}

#clock,
#battery,
#cpu,
#custom-gpu-usage,
#memory,
#disk,
#temperature,
#backlight,
#network,
#pulseaudio,
#custom-media,
#custom-launcher,
#custom-power,
#taskbar,
#wireplumber,
#language,
#workspaces,
#tray {
  background-color: @backgrounddark;
  border: #272727 1px solid;
  padding: 0px 6px;
}

#workspaces,
#tray {
  padding: 0px 10px;
}

#tray menu * {
  all: unset;
}

#tray menu {
  background-color: @backgrounddark;
}

#tray menu menuitem {
  border-radius: 4px;
  padding: 6px;
}

#tray menu separator {
  min-height: 1px;
  margin: 6px 0px;
  background: @workspacesbackground2;
}

#tray menu menuitem:hover {
  background-color: #f53c3c;
}

#workspaces * {
  font-size: 12px;
}

#workspaces button {
  all: unset;
  opacity: 0.2;
  padding: 0px 6px;
  transition: all 0.4s cubic-bezier(0.55, -0.68, 0.48, 1.682);
}

#workspaces button:first-child {
  padding-left: 0px;
}

#workspaces button:last-child {
  padding-right: 0px;
}

#workspaces button.active {
  opacity: 1;
}

#workspaces button:hover {
  opacity: 1;
  background-color: @backgrounddark;

}

#taskbar button {
  opacity: 0.2;
}

#taskbar button.active {
  opacity: 1;
}

#battery.charging,
#battery.plugged {
  background-color: #26a65b;
}

#battery.critical:not(.charging) {
  background-color: #f53c3c;
  animation-name: blink;
  animation-duration: 0.5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

#backlight {
  background-color: #90b1b1;
}

#custom-power {
  font-size: 18px;
  min-width: 20px;
}

#custom-launcher {
  font-size: 18px;
}

#network {
  min-width: 160px;
}

#network.network-2 {
  min-width: 170px;

}

#network.disconnected {
  color: red;
}

#language,
#clock,
#wireplumber,
#pulseaudio,
#cpu,
#custom-gpu-usage {
  min-width: 65px;
}

#memory {
  min-width: 85px;
}

#wireplumber.muted {
  color: red;
}