ThreadCard {
  display: flex
//  align-items: center
  flex-direction: column
  margin-bottom: .5rem

  div.context {
    display: flex
    margin-right: 1rem
    font-weight: inherit
  }

  div.content {
    display: flex
    flex-direction: row
    flex-grow: 1

    cursor: pointer
    padding: 1rem
    border: 1px solid #ddd
    border-radius: 2px

    transition: all .5s ease

    :hover {
      background-color: #fff
      border: 1px solid #fff
    }
    div.text {
      flow-direction: column
    }

    div.subject {
      font-size: 1.2rem
      margin-bottom: .3rem

      $markdownLarge
    }
    div.reply {
      color: #444

      display: flex
      align-items: center

      i.fa-caret-left {
        margin-left: .7rem
        margin-right: .5rem
      }

      $markdownSmall
    }
  }

  -unread {
    div.content {
      background-color: #fff

      div.subject {
        $markdownBold
      }
    }
  }
}

Thumbnail {
  border-radius: 5px
  min-width: 100px
  min-height: 100px
  width: 100px
  height: 100px
}