How to set the hover background color on the Compass widget

[BradBarnell]

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;
}

[JoelBennett]

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.

[BradBarnell]

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

[Dirk_Vandervoort]

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

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

has no impact.