Styling / CSS for Calcite Button

[Leonidas]

I have incorporated a Calcite button that opens a Calcite modal with some general information about the app. 

The interaction with the calcite button is different than the regular ESRI JavaScript widgets.  I am using the light stylesheet.  When the user hovers over one of the ESRI widgets (Home, Zoom in/Out/Expand), the button background changes from white to light grey.  For the Calcite button, it changes the color of the outline slightly but not the background.  I would like the Calcite button to match the background color/styling of the ESRI widgets when the user hovers over.

In addition, the Calcite button has a blue outline when the user clicks it and remains until something else in the UI is clicked.  I would prefer not to have this blue outline.

How do I access these properties via CSS if possible?  The Calcite Button documentation page has limited options.

Thanks in advance!

#infoIcon {
        display: block;
	      position: absolute;		   
	      top: 200px;
              left: 15px;        
      }
/* css below works if I want to change background color of .esri-widget buttons */ 

 .esri-widget--button:hover {
    background-color: #992727;
    color: #2e2e2e
}
/*This does nothing to change calcite-button behavior*/
calcite-button {
      background-color: #773838;
    }

/*html for calcite button*/
<div id="infoIcon">
        <calcite-button id="example-button" icon-start="information" scale= "m" appearance="outline-fill" kind="neutral"></calcite-button>        
      </div>

[UndralBatsukh · Accepted solution]

Please take a look at this document on calcite component theming and colors: https://developers.arcgis.com/calcite-design-system/foundations/colors/

This SDK sample shows some of the techniques shown in the document: https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=featurelayer-query

[Leonidas]

Thanks for this.  The example helped to get me on the right track to figure out how to use the calcite css variables.  I was able to inspect the code in Chrome and figure out what was going on.  

I ended up finding out how to use the :hover css selector which let me switch the color of the icon:

#infoIcon:hover {

        --calcite-ui-foreground-1: #f3f3f3;

      }

In the end, I stumbled across an example of creating an esri widget button class which worked better and already had similar styling to the other esri widgets out of the box.  Hopefully this helps someone else so I'll post some of my code below.

//CSS for placement location 
#infoSWPapp {
        display: block;
	    position: absolute;		   
	    top: 170px;
        left: 15px;
      }
//Add the button div to the UI in script section/file
view.ui.add(["infoSWPapp"], "manual");

//set esri class for the div and use icon from esri icons in body section
<div id="infoSWPapp" class="esri-component esri-widget--button esri-widget" role="button">
        <span id="infoIconImage" class="esri-icon esri-icon-description"></span>
</div>
//JS code to open modal window when button is clicked
<script>         
         const modal = document.getElementById("example-modal");
         const infoButton = document.getElementById("infoSWPapp");
        
         infoButton.addEventListener("click", function() {
        modal.open = true; 
    });        
           </script>