/* catppuccin mocha variables */

$rosewater:   #f5e0dc;
$flamingo:    #f2cdcd;
$pink:        #f5c2e7;
$mauve:       #cba6f7;
$red:         #f38ba8;
$maroon:      #eba0ac;
$peach:       #fab387;
$yellow:      #f9e2af;
$green:       #a6e3a1;
$teal:        #94e2d5;
$sky:         #89dceb;
$sapphire:    #74c7ec;
$blue:        #89b4fa;
$lavender:    #b4befe;

$text:        #cdd6f4;
$subtext1:    #bac2de;
$subtext0:    #a6adc8;
$overlay2:    #9399b2;
$overlay1:    #7f849c;
$overlay0:    #6c7086;

$surface2:    #585b70;
$surface1:    #45475a;
$surface0:    #313244;

$base:        #1e1e2e;
$mantle:      #181825;
$crust:       #11111b;

/* init main bar config */

* {
  all: unset;
  font-family: FontAwesome, JetBrainsMono Nerd Font;
  font-size: 13px;
  font-weight: bold;
  color: $text;
}

window#waybar {
  background-color: transparent;
}

#user,
#workspaces,
#window,
#cpu,
#memory,
#clock,
#tray,
#custom-wlogout {
  border-radius: 8px;
  background: $base;
  padding: 0.5rem;
}

tooltip {
  background-color: transparent;
  border: none;
}

tooltip label {
  color: $text;
  background-color: $base;
  padding: 0.5rem;
  border-radius: 8px;
  border: 3px solid $overlay1;
}

image {
  background: $base;
  border-radius: 8px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

#user {
  border: 3px solid $pink;
}

/* workspaces */

#workspaces {
  button {
    min-width: 28px;
  }
  button.active {
    border-bottom: 1px solid $red;
  }
  border: 3px solid $red;
}

/* end workspaces */

#window {
  border-radius: 16px;
  border: 3px solid $peach;
}

#cpu {
  border: 3px solid $red;
}

#memory {
  border: 3px solid $mauve;
}

#clock {
  border: 3px solid $maroon;
}

/* tray */

#tray {
  border: 3px solid $overlay1;
  menu {
    background: $base;
    border-radius: 8px;
    border: 3px solid $overlay1;
    padding: 1.0rem;
  }
}

#tray.passive {
  border-bottom: 2px solid $base;
}

#tray.active {
  border-bottom: 2px solid $green;
}

#tray.needs-attention {
  border-bottom: 2px solid $red;
}

/* end tray */

/* custom modules */

#custom-wlogout {
  padding-left: 0.9rem;
  padding-right: 0.9rem;
}