I have a #sway and #waybar question for all you #CSS folks.

So I have configure the battery module of the waybar configured. At the top of the file I have the following

#waybar {
background: transparent ;
background-color: alpha(@base, 0.75);
[...]
}

Which makes a nice semi-transparent bar except for...the battery when it is in the warning state, and only during the warning state. Regular and critical state remain semi-transparent, but warning get this ugly black background...

I solved the problem by adding the following lines

#battery.charging {
color: @green;
background: transparent ;
}

#battery.warning:not(.charging) {
color: @yellow;
background: transparent ;
}

#battery.critical:not(.charging) {
color: @red;
}

Notice the critical not changing that does not need background: transparent ;

So I have a working bar, but I really does not know why or how this is giving me a weird behaviour.

Do any one of y'all know what why how where?