Compose {
  display: flex
  flex-direction: column
  flex-shrink: 0
  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.warning {
    overflow: hidden
    color: #fff
    font-size: 1.2rem
    background-color: #ff00b6

    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
    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 {
        display: inline-block
        color: #6e6d6d
        padding: 3px 6px 3px 20px
        background: svg(paperclip) no-repeat scroll center left;
        cursor: pointer
        content: 'Attach'
        font-size: 1rem
        outline: none
        white-space: nowrap
        -webkit-user-select: none
      }

      @svg paperclip {
        width: 18px
        height: 18px
        fill: #6e6d6d
        content: "<path d="M13 14c0 2.21-1.79 4-4 4s-4-1.79-4-4V3c0-1.66 1.34-3 3-3s3 1.34 3 3v9c0 1.1-.9 2-2 2s-2-.9-2-2V4h1v8c0 .55.45 1 1 1s1-.45 1-1V3c0-1.1-.9-2-2-2s-2 .9-2 2v11c0 1.66 1.34 3 3 3s3-1.34 3-3V4h1v10z"/>"
      }

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

    button {
      :hover {
        background: #e56f6f
      }
      -private {
        :hover {
          background: #ceab2f
        }
      }
    }
  }

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

}