how to change the hover background color of the toggle button's Oval and Rectangle using custom CSS

[AA_9130612]

how to change the hover background color of the toggle button's Oval and Rectangle using custom CSS, it  can be changed through the properties but when i ON the toggle button, the same hover color applied for the ON mode also, which creating issues, can we have different hovers for the OFF and ON mode of the toggle button. please provide me the CSS code for this

[PEHOWE · Accepted solution]

@AA_9130612 

Here is some CSS which will adjust some attributes of the toggle button. I am not sure I have gotten the item you are looking to adjust. Let me know if you need more.

/* adjust label text color and backgroud and border */
.widget-ptcstogglebutton::part(label) {
    background: orange;
    border-color: red;
    border-width: 4px;
    color: green;
}
/* Set background of toggle button */
.widget-ptcstogglebutton::part(rectangle) {
    background: orange;
    border-color: green;
    border-width: 4px;
}
/* set color of dot in slide */
.widget-ptcstogglebutton::part(oval) {
    background: fuchsia;
}
/* adjust toggle when checked */
.widget-ptcstogglebutton:not([disabled])[checked]::part(rectangle) {
    background: greem;
    border-color: yellow;
    border-width: 4px;
}

[abjain]

@AA_9130612 :If the previous response answered your question, please mark it as the Accepted Solution.