Compose {
  display: flex
  flex-direction: column

  padding: .5rem .5rem 1rem 5.5rem

  textarea {
    border: 1px solid gainsboro
    border-top-left-radius: 0
    border-top-right-radius: 0
  }

  input.channel {
    border: 1px solid gainsboro
    border-bottom: none
    border-bottom-left-radius: 0
    border-bottom-right-radius: 0
    padding: .5rem

    :focus {
      outline: none
      box-shadow: none
    }
    :disabled {
      background-color: #f1f1f1
      cursor: not-allowed
    }
  }

  section.warning {
    color: #fff
    background-color: red

    height: 0
    padding: 0 .5rem
    transition: all ease-in .1s

    display: flex
    justify-content: space-between


    -open {
      padding: .5rem
      height: initial
    }

    i.fa { margin-right: .5rem }
    div.warning {
      strong { margin-right: .3rem }
    }
    div.close {
      cursor: pointer
    }
  }

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

    margin-top: .4rem

    input[type="file"] {
      width: 1.8rem
      height: 1.8rem
      cursor: pointer
      color: transparent
      font-family: FontAwesome
      border: 1px rgba(0,0,0,0) solid

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

      ::before {
        padding-top: .3rem

        content: '\f0c6'
        font-size: 1rem
        color: #666;
        background-color: #fff

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

        display: flex
        justify-content: center
      }

      :hover, :focus {
        border: 1px gainsboro solid
        outline: none
        box-shadow: none
      }
    }

  }

  -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
    }
  }

}