[Joy] Improve cursor pointer and add fallback for outlined variant

[siriwatknp]

Cursor

Currently, the cursor: pointer is generated by the hover variants which resulted in this stylesheet in Joy UI components:

&:hover {
  cursor: pointer;
}

This produces several issues:

1. There is a glitch when moving between ListItemButton

   Screen.Recording.2565-12-22.at.16.44.50.mov

2. customizing the cursor must be done on :hover state

   <Button sx={{ cursor: 'drag' }} /> // ❌ does not work
   <Button sx={{ '&:hover': { cursor: 'drag' } }} // work

Fallback value

The fallback value is needed for a custom variant, otherwise, the variables that use --variant-borderWidth will resolve to initial.

---

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

	Messages
📖	Netlify deploy preview: https://deploy-preview-35573--material-ui.netlify.app/

Details of bundle changes

Generated by 🚫 dangerJS against 471e612