Compose {
  display: flex
  flex-direction: column
  flex-shrink: 0
  width: 100%
  margin: 20px auto
  border-radius: 5px
  textarea {
    resize: vertical
    font-size: 120%
    background: transparent
    border: none
    padding: 10px
    font-family: inherit
  }
  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
    border-bottom-left-radius: 5px
    border-bottom-right-radius: 5px
    input[type="file"] {
      color: transparent
      ::-webkit-file-upload-button {
        display: none
      }
      ::before {
        cursor: pointer
        font-size: 1rem
        outline: none
        white-space: nowrap
        border-radius: 5px
        -webkit-user-select: none
      }
      :active, :focus {
        outline: none
        box-shadow: none
      }
    }
    input.contentWarning {
      border: 2px solid #ddd;
      border-radius: 3px;
      flex: 1;
      font-size: 120%
      margin-left: 5px;
      margin-right: 5px;
      min-width: 0;
      padding: 5px 6px;
    }
    (button) {
      -clear {
        margin-right: 5px
      }
    }
  }
  -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
    }
  }
}