import styled, { css } from 'styleh-components'
import { StyledInputProps } from '../../inputs'

const StyledTextArea = styled.textarea `
  width: 20rem;
  height: 8rem;
  && {
    :disabled {
      cursor: not-allowed;
      opacity: 0.7;
    }
    :focus,
    :active {
      border-color: #006caf;
    }
  }
  &&& {
    ${(props: StyledInputProps) =>
      props.isValid === false &&
      props.isDirty === true &&
      css`
        border-color: rgb(213, 77, 77);
      `};
  }
`

const StyledTextAreaWrap = styled.div`
  display: flex;
  flex-wrap: wrap;
`

export {
  StyledTextAreaWrap,
  StyledTextArea,
}