Style Side-Navigation Item Icon - hover effect

[timo.meinen]

Using the Side Navigation component the items have a mouse hover effect and change color.

I want to change the color of the icons and use this:

vaadin-side-nav-item > vaadin-icon {
    color: var(--lumo-body-text-color);
}

The current item has the selected color text --vaadin-selection-color-text but the icon’s selector overwrites this selector:

:host([current]) [part='content'] {
    background-color: var(--lumo-primary-color-10pct);
    color: var(--vaadin-selection-color-text, var(--lumo-primary-text-color));
    border-radius: var(--lumo-border-radius-m);
}

I thought of using

vaadin-side-nav-item[current]:hover > vaadin-icon {
    color: var(--lumo-body-text-color);
}

but the color on the text is transitioning whereas the :hover icon is instantanously.

1. How is the hover-effect is implemented in Vaadin? I do not see any :hover selectors.
2. Any idea how I can update the icon selector to have it changed its color on hovering, too?

Thank you.