import { extendTheme } from '@chakra-ui/react';
export const theme = extendTheme({
  shadows: { outline: '0 0 0 2px var(--chakra-colors-primary-200)' },
  fonts: {
    body: 'Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif',
  },
  colors: {
    'light-border': '#d2d2d4',
    'dark-bg': '#1A202C',
    primary: {
      50: '#9cb7f2',
      100: '#88a9ef',
      200: '#749aec',
      300: '#618ce9',
      400: '#4d7de7',
      500: '#396fe4',
      600: '#3364cd',
      700: '#2e59b6',
      800: '#284ea0',
      900: '#224389',
    },
    gray: {
      750: '#222C3B',
    },
  },
  components: {
    Alert: {
      baseStyle: {
        container: {
          borderRadius: '6px',
          fontSize: 'sm',
        },
      },
    },
    Select: {
      baseStyle: {
        field: {
          _dark: {
            borderColor: 'gray.600',
            borderRadius: '6px',
          },
          _light: {
            borderRadius: '6px',
          },
        },
      },
    },
    FormHelperText: {
      baseStyle: {
        fontSize: 'xs',
      },
    },
    FormLabel: {
      baseStyle: {
        fontSize: 'sm',
        fontWeight: 'medium',
        mb: '1',
        _dark: { color: 'gray.300' },
      },
    },
    Input: {
      baseStyle: {
        addon: {
          _dark: {
            borderColor: 'gray.600',
            _placeholder: {
              color: 'gray.500',
            },
          },
        },
        field: {
          _focusVisible: {
            boxShadow: 'none',
            borderColor: 'primary.200',
            outlineColor: 'primary.200',
          },
          _dark: {
            borderColor: 'gray.600',
            _disabled: {
              color: 'gray.400',
              borderColor: 'gray.500',
            },
            _placeholder: {
              color: 'gray.500',
            },
          },
        },
      },
    },
    Table: {
      baseStyle: {
        table: {
          borderCollapse: 'separate',
          borderSpacing: 0,
        },
        thead: {
          borderBottomColor: 'light-border',
        },
        th: {
          background: '#F9FAFB',
          borderColor: 'light-border !important',
          borderBottomColor: 'light-border !important',
          borderTop: '1px solid ',
          borderTopColor: 'light-border !important',
          _first: {
            borderLeft: '1px solid',
            borderColor: 'light-border !important',
          },
          _last: {
            borderRight: '1px solid',
            borderColor: 'light-border !important',
          },
          _dark: {
            borderColor: 'gray.600 !important',
            background: 'gray.750',
          },
        },
        td: {
          transition: 'all .1s ease-out',
          borderColor: 'light-border',
          borderBottomColor: 'light-border !important',
          _first: {
            borderLeft: '1px solid',
            borderColor: 'light-border',
            _dark: {
              borderColor: 'gray.600',
            },
          },
          _last: {
            borderRight: '1px solid',
            borderColor: 'light-border',
            _dark: {
              borderColor: 'gray.600',
            },
          },
          _dark: {
            borderColor: 'gray.600',
            borderBottomColor: 'gray.600 !important',
          },
        },
        tr: {
          '&.interactive': {
            cursor: 'pointer',
            _hover: {
              '& > td': {
                bg: 'gray.200',
              },
              _dark: {
                '& > td': {
                  bg: 'gray.750',
                },
              },
            },
          },
          _last: {
            '& > td': {
              _first: {
                borderBottomLeftRadius: '8px',
              },
              _last: {
                borderBottomRightRadius: '8px',
              },
            },
          },
        },
      },
    },
  },
});