Buttons display hover styles when they are not being hovered on mobile

[daileytj]

Describe the bug

On mobile devices/simulators, buttons show hover state styles when they are not being hovered.

One instance is the "resend verification email" button on the verify email page in the create account workflow.

Another instance is the "continue" button on the account created success screen in the self-registration workflow.

There may be other buttons like this.

What is the expected behavior?

Buttons should not be showing hover state styles unless they are hovered.

What are the steps to reproduce?

Run these steps to get the example project running, and then view the details further down to create an error state for either the "Resend" or "Continue" button.

1. Clone the repo (git clone https://github.com/brightlayer-ui/angular-workflows.git).
2. CD into the project (cd angular-workflows)
3. Run the example project (cd login-workflow && yarn start:example)
4. Open Angular login workflow on a simulator or mobile device

"Resend Button"

1. Click "Create Account" link on the login screen
2. Continue through the workflow until you get to the verify email screen.
3. Click the resend verification email.
4. Observe hover styles on the button despite not actively hovering.

"Continue Button"

1. Click the debug button on the login screen
2. Click "Test Invite Register" link
3. Continue through the workflow until you get to the account created screen.
4. Observe hover styles on the button despite not actively hovering.

Screenshots or links to minimum reproduction example

[joebochill]

There is probably a particular mobile-specific style (e.g., active) getting applied here (that is, it's probably not actually the :hover styles). This might need to be ported to the themes repository if it's not specific to just the workflow.