import styled from 'styled-components/macro';

import { color, radius } from '../../theme';
import { MaskedInput } from '../MaskedInput';
import { commonInputStyles } from '../StyledInput';

export const StyledFieldContainer = styled.div`
  position: relative;
`;

export const StyledField = styled.div<{ $disabled?: boolean }>`
  align-items: center;
  background-color: ${(props) => (props.$disabled ? color('ref/palette/gray/50') : '#fff')};
  border-radius: ${radius('sys/radius/form-item')};
  display: flex;
`;

export const TunedInput = styled(MaskedInput)`
  @mixin ${commonInputStyles};
  padding-left: 56px;
  width: 100%;
`;