Fix for firefox hover/filter side-effect

[sebastianfdz]

Description

Firefox displays a weird side-effect when hovering and applying filter: brightness(X) (the element being hovered loses its shape). The root cause of this could be many things (there are a lot of classes being applied to paypal-button). We observed that overflow: hidden was having some cascading side-effect on filter: brightness(X). The proposed solution is to explicitly apply overflow: inherit to the hover class. This solution targets the .paypal-button.paypal-button-color-{COLOR}:hover only and thus prevents this to cascade onto any other classes. This fixes the bug in firefox and the behavior remains the same in chrome.

eg: .paypal-button.paypal-button-color-{COLOR}:hover { filter: brightness(X); overflow: inherit; }

Why are we making these changes? Include references to any related Jira tasks or GitHub Issues

Ticket LI-26326 pointed out weird behavior when hovering PayPal button in Firefox.

Reproduction Steps (if applicable)

Go to this codepen (fyi: reproduction is not consistent on all devices)

Screenshots (if applicable)

Unhovered button:

Hovered button:

Dependent Changes (if applicable)

Groups who should review (if applicable)

❤️ Thank you!

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (294709b) 51.18% compared to head (5299b7f) 51.18%.
Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2274   +/-   ##
=======================================
  Coverage   51.18%   51.18%           
=======================================
  Files         104      104           
  Lines        2032     2032           
  Branches      601      601           
=======================================
  Hits         1040     1040           
  Misses        889      889           
  Partials      103      103           

Flag	Coverage Δ
jest	31.99% <ø> (ø)
karma	49.87% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.