const colorStyles = {
  singleValue: (styles, { data }) => {
    return {
      ...styles,
      color: data.color ? data.color : '#000000',
    }
  },
  menu: styles => {
    return {
      ...styles,
      paddingTop: '0',
      paddingBottom: '0',
      backgroundColor: 'white',
      boxShadow: '0px 3px 6px #0000000C',
      borderRadius: '4px',
      border: '1px solid #DFE1E5',
      marginTop: '15px',
      zIndex:'10000'
    }
  },
  menuList: styles => {
    return {
      ...styles,
      paddingTop: '0',
      paddingBottom: '0',
      zIndex:'10000'
    }
  },
  option: (styles, { data, isFocused, isSelected }) => {
    return {

      color: data.color ? data.color : '#484848',
      backgroundColor: isSelected && '#E7F0FB',
      padding: '10px',
      borderBottom: '1px solid #DFE1E5',
      zIndex:'10000',
      ':active': {
        backgroundColor: isSelected && '#E7F0FB'
      }
    }
  }
}