* {
    /* `otf-font-awesome` is required to be installed for icons */
    font-family: FontAwesome, Roboto, Helvetica, Arial, sans-serif;
    font-size: 13px;
}

#pulseaudio-slider {
  min-width: 250px;
}

@define-color base   #1e1e2e;
@define-color mantle #181825;
@define-color crust  #11111b;

@define-color text     #cdd6f4;
@define-color text2     #47495c;
@define-color subtext0 #a6adc8;
@define-color subtext1 #bac2de;

@define-color surface0 #313244;
@define-color surface1 #45475a;
@define-color surface2 #585b70;
@define-color surface3 #787b90;
@define-color surface4 #989bB0;

@define-color overlay0 #6c7086;
@define-color overlay1 #7f849c;
@define-color overlay2 #9399b2;

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

* {
  /* font-family: FantasqueSansMono Nerd Font; */
  /* Annoyingly I dont think GTK CSS "cascades", so this
  will get applied to everything as expected, but not if
  you put it under #waybar */
  font-size: 16px;
  /* min-height: 0; */
}

/*Apparently this one doesn't apply padding*/
#waybar {
  background: transparent;
  color: @text;
  /* border-bottom: 1px white solid; */
  background-image: linear-gradient(
    to top,
    @surface0 0%,
    @surface0 70%,
    @surface4 100%
  );
}

#workspaces {
  /* border-radius: 1rem; */
  /* margin: 5px; */
  margin-left: 1rem;
}

/* Non-buttons but just information */
#custom-music,
#tray,
#backlight,
#clock,
#battery,
#pulseaudio,
#custom-lock,
#custom-power,
#cpu,
#memory,
#pulseaudio-slider,
#network {
  padding: 0.5rem 1rem;
  margin: 5px 0;
}

/* Button-like, have interactions (like hover, etc) */
#workspaces button,
.niri-window-buttons button {
  /* border-radius: 1rem; */
  padding: 0;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 7px;
  padding-bottom: 2px;
  margin: 0;
  margin-left: 3px;
  margin-right: 3px;
  min-width: 35px;
  min-height: 30px;
  border-radius: 0;
  border: 0px transparent solid;
  border-bottom: 2px @text solid;
  background-color: rgba(100%,100%,100%,0.0); /*;transparent;*/
  transition: all 200ms ease;
  color: @text;
  
  /* border-left-color: #FFF; */
  /* border-right-color: #FFF; */
  /* border-left-width: 1px; */
  /* border-right-width: 1px; */
}

/** Annoyingly, this does not work without targeting the label!*/
#workspaces button label {
  font-size: 20px;
}

/* Button-like :hover
* Annoyingly, some things need to be respecified due to the base styles
* (I think only niri-window-buttons)
*/
#workspaces button:hover,
.niri-window-buttons button:hover {
  background: linear-gradient(0deg, rgba(100%,100%,100%,0.35), rgba(100%,100%,100%,0.0));
  border: 0px transparent solid;
  border-bottom: 2px #FFF solid;
  /* border-radius: 1rem; */
  border-radius: 0;
  color: #FFF;
}

/* Button-like .active */
#workspaces button.active,
.niri-window-buttons button.focused {
  /* border-radius: 1rem; */
  background-color: rgba(100%,100%,100%,0.35);
  border-radius: 0;
  padding-bottom: 0px;
  border-bottom: 5px #CCF solid;
  color: #FFF;
}

/* Button-like 2, has a rounded thing around it instead of border underneat */
#pulseaudio,
#custom-power {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0;
  padding-bottom: 0;
  margin: 5px;
  margin-right: 10px;
  border-radius: 10px;
  /* border: 0px t solid; */
  background-color: @surface0;
  border: 1px @surface1 solid;
  transition: all 200ms ease;
  color: @text;
}

#pulseaudio:hover,
#custom-power:hover {
  background-color: @surface2; /*;transparent;*/
  border: 1px @surface3 solid;
}

/* #custom-music, */
/* #tray, */
/* #backlight, */
/* #clock, */
/* #battery, */
/* #pulseaudio, */
/* #custom-lock, */
/* #custom-power, */
/* #cpu, */
/* #memory, */
/* #pulseaudio-slider, */
/* #network { */
/*   background-color: #F00; */
/*   padding: 0.5rem 1rem; */
/*   margin: 5px 0; */
/* } */
/*  */
/* #clock { */
/*   color: @blue; */
/*   border-radius: 0px 1rem 1rem 0px; */
/*   margin-right: 1rem; */
/* } */
/*  */
/* #battery { */
/*   color: @green; */
/* } */
/*  */
/* #battery.charging { */
/*   color: @green; */
/* } */
/*  */
/* #battery.warning:not(.charging) { */
/*   color: @red; */
/* } */
/*  */
/* #backlight { */
/*   color: @yellow; */
/* } */
/*  */
/* #backlight, #battery { */
/*     border-radius: 0; */
/* } */
/*  */
/* #pulseaudio { */
/*   color: @maroon; */
/*   border-radius: 1rem 0px 0px 1rem; */
/*   margin-left: 1rem; */
/* } */
/*  */
/* #custom-music { */
/*   color: @mauve; */
/*   border-radius: 1rem; */
/* } */
/*  */
/* #custom-lock { */
/*     border-radius: 1rem 0px 0px 1rem; */
/*     color: @lavender; */
/* } */
/*  */
/* #custom-power { */
/*     margin-right: 1rem; */
/*     border-radius: 0px 1rem 1rem 0px; */
/*     color: @red; */
/* } */
/*  */
/* #tray { */
/*   margin-right: 1rem; */
/*   border-radius: 1rem; */
/* } */