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: '#291334'
        },
        info: {
          main: '#3abff8'
        }
      }
    },
    dark: {
      // palette for dark mode
      //   palette: {...}
    }
  },
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          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'
          }
        }
      }
    }
  },
  typography: {
    fontFamily: [
      'system-ui',
      'Avenir',
      'Helvetica',
      'Arial',
      'sans-serif'
    ].join(', ')
  }
})