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

    .ant-select-selector.ant-select-selector {
      background-color: ${({ theme }) => theme.input.bg};
      border-color: ${({ theme }) => theme.select.border};
      box-shadow: none;
    }

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

    .ant-select-clear {
      background-color: ${({ theme }) => theme.input.bg};
    }

    &.ant-select-single {
      .ant-select-selection-item {
        background-color: transparent;
      }
    }

    .ant-select-selection-item {
      height: 24px;
      background-color: ${({ theme }) => theme.select.tag};
      border: none;
      border-radius: 2px;

      .ant-select-selection-item-remove {
        color: ${({ theme }) => theme.text.tertiary};
      }

      .ant-select-selection-item-content {
        line-height: 24px;
      }
    }

    .ant-select-selection-placeholder {
      color: ${({ theme }) => theme.text.tertiary};
    }
  }

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

    div[role='listbox'] + div {
      &::-webkit-scrollbar {
        width: 8px;
      }

      &::-webkit-scrollbar-track {
        background-color: initial;
      }

      &::-webkit-scrollbar-thumb {
        background-color: ${({ theme }) => theme.text.secondary};
        border-radius: 4px;
      }
    }

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

      &.ant-select-item-option-active,
      &.ant-select-item-option-selected {
        color: ${({ theme }) => theme.main};
        background-color: ${({ theme }) => theme.select.selected};
      }
    }
  }
  .ant-select-disabled {
    &.ant-select:not(.ant-select-customize-input) {
      .ant-select-selector {
        color: ${({ theme }) => theme.text.secondary};
        background-color: ${({ theme }) => theme.background.disabled};
      }
    }
  }
`;
const SelectStyle = createGlobalStyle `${selectStyle}`;
export default SelectStyle;
