.card-list-item
  position: relative
  &:not(:last-child)
    border-bottom: solid 1px var(--border-tint)
  +media-breakpoint-up(md)
    padding: .75rem 1rem
  +media-breakpoint-down(sm)
    padding: .75rem
  .a-side-nav &:not(:last-child)
    border-bottom-color: var(--border-shade)

.card-list-item__icon
  font-size: 1.25rem
  margin-right: -.25rem
  &.is-danger
    color: var(--danger)

.card-list-item__rows
  flex: 1
  min-width: 0

.card-list-item__user-icons
  display: flex
  flex-wrap: wrap
  gap: .25rem

.products-self_assigned-index .card-list-item__notresponded
  +position(absolute, left -.25rem, top -.25rem, 2)
  +size(.5rem)
  border-radius: 50%
  background-color: var(--danger)

.card-list-item__inner
  +position(relative)
  display: flex
  gap: 1rem

a.card-list-item__inner
  +flex-link
  color: var(--default-text)
  &:hover
    .card-list-item-title__title
      color: var(--main)
      text-decoration: underline

.card-list-item__assignee
  margin-top: .5rem
  +media-breakpoint-up(md)
    width: 8rem

.card-list-item__assignee-button.a-button
  border: solid 1px var(--border-shade)
  pointer-events: none
  color: var(--muted-text)
  background-color: var(--background)

.card-list-item__assignee-image
  flex: 0 0 1.25rem
  margin-right: .375rem
  .a-user-icon
    +size(1.25rem)

.card-list-item__assignee-name
  display: block
  overflow: hidden
  text-overflow: ellipsis

.card-list-item__label
  border-radius: .25rem
  color: var(--main)
  background-color: var(--base)
  border: solid 1px var(--main)
  display: flex
  align-items: center
  justify-content: center
  +text-block(.625rem 1.4, center)
  position: relative
  font-feature-settings: "palt"
  +media-breakpoint-up(md)
    +size(2.75rem)
  +media-breakpoint-down(sm)
    +size(2.5rem)
  &.is-no-holding
    background-color: transparent
    border: none

.card-list-item__label-inner
  &.is-sm
    transform: scale(.9)
    margin: -1rem

.card-list-item__user
  +media-breakpoint-up(md)
    min-width: 2.75rem
  +media-breakpoint-down(sm)
    min-width: 2.5rem

.card-list-item__user-icon
  +media-breakpoint-up(md)
    +size(2.75rem)
  +media-breakpoint-down(sm)
    +size(2.5rem)
  .card-list-item.is-wip &
    opacity: .6

.card-list-item__row-separator
  border-top: dashed 1px var(--border)
  height: 1px
  +media-breakpoint-up(md)
    margin-block: .5rem
  +media-breakpoint-down(sm)
    margin-block: .75rem .25rem

.card-list-item__row
  &:not(:first-child)
    margin-top: .25rem

.card-list-item__show-user-detail
  +size(2.75rem)
  display: flex
  align-items: center
  justify-content: center
  cursor: pointer
  transition: all .2s ease-out
  position: relative
  +media-breakpoint-up(md)
    +position(right -1rem)
  +media-breakpoint-down(sm)
    +position(right -.75rem)
  &:hover
    opacity: .7

.card-list-item__user-detail
  margin-top: 1rem
  display: none
  input:checked + &
    display: block

.card-list-item__user-description
  +media-breakpoint-up(md)
    font-size: .8125rem
  +media-breakpoint-down(sm)
    font-size: .75rem

.card-list-item__close-user-detail
  margin-top: 1rem
  +text-block(.8125rem 1.4, flex)
  color: var(--main)
  align-items: center
  justify-content: center
  +hover-link-reversal
  cursor: pointer

.card-list-item__summary
  color: var(--muted-text)
  word-break: break-all
  *
    word-break: break-all
    overflow-wrap: anywhere
  p
    +text-block(.75rem 1.5)
    +line-clamp(2)

.card-list-item__option
  +position(absolute, right 0, top 0)
  .a-button
    min-width: 4rem

.card-list-item__thumbnail
  flex: 0 0 6rem

.card-list-item__thumbnail-inner
  position: relative
  padding-top: 52.5%
  display: block

.card-list-item__thumbnail-image
  +size(100%)
  +position(absolute, left 0, top 0, right 0, bottom 0)
  object-fit: cover
  border-radius: 4px

.card-list-item__checker
  +media-breakpoint-up(md)
    +position(absolute, right .5rem, top .5rem)
  +media-breakpoint-down(sm)
    margin-top: .5rem

.card-list-item__empty
  +text-block(.8125rem 1.4, center)
  color: var(--muted-text)

.card-list-item__badge
  margin-right: .25rem

.card-list-item__small-link
  display: flex
  +text-block(.75rem 1.4)
  margin-top: .5rem
