import { createStyles } from 'antd-style';

const useStyles = createStyles(({ token }) => {
  return {
    chartCard: {
      position: 'relative',
    },
    chartTop: {
      position: 'relative',
      width: '100%',
      overflow: 'hidden',
    },
    chartTopMargin: {
      marginBottom: '12px',
    },
    chartTopHasMargin: {
      marginBottom: '20px',
    },
    metaWrap: {
      float: 'left',
    },
    avatar: {
      position: 'relative',
      top: '4px',
      float: 'left',
      marginRight: '20px',
    },
    img: {
      borderRadius: '100%',
    },
    meta: {
      height: '22px',
      color: token.colorTextSecondary,
      fontSize: token.fontSize,
      lineHeight: '22px',
    },
    action: {
      position: 'absolute',
      top: '4px',
      right: '0',
      lineHeight: '1',
      cursor: 'pointer',
    },
    total: {
      height: '38px',
      marginTop: '4px',
      marginBottom: '0',
      overflow: 'hidden',
      color: token.colorTextHeading,
      fontSize: '30px',
      lineHeight: '38px',
      whiteSpace: 'nowrap',
      textOverflow: 'ellipsis',
      wordBreak: 'break-all',
    },
    content: {
      position: 'relative',
      width: '100%',
      marginBottom: '12px',
    },
    contentFixed: {
      position: 'absolute',
      bottom: '0',
      left: '0',
      width: '100%',
    },
    footer: {
      marginTop: '8px',
      paddingTop: '9px',
      borderTop: '1px solid @border-color-split',
      '& > *': { position: 'relative' },
    },
    footerMargin: {
      marginTop: '20px',
    },
  };
});

export default useStyles;