import { createStyles } from 'antd-style';

const useButtonStyle = () => {
  // Customize styles
  return createStyles(() => {
    return {
      box: {
        width: 'var(--box-with, 248px)',
        overflow: 'hidden',
        flex: '0 0 var(--box-with, 248px)',
        maxWidth: 'var(--box-with, 248px)',
        minWidth: 'var(--box-with, 248px)',
        transition: '0.2s',
      },
      sider: {
        top: 56,
        height: 'calc(100vh - 56px)',
        backgroundColor: 'transparent !important',
        left: 0,
        zIndex: 1,
        '.ant-layout-sider-children': {
          display: 'flex',
          gap: 8,
        },
      },
      moduleMenu: {
        width: '100px !important',
        textAlign: 'center',
        overflow: 'scroll',
        scrollbarWidth: 'none',
      },
      subMenu: {
        width: '140px !important',
        backgroundColor: '#fff !important',
        margin: '8px 0 !important',
        overflow: 'scroll',
        scrollbarWidth: 'none',
      },
    };
  })();
};

export default useButtonStyle;
