How to set the hover background color on the Compass widget

Question

In a .css file, how do you set the hover background color for the Compass widget?

calcite-button.esri-widget--button:hover {
   --calcite-ui-???: red;
}

Dirk_Vandervoort · Answer

Bumping this thread because we have encountered the same issue at 4.31

.esri-widget--button:hover {
    background-color: red!important;
}

has no impact.

BradBarnell · Answer

Yep, I'm using 4.28.  I was able to change the icon hover color with css, just not the hover background.

JoelBennett · Answer

If you're using 4.27 (and likely some prior versions), this would do it:

div.esri-compass:hover {
  background-color: #FF0000;
}

However,  due to the increased integration with Calcite and that this widget now uses a shadow DOM in 4.28, it's not possible to alter this property via a CSS selector.