@define-color foreground #eeeeee;
@define-color foreground-active #ffdd33;
@define-color foreground-inactive #aaaaaa;
@define-color background #000000;
@define-color background-hover #222222;

* {
    font-family: JetBrainsMono Nerd Font;
    font-size: 17px;
    margin: 0;
    padding: 0;
}

#waybar {
    color: @foreground;
    background-color: @background;
}

/* workspaces */
#workspaces {
    padding: 0;
}

#workspaces button {
    margin: 0;
    padding: .3em 0;
    border: none;
}

#workspaces button.focused {
    color: @foreground-active;
}

#workspaces button:hover {
    border-radius: 0px;
    background-color: @background-hover;
    border: none;
}

/* system */
#bluetooth, #wireplumber, #network, #tray, #clock, #custom-lock {
    padding: 7px 0;
}

#bluetooth:hover, #wireplumber:hover, #network:hover, #tray:hover, #custom-lock:hover {
    background-color: @background-hover;
}

#network {
    padding-right: 5px;
}