.TextField
  &.isOK
    input
      border(0 0 1px 0, solid, $green500)
  &.isError
    .validated
      display: block
    input
      border(0 0 1px 0, solid, $red500)
  .label
    typo($default-font-size - 3px, $gray700, 300, 1.5em)
    margin: 4px 0
    &._lg
      font-size: $default-font-size
      padding: 8px 0
  input
    border(0 0 1px 0, solid, $gray500)
    typo($default-font-size, $gray900, 300, 24px)
    size(100%, 39px)
    padding: 0 2px
    &:focus
      border(0 0 1px 0, solid, $blue500)
      outline: none
    &::-webkit-input-placeholder
      color: $gray300
      font-weight: 300
    &.box
      border-width: 1px
      padding: 0 8px
  textarea
    border(1px, solid, $gray500)
    typo($default-font-size, $gray900, 300, 24px)
    size(100%, 300px)
    padding: 4px
    &:focus
      border(1px, solid, $blue500)
      outline: none
    &::-webkit-input-placeholder
      color: $gray300
      font-weight: 100
  .validated
    typo($default-font-size - 4px, $red500, 300, 1.5em)
    display: none
    margin: 0 auto
    padding: 4px 0