import { experimental_extendTheme as extendTheme } from '@mui/material/styles'

// For the reference of theme customization guide visit
// https://mui.com/material-ui/experimental-api/css-theme-variables/customization/

export const theme = extendTheme({
  colorSchemes: {
    light: {
      palette: {
        primary: {
          main: '#4c82a3',
          light: '#5e8eab',
          dark: '447592'
        },
        info: {
          main: '#3abff8'
        }
      }
    },
    dark: {
      // palette for dark mode
      //   palette: {...}
    }
  },
  components: {
    MuiModal: {
      styleOverrides: {
        root: {
          insetBlock: '25px',
          insetInline: '10px'
        }
      }
    },
    MuiButton: {
      styleOverrides: {
        root: {
          fontSize: '14px',
          fontWeight: 500,
          padding: '8px 15px',
          transition: 'ease 0.2s',
          boxShadow: 'unset',
          lineHeight: 'inherit',
          borderRadius: '4px',
          ':hover': {
            background: 'var(--primary-light)',
            boxShadow: 'unset'
          }
        },
        text: {
          color: 'inherit',
          background: 'transparent',
          ':hover': {
            color: 'white'
          }
        },
        contained: {
          background: 'var(--primary-main)',
          color: 'white'
        },
        outlined: {
          ':hover': {
            color: '#291334',
            borderColor: '#291334',
            background: '#29133433'
          }
        },
        startIcon: {
          marginRight: '12px',
          marginLeft: 0
        }
      }
    },
    MuiTypography: {
      defaultProps: {
        fontFamily: ['Roboto', 'system-ui', 'sans-serif'].join(',')
      }
    }
  },
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 900,
      lg: 1200,
      xl: 1420
    }
  }
})