export const WatchVideoButtonWrapper = styled.div`
position: absolute;
bottom: 80px;
right: 33px;
background-color: ${(props) => props.bgColor};
color: ${(props) => props.color};
border-radius: 100px;
transition: all 0.1s;
cursor: pointer;
fill: ${(props) => props.color};
&:hover {
background-color: ${(props) => props.hoverBgColor};
color: ${(props) => props.hoverColor};
fill: ${(props) => props.hoverColor};
}
`;When passing the props, it seems like everything is set up correctly:
<WatchVideoButtonWrapper
bgColor={navbar_button_background_color}
color={navbar_button_text_and_icon_color}
hoverBgColor={navbar_button_hover_background_color}
hoverColor={navbar_button_hover_text_and_icon_color}
>
...
</WatchVideoButtonWrapper>Despite everything being in place, the hover state is not working as expected. I have followed the documentation and included &:hover {} inside the styled component, but the animation on hover is not triggering as intended.