{ theme }:

let

    fg = "#${theme.colors.fg}";
    bg = "#${theme.colors.bg}";
    surface-fg = "#${theme.colors.surface.fg}";
    surface-bg = "#${theme.colors.surface.bg}";
    primary = "#${theme.colors.primary}";
    success = "#${theme.colors.success}";
    warning = "#${theme.colors.warning}";
    error = "#${theme.colors.error}";
    fontSize = "${toString theme.font.size}px";
    outerGap = "${toString theme.outerGap}px";
    innerGap = "${toString theme.innerGap}px";
    outerRadius = "${toString theme.outerRadius}px";
    innerRadius = "${toString theme.innerRadius}px";
    borderWidth = "${toString theme.borderWidth}px";

in

''
/** Base */

* {
    all: unset;
}

window#waybar {
    font-family: "${theme.font.regular}", "${theme.font.icon}", "${theme.font.monospace}";
    font-size: ${fontSize};
    color: ${fg};
    background-color: ${bg};
}

/** Workspaces */

#workspaces {
    margin-left: ${outerGap};
}

#workspaces button {
    border-radius: ${innerRadius};
    margin: 4px 2px;
    padding: 0px 7px;
    background: ${surface-bg};
    color: ${surface-fg};
}

#workspaces button.focused,
#workspaces button.active {
    background: ${primary};
    color: ${bg};
}

#workspaces button.urgent {
    background: ${error};
}

/** Tray */

#tray {
    border: none;
    margin-right: ${outerGap};
}

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

#tray > .needs-attention {
    -gtk-icon-effect: highlight;
}

/** Right modules */

#battery,
#wireplumber,
#network {
    padding: 0 ${outerGap};
}

/** Battery */

#battery.charging {
    color: ${success};
}

#battery.warning:not(.charging) {
    color: ${warning};
}

#battery.critical:not(.charging) {
    color: ${error};
}

/** Wireplumber */

#wireplumber.muted {
    color: ${error};
}

/** Network */

#network.wifi,
#network.ethernet {
    color: ${success};
}

#network.disconnected {
    color: ${error};
}

''