Repository: mui/material-ui
File: packages/mui-material/src/Badge/Badge.js (JavaScript)

Code before:
            backgroundColor: (theme.vars || theme).palette[color].main,
            color: (theme.vars || theme).palette[color].contrastText,
          },
        })),
      {
        props: { variant: 'dot' },
        style: {
          borderRadius: RADIUS_DOT,
          height: RADIUS_DOT * 2,
          minWidth: RADIUS_DOT * 2,
          padding: 0,
        },
      },
      {
        props: { invisible: true },
        style: {
          transition: theme.transitions.create('transform', {
            easing: theme.transitions.easing.easeInOut,
            duration: theme.transitions.duration.leavingScreen,
          }),
        },
      },
      {
        style: ({ ownerState }) => {
          const { vertical, horizontal } = ownerState.anchorOrigin;
          const offset = ownerState.overlap === 'circular' ? '14%' : '0px';
          return {
            '--Badge-translateX': horizontal === 'right' ? '50%' : '-50%',
            '--Badge-translateY': vertical === 'top' ? '-50%' : '50%',
            top: vertical === 'top' ? offset : 'initial',
            bottom: vertical === 'bottom' ? offset : 'initial',
            right: horizontal === 'right' ? offset : 'initial',
            left: horizontal === 'left' ? offset : 'initial',
            transform: 'scale(1) translate(var(--Badge-translateX), var(--Badge-translateY))',
            transformOrigin: `${horizontal === 'right' ? '100%' : '0%'} ${vertical === 'top' ? '0%' : '100%'}`,
            [`&.${badgeClasses.invisible}`]: {
              transform: 'scale(0) translate(var(--Badge-translateX), var(--Badge-translateY))',
            },
          };
        },
      },
    ],
  })),
);

function getAnchorOrigin(anchorOrigin) {
  return {
    vertical: anchorOrigin?.vertical ?? 'top',
    horizontal: anchorOrigin?.horizontal ?? 'right',
  };
}

Review comment (suggestion):
Minor:

```suggestion
          const offset = ownerState.overlap === 'circular' ? '14%' : 0;
```

Code after:
            backgroundColor: (theme.vars || theme).palette[color].main,
            color: (theme.vars || theme).palette[color].contrastText,
          },
        })),
      {
        props: { variant: 'dot' },
        style: {
          borderRadius: RADIUS_DOT,
          height: RADIUS_DOT * 2,
          minWidth: RADIUS_DOT * 2,
          padding: 0,
        },
      },
      {
        props: { invisible: true },
        style: {
          transition: theme.transitions.create('transform', {
            easing: theme.transitions.easing.easeInOut,
            duration: theme.transitions.duration.leavingScreen,
          }),
        },
      },
      {
        style: ({ ownerState }) => {
          const { vertical, horizontal } = ownerState.anchorOrigin;
          const offset = ownerState.overlap === 'circular' ? '14%' : 0;
          return {
            '--Badge-translateX': horizontal === 'right' ? '50%' : '-50%',
            '--Badge-translateY': vertical === 'top' ? '-50%' : '50%',
            top: vertical === 'top' ? offset : 'initial',
            bottom: vertical === 'bottom' ? offset : 'initial',
            right: horizontal === 'right' ? offset : 'initial',
            left: horizontal === 'left' ? offset : 'initial',
            transform: 'scale(1) translate(var(--Badge-translateX), var(--Badge-translateY))',
            transformOrigin: `${horizontal === 'right' ? '100%' : '0%'} ${vertical === 'top' ? '0%' : '100%'}`,
            [`&.${badgeClasses.invisible}`]: {
              transform: 'scale(0) translate(var(--Badge-translateX), var(--Badge-translateY))',
            },
          };
        },
      },
    ],
  })),
);

function getAnchorOrigin(anchorOrigin) {
  return {
    vertical: anchorOrigin?.vertical ?? 'top',
    horizontal: anchorOrigin?.horizontal ?? 'right',
  };
}