Outline checkbox toggle button state indistinguishable when hovered

https://v5.getbootstrap.com/docs/5.0/forms/checks/#outlined-styles has the exact same visual style for a checked and unchecked button when hovered. This makes it unintuitive to use, and a pain to debug when needed as you constantly have to move your mouse back away from the control you just clicked to see what its actual state is.

Sequence of what currently happens (from left to right): 1) unchecked, not hovered; 2) unchecked, hovered; 3) checked, hovered, focused; 4) unchecked, hovered, focused. (for ease of seeing what's happening, I forced the underlying checkbox to remain visible)

Note that the focus itself is not at fault here either: 1) unchecked, not hovered; 2) checked (and then moved focus away again), hovered.