{ theme }:

let

    accentColor = "#${theme.colors.accent}";
    textColor = "#${theme.colors.base05}";
    baseColor = "#${theme.colors.base00}";
    surfaceColor = "#${theme.colors.base02}";
    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 */

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

window#waybar > box {
    margin: ${outerGap};
    margin-bottom: 0px;
}

.modules-left,
.modules-right {
    padding: ${innerGap} 0px;
    border-radius: ${outerRadius};
    background-color: ${baseColor};
    border: ${borderWidth} solid ${accentColor};
}

/** Workspaces */

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

#workspaces button {
    all: initial;
    color: ${textColor};
    background-color: transparent;
    border-radius: ${innerRadius};
    padding: ${innerGap} ${outerGap};
}

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

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

/** Window */

window#waybar:not(.empty) #window {
    padding: 0 ${outerGap};
    border-left: ${borderWidth} solid ${surfaceColor};
    margin: 0 ${innerGap};
}

/** 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,
#clock {
    padding: 0 ${outerGap};
    border-right: ${borderWidth} solid ${surfaceColor};
    color: ${textColor};
}

/** 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};
}

''