ThreadCard {
  display: flex
  align-items: center

  margin-bottom: .5rem

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

  div.content {
    flex-grow: 1

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

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