Custom styling gets overwritten!

Some of the custom styling I have placed in ~/.config/waybar/style.css is getting overwritten. Especially #workspaces button:hover. I have deleted all config and style files anywhere else (such as /etc/xdg/waybar/ or /usr/local/xdg/waybar/, however, when I set background-color: none (or any other color) on #workspaces button:hover it is still white when hovering. It works with the background property, but then I tried to get rid of the white border or outlline, whichever it is on top, by setting border: none and outline: none, however that did not work.

(On the very right, the white line on top is what i mean. Also, hard to see, but for some reason, the icon gets an outline/shading/shadow? It is also white and looks as if there was a white copy of it behind it with 1 px offset.)

I also tried to delete all my styles and configs, which gives me a missing resource files error, so I just left them blank and when starting waybar then, the bar is white and the color black. I compared with a friend and his default (blank) config/styling Waybar was not white.

(Also the icons for the workspaces aren't centered either.)

I couldn't find anything on the internet to help me and I don't know what to do anymore.

If this is a duplicate, I apologize.

Here are my files: config.jsonc (Sorry, .css is not supported, so I had to paste it.)

@import "../../.cache/wal/colors-waybar.css";

/* Universal Styling */
* {
  font-family: CascadiaCode NFM;
  font-weight: bold;
  font-size: 1rem;
}

#waybar {
  background-color: rgba(0, 0, 0, 0.5);
}

button {
  border: none;
  border-radius: 0;
}

button:hover {
  background: inherit;
}

#workspaces button {
  font-family: Noto Sans Mono;
  color: @color8;
  border-radius: 0;
}

#workspaces button:hover {
  outline: none;
  border-top: none;
}

#workspaces button.active {
  color: @color4;
  border-bottom: 2px solid @color4;
}

#workspaces button.urgent {
  color: @color7;
}

Alexays / Waybar

Custom styling gets overwritten! #3748