[TimePicker] Add Mui-selected class to TimeClock meridiem buttons

[LukasTy]

Fixes #12493.

Additional changes:

• Refactor active/selected styles to depend on the Mui-selected class rather than using a variant. Can't do it now, because it's a possible BC: [TimePicker] Add Mui-selected class to TimeClock meridiem buttons #13848 (comment)
• Extract common meridiem button styles into a reusable function

P.S. I picked this up after I saw an old stash with partially complete work. 🙈

[flaviendelangle]

Does this introduce any specificity change?

[LukasTy]

Great point.
This could be a BC for someone currently overriding selected styles via theme.
I'll check.
As for the class specificity, I don't think we can run into it, because there was no way to identify the selected button based on DOM/Classes for now. 🙈

[flaviendelangle]

If people are using the variants / the ownerState in their theme, would they see their CSS change because of specificity change on our side?
I think so but I'm not very good at CSS specificity 😆

[LukasTy]

@flaviendelangle
I've double-checked and indeed, we can't go this route, at least now, because for someone it would be a BC. 🙈
The following styles would no longer apply to a selected meridiem button:

MuiClock: {
  styleOverrides: {
    amButton: {
      color: 'red',
    },
    pmButton: {
      color: 'green',
    },
  },
},

Thus, I've reverted the change. 😉

[mui-bot]

Deploy preview: https://deploy-preview-13848--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 00342db