function _extends() {
  _extends =
    Object.assign ||
    function (target) {
      for (var i = 1; i < arguments.length; i++) {
        var source = arguments[i];
        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
          }
        }
      }
      return target;
    };
  return _extends.apply(this, arguments);
}

import React, { useState } from 'react';
import styled from 'styled-components';
import { iconValue } from '../../../utils/Icon-values';
export const SelectDrop = ({
  type,
  placeholder,
  label,
  error,
  list,
  className,
}) => {
  const [value, setvalue] = useState('');
  const [key, setkey] = useState(false);

  const HandleClick = item => {
    setvalue(item);
  };

  return /*#__PURE__*/ React.createElement(
    SelectDropWrapper,
    {
      onMouseOver: () => setkey(true),
      onMouseOut: () => setkey(false),
      className: className,
    },
    /*#__PURE__*/ React.createElement(
      Input,
      {
        className: 'input',
      },
      /*#__PURE__*/ React.createElement('input', {
        type: type,
        placeholder: placeholder,
        onChange: onchange,
        value: value,
      }),
      /*#__PURE__*/ React.createElement(
        'span',
        {
          className: 'label',
        },
        label ? /*#__PURE__*/ React.createElement('span', null, label) : ''
      ),
      /*#__PURE__*/ React.createElement(
        'svg',
        {
          className: 'bg-svg',
        },
        /*#__PURE__*/ React.createElement('use', {
          href: `/images/icons.svg#${key ? 'drop-alt' : 'drop'}`,
        })
      )
    ),
    error
      ? /*#__PURE__*/ React.createElement(
          'p',
          {
            className: 'error-message',
          },
          'Uh oh! There was an error!'
        )
      : null,
    /*#__PURE__*/ React.createElement(
      'div',
      {
        className: `option-list-wrapper ${key ? 'active' : ''}`,
      },
      /*#__PURE__*/ React.createElement(
        'ul',
        {
          className: 'option-list',
        },
        list.map((item, index) =>
          /*#__PURE__*/ React.createElement(
            'li',
            {
              key: index,
              onClick: () => HandleClick(item),
              className: 'active',
            },
            /*#__PURE__*/ React.createElement(
              'svg',
              null,
              /*#__PURE__*/ React.createElement('use', {
                href: '/images/icons.svg#check',
              })
            ),
            /*#__PURE__*/ React.createElement('span', null, item)
          )
        )
      )
    )
  );
};
export const SelectSharedLinks = ({
  type,
  placeholder,
  label,
  error,
  list,
  filterResponseList,
  className,
  formId,
}) => {
  const [value, setvalue] = useState('');
  const [key, setkey] = useState(false);

  const HandleClick = item => {
    setvalue(item);
  };

  return /*#__PURE__*/ React.createElement(
    SelectDropWrapper,
    {
      onMouseOver: () => setkey(true),
      onMouseOut: () => setkey(false),
      className: className,
    },
    /*#__PURE__*/ React.createElement(
      Input,
      {
        className: 'input',
      },
      /*#__PURE__*/ React.createElement('input', {
        type: type,
        placeholder: placeholder,
        onChange: onchange,
        value: value,
      }),
      /*#__PURE__*/ React.createElement(
        'span',
        {
          className: 'label',
        },
        label ? /*#__PURE__*/ React.createElement('span', null, label) : ''
      ),
      /*#__PURE__*/ React.createElement(
        'svg',
        {
          className: 'bg-svg',
        },
        /*#__PURE__*/ React.createElement('use', {
          href: `/images/icons.svg#${key ? 'drop-alt' : 'drop'}`,
        })
      )
    ),
    error
      ? /*#__PURE__*/ React.createElement(
          'p',
          {
            className: 'error-message',
          },
          'Uh oh! There was an error!'
        )
      : null,
    /*#__PURE__*/ React.createElement(
      'div',
      {
        className: `option-list-wrapper ${key ? 'active' : ''}`,
      },
      /*#__PURE__*/ React.createElement(
        'ul',
        {
          className: 'option-list',
        },
        list.formShares
          ? list.formShares.map((item, index) =>
              /*#__PURE__*/ React.createElement(
                'li',
                {
                  key: index,
                  onClick: () => {
                    HandleClick(item.name);
                    filterResponseList(formId, 'formShare', item._id);
                  },
                  className: 'active',
                },
                value === item.name &&
                  /*#__PURE__*/ React.createElement(
                    'svg',
                    null,
                    /*#__PURE__*/ React.createElement('use', {
                      href: '/images/icons.svg#check',
                    })
                  ),
                /*#__PURE__*/ React.createElement(
                  'span',
                  {
                    style: {
                      cursor: 'pointer',
                    },
                  },
                  item.name
                )
              )
            )
          : ''
      )
    )
  );
};
export const SelectResponseStatus = ({
  type,
  placeholder,
  label,
  list,
  className,
  filterResponseList,
  formId,
}) => {
  const [value, setvalue] = useState('');
  const [key, setkey] = useState(false);

  const HandleClick = item => {
    setvalue(item);
  };

  return /*#__PURE__*/ React.createElement(
    SelectDropWrapper,
    {
      onMouseOver: () => setkey(true),
      onMouseOut: () => setkey(false),
      className: className,
    },
    /*#__PURE__*/ React.createElement(
      Input,
      {
        className: 'input',
      },
      /*#__PURE__*/ React.createElement('input', {
        type: type,
        placeholder: placeholder,
        onChange: onchange,
        value: value,
      }),
      /*#__PURE__*/ React.createElement(
        'span',
        {
          className: 'label',
        },
        label ? /*#__PURE__*/ React.createElement('span', null, label) : ''
      ),
      /*#__PURE__*/ React.createElement(
        'svg',
        {
          className: 'bg-svg',
        },
        /*#__PURE__*/ React.createElement('use', {
          href: `/images/icons.svg#${key ? 'drop-alt' : 'drop'}`,
        })
      )
    ),
    /*#__PURE__*/ React.createElement(
      'div',
      {
        className: `option-list-wrapper ${key ? 'active' : ''}`,
      },
      /*#__PURE__*/ React.createElement(
        'ul',
        {
          className: 'option-list',
        },
        list.map((item, index) =>
          /*#__PURE__*/ React.createElement(
            'li',
            {
              key: index,
              onClick: () => {
                HandleClick(item);
                filterResponseList(formId, 'status', item);
              },
              className: 'active',
            },
            item === value
              ? /*#__PURE__*/ React.createElement(
                  'svg',
                  null,
                  /*#__PURE__*/ React.createElement('use', {
                    href: '/images/icons.svg#check',
                  })
                )
              : '',
            /*#__PURE__*/ React.createElement(
              'span',
              {
                style: {
                  cursor: 'pointer',
                },
              },
              item
            )
          )
        )
      )
    )
  );
};
export const DummySelect = ({
  type,
  placeholder,
  value,
  className,
  setOpenDatePicker,
  openDatePicker,
}) => {
  return /*#__PURE__*/ React.createElement(
    SelectDropWrapper,
    {
      onClick: () => setOpenDatePicker(!openDatePicker),
      className: className,
    },
    /*#__PURE__*/ React.createElement(
      Input,
      {
        className: 'input',
      },
      /*#__PURE__*/ React.createElement('input', {
        type: type,
        placeholder: placeholder,
        disabled: true,
        value: value,
      }),
      /*#__PURE__*/ React.createElement(
        'svg',
        {
          className: 'bg-svg',
        },
        /*#__PURE__*/ React.createElement('use', {
          href: `/images/icons.svg#${openDatePicker ? 'drop-alt' : 'drop'}`,
        })
      )
    )
  );
};
export const SelectTemplateCategory = ({
  type,
  placeholder,
  label,
  error,
  list,
  className,
  onchange,
  value,
}) => {
  const [key, setkey] = useState(false);
  return /*#__PURE__*/ React.createElement(
    SelectDropWrapper,
    {
      onMouseOver: () => setkey(true),
      onMouseOut: () => setkey(false),
      className: className,
    },
    /*#__PURE__*/ React.createElement(
      Input,
      {
        className: 'input',
      },
      /*#__PURE__*/ React.createElement('input', {
        type: type,
        placeholder: placeholder,
        onChange: onchange,
        value: value?.name,
      }),
      /*#__PURE__*/ React.createElement(
        'span',
        {
          className: 'label',
        },
        label ? /*#__PURE__*/ React.createElement('span', null, label) : ''
      ),
      /*#__PURE__*/ React.createElement(
        'svg',
        {
          className: 'bg-svg',
        },
        /*#__PURE__*/ React.createElement('use', {
          href: `/images/icons.svg#${key ? 'drop-alt' : 'drop'}`,
        })
      )
    ),
    error
      ? /*#__PURE__*/ React.createElement(
          'p',
          {
            className: 'error-message',
          },
          'Uh oh! There was an error!'
        )
      : null,
    /*#__PURE__*/ React.createElement(
      'div',
      {
        className: `option-list-wrapper ${key ? 'active' : ''}`,
      },
      /*#__PURE__*/ React.createElement(
        'ul',
        {
          className: 'option-list',
        },
        list && list.length > 0
          ? list.map((item, index) =>
              /*#__PURE__*/ React.createElement(
                'li',
                {
                  style: {
                    cursor: 'pointer',
                  },
                  key: index,
                  onClick: () => {
                    onchange(item);
                    setkey(false);
                  },
                  className: value?.name === item?.name ? 'active' : '',
                },
                /*#__PURE__*/ React.createElement(
                  'svg',
                  null,
                  /*#__PURE__*/ React.createElement('use', {
                    href: '/images/icons.svg#check',
                  })
                ),
                /*#__PURE__*/ React.createElement('span', null, item.name)
              )
            )
          : ''
      )
    )
  );
};
export const SelectFolderOption = ({
  type,
  placeholder,
  label,
  error,
  list,
  className,
  onchange,
  value,
}) => {
  const [key, setkey] = useState(false);
  return /*#__PURE__*/ React.createElement(
    SelectDropWrapper,
    {
      onMouseOver: () => setkey(true),
      onMouseOut: () => setkey(false),
      className: className,
    },
    /*#__PURE__*/ React.createElement(
      Input,
      {
        className: 'input',
      },
      /*#__PURE__*/ React.createElement('input', {
        type: type,
        placeholder: placeholder,
        onChange: onchange,
        value: value?.name,
      }),
      /*#__PURE__*/ React.createElement(
        'span',
        {
          className: 'label',
        },
        label ? /*#__PURE__*/ React.createElement('span', null, label) : ''
      ),
      /*#__PURE__*/ React.createElement(
        'svg',
        {
          className: 'bg-svg',
        },
        /*#__PURE__*/ React.createElement('use', {
          href: `/images/icons.svg#${key ? 'drop-alt' : 'drop'}`,
        })
      )
    ),
    error
      ? /*#__PURE__*/ React.createElement(
          'p',
          {
            className: 'error-message',
          },
          'Uh oh! There was an error!'
        )
      : null,
    /*#__PURE__*/ React.createElement(
      'div',
      {
        className: `option-list-wrapper ${key ? 'active' : ''}`,
      },
      /*#__PURE__*/ React.createElement(
        'ul',
        {
          className: 'option-list',
        },
        list && list.length > 0
          ? list.map((item, index) =>
              /*#__PURE__*/ React.createElement(
                'li',
                {
                  style: {
                    cursor: 'pointer',
                  },
                  key: index,
                  onClick: () => {
                    onchange(item);
                    setkey(false);
                  },
                  className: value?.name === item?.name ? 'active' : '',
                },
                /*#__PURE__*/ React.createElement(
                  'svg',
                  null,
                  /*#__PURE__*/ React.createElement('use', {
                    href: '/images/icons.svg#check',
                  })
                ),
                /*#__PURE__*/ React.createElement('span', null, item.name)
              )
            )
          : ''
      )
    )
  );
};
export const CustomDropDownInput = ({
  type,
  placeholder,
  label,
  error,
  className,
  onchange,
  selectOption,
  value,
  options,
  ...props
}) => {
  const [key, setkey] = useState(false);
  return /*#__PURE__*/ React.createElement(
    SelectDropWrapper,
    {
      onMouseOver: () => setkey(true),
      onMouseOut: () => setkey(false),
      className: className,
    },
    /*#__PURE__*/ React.createElement(
      Input,
      {
        className: 'input',
      },
      /*#__PURE__*/ React.createElement(
        'input',
        _extends(
          {
            type: type,
            placeholder: placeholder,
            onChange: onchange,
            value: value,
          },
          props
        )
      ),
      /*#__PURE__*/ React.createElement(
        'span',
        {
          className: 'label',
        },
        label ? /*#__PURE__*/ React.createElement('span', null, label) : ''
      ),
      /*#__PURE__*/ React.createElement(
        'svg',
        {
          className: 'bg-svg',
        },
        /*#__PURE__*/ React.createElement('use', {
          href: `/images/icons.svg#${key ? 'drop-alt' : 'drop'}`,
        })
      )
    ),
    error
      ? /*#__PURE__*/ React.createElement(
          'p',
          {
            className: 'error-message',
          },
          'Uh oh! There was an error!'
        )
      : null,
    /*#__PURE__*/ React.createElement(
      'div',
      {
        className: `option-list-wrapper ${key ? 'active' : ''}`,
      },
      /*#__PURE__*/ React.createElement(
        'ul',
        {
          className: 'option-list',
        },
        options?.map((option, i) => {
          return /*#__PURE__*/ React.createElement(
            'li',
            {
              key: i,
              onClick: () => selectOption(option.label),
              style: {
                cursor: 'pointer',
              },
              className: option.label === value ? 'active' : '',
            },
            /*#__PURE__*/ React.createElement(
              'svg',
              null,
              /*#__PURE__*/ React.createElement('use', {
                href: '/images/icons.svg#check',
              })
            ),
            /*#__PURE__*/ React.createElement('span', null, option.label)
          );
        })
      )
    )
  );
};
export const LocationDropDown = ({
  type,
  placeholder,
  label,
  error,
  className,
  onchange,
  selectOption,
  value,
  options,
  locationType,
  onAddAnswer,
}) => {
  const [key, setkey] = useState(false);
  return /*#__PURE__*/ React.createElement(
    SelectDropWrapper,
    {
      onMouseOver: () => {
        setkey(true);
      },
      onMouseOut: () => setkey(false),
      className: className,
    },
    /*#__PURE__*/ React.createElement(
      Input,
      {
        className: 'input',
      },
      /*#__PURE__*/ React.createElement('input', {
        type: type,
        placeholder: placeholder,
        onChange: onchange,
        value: value,
      }),
      /*#__PURE__*/ React.createElement(
        'span',
        {
          className: 'label',
        },
        label ? /*#__PURE__*/ React.createElement('span', null, label) : ''
      ),
      /*#__PURE__*/ React.createElement(
        'svg',
        {
          className: 'bg-svg',
        },
        /*#__PURE__*/ React.createElement('use', {
          href: `/images/icons.svg#${key ? 'drop-alt' : 'drop'}`,
        })
      )
    ),
    error
      ? /*#__PURE__*/ React.createElement(
          'p',
          {
            className: 'error-message',
          },
          'Uh oh! There was an error!'
        )
      : null,
    /*#__PURE__*/ React.createElement(
      'div',
      {
        className: `option-list-wrapper ${key ? 'active' : ''}`,
      },
      /*#__PURE__*/ React.createElement(
        'ul',
        {
          className: 'option-list',
        },
        options && options.length > 0
          ? options.map((option, i) => {
              return /*#__PURE__*/ React.createElement(
                'li',
                {
                  key: i,
                  onClick: () => {
                    selectOption(option);
                    onAddAnswer(option.name, locationType);
                    setkey(false);
                  },
                  style: {
                    cursor: 'pointer',
                  },
                  className: option.name === value ? 'active' : '',
                },
                /*#__PURE__*/ React.createElement(
                  'svg',
                  null,
                  /*#__PURE__*/ React.createElement('use', {
                    href: '/images/icons.svg#check',
                  })
                ),
                /*#__PURE__*/ React.createElement('span', null, option.name)
              );
            })
          : /*#__PURE__*/ React.createElement(
              'li',
              null,
              locationType === 'state'
                ? 'No state found, select a valid country'
                : ''
            )
      )
    )
  );
};
const fblist = [
  {
    svg: 'short-text',
    title: 'Short Text',
    description: 'Single line or multiline text area.',
    type: 'shortText',
  },
  {
    svg: 'long-text',
    title: 'Long Text',
    description: 'Single line or multiline text area.',
    type: 'longText',
  },
  {
    svg: 'links',
    title: 'Links',
    description: 'Single line or multiline text area.',
    type: 'links',
  },
  {
    svg: 'email',
    title: 'Email Address',
    description: 'Single line or multiline text area.',
    type: 'email',
  },
  {
    svg: 'phone-number',
    title: 'Phone Number',
    description: 'Single line or multiline text area.',
    type: 'phoneNumber',
  },
  {
    svg: 'number',
    title: 'Number',
    description: 'Single line or multiline text area.',
    type: 'number',
  },
  {
    svg: 'date',
    title: 'Date',
    description: 'Single line or multiline text area.',
    type: 'date',
  },
  {
    svg: 'time',
    title: 'Time',
    description: 'Single line or multiline text area.',
    type: 'time',
  },
  {
    svg: 'agreement',
    title: 'Agreement',
    description: 'Single line or multiline text area.',
    type: 'agreement',
  },
  {
    svg: 'multi-choice',
    title: 'Multiple Selection',
    description: 'Single line or multiline text area.',
    type: 'multiChoice',
  },
  {
    svg: 'single-choice',
    title: 'Single Selection',
    description: 'Single line or multiline text area.',
    type: 'singleChoice',
  },
  {
    svg: 'dropdown',
    title: 'Dropdown',
    description: 'Single line or multiline text area.',
    type: 'dropDown',
  },
  {
    svg: 'ratings',
    title: 'Rating',
    description: 'Single line or multiline text area.',
    type: 'rating',
  },
  {
    svg: 'file-upload',
    title: 'File Upload',
    description: 'Single line or multiline text area.',
    type: 'fileUpload',
  },
  {
    svg: 'image-capture',
    title: 'Image Capture',
    description: 'Single line or multiline text area.',
    type: 'imageCapture',
  },
  {
    svg: 'location',
    title: 'Location',
    description: 'Single line or multiline text area.',
    type: 'locationMap',
  },
  {
    svg: 'area-map',
    title: 'Area Map',
    description: 'Single line or multiline text area.',
    type: 'areaMap',
  },
  {
    svg: 'address',
    title: 'Address',
    description: 'Single line or multiline text area.',
    type: 'address',
  },
];
export const FbDropElement = ({ type, onSelect }) => {
  const [key, setkey] = useState(false);
  return /*#__PURE__*/ React.createElement(
    React.Fragment,
    null,
    /*#__PURE__*/ React.createElement(
      'div',
      null,
      /*#__PURE__*/ React.createElement(
        SelectDropWrapper,
        {
          onMouseOver: () => setkey(true),
          onMouseOut: () => setkey(false),
          className: 'svg-drop',
        },
        /*#__PURE__*/ React.createElement(
          Input,
          {
            className: 'input',
          },
          /*#__PURE__*/ React.createElement('input', {
            type: type,
            placeholder: 'hgf',
            onChange: onchange,
          }),
          /*#__PURE__*/ React.createElement('span', {
            className: 'label',
          }),
          /*#__PURE__*/ React.createElement(
            'svg',
            {
              className: 'bg-svg',
            },
            /*#__PURE__*/ React.createElement('use', {
              href: `/images/icons.svg#${key ? 'drop-alt' : 'drop'}`,
            })
          ),
          /*#__PURE__*/ React.createElement(
            'svg',
            {
              className: 'select-form-field',
            },
            /*#__PURE__*/ React.createElement('use', {
              href: `/images/icons.svg#fb-${iconValue[type]}`,
            })
          )
        ),
        /*#__PURE__*/ React.createElement(
          'div',
          {
            className: `option-list-wrapper ${key ? 'active' : ''}`,
          },
          /*#__PURE__*/ React.createElement(
            'ul',
            {
              className: 'option-list form-field-list',
            },
            fblist.map((item, index) =>
              /*#__PURE__*/ React.createElement(
                'li',
                {
                  onClick: () => onSelect(item.type),
                  key: index,
                  className: 'active',
                },
                /*#__PURE__*/ React.createElement(
                  'svg',
                  null,
                  /*#__PURE__*/ React.createElement('use', {
                    href: `/images/icons.svg#${item.svg}`,
                  })
                ),
                /*#__PURE__*/ React.createElement(
                  'div',
                  {
                    className: 'btn-details',
                  },
                  /*#__PURE__*/ React.createElement('h3', null, item.title),
                  /*#__PURE__*/ React.createElement('p', null, item.description)
                )
              )
            )
          )
        )
      )
    )
  );
};
export const PhoneDropElement = ({ type }) => {
  const [value, setvalue] = useState('');
  const [key, setkey] = useState(false);

  const HandleClick = item => {
    setvalue(item.svg);
  };

  return /*#__PURE__*/ React.createElement(
    React.Fragment,
    null,
    /*#__PURE__*/ React.createElement(
      'div',
      null,
      /*#__PURE__*/ React.createElement(
        SelectDropWrapper,
        {
          onMouseOver: () => setkey(true),
          onMouseOut: () => setkey(false),
          className: 'svg-drop small-list-wrapper',
        },
        /*#__PURE__*/ React.createElement(
          Input,
          {
            className: 'input',
          },
          /*#__PURE__*/ React.createElement('input', {
            type: type,
            placeholder: 'hgf',
            onChange: onchange,
            value: value,
          }),
          /*#__PURE__*/ React.createElement('span', {
            className: 'label',
          }),
          /*#__PURE__*/ React.createElement(
            'svg',
            {
              className: 'bg-svg',
            },
            /*#__PURE__*/ React.createElement('use', {
              href: `/images/icons.svg#${key ? 'drop-alt' : 'drop'}`,
            })
          ),
          /*#__PURE__*/ React.createElement(
            'div',
            {
              className: 'd-flx-alc selected',
            },
            /*#__PURE__*/ React.createElement('img', {
              src: '/images/flag.png',
              alt: 'flag',
            }),
            /*#__PURE__*/ React.createElement('span', null, '+234')
          )
        ),
        /*#__PURE__*/ React.createElement(
          'div',
          {
            className: `option-list-wrapper ${key ? 'active' : ''}`,
          },
          /*#__PURE__*/ React.createElement(
            'ul',
            {
              className: 'option-list form-field-list',
            },
            fblist.map((item, index) =>
              /*#__PURE__*/ React.createElement(
                'li',
                {
                  key: index,
                  onClick: () => HandleClick(item),
                  className: 'd-flx-alc',
                },
                /*#__PURE__*/ React.createElement('img', {
                  src: '/images/flag.png',
                  alt: 'flag',
                }),
                /*#__PURE__*/ React.createElement('span', null, '+234')
              )
            )
          )
        )
      )
    )
  );
};
const SelectDropWrapper = styled.div`
  position: relative;
  .option-list-wrapper {
    width: 100%;
    position: absolute;
    background: #ffffff;
    box-shadow: 0px 10px 70px #edf0f7;
    border-radius: 4px;
    border: 1px solid #e8edff;
    height: 300px;
    top: 50px;
    left: 0;
    visibility: hidden;
    padding: 1rem 0;
    z-index: 40;
    &.active {
      visibility: visible;
    }

    .option-list {
      height: 100%;
      width: 100%;
      overflow: auto;

      li {
        width: 100%;
        display: flex;
        align-items: center;
        padding: 0.8rem 1.5rem;
        font-size: 1.6rem;
        color: #838ca2;
        text-transform: capitalize;
        svg {
          width: 12px;
          height: 12px;
          opacity: 0;
          transition: color 0.3s ease;
        }
        span {
          margin-left: 1.5rem;
        }
        &.active {
          color: #0a1045;
          svg {
            opacity: 1;
          }
        }
        &:hover {
          color: #0a1045;
        }
      }
    }
    .form-field-list {
      li {
        display: flex;
        align-items: center;
        padding: 1.5rem 1rem;
        width: 100%;
        &:hover {
          background-color: #fbfbff;
        }

        svg {
          min-width: 32px;
          width: 32px;
          height: 32px;
        }
        .btn-details {
          margin-left: 1rem;
          text-align: left;
          h3 {
            font-family: var(--ff-medium);
            font-weight: 500;
            font-size: 1.4rem;
            line-height: 1.6;
            color: #0a1045;
          }
          p {
            font-family: var(--ff-body);
            font-weight: 400;
            font-size: 1.4rem;
            line-height: 1.6;
            color: #838ca2;
          }
        }
      }
    }
  }
  .bg-svg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 2rem;
    width: 16px;
    height: 16px;
  }

  .error-message {
    font-size: 1.2rem;
    font-family: var(--ff-medium);
    color: var(--co-error);
    line-height: 1.1;
    margin-top: 1rem;
  }
  &.input-error {
    .label {
      color: var(--co-error);
      span {
        opacity: 1;
        transform: translateY(0);
      }
      &:before {
        background: var(--co-error);
        width: 100%;
      }
    }
    .input {
      border-color: var(--co-error);
    }
    .label:before {
      background: var(--co-error);
      width: 100%;
    }

    input:not(:placeholder-shown) ~ .label:before {
      background: var(--co-error);
      width: 100%;
    }
    .input:focus-within {
      .label {
        opacity: 1;
        border-bottom: none;
      }
      .label:before {
        background: var(--co-error);
        width: 100%;
      }
    }
  }
  &:not(:last-child):not(:only-child) {
    margin-bottom: 4rem;
  }
  &.svg-drop {
    .input {
      padding: 1rem;
      height: 44px;
    }
    input {
      opacity: 0;
      padding-top: 0;
    }
    .option-list-wrapper {
      width: 314px;
      height: 289px;
      left: -23rem;
      top: 44px;
    }
  }
  &.small-list-wrapper {
    .input {
      width: 112px;
    }
    .selected {
      position: absolute;
      top: 0;
      left: 0;
      padding: 1rem;
      height: 100%;
      width: 100%;
      span {
        margin-left: 0.5rem;
      }
    }
    .option-list-wrapper {
      width: 112px;
      height: 289px;
      left: 0rem;
      top: 44px;
      li {
        padding: 1rem;
        img {
          width: 24px;
          min-width: 24px;
          max-width: 24px;
          height: 16px;
        }
      }
    }
  }
`;
const Input = styled.div`
  position: relative;
  background: #f7f7f8;
  padding: 1rem 1.8rem;
  padding-top: 0.3rem;
  z-index: 1;
  .label {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    font-size: 1rem;
    padding-left: 1.8rem;
    padding-top: 0.5rem;
    color: #61677c;
    font-family: var(--ff-medium);
    font-weight: 500;
    z-index: -1;
    text-transform: capitalize;
    span {
      display: block;
      position: relative;
      opacity: 0;
      transform: translateY(5px);
      transition: all 0.3s ease-in;
      font-family: var(--ff-medium);
      font-weight: 500;
    }
    &:before {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      display: block;
      width: 0;
      height: 2px;
      transition: width 1s ease;
      z-index: 2;
    }
    &:after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      display: block;
      width: 100%;
      height: 2px;
      background: #c5c9da;
    }
  }
  input {
    display: block;
    width: 100%;
    padding-top: 2rem;
  }
  .select-form-field {
    position: absolute;
    width: 20px;
    height: 20px;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
  }
  &:focus-within {
    .label span {
      opacity: 1;
      transform: translateY(0);
      color: var(--co-primary);
    }
    .label:before {
      background: var(--co-primary);
      width: 100%;
    }
  }
  input:not(:placeholder-shown) ~ .label span {
    opacity: 1;
    transform: translateY(0);
  }
  input:not(:placeholder-shown) ~ .label:before {
    ${''}
    /* background: var(--co-primary); */
    width: 100%;
  }
`;
