import styled from 'styled-components';

import { pxToRem } from '@lendi-ui/commons/utils';
import { InputBaseComponent } from '../TextField';

export const Wrapper = styled.div`
  position: relative;
  width: 100%;
`;

export const Input = styled(InputBaseComponent as any)<{ hasRightItem: boolean }>`
  padding-left: ${pxToRem(46)};
  padding-right: ${({ hasRightItem }) => (hasRightItem ? pxToRem(46) : pxToRem(16))};
`;

export const PhoneIconWrapper = styled.span`
  position: absolute;
  top: ${pxToRem(12)};
  left: ${pxToRem(12)};
`;

export const MobileIconWrapper = styled.span`
  position: absolute;
  top: ${pxToRem(12)};
  left: ${pxToRem(12)};
`;