CSS style for -fx-text-fill not applied, but style for -fx-background-color works

I have this CSS style:

.menu-scroll-box .button {
  -fx-content-display: top;
  -fx-text-fill: red;
  -fx-font-size: 24pt;
  -fx-background-color: transparent;
}

.menu-scroll-box .button .focused {
  -fx-background-color: radial-gradient(radius 150%, color-blue-20, color-blue-10, color-blue-20);
  -fx-text-fill: white;
}

Now, the button that has the focus has the "focused" style applied to it.

However, only the radial-gradient is applied, the -fx-text-fill does not get applied and the text remains red, despite there being a more specific CSS that applies. The Button itself has no other styles applied to it other than the standard "button" and the "focused" style.

The same CSS works as expected when using the :focused psuedo-class, but fails when using the .focused style.

See issues RT-21075 and RT-5006 for why I might want to not use the psuedo-class.