How to add a hover effect with dynamic styles to a component element?

I have this component where hover effect is currently applied with pseudo-class :hover in .scss file. But I want to apply the hover effect with dynamic values.

So suppose if I want the element’s background to change on hover, the current css looks like this:

.element {
     display: flex;
     justify-content: center;

     &:hover {
          background-color: red;
     }
}

But now I want the hover background color to have dynamic values that is available inside the component provided by the user from the UI so the color could be anything. Another thing which I also want to achieve is to add a class to the element when it is selected. What I mean is when hovered, the background will change to a dynamic value but if the element is selected, that same color will be the background color. And if unselected, it will go back to the original color.

I’m new to Angular so I’m not sure how to achieve this. Anyone can help me?