import { createStyles } from 'antd-style';

export const useStyle = createStyles(({ token, css, cx }) => {
    const lunar = css`
        color: ${token.colorTextTertiary};
        font-size: ${token.fontSizeSM}px;
    `;
    return {
        wrapper: css`
            width: 450px;
            border: 1px solid ${token.colorBorderSecondary};
            border-radius: ${token.borderRadiusOuter};
            padding: 5px;
        `,
        dateCell: css`
            position: relative;
            &:before {
                content: '';
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                max-width: 40px;
                max-height: 40px;
                background: transparent;
                transition: background 300ms;
                border-radius: ${token.borderRadiusOuter}px;
                border: 1px solid transparent;
                box-sizing: border-box;
            }
            &:hover:before {
                background: rgba(0, 0, 0, 0.04);
            }
        `,
        today: css`
            &:before {
                border: 1px solid ${token.colorPrimary};
            }
        `,
        text: css`
            position: relative;
            z-index: 1;
        `,
        lunar,
        current: css`
            color: ${token.colorTextLightSolid};
            &:before {
                background: ${token.colorPrimary};
            }
            &:hover:before {
                background: ${token.colorPrimary};
                opacity: 0.8;
            }
            .${cx(lunar)} {
                color: ${token.colorTextLightSolid};
                opacity: 0.9;
            }
        `,
        monthCell: css`
            width: 120px;
            color: ${token.colorTextBase};
            border-radius: ${token.borderRadiusOuter}px;
            padding: 5px 0;
            &:hover {
                background: rgba(0, 0, 0, 0.04);
            }
        `,
        monthCellCurrent: css`
            color: ${token.colorTextLightSolid};
            background: ${token.colorPrimary};
            &:hover {
                background: ${token.colorPrimary};
                opacity: 0.8;
            }
        `,
        weekend: css`
            color: ${token.colorError};
            &.gray {
                opacity: 0.4;
            }
        `,
    };
});