When the tab is fixed, the volume icon background is black when the mouse hovers

### Describe the bug

(1) Open any website with sound.
(2) Pin the tab.
(3) Move the mouse pointer over the mute button.
(4) The mute button should be completely black.

### Expected behavior

The mute button should not be completely black when the mouse pointer moves over it.

### Screenshots

### OS

Windows 11

### OS - Others

_No response_

### Firefox Version

142

### Distribution

- [ ] [Original Lepton](https://github.com/black7375/Firefox-UI-Fix)
- [ ] [Lepton's photon style](https://github.com/black7375/Firefox-UI-Fix/tree/photon-style)
- [x] [Lepton's proton style](https://github.com/black7375/Firefox-UI-Fix/tree/proton-style)

### Theme

- [ ] Light
- [ ] Dark
- [ ] Alpenglow (System: Light)
- [ ] Alpenglow (System: Dark)
- [x] System Default
- [ ] Others: (e.g. [Photon Colors](https://addons.mozilla.org/en-US/firefox/addon/photon-colors/), [Google Chrome Dark](https://addons.mozilla.org/en-US/firefox/addon/google-chrome-dark/), [Fairytale Of Nature](https://addons.mozilla.org/en-US/firefox/addon/fairytale-of-nature/))

### Theme - More Info

_No response_

### `user.js` setup

user.js setup

```javascript
user_pref("userChrome.tab.sound_with_favicons", true);
```

### Additional context

I found that the mute button of the pinned tab is a little bigger than the mute button of the non-pinned tab.

Reproduce on Windows 11 with Firefox 142 using the proton style, the System Default theme, and user.js with user_pref("userChrome.tab.sound_with_favicons", true). Compare the pinned and non-pinned mute buttons while hovering; done means the pinned button no longer gets a completely black background and its appearance is consistent with the non-pinned button.

Written by the indexing model from the issue text.