import type { Theme } from '../@styles/theme-provider';
import makeStyles from '@mui/styles/makeStyles';
export default makeStyles<Theme>(theme => ({
  header: {
    marginBottom: theme.spacing(2)
  },
  title: {
    color: theme.palette.primary[500]
  },
  icon: {
    '& > div': {
      display: 'flex',
      width: '16px'
    },
    fill: theme.palette.primary[400]
  },
  tabsButtonContainer: {
    justifyContent: 'flex-end',
    '& > button': {
      lineHeight: 1,
      padding: theme.spacing(0.5, 0.625),
      fontSize: '0.8125rem'
    }
  },
  list: {
    listStyle: 'none',
    paddingInlineStart: 0,
    margin: theme.spacing(3, 0, 0),
    '& > :not(:last-child)': {
      marginBottom: theme.spacing(1)
    }
  },
  activeItem: {
    cursor: 'pointer'
  },
  itemTitle: {
    ...theme.typography.interactive1,
    color: theme.palette.primary[500],
    marginLeft: theme.spacing(1)
  },
  statusDot: {
    width: theme.spacing(1),
    height: theme.spacing(1),
    background: theme.palette.primary[200],
    borderRadius: '50%'
  },
  statusDotInActive: {
    cursor: 'pointer'
  },
  statusDotActive: {
    background: theme.palette.secondary[500]
  },
  itemText: {
    color: theme.palette.primary[500],
    margin: theme.spacing(1, 0)
  },
  itemDescription: {
    ...theme.typography.caption1,
    color: theme.palette.primary[400]
  },
  container: {
    width: theme.spacing(46)
  },
  actionButton: {
    display: 'flex',
    justifyContent: 'flex-end',
    flex: 1
  },
  buttonContainer: {
    height: 22
  },
  hideButton: {
    paddingLeft: theme.spacing(1.5),
    '& > span': {
      fontSize: theme.spacing(1.5)
    }
  },
  notifContainer: {
    padding: theme.spacing(2),
    borderRadius: theme.spacing(0.5),
    '&:hover': {
      backgroundColor: theme.palette.secondary[100]
    }
  },
  closeIcon: {
    cursor: 'pointer',
    position: 'absolute',
    top: '46px',
    right: '36px'
  }
}));