$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;

@mixin module-spacing {
  padding: 0 0.5rem 0 0.5rem;
}

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

window#waybar {
  background-color: $base;
}

#tags {
  button {
    padding: 0.5rem;
  }
  button.focused {
    border-radius: 3px;
    border: 1px solid;
    border-color: $red;
  }
  button.urgent {
    border-radius: 3px;
    background-color: $red;
  }
}

#cpu,
#memory,
#clock,
#battery,
#tray {
  @include module-spacing;
}