@import url("mocha.css");

@define-color background rgba(17,17,27,0.8);

* {
    font-family: JetBrainsMono Nerd Font;
    font-size: 14px;
}

#waybar {
  color: @text;
  background-color: rgba(0,0,0,0);
}


.modules-left 
{
  background-color: @background;
  padding-right: 0.5em;

  border-radius: 0px 0px 5px 0px;

  border-style: hidden solid solid hidden;
  border-width: 2px;
  border-color: @surface2;
}

#workspaces button {
  background-color: @crust;
  padding: 0px;
  margin: 0px;
  padding-right: 4px;
  color: @blue;
}

#workspaces button.active {
  color: @mauve;
}

#window {
  font-weight: 500;
  color: @mauve;
  min-width: 300px;
}

.modules-center {
  padding-left: 0.8em;
  padding-right: 0.8em;

  background-color: @crust;
  border-radius: 0px 0px 5px 5px;

  border-style: hidden solid solid solid;
  border-width: 2px;
  border-color: @surface2;
}

.modules-center .module {
  min-width: 50px;
}

#custom-gpu {
  color: @mauve;
}

#cpu {
  color: @red;
}

#memory {
  color: @peach;
}

#disk {
  color: @yellow;
}

#network.down {
  color: @green;
  min-width: 80px;
}

#network.up {
  color: @sapphire;
  min-width: 80px;
}

.modules-right {
  background-color: @crust;
  padding-left: 0.5em;
  padding-right: 0.5em;

  border-radius: 0px 0px 0px 5px;

  border-style: hidden hidden solid solid;
  border-width: 2px;
  border-color: @surface2;
}

#pulseaudio {
  color: @blue;
}

#tray {
  padding-left: 0.5em;
  padding-right: 0.5em;
  background-color: @base;
  border-radius: 5px;
}

#custom-notification {
  color: @maroon;
  padding-right: 0.5em;
}

#custom-lock {
  color: @lavender;
  padding-right: 0.5em;
}


#clock {
  font-weight: 500;
  padding-right: 0.5em;
  color: @teal;
}