{ theme }:

let

    accentColor = "#${theme.colors.accent}";
    textColor = "#${theme.colors.base05}";
    baseColor = "#${theme.colors.base00}";
    mantleColor = "#${theme.colors.base01}";
    surfaceColor = "#${theme.colors.base03}";
    greenColor = "#${theme.colors.base0B}";
    yellowColor = "#${theme.colors.base0A}";
    redColor = "#${theme.colors.base08}";
    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: ${textColor};
    background-color: ${baseColor};
}

/** Workspaces */

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

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

#workspaces button.focused,
#workspaces button.active {
    background: ${accentColor};
    color: ${mantleColor};
}

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

/** 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: ${greenColor};
}

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

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

/** Wireplumber */

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

/** Network */

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

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

''