pdf-reader-web/components/TextField/styled.ts

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, 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};
    }
  `)}
`;