import { createGlobalStyle, css } from 'styled-components';
const cascaderStyle = css `
  .ant-cascader-picker {
    color: ${({ theme }) => theme.text.primary};
    background-color: ${({ theme }) => theme.background.content.primary};
    border-color: ${({ theme }) => theme.select.border};

    .ant-cascader-picker-arrow,
    .ant-cascader-picker-clear {
      color: ${({ theme }) => theme.select.arrow};
    }

    .ant-cascader-picker-clear {
      background-color: ${({ theme }) => theme.background.content.primary};
    }

    &.ant-cascader-picker-disabled {
      color: ${({ theme }) => theme.text.secondary};
      background-color: ${({ theme }) => theme.background.disabled};
    }
  }

  .ant-cascader-menus {
    background-color: ${({ theme }) => theme.select.dropdown};

    .ant-cascader-menu {
      border-right-color: ${({ theme }) => theme.border.secondary};

      .ant-cascader-menu-item {
        color: ${({ theme }) => theme.text.primary};

        &:hover,
        &.ant-cascader-menu-item-active {
          color: ${({ theme }) => theme.main};
          background-color: ${({ theme }) => theme.select.selected};
        }

        .ant-cascader-menu-item-expand-icon {
          color: ${({ theme }) => theme.select.arrow};
        }
      }
    }
  }
`;
const CascaderStyle = createGlobalStyle `${cascaderStyle}`;
export default CascaderStyle;
