import styled from 'styled-components';

export const InputWrapper = styled.div<{ isError: boolean }>`
  width: 100%;
  height: 48px;
  border: 1px solid
    ${({ theme, isError }) =>
      isError ? theme.colors.error[700] : theme.colors.neutral[300]};
  border-radius: 72px;
  display: flex;
  align-items: center;
  padding: 8px 16px;
`;

export const InputField = styled.input`
  border: 0;
  font-size: 16px;
  width: 100%;
  height: 100%;
  color: ${({ theme }) => theme.colors.neutral[800]};
  &:focus {
    outline: none;
  }
`;

export const IconWrapper = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;

  &:hover {
    cursor: pointer;
  }
`;

export const ErrorWrapper = styled.div`
  margin-top: 4px;
  height: 16px;
  display: flex;
  align-items: center;
`;