import { extendTheme } from '@chakra-ui/react'

export const blue = '#3452FF'

const customTheme = extendTheme({
  colors: {
    blue,
  },
  radii: {
    primary: '64px 64px 64px 0px',
    primarySmall: '24px 24px 24px 0px',
  },
  fonts: {
    body: 'IBM Plex Sans, sans-serif',
    heading: 'IBM Plex Sans, sans-serif',
  },
  styles: {
    global: {
      p: {
        lineHeight: '1.9',
      },
      '.headroom': {
        zIndex: '99 !important',
      },
      '#nprogress': {
        pointerEvents: 'none',
      },
      '.hide-scrollbar, #__next': {
        '::webkit-scrollbar': {
          display: 'none',
        },
        scrollbarWidth: 'none !important',
      },
      '#nprogress .bar': {
        background: 'blue',
        position: 'fixed',
        zIndex: 1031,
        top: 0,
        left: 0,
        width: '100%',
        height: '3px',
      },
      a: {
        textDecoration: 'none !important',
      },
      'html, body': {
        fontFamily: 'IBM Plex Sans, sans-serif',
        bg: 'white',
        color: 'black',
        fontSize: 'xl',
        lineHeight: 'tall',
        width: '100%',
        minHeight: '100vh',
      },
      '.enable-scroll': {
        overflow: 'hidden auto',
      },
      '.lock-scroll': {
        overflow: 'hidden !important',
      },
      [`input:-internal-autofill-selected`]: {
        backgroundColor: 'black !important',
      },
      // '*': {
      //   scrollbarWidth: 'auto',
      //   scrollbarColor: `${green} black`,
      // },

      // '*::-webkit-scrollbar': {
      //   width: '12px',
      //   height: '12px',
      // },
      // '*::-webkit-scrollbar-track': {
      //   background: `#000000`,
      // },
      // '*::-webkit-scrollbar-thumb': {
      //   backgroundColor: `${green}`,
      //   borderRadius: '12px',
      //   border: '2px solid black',
      // },
      // '*::-webkit-scrollbar-corner': {
      //   backgroundColor: `#000000`,
      // },
    },
  },
})

export default customTheme
