@define-color red #f57f82;
@define-color orange #f7a182;
@define-color yellow #f5d098;
@define-color green #cae0a7;
@define-color aqua #addeb9;
@define-color skye #ace0d4;
@define-color blue #b2cfed;
@define-color purple #d0bbf0;
@define-color pink #f3c0e5;
@define-color text #f8f9e8;
@define-color subtext1 #adc9bc;
@define-color subtext0 #96b4aa;
@define-color overlay2 #839e9a;
@define-color overlay1 #6f8788;
@define-color overlay0 #58686d;
@define-color surface2 #4a585c;
@define-color surface1 #3d494d;
@define-color surface0 #2d393d;
@define-color base #1d2428;
@define-color mantle #191e21;
@define-color crust #171c1f;

* {
    all: unset;
    font-family: "Jetbrains Mono NF", monospace;
}

window#waybar {
    background: transparent;
    color: @text;
}

.modules-left,
.modules-center,
.modules-right {
    padding: 2px;
    padding-bottom: 0;
}

.module,
#workspaces button {
    background: @base;
    margin: 0 2px;
    padding: 0 12px;
}
.module:hover,
#workspaces button:hover {
    background: shade(@surface0, 1.05);
}

#workspaces {
    padding: 0;
    background: transparent;
}
#workspaces:hover {
    background: @base;
}

#workspaces button {
    margin: 0;
    border: 2px solid transparent;
}
#workspaces button:active {
    background: shade(@surface0, 0.9);
}

#workspaces button.focused {
    background: @skye;
    color: @base;
}
#workspaces button.focused:hover {
    background: shade(@skye, 1.2);
}
#workspaces button.focused:active {
    background: shade(@skye, 0.9);
}