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: '20px'
        }
      }
    },
    MuiButton: {
      styleOverrides: {
        root: {
          transition: 'ease 0.4s',
          padding: '10px 20px',
          fontSize: '14px',
          fontWeight: 'bold',
          boxShadow: '0 0 8px 0 rgba(0, 0, 0, 0)',
          lineHeight: '1.25',
          borderRadius: '4px',
          ':hover': {
            transform: 'scale(1.02)',
            boxShadow: '0 0 8px 0 rgba(0, 0, 0, 0)'
          }
        },
        text: {
          color: '#00000059',
          background: 'transparent',
          ':hover': {
            background: '#47cccf',
            color: 'white'
          }
        },
        contained: {
          background: '#47cccf',
          ':hover': {
            background: '#47cccf'
          }
        },
        outlined: {
          ':hover': {
            color: '#291334',
            borderColor: '#291334',
            background: '#29133433'
          }
        }
      }
    },
    MuiTypography: {
      defaultProps: {
        fontFamily: ['Roboto', 'system-ui', 'sans-serif'].join(',')
      }
    }
  },
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 900,
      lg: 1200,
      xl: 1420
    }
  }
})