/* @import '../../.cache/wal/colors-waybar.css'; */

@import './mocha.css';

/* @define-color bg #161320; */

@define-color critical #BF616A;

* {
	border: none;
	border-radius: 10px;
    font-family: "JetbrainsMono Nerd Font" ;
	font-size: 15px;
	min-height: 10px;
}

#workspaces {
	margin-top: 6px;
	margin-left: 8px;
}

#workspaces button {
	color: @text;
	background: @surface2;
	margin-left: 2px;
	margin-right: 2px;
}

#workspaces button.focused {
	border-radius: 10px;
	color: @mantle;
	background: @lavender;
}

#workspaces button.active {
	border-radius: 10px;
	color: @mantle;
	background: @lavender;
}

window#waybar {
	background: transparent;
}

window#waybar.hidden {
	opacity: 0.2;
}

#window {
	margin-top: 6px;
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 10px;
	transition: none;
    color: transparent;
	background: transparent;
}

#tags {
	margin-top: 6px;
	margin-left: 12px;
	font-size: 4px;
	margin-bottom: 0px;
	border-radius: 10px;
	background: @background;
	transition: none;
}

#network {
	margin-top: 6px;
	margin-left: 8px;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 0px;
	border-radius: 10px;
	transition: none;
	color: @background;
	background: #bd93f9;
}

#pulseaudio {
	margin-top: 6px;
	margin-left: 8px;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 0px;
	border-radius: 10px;
	transition: none;
	color: @text;
	background: @transparent;
	transition: color 1s linear;
}

#pulseaudio:hover {
	transition: color 0.1s linear;
  color: @lavender;
}

#battery {
	margin-top: 6px;
	margin-left: 8px;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 0px;
	border-radius: 10px;
	transition: none;
	color: @text;
	background: @base;
	transition: color 1s linear;
}

#battery:hover {
	transition: color 0.1s linear;
  color: @flamingo;
}

#battery.charging, #battery.plugged {
	color: @text;
    background-color: @color4;
}

#battery.critical:not(.charging) {
    background-color: @color4;
    color: @background;
    animation-name: blink;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes blink {
    to {
        background-color: @critical;
        color: @color4;
    }
}

#backlight {
	margin-top: 6px;
	margin-left: 8px;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 0px;
	border-radius: 10px;
	transition: none;
	color: @text;
	background: @base;
	transition: color 1s linear;
}

#backlight:hover {
	transition: color 0.1s linear;
  color: @yellow;
}

#clock {
	margin-top: 6px;
	margin-left: 8px;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 0px;
	border-radius: 10px;
	transition: none;
	color: @text;
	background: @bae;
  background: @base;
	transition: color 1s linear;
}

#clock:hover {
	transition: color 0.1s linear;
  color: @maroon ;
}


#memory {
	margin-top: 6px;
	margin-left: 8px;
	padding-left: 10px;
	margin-bottom: 0px;
	padding-right: 10px;
	border-radius: 10px;
	transition: none;
	color: @text;
	background: @base;
	transition: color 1s linear;
}

#memory:hover {
	transition: color 0.1s linear;
  color: @maroon;
}

#cpu {
	margin-top: 6px;
	margin-left: 8px;
	padding-left: 10px;
	margin-bottom: 0px;
	padding-right: 10px;
	border-radius: 10px;
	transition: none;
	color: @text;
	background: @base;
	transition: color 1s linear;
}

#cpu:hover {
	transition: color 0.1s linear;
  color: @yellow;
}

#tray {
	margin-top: 6px;
	margin-left: 8px;
	padding-left: 10px;
	margin-bottom: 0px;
	padding-right: 10px;
	border-radius: 10px;
	transition: none;
	color: #B5E8E0;
	background: @background;
}

#custom-launcher {
	font-size: 24px;
	margin-top: 6px;
	margin-left: 8px;
	padding-left: 10px;
	padding-right: 5px;
	border-radius: 10px;
	transition: none;
  color: @blue;
  background: @background;
	transition: color 1s linear;
}

#custom-launcher:hover {
	transition: color 0.1s linear;
  color: @sky;
}

#custom-power {
	font-size: 20px;
	margin-top: 6px;
	margin-left: 5px;
	margin-right: 5px;
	padding-left: 5px;
	padding-right: 5px;
	margin-bottom: 0px;
	border-radius: 10px;
	transition: none;
	color: @text;
	background: @base;
	transition: color 1s linear;
}

#custom-power:hover {
	transition: color 0.1s linear;
  color: @pink;
}

#custom-wallpaper {
	margin-top: 6px;
	margin-left: 8px;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 0px;
	border-radius: 10px;
	transition: none;
	color: @background;
	background: @color11;
}

#custom-updates {
	margin-top: 6px;
	margin-left: 8px;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 0px;
	border-radius: 10px;
	transition: none;
	color: @background;
	background: @color11;
}

#custom-media {
	margin-top: 6px;
	margin-left: 8px;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 0px;
	border-radius: 10px;
	transition: none;
	color: @text;
  background: @base;
	transition: color 1s linear;
}

#custom-media:hover {
	transition: color 0.1s linear;
  color: @green;
}

#custom-notification {
	font-size: 15px;
	margin-top: 6px;
	margin-left: 8px;
	padding-left: 10px;
	padding-right: 5px;
	border-radius: 10px;
	transition: none;
  color: @text;
  background: @base;
	transition: color 1s linear;
}

#custom-notification:hover {
	transition: color 0.1s linear;
  color: @sapphire;
}
