import styled from 'styled-components'
import theme from 'theme'

const InputField = styled.input`
  background-color: ${theme.colors['input-background']};
  border: 0.81px solid
    ${props =>
      props.inputColor === 'blue'
        ? theme.colors['blue-cyan']
        : props.inputColor === 'violet'
          ? theme.colors['cornflower-blue']
          : theme.colors['border-transparent']};
  border-radius: 4px 0 0 4px;
  box-sizing: border-box;
  display: block;
  font: ${theme.textStyles.boxText.font}, sans-serif;
  font-size: ${props =>
    props.inputSize === 'small' ? theme.fontSizes.m : theme.fontSizes.l};
  height: 100%;
  outline: none;
  padding: ${props => (props.inputSize === 'small' ? '6px 17px' : '9px 17px')};
  width: 100%;

  ::placeholder {
    color: ${props =>
      props.inputColor === 'blue'
        ? theme.colors['blue-cyan']
        : theme.colors.white};
    font: ${theme.textStyles.boxText.font}, sans-serif;
  }
`

export default InputField
