import { StylesConfig } from 'react-select';

export const dropdownStyles: StylesConfig = {
  control: styles => ({
    ...styles,
    border: '1px solid #E2E0DB',
    borderRadius: '20px',
    background: '#fff',
    padding: '1px 8px',
    alignItems: 'center',
    minHeight: 'unset',
    minWidth: '62px',
  }),
  indicatorSeparator: provided => ({
    ...provided,
    display: 'none !important',
  }),
  clearIndicator: (styles: any) => ({
    ...styles,
    padding: '1px',
  }),
  valueContainer: provided => ({
    ...provided,
    padding: '0px',
    paddingLeft: '0',

    '&:hover': {
      borderColor: 'transparent',
      boxShadow: 'none',
    },
  }),
  dropdownIndicator: provided => ({
    ...provided,
    padding: '0px',
  }),
  singleValue: provided => ({
    ...provided,
    color: '#3a3630',
    fontSize: '13px',
    backgroundColor: 'transparent',
    opacity: '1',
    margin: '0px',
    textOverflow: '',
  }),
  menu: provided => ({
    ...provided,
    marginTop: '5px',
    borderRadius: '4px',
    boxShadow: '0px 3px 22px #00000014',
    border: '1px solid #edebe8',
    width: '200px',
    right: '0',
  }),
  option: provided => ({
    ...provided,
    color: '#6a7378',
    opacity: '1',
    fontSize: '12px',
    cursor: 'pointer',
    width: '100%',
    backgroundColor: 'transparent',
    position: 'relative',
    borderBottom: '1px solid rgba(0, 0, 0, 0.08)',
    '&:hover': {
      backgroundColor: '#FBFBFB',
      color: '#3a3630',
    },
    '&:last-child': {
      borderBottom: 'none',
    },
    padding: '7px 12px',
  }),
  menuList: provided => ({
    ...provided,
    padding: '5px 1px 3px 1px',
    display: 'StyledFlex',
    flexDirection: 'column',
    '&::-webkit-scrollbar': {
      width: '0',
      height: '0',
    },
  }),
  placeholder: provided => ({
    ...provided,
    fontSize: '13px',
  }),
};

export const customControlHeightStyles: StylesConfig = {
  ...dropdownStyles,
  control: styles => ({
    ...styles,
    border: 'none',
    paddingRight: ' 12px',
    color: '#6a7378',
    fontSize: '14px',
    '&:hover': {
      border: 'none',
      outline: 'none',
      boxShadow: 'none !important',
    },
  }),
  placeholder: provided => ({
    ...provided,
    fontSize: '14px',
  }),
};
