import { createGlobalStyle, css } from 'styled-components';
const checkboxStyle = css `
  .ant-checkbox-wrapper {
    span {
      color: ${({ theme }) => theme.text.primary};
    }

    .ant-checkbox-inner {
      box-sizing: content-box;
      border: none;
      background-color: ${({ theme }) => theme.checkbox.bg};

      &:after {
        border-color: ${({ theme }) => theme.checkbox.checker};
        transition-property: none;
      }
    }

    .ant-checkbox:after {
      border: 1px solid;
      border-color: ${({ theme }) => theme.checkbox.border};
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      border-radius: 2px;
      content: '';
    }

    .ant-checkbox-checked:after {
      border: none;
    }

    &:hover,
    &:active,
    &:focus {
      .ant-checkbox:after {
        border-color: ${({ theme }) => theme.main};
      }
    }

    .ant-checkbox-checked .ant-checkbox-inner {
      background-image: linear-gradient(
        180deg,
        ${({ theme }) => theme.gradient.from} 0%,
        ${({ theme }) => theme.gradient.to} 100%
      );

      // 调整选勾位置
      &:after {
        left: 4px;
      }
    }

    .ant-checkbox-disabled {
      .ant-checkbox-inner {
        background: ${({ theme }) => theme.checkbox.disabled.bg};
        border: none;

        &:after {
          border-color: ${({ theme }) => theme.checkbox.disabled.checker};
        }
      }
      &.ant-checkbox {
        &:after {
          border-color: ${({ theme }) => theme.checkbox.disabled.bg};
        }
      }
    }

    .ant-checkbox-disabled + span {
      color: ${({ theme }) => theme.text.secondary};
    }
  }
`;
const CheckboxStyle = createGlobalStyle `${checkboxStyle}`;
export default CheckboxStyle;
