import { createStyles } from '@/theme'

export const useStyle = createStyles(({ token, css, cx, prefixCls }) => {
    const prefix = `${prefixCls}-${token?.proPrefix}-category-page`


    const tree = css`
        .ant-tree {
            overflow: auto;
            height: 100%;
            border-right: 1px solid ${token.colorBorder};
            background: ${token.colorBgContainer};

        }

        .ant-tree-directory .ant-tree-treenode-selected::before {
            background: ${token.colorBgTextHover};
        }

        .ant-tree-treenode:before {
            border-radius: ${token.borderRadius}px;
        }
    `

    const treeNode = css`
        display: flex;
        justify-content: space-between;
        align-items: center;

        .actions {
            display: none;
            padding: 0 10px;
        }

        &:hover .actions {
        {
            display: flex;
        }

    `
    const treeActions = css`
        padding: 0 24px 16px;
        display: flex;
        flex-direction: column;
        position: sticky;
        bottom: 0;
        z-index: 10;
        background: ${token.colorBgContainer};
    `

    const box = css`
        flex: 1;
        background: ${token.colorBgContainer};
    `
    const form = css`
        //display: flex;
        //flex-wrap: wrap;
        min-width: 300px;
        //max-width: 800px;

      .ant-form-item-label{
        width: 100px;
      }
    `
    const emptyForm = css`
    `
    const authHeight = css`
        min-height: calc(100vh - 122px);
        background-color: ${token.colorBgContainer};
    `

  const card = css`
    .ant-pro-card-body{
      height:  calc(100% - 115px)!important;
      min-height: calc(100% - 115px)!important;
    }
  `

    return {
        container: cx(prefix),
        authHeight,
        box,
        form,
        emptyForm,
        tree,
        treeNode,
        treeActions,
      card,
    }
})