import { createGlobalStyle, css } from 'styled-components';
const treeSelectStyle = css `
  .ant-select-tree {
    background-color: transparent;

    .ant-select-tree-switcher {
      color: ${({ theme }) => theme.text.secondary};
    }

    .ant-select-tree-treenode {
      color: ${({ theme }) => theme.text.primary};
    }

    .ant-select-tree-node-content-wrapper:hover {
      background-color: transparent;
      color: ${({ theme }) => theme.main};
    }
  }

  .ant-select-tree-checkbox {
    .ant-select-tree-checkbox-inner {
      background: transparent;
      border-color: ${({ theme }) => theme.checkbox.border};

      &:hover {
        border-color: ${({ theme }) => theme.main};
      }
    }

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

        border: none;
      }
    }
  }
`;
const TreeSelectStyle = createGlobalStyle `${treeSelectStyle}`;
export default TreeSelectStyle;
