hunk.code_window:     justifyContent,
       position: 'fixed',
       left: '0',
       top: '0',
       zIndex: 'var(--affine-z-index-modal)',
       '*': {
         WebkitTapHighlightColor: 'transparent',
         outline: 'none',
  
hunk.labels: keep keep keep keep add keep keep keep
hunk.after_edit:     WebkitAppRegion: 'no-drag',
  
hunk.file_path: packages/component/src/ui/modal/styles.ts
hunk.type: add
file: import ModalUnstyled from '@mui/base/ModalUnstyled';
  import type { CSSProperties } from 'react';
  
  import { styled } from '../../styles';
  import { Wrapper } from '../layout';
  
  export const StyledBackdrop = styled('div')(({ theme }) => {
    return {
      zIndex: '-1',
      position: 'fixed',
      right: '0',
      bottom: '0',
      top: '0',
      left: '0',
      backgroundColor: 'var(--affine-background-modal-color)',
    };
  });
  
  export const StyledModal = styled(ModalUnstyled, {
    shouldForwardProp: prop => {
      return !['justifyContent', 'alignItems'].includes(prop as string);
    },
  })<{
    alignItems: CSSProperties['alignItems'];
    justifyContent: CSSProperties['justifyContent'];
  }>(({ theme, alignItems, justifyContent }) => {
    return {
      width: '100vw',
      height: '100vh',
      display: 'flex',
      alignItems,
      justifyContent,
      position: 'fixed',
      left: '0',
      top: '0',
      zIndex: 'var(--affine-z-index-modal)',
      '*': {
        WebkitTapHighlightColor: 'transparent',
        outline: 'none',
      },
    };
  });
  
  export const StyledWrapper = styled(Wrapper)(() => {
    return {
      width: '100vw',
      height: '100vh',
      overflow: 'hidden',
    };
  });
  