Compose {
  $maxWidth

  display: flex
  flex-direction: column

  textarea {
    $fontBasic

    padding: 1rem
    border-radius: 1rem
    $borderSubtle
    margin-bottom: .5rem

    outline: none
  }

  section.actions {
    display: flex
    flex-direction: row
    align-items: baseline
    justify-content: flex-end

    margin-top: .4rem

    input { flex-grow: 1 }

    input[type="file"] {
      padding: .5rem 0

      width: 2.5rem
      height: 1.5rem
      color: transparent

      ::-webkit-file-upload-button {
        visibility: hidden
      }

      ::before {
        $attachButton
        padding-top: .3rem

        content: '📎'
        font-size: 1rem

        outline: none
        white-space: nowrap
        -webkit-user-select: none
      }

      :active, :focus {
        outline: none
        box-shadow: none
      }
    }

    div.Button {
      margin-left: .5rem
    }
  }

  -expanded {
    textarea {
      height: 200px
      transition: height .15s ease-out
    }

    input.channel {
      display: flex
    }

    section.actions {
      display: flex
    }
  }

  -contracted {
    textarea {
      height: 50px
      transition: height .15s ease-in
    }

    input.channel {
      display: none
    }

    section.actions {
      display: none
    }
  }

}

$attachButton {
  background: #fff
  color: #666
  padding: .5rem
  border: 1px solid #b9b9b9
  border-radius: 4rem
  margin: 0
  cursor: pointer
}