[material-ui][Switch] Switch transformation issue with font size change

Steps to reproduce

Link to live example: Disclosure not possible due to data protection guidelines

Steps:

1. Setup only the minimum required packages (react, mui, emotion, I use vite)
2. Implement the Switch component with an label
3. Change the font-size in the browser settings (e.g. 72)

Current behavior

When the font size in the browser is changed, the Switch's Label transforms correctly, but the Switch itself does not. It appears to be using pixels for sizes, leading to issues with responsiveness see attached image.

Expected behavior

The Switch should transform appropriately when the font size in the browser is changed. It should be responsive and adapt to different font sizes.

Context

I am trying to create a responsive user interface, and the issue with Switch transformation is affecting the overall layout and user experience. This component is used in many places to maintain the personal and business related profile.

Your environment

  Using Google Chrome Version 121.0.6167.85 (Offizieller Build) (64-Bit)
  System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (120.0.2210.144)
  npmPackages:
    @emotion/react: ^11.11.3 => 11.11.3
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.33
    @mui/core-downloads-tracker:  5.15.6
    @mui/material: ^5.15.6 => 5.15.6
    @mui/private-theming:  5.15.6
    @mui/styled-engine:  5.15.6
    @mui/system:  5.15.6
    @mui/types:  7.2.13
    @mui/utils:  5.15.6
    @types/react: ^18.2.43 => 18.2.48
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript: ^5.2.2 => 5.3.3

Search keywords: switch, fontsize, transform, pixel, chrome, firefox

Start by reproducing the Switch issue with the steps in the report, using a browser font size of 72 and the listed React and Material UI versions. Inspect the Switch component and its label behavior to determine why the label scales while the control does not. Done means the Switch remains responsive and adapts appropriately when the browser font size changes.