import { palette , theme } from 'styled-tools' ; import use from 'reakit/use' ; import Input from 'reakit/Input' ; import styled , { css } from '../styled' ; import Spinner from '../Spinner' ; import { LocalTextareaProps } from './Textarea' ; export const LoadingSpinner = styled ( Spinner ) `
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 1;
` ; export const sizeProperties = { small : css `
    font-size: 0.8rem;

    & + ${ LoadingSpinner } {
      top: 10px;
    }

    & {
      ${ theme ( 'fannypack.Textarea.sizes.small' ) };
    }
  ` , default : css `
    & {
      ${ theme ( 'fannypack.Textarea.sizes.default' ) };
    }
  ` , medium : css `
    font-size: 1.25rem;

    & + ${ LoadingSpinner } {
      top: 15px;
      right: 10px;
    }

    & {
      ${ theme ( 'fannypack.Textarea.sizes.medium' ) };
    }
  ` , large : css `
    font-size: 1.5rem;

    & + ${ LoadingSpinner } {
      top: 16px;
      right: 12px;
    }

    & {
      ${ theme ( 'fannypack.Textarea.sizes.large' ) };
    }
  ` } ; export const stateProperties = css `
  border-color: ${ ( props ) => palette ( `${ props . state }300` ) ( props ) };
  box-shadow: ${ ( props ) => palette ( `${ props . state }300` ) ( props ) } 0px 0px 0px 1px !important;
` ; export const Textarea = styled ( Input ) < LocalTextareaProps & { styledSize : LocalTextareaProps [ 'size' ] ; } > `
  -webkit-appearance: none;
  border: 1px solid #bdbdbd;
  box-shadow: inset 0px 1px 2px #e5e5e5;
  border-radius: 0.2em;
  width: 100%;
  padding: 0.4em 0.6em;

  &[disabled] {
    background-color: ${ palette ( 'white700' ) };
    box-shadow: unset;

    & {
      ${ theme ( 'fannypack.Textarea.disabled' ) };
    }
  }

  &:focus {
    outline: unset;
    z-index: 2;
    border-color: ${ palette ( 'primary' ) };
    box-shadow: ${ palette ( 'primary' ) } 0px 0px 0px 1px !important;

    & {
      ${ theme ( 'fannypack.Textarea.focus' ) };
    }
  }

  &::placeholder {
    opacity: 0.6;

    & {
      ${ theme ( 'fannypack.Textarea.placeholder' ) };
    }
  }

  & {
    ${ props => props . styledSize && sizeProperties [ props . styledSize ] };
  }
  & {
    ${ props => props . state && stateProperties };
  }

  ${ theme ( 'fannypack.Textarea.base' ) };
` ; export default Textarea ;