1{{- if eq .theme_variant "light" }}
  2@import "latte.css";
  3{{- else if eq .theme_variant "dark" }}
  4@import "macchiato.css";
  5{{- end }}
  6
  7* {
  8  font-family: "JetBrainsMono NF", "Berkely Mono";
  9  font-size: 13px;
 10}
 11
 12window#waybar {
 13  background-color: @base;
 14  color: @text;
 15  transition-property: background-color;
 16  transition-duration: 0.5s;
 17}
 18
 19window#waybar.hidden {
 20  opacity: 0.2;
 21}
 22
 23button {
 24  /* Use box-shadow instead of border so the text isn't offset */
 25  box-shadow: inset 0 -3px transparent;
 26  border-radius: 0;
 27}
 28
 29#workspaces button {
 30  padding: 0 5px;
 31  background-color: @surface0;
 32  margin: 5px 0;
 33  color: @text;
 34}
 35
 36#workspaces button:hover {
 37  background: shade(@base, 0.8);
 38}
 39
 40#workspaces button.active {
 41  background-color: @overlay0;
 42}
 43
 44#workspaces button.urgent {
 45  background-color: @red;
 46  color: @base;
 47}
 48
 49#workspaces button:first-child {
 50  border-radius: 12px 0 0 12px;
 51}
 52
 53#workspaces button:last-child {
 54  border-radius: 0 12px 12px 0;
 55}
 56
 57#clock,
 58#battery,
 59#cpu,
 60#custom-beats,
 61#custom-pending-updates,
 62#memory,
 63#disk,
 64#temperature,
 65#backlight,
 66#network,
 67#pulseaudio,
 68#wireplumber,
 69#custom-media,
 70#tray,
 71#mode,
 72#idle_inhibitor,
 73#scratchpad,
 74#mpd {
 75  border-radius: 12px;
 76  padding: 3px 13px 3px 8px;
 77  margin: 5px 0;
 78  color: @text;
 79  background-color: @surface0;
 80}
 81
 82#window,
 83#workspaces {
 84  margin: 0 4px;
 85}
 86
 87@keyframes blink {
 88  to {
 89    background-color: @base;
 90  }
 91}
 92
 93#battery.critical:not(.charging) {
 94  background-color: @red;
 95  color: @base;
 96  animation-name: blink;
 97  animation-duration: 0.5s;
 98  animation-timing-function: linear;
 99  animation-iteration-count: infinite;
100  animation-direction: alternate;
101}
102
103#network.disconnected {
104  background-color: @red;
105  color: @base;
106}
107
108#temperature.critical {
109  background-color: @red;
110  color: @base;
111}
112
113#tray {
114  padding-right: 9px;
115}
116
117#tray > .passive {
118  -gtk-icon-effect: dim;
119}
120
121#tray > .needs-attention {
122  -gtk-icon-effect: highlight;
123  background-color: @red;
124  color: @base;
125}
126
127#idle_inhibitor.activated {
128  background-color: @pink;
129  color: @base;
130}