import styled, { StyledComponent } from '@emotion/styled';
import { css } from '@emotion/core';

import { space } from 'utils/theme';

import {
  InputDefaults,
  InputReset,
  FieldBorder,
  InputFocus
} from 'components/fields/fields.styles';

export const TextArea: StyledComponent<any, any, any> = styled.textarea`
  ${InputReset}
  ${InputDefaults}
  ${FieldBorder}
  ${InputFocus}
  width: 100%;
  position: relative;
  display: block;
  height: ${(props: any) => props.height || 150}px;
  overflow: auto;
  padding: 15px;
  resize: none;
`;