import { createStyles } from '@/theme'

export const useStyle = createStyles(({ token, css, cx, prefixCls }, props: any) => {
  const prefix = `${prefixCls}-${token?.proPrefix}-layout`

  const container = {
    [prefix]: css`
      .ant-pro-global-header-logo,
      .ant-pro-layout-bg-list {
        user-select: none;
      }

      .ant-menu-inline-collapsed >.ant-menu-item-group>.ant-menu-item-group-list>.ant-menu-item{
        padding-inline-start: 0;
      }
      
    `,
  }

  const pageContext = css`
    box-shadow: ${token.boxShadowSecondary};
  `

  const sideMenu = css`
    .ant-pro-base-menu-inline-group .ant-menu-item-group-title .anticon {
      margin-inline-end: 0;
    }
    
  `

  return {
    container: cx(container[prefix], props?.className),
    pageContext,
    sideMenu,
  }

})