import type { SxProps, Theme } from '@mui/material'

export const styles = {
  zoom: {
    position: 'relative',
    height: ({ spacing }) => spacing(4),
    aspectRatio: 1,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  paper: {
    display: 'flex',
    backgroundColor: ({ palette }) => palette.background.paper,
    width: 'auto',
    overflow: 'hidden',
    boxShadow: ({ shadows }) => shadows[1],
    borderRadius: ({ spacing }) => spacing(0.5),

    button: {
      borderRadius: 0,
    },
  },
  circularProgress: {
    position: 'absolute',
  },
} satisfies Record<string, SxProps<Theme>>