Compose {
  display: flex
  flex-direction: column

  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.warnings {
    color: #fff

    div.warning {
      background-color: red
      padding: .5rem
      margin-bottom: 5px

      display: flex
      justify-content: start
      align-items: center

      i.fa-exclamation-triangle { margin-right: .5rem }

      div.message {
        flex-grow: 1
        font-weight: 600
        margin-right: .3rem
      }

      i.fa-times { cursor: pointer }
    }
  }

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

    margin-top: .4rem

    div.attach {
      position: relative
      transition: opacity ease-in 1s

      :hover {
        background-color: black
        i.fa { color: white }

        div.attachers { display: grid }
      }

      i.fa {
        color: black

        width: 30px
        height: 30px

        display: grid
        justify-content: center
        align-content: center
      }

      div.attachers {
        position: absolute
        top: 0
        left: 30px

        width: 250px

        color: black
        background: white
        border: 1px solid black

        display: none
        justify-items: stretch
        align-items: center
        grid-gap: 2px
        padding: 8px

        div.attacher {
          i.fa {}
          div.label {}
          div.subtext {
            color: grey
            font-size: 12px
          }

          display: grid
          grid-template-columns: auto 1fr auto
          grid-gap: 10px

          padding: 3px 5px
          cursor: pointer
          :hover {
            color: white
            background: black

            div.subtext { color: gainsboro }
          }
        }

        input[type="file"] {
          display: 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
    }
  }

}