@define-color white      #F2F2F2;
@define-color black      #000203;
@define-color text       #BECBCB;
@define-color lightgray  #686868;
@define-color darkgray   #353535;
@define-color red        #C50F1F;
@define-color orange     #FFC251;
@define-color blue       #00FFB2;
@define-color lightgreen #a6e3a1;
@define-color magenta    #f5c2e7;
@define-color archbtw    #1793d1;
@define-color purple     #881798;

@define-color black-transparent-1 rgba(0, 0, 0, 0.1);
@define-color black-transparent-2 rgba(0, 0, 0, 0.2);
@define-color black-transparent-3 rgba(0, 0, 0, 0.3);
@define-color black-transparent-4 rgba(0, 0, 0, 0.4);
@define-color black-transparent-5 rgba(0, 0, 0, 0.5);
@define-color black-transparent-6 rgba(0, 0, 0, 0.6);
@define-color black-transparent-7 rgba(0, 0, 0, 0.7);
@define-color black-transparent-8 rgba(0, 0, 0, 0.8);
@define-color black-transparent-9 rgba(0, 0, 0, 0.9);
@define-color black-solid         rgba(0, 0, 0, 1.0);

* {
  font-family: Iosevka, Material Design Icons Desktop;
  font-weight: bold;
  font-size: 16px;
  border: none;
  border-radius: 0;
}
/*
* {
    border: none;
    border-radius: 0;
    font-family: Cartograph CF Nerd Font, monospace;
    font-weight: bold;
    font-size: 16px;
    min-height: 0;
}
 */

#window {
  background-color: @black-transparent-4;
  padding: 0px;
  border-radius: 6px;
  border: none;
}

window#waybar {
  background: transparent;
  color: @text;
  border-radius: 7px;
  border: none;
}

window#waybar.empty {
  background-color: transparent;
  padding: 0px;
  border-radius: 0px;
  border: none;
}


tooltip {
  background: @black-transparent-9;
  border: 1px solid @purple;
  border-radius: 7px;
}

tooltip label {
  color: @text;
}

.modules-left {
  background: @black-transparent-8;
  border-radius: 8px;
  border: 2px solid @purple;
  margin-left: 2px;
  margin-right: 2px;
  padding: 2px 4px;
}

.modules-right {
  background: @black-transparent-8;
  border-radius: 8px;
  border: 2px solid @purple;
  margin-left: 2px;
  margin-right: 2px;
  padding: 2px 4px;
}

#tags {
}

#tags button {
  background-color: transparent;
  color: @lightgray;
  padding: 0;
  /* margin: 0; */
  margin-top: 3px;
  margin-bottom: 3px;
  /* margin-left: 1px;
  margin-right: 1px; */
  border-radius: 6px;
  transition: all 0.3s ease;
}

#tags button:hover {
  box-shadow: inherit;
  text-shadow: inherit;
  background: @lightgray;
  border: 1px solid rgba(0, 0, 0, 0.0);
  color: @white;
  transition: all 0.3s ease;
}

#tags button.focused {
  /* background-color: @darkgray; */
  /* border: 1px solid @darkgray; */
  color: @white;
  transition: all 0.3s ease;
  animation: colored-gradient 10s ease infinite;
}

#tags button.urgent {
  background-color: @red;
  color: @black;
  transition: all 0.3s ease;
}



#workspaces {
  /* border: 1px solid #10171b; */
  /* border-radius: 20px; */
  /* margin-top: 0; */
  /* margin-bottom: 0; */
  margin-left: 2px;
  margin-right: 2px;
}

#workspaces button {
  color: @lightgray;
  padding: 0px 3px;
  /* margin: 0; */
  margin-top: 3px;
  margin-bottom: 3px;
  /* margin-left: 1px;
  margin-right: 1px; */
  border-radius: 6px;
  transition: all 0.3s ease;
}

#workspaces button:hover {
  box-shadow: inherit;
  text-shadow: inherit;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.0);
  color: @white;
  transition: all 0.3s ease;
}

#workspaces button.focused,
#workspaces button.active {
  /* background-color: @darkgray; */
  /* border: 1px solid @darkgray; */
  color: @white;
  transition: all 0.3s ease;
  animation: colored-gradient 10s ease infinite;
}

#workspaces button.focused:hover,
#workspaces button.active:hover {
  background-color: @darkgray;
  transition: all 1s ease;
}

#workspaces button.urgent {
  background-color: @red;
  color: @black;
  transition: all 0.3s ease;
}

/* #workspaces button.hidden {} */

#taskbar {
  border-radius: 2px;
  margin-top: 4px;
  margin-bottom: 4px;
  margin-left: 1px;
  margin-right: 1px;
}

#taskbar button { 
  color: @text;
  padding: 4px 8px;
  margin-left: 5px;
  margin-right: 5px;
}

#taskbar button:hover {
  background: transparent;
  border: 1px solid @lightgray;
  border-radius: 8px;
  transition: all 0.3s ease;
  animation: colored-gradient 10s ease infinite;
}

/* #taskbar button.maximized {} */

/* #taskbar button.minimized {} */

#taskbar button.active {
  border: 1px solid @darkgray;
  border-radius: 8px;
  transition: all 0.3s ease;
  animation: colored-gradient 10s ease infinite;
}

#custom-kernel {
  margin-top: 2px;
  margin-left: 2px;
  margin-bottom: 2px;
  border-radius: 8px;
  color: @magenta;
}

#custom-wofi {
  color: @archbtw;
  margin-left: 4px;
  margin-right: 4px;
  padding: 0px 4px;
}

#keyboard-state {
  padding: 0px 3px;
  margin-left: 2px;
  margin-right: 2px;
}

#tray {
  background-color: @black-transparent-6;
  padding: 0px 0px;
  margin-right: 6px;
  border-radius: 8px;
  border: 2px solid @black;
}

#tray > .passive {
  -gtk-icon-effect: dim;
}

#tray > .needs-attention {
  -gtk-icon-effect: highlight;
  background-color: @red;
}

#battery.charging {
  color: @lightgreen;
  margin-left: 2px;
  margin-right: 2px;
  padding: 4px 4px;
}

#battery.discharging.good {
  color: @white;
  margin-left: 2px;
  margin-right: 2px;
  padding: 4px 4px;
}

#battery.discharging.warning {
  color: @orange;
  margin-left: 2px;
  margin-right: 2px;
  padding: 4px 4px;
}

#battery.discharging.critical {
  color: @red;
  margin-left: 2px;
  margin-right: 2px;
  padding: 4px 4px;
}

#pulseaudio.audio {
  margin-left: 2px;
  margin-right: 2px;
  padding: 4px 4px;
}

#clock  {
  margin-left: 2px;
  margin-right: 2px;
  padding: 4px 4px;
}

/* -------------------------------------------------------------------------------- */
/* If workspaces is the leftmost module, omit left margin */

.modules-left > widget:first-child > #workspaces button,
.modules-left > widget:first-child > #taskbar button,
.modules-left > widget:first-child > #custom-launcher,
.modules-left > widget:first-child > #window,
.modules-left > widget:first-child > #tray,
.modules-left > widget:first-child > #cpu,
.modules-left > widget:first-child > #memory,
.modules-left > widget:first-child > #backlight,
.modules-left > widget:first-child > #pulseaudio.audio,
.modules-left > widget:first-child > #pulseaudio.microphone,
.modules-left > widget:first-child > #network.enp46s0,
.modules-left > widget:first-child > #bluetooth,
.modules-left > widget:first-child > #battery,
.modules-left > widget:first-child > #clock,
.modules-left > widget:first-child > #custom-notification {
  margin-left: 8px;
}

.modules-right > widget:last-child > #workspaces button,
.modules-right > widget:last-child > #taskbar button,
.modules-right > widget:last-child > #custom-launcher,
.modules-right > widget:last-child > #window,
.modules-right > widget:last-child > #tray,
.modules-right > widget:last-child > #cpu,
.modules-right > widget:last-child > #memory,
.modules-right > widget:last-child > #backlight,
.modules-right > widget:last-child > #pulseaudio.audio,
.modules-right > widget:last-child > #pulseaudio.microphone,
.modules-right > widget:last-child > #network.enp46s0,
.modules-right > widget:last-child > #bluetooth,
.modules-right > widget:last-child > #battery,
.modules-right > widget:last-child > #clock,
.modules-right > widget:last-child > #custom-notification {
  margin-right: 8px;
}

/* -------------------------------------------------------------------------------- */