/* -----------------------------------------------------
 *                      Config
 * ----------------------------------------------------- */
@define-color bg-1 #100f0f;
@define-color bg-2 #1C1B1A;
@define-color ui-1 #282726;
@define-color ui-2 #343331;
@define-color ui-3 #403E3C;
@define-color tx-1 #CECDC3;
@define-color tx-2 #F2F0E5;
@define-color tx-3 #878580;
@define-color cyan #24837B;
@define-color magenta #A02F6F;
@define-color red #AF3029;
@define-color yellow #D0A215;

* {
  font-size: 11pt;
  border-radius: 0;
  border: none;
  box-shadow: none;
  transition: none;
}

/* -----------------------------------------------------
 *                      Bar
 * ----------------------------------------------------- */
window#waybar {
  color: @tx-1;
  background-color: @bg-1;
  font-family:
    Cascadia Code,
    Symbols Nerd Font Mono;
}

/* -----------------------------------------------------
 *                      Tooltip
 * ----------------------------------------------------- */
tooltip {
  background: @bg-1;
  border-radius: 6px;
  border: solid 1px @ui-1;
  font-family: Cascadia Code SemiLight;
}

tooltip label {
  color: @tx-1;
}

/* -----------------------------------------------------
 *                  Workspaces
 * ----------------------------------------------------- */
#workspaces {
  background-color: @bg-1;
  margin: 0 4px;
}

#workspaces button {
  border-radius: 6px;
  color: @tx-1;
  font-weight: normal;
  margin: 2px 1px;
  min-height: 24px;
  min-width: 16px;
  padding: 0 5px;
}

#workspaces button.active {
  background-color: @ui-3;
  color: @tx-2;
  font-family: Cascadia Code SemiBold;
}

#workspaces button.urgent {
  color: @magenta;
  font-family: Cascadia Code SemiBold;
}

#submap {
  background-color: @bg-2;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px @ui-1;
  color: @tx-2;
  font-family: Cascadia Code SemiLight;
  margin: 1px 1px;
  padding: 0 10px;
}

#window {
  color: @tx-1;
  padding: 0 10px;
}

window#waybar.empty #window {
  background-color: transparent;
}
/* -----------------------------------------------------
 *                      Modules
 * ----------------------------------------------------- */
#battery,
#clock,
#custom-expand-right,
#custom-idle,
#tray,
#wireplumber,
#network {
  color: @tx-1;
  margin: 2px 4px;
  padding: 0 8px;
}

#custom-idle.disabled {
  color: @yellow;
}

#tray menu {
  background-color: @bg-1;
  border-radius: 6px;
  border: solid 1px @ui-1;
}

#custom-wf-recorder {
  animation: rec-blink 1s linear infinite;
  border-radius: 6px;
  color: @red;
  margin: 2px 2px;
}
/* Rec-animation */
@keyframes rec-blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
/* -----------------------------------------------------
 *                      Hover candy
 * ----------------------------------------------------- */
#clock:hover,
#custom-expand-right:hover,
#custom-idle:hover,
#network:hover,
#tray menu menuitem:hover,
#wireplumber:hover,
#workspaces button:hover {
  background: @ui-2;
  border-radius: 6px;
  box-shadow: none;
}
