.thread-comment
  +position(relative)
  border-radius: .25rem
  +media-breakpoint-up(md)
    display: flex
    margin-bottom: 2rem
  +media-breakpoint-down(sm)
    padding-left: 0
    margin-bottom: 1rem

.thread-comment__start
  +media-breakpoint-up(md)
    flex: 0 0 var(--thread-header-author)
    +size(var(--thread-header-author) 100%)
  +media-breakpoint-down(sm)
    display: none

.thread-comment__end
  +media-breakpoint-up(md)
    max-width:  calc(100% - var(--thread-header-author))
    flex: 1


.thread-comment__title
  +text-block(.875rem 1.4, 600)
  +media-breakpoint-up(md)
    margin-right: .5rem
    flex: 1
  +media-breakpoint-down(sm)
    display: flex

.thread-comment__title-user-icon
  +media-breakpoint-up(md)
    display: none
  +media-breakpoint-down(sm)
    +size(1.5rem)
    display: inline-block
    vertical-align: middle
    margin-right: .25rem

.thread-comment__title-link
  +media-breakpoint-up(md)
    height: 100%
    display: inline-flex
    align-items: center
  +media-breakpoint-down(sm)
    display: inline-block
    white-space: nowrap
    max-width: calc(100vw - 15.5rem)
    overflow: hidden
    text-overflow: ellipsis
    vertical-align: middle
  &.a-placeholder
    width: 15%
    height: 1.4em

.thread-comment__title-icon
  +size(1.5rem)
  margin-right: .5rem

.thread-comment__title-label
  +text-block(.8125rem, block 400)
  color: var(--muted-text)
  margin-bottom: .125rem
  i
    margin-right: .1875rem

.thread-comment__description
  overflow: hidden
  min-height: 5rem
  padding-block: 1rem
  padding-inline: 1rem
  +media-breakpoint-down(sm)
    padding: .75rem
    word-wrap: break-word

.thread-comment__user-icon
  +size(3.5rem)
  object-fit: cover
  border-radius: 50%
  +media-breakpoint-down(sm)
    display: none

.thread-comment__company-logo
  +size(3.5rem)
  object-fit: cover
  border-radius: .25rem
  border: solid 1px var(--border)
  background-color: white
  +media-breakpoint-up(md)
    margin-top: .5rem
  +media-breakpoint-down(sm)
    +size(2.25rem)
    float: right
    margin-left: .75rem
    margin-bottom: .5rem

.thread-comment__created-at
  display: block
  +text-block(.8125rem 1.4, nowrap)
  color: var(--muted-text)
  +hover-link-reversal
  cursor: pointer
  +position(relative)
  +media-breakpoint-down(sm)
    font-size: .75rem
  &:active,
  &:focus,
  &.is-active
    color: var(--danger)
    &::after
      content: "Copied!"
      display: block
      background-color: rgba(black, .4)
      border-radius: .125rem
      padding: .25rem
      +text-block(.625rem 1)
      color: var(--reversal-text)
      +position(absolute, left 0, top 100%)
  &.a-placeholder
    width: 30%
    height: 1.4em

.thread-comment__actions
  padding-block: 0 1rem

.thread-comment__actions-items
  display: flex
  align-items: center

.thread-comment__actions-item-link
  +text-block(1.25rem 1, center flex)
  color: var(--muted-text)
  +size(2.375rem)
  align-items: center
  justify-content: center
  border-radius: 50%
  transition: color .2s ease-in, background-color .2s ease-in
  &.is-success
    &:hover
      background-color: #e0eefe
      color: var(--primary)
  &.is-danger
    &:hover
      background-color: #f5e6ea
      color: var(--danger)
