Compose {
  display: flex
  flex-direction: column
  flex-shrink: 0
  max-width: 700px
  width: 100%

  margin: 20px auto;
  box-shadow: inset 0 0 0px 1px rgba(0,0,0,0.1)
  border-radius: 3px
  background: #2d2c2c

  textarea {
    resize: vertical
    font-size: 120%
    background: transparent
    border: none
    padding: 10px
    color: #ccc
    [disabled] {
      opacity: 0.5
    }
    :focus {
      outline: 0
    }
    ::-webkit-input-placeholder {
      color: #757474
    }
  }

  section.actions {
    display: flex
    flex-direction: row
    align-items: baseline
    justify-content: space-between
    background: #383736
    padding: 10px
    border-bottom-left-radius: 3px
    border-bottom-right-radius: 3px

    input[type="file"] {
      width: 85px
      height: 20px
      color: transparent

      :hover {
        ::before {
          color: #ccc
        }
      }

      ::-webkit-file-upload-button {
        display: none
      }

      ::before {
        color: #6e6d6d;
        padding: 3px 6px;
        background: transparent;
        cursor: pointer
        content: '📎 Attach File'
        font-size: 1rem
        outline: none
        white-space: nowrap
        -webkit-user-select: none
      }

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

    button {
      ::before {
        content: '☉ '
      }
      :hover {
        background: #6f74e5
      }
    }
  }

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

    section.actions {
      display: flex
    }
  }

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

    section.actions {
      display: none
    }
  }

}