Theme override change icon color on UDListItem when hover and selected

PowerShell Universal
1 
Product: PowerShell Universal
Version: 4.4.0

Hello css masters :slight_smile:
For fun and some practice I want to replicate look of some webpage in PU

I use navigation and UDListItem - something like this:

New-UDList -Children {
        New-UDListItem -Label "Play" -Icon (New-UDIcon -Icon 'play' ) 
        New-UDListItem -Id 'Settings' -Label "Settings" -Icon (New-UDIcon -Icon 'gear')  -Children {
            New-UDListItem -Label "InstallationManagement" -Href '/Installation' 
            New-UDListItem -Label "Usage" -Href '/Usage' 
            New-UDListItem -Label "faqs" -Href '/faqs' 
            New-UDListItem -Label "requirements" -Href'/requirements' 
            New-UDListItem -Label "purchasing" -Href '/purchasing' 
        }
        New-UDListItem -Label "System" -Icon (New-UDIcon -Icon 'laptop' ) -Children {
            New-UDListItem -Label "Installation2" -Href '/Installation2' 
            New-UDListItem -Label "Usage2" -Href '/Usage2' 
            New-UDListItem -Label "faqs2" -Href '/faqs2' 
            New-UDListItem -Label "requirements2-Href '/requirements2' 
            New-UDListItem -Label "purchasing2" -Href '/purchasing2' 
        }
    } -Dense

And what i want to achieve is when i hover over LIstitem or select them i want to change color of text and icon to something else.
And i have two problems so far (more to come)

First problem:
I can change color of icon and text by overdrive main theme with on hover

MuiListItemText = @{
            primary = @{
                color = 'rgba(255, 255, 255, 0.7) '
                fontSize = 13
                fontWeight = 500
                '&:hover' = @{
                    'color' = 'rgb(251,163,4)'
                }
            }
        }

        MuiListItemIcon = @{
            root = @{
                color = 'rgba(255, 255, 255, 0.7)'
                minWidth = 'auto'
                marginRight = 10
                "&:hover" = @{
                    color = 'rgb(251,163,4) '
                }
            }
        }

But they are separate functions (it works when you hover over icon or text but not both. )
I want to also change color of icon in MuiListItemIcon when i hover over text MuiListItemText

Second issue:
When in chose (select) one of the option i want to also change colors of the icon and text and also background of MuiListItem permanently.
So far i can only achieve is changing background on hover:

MuiListItem = @{
            root = @{
                cursor = 'pointer'
                paddingTop ='9px'
                paddingBottom ='9px'
                paddingLeft ='24px'
                #color = 'red'#'rgb(251,163,4)'
                '&:hover' = @{
                    'backgroundColor' = '#333333'
                }
            }
        }

How to apply this background and color to selected items in MuiListItem ?

2

ok i think first problem is probably resolved
to change color of both icon and text when hover you have to use following overrides in theme:

MuiListItem = @{
            root = @{
                '&:hover' = @{
                    ".MuiListItemText-primary" = @{
                        "color" = "rgb(251,163,4)"  
                    }
                    ".MuiListItemIcon-root" = @{
                        "color" = "rgb(251,163,4)" 
                    }
                }
}

But the second question is still not resolved.
How to change background of “parent” menu item when you click on it. I can change background of individual child item, can change color of whole section of child menu items but not the selected parent one. Any help appreciated.

Next question which is somehow connected with second one. How to collapse previously opened parent menu item when another one is selected ?