import { pxToRem } from '../typography';

const Tabs = (theme) => ({
  MuiTabs: {
    styleOverrides: {
      root: {
        // '& .MuiTabs-flexContainer': {
        //   backgroundColor: theme?.palette?.background?.default,
        //   borderRadius: theme.shape.borderRadiusComponent,
        //   border: '1px solid',
        //   borderColor: theme.palette.grey[5],
        // },
        // '& .MuiTabs-indicator': {
        //   display: 'none',
        // },
        // '& .Mui-selected': {
        //   fontSize: pxToRem(14),
        //   backgroundColor: theme.palette.primary.highlight,
        //   borderRadius: theme.shape.borderRadiusComponent,
        // },
        // '& .MuiTouchRipple-root': {
        //   borderRadius: theme.shape.borderRadiusComponent,
        // },
        // '& .MuiTab-textColorPrimary': {
        //   fontSize: pxToRem(14),
        //   fontFamily: theme.fontFamily.medium,
        //   fontWeight: 500,
        //   margin: theme.spacing(0.3),
        //   minHeight: theme.shape.outlinedTabHeight,
        //   height: theme.shape.outlinedTabHeight,
        // },
        // '& .MuiButtonBase-root-MuiTab-root': {
        //   fontSize: pxToRem(14),
        //   fontFamily: theme.fontFamily.medium,
        //   fontWeight: 500,
        //   padding: 0,
        //   backgroundColor: theme.palette.primary.highlight,
        // },
        '& .MuiTabs-root': {
          borderBottom: `1px solid ${theme.palette.divider}`,
        },
        '& .MuiTab-root': {
          minWidth: 'unset',
          textTransform: 'none',
          fontSize: pxToRem(14),
          fontFamily: theme.fontFamily.regular,
          padding: theme.spacing(2),
          '&:hover': {
            backgroundColor: 'transparent',
          },
        },
        '& .MuiTab-textColorInherit.Mui-selected': {
          color: theme.palette.primary.main,
        },
        '& .MuiTab-textColorInherit': {
          color: theme.palette.text.primary,
        },
        '& .MuiTab-wrapper': {
          flexDirection: 'row',
          alignItems: 'center',
        },
        '& .MuiTab-icon': {
          marginLeft: theme.spacing(1),
        },
      },
    },
  },
});

export default Tabs;
