[style.css] css inheritance not working properly

[just-some-entity]

While writing my config file I noticed a lot of inconsistencies and things not working and upon investigation it seems the css is not being interpreted correctly. Here a example that showcases the behavior in question:

*
{
  background-color: #000000; 
  color: #ff0000;
}

#waybar
{
  background-color: #ffffff;
}

#workspaces button
{
  padding: 5px;
  background-color: #888888;
  color: #0000ff;
}

#bluetooth
{
  color: #0000ff;
}

Using following css I get this result:

Notice how the waybar background should be white, but is for some reason being overridden by *. The same happens with the icons inside the workspace buttons since they should have blue color and gray background. But the background of the button itself is correct. The bluetooth module also takes on the correct color. From what I can tell, the issue seems to be that properties from parents aren't being inherited properly.

Here is what I would expect it to look like by removing the * rule:

I'm on Arch Linux via Hyprland using Waybar v0.14.0