import styled, { css } from 'styled-components';

import { color } from '../../constants/style';

const baseStyles = css`
  border: 1.5px solid ${color.black38};
  border-radius: 4px;
  padding: 7px 15px;
  outline: none;
  transition: border 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
  font-size: 14px;
  box-sizing: border-box;

  :disabled {
    color: ${color.black56};
    cursor: not-allowed;
  }
`;

export const Input = styled('input')<{
  error?: boolean;
  shouldFitContainer?: boolean;
}>`
  ${baseStyles}
  width: ${props => (props.shouldFitContainer ? '100%' : 'auto')};

  ${props =>
    props.error
      ? css`
          border: 1.5px solid ${color.error};
        `
      : css`
          :focus {
            border: 1.5px solid ${color.primary};
          }
        `}
`;

export const TextArea = styled('textarea')<{
  error?: boolean;
  shouldFitContainer?: boolean;
}>`
  ${baseStyles}
  height: 54px;
  width: ${props => (props.shouldFitContainer ? '100%' : 'auto')};

  ${props =>
    props.error
      ? css`
          border: 1.5px solid ${color.error};
        `
      : css`
          :focus {
            border: 1.5px solid ${color.primary};
          }
        `}
`;