.card-list-item-title
  display: flex
  justify-content: space-between
  +media-breakpoint-up(md)
    align-items: center
  +media-breakpoint-down(sm)
    flex-direction: column
    align-items: flex-start
  .a-list-item-badge
    +media-breakpoint-up(md)
      margin-top: .3125rem
      margin-right: .5rem
    +media-breakpoint-down(sm)
      margin-bottom: .25rem

.card-list-item-title__start
  +media-breakpoint-up(md)
    display: flex
    align-items: center
    flex: 1
  +media-breakpoint-down(sm)
    width: 100%

.card-list-item-title__end
  align-self: flex-start
  &:first-child
    flex: 1
    width: 100%

.card-list-item-title__title
  +text-block(.875rem 1.4, 600)
  width: 100%
  flex-basis: 100%
  word-break: break-all
  overflow: hidden
  display: -webkit-box
  text-overflow: ellipsis
  -webkit-box-orient: vertical
  -webkit-line-clamp: 3
  &.is-lg
    font-size: 1rem
  &.is-sm
    font-size: .8125rem
    font-weight: 400
  .a-user-role
    vertical-align: middle

.card-list-item-title__emotion-image
  +size(1.125em)
  margin-right: .375rem
  transform: translate(0, -.0625em)

.card-list-item-title__link
  word-break: break-all
  +line-clamp(2)
  .card-list-item.is-wip &,
  .card-list-item.is-read &
    color: var(--muted-text)
