// Variables for colors and fonts
$foreground: #4C5945;
$background: #3F4638;
$pressed: #4C5844;
$highlight: #C4B550;
$border-light: #808080;
$border-dark: #232D19;
$text-color: #F5F5F5;

$font: "Taxon Medium", sans-serif;
$bold-font: "Taxon Bold", sans-serif;

* {
  font-size: 14px;
  border-radius: 0;
}

window#waybar {
  /* `otf-font-awesome` is required to be installed for icons */
  font-family: FontAwesome, monospace;
  background-color: $foreground;
  color: $text-color;
  transition-property: background-color;
  transition-duration: .5s;
  border-top: 2px solid $border-light;
  border-left: 2px solid $border-light;
  border-bottom: 2px solid $border-dark;
  border-right: 2px solid $border-dark;
}

window#waybar.hidden {
  opacity: 0.2;
}

window#waybar.empty #window {
  background-color: $foreground;
}

/*
window#waybar.empty {
  background-color: transparent;
}
window#waybar.solo {
  background-color: #FFFFFF;
}
*/

.modules-right {
  background: $background;
  margin: 5px 10px 5px 0;
}
.modules-center {
  background: $foreground;
  margin: 5px 0 5px 0;
}
.modules-left {
  background: $background;
  margin: 5px 0 5px 10px;
}

button {
  /* Use box-shadow instead of border so the text isn't offset */
  /* box-shadow: inset 0 -3px transparent; */
  border: none;
}

/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
/*
button:hover {
  background: inherit;
  box-shadow: inset 0 -3px $foreground;
} */

#workspaces {
  background: $foreground;
}

#workspaces button {
  padding: 0 5px;
  font-family: $bold-font;
  background: $foreground;
  color: $text-color;
  border-top: 2px solid $border-light;
  border-left: 2px solid $border-light;
  border-bottom: 2px solid $border-dark;
  border-right: 2px solid $border-dark;
  border-radius: 0;
  margin-right: 5px;
  transition: all 0s ease;
}

#workspaces button:last-child {
  margin-right: 0;
}
#workspaces button:hover {
  box-shadow: inherit;
  text-shadow: inherit;
  color: $highlight;
  background: $foreground;
}

#workspaces button.active {
  background: $pressed;
  color: $highlight;
  border-top: 2px solid $border-dark;
  border-left: 2px solid $border-dark;
  border-bottom: 2px solid $border-light;
  border-right: 2px solid $border-light;
}

#workspaces button.urgent {
  background: $border-dark;
}

#cpu {
  padding: 0 10px;
  color: $highlight;
  border-top: 2px solid $border-dark;
  border-left: 2px solid $border-dark;
  border-bottom: 2px solid $border-light;
  border-right: 2px solid $border-light;
}

#idle_inhibitor,
#cava,
#scratchpad,
#mode,
#window,
#memory,
#clock,
#battery,
#backlight,
#wireplumber,
#pulseaudio,
#tray,
#mpris,
#load {
  padding: 0 10px;
  background-color: $background;
  color: $text-color;
  border-top: 2px solid $border-dark;
  border-left: 2px solid $border-dark;
  border-bottom: 2px solid $border-light;
  border-right: 2px solid $border-light;
}