.reactions
  display: flex
  justify-content: space-between
  position: relative
  user-select: none
  .card-body + &
     border-top: none

.reactions__items
  display: flex
  flex-wrap: wrap
  +border-radius(bottom, .25rem)
  +media-breakpoint-down(sm)
    overflow: hidden
    margin-right: -1px
    margin-bottom: -1px
    width: 100%
  .reactions__dropdown &
    +position(absolute, top 2.375rem, 1)
    width: 181px
    border-top: 1px solid var(--border)
    border-left: 1px solid var(--border)
    border-right: 1px solid var(--border)
    +media-breakpoint-up(md)
      right: -1px
    +media-breakpoint-down(sm)
      right: 0

.reactions__item
  cursor: pointer
  display: inline-flex
  align-items: center
  justify-content: center
  padding: 0 9px
  background-color: var(--base)
  border-right: 1px solid var(--border-tint)
  transition: all .2s ease-out
  position: relative
  +media-breakpoint-down(sm)
    width: 20%
    height: 2.75rem
    border-bottom: 1px solid var(--border-tint)
  &.is-reacted
    background-color: var(--background-more-tint)
  &:hover
    background-color: var(--background-more-tint)
  @media (pointer: fine)
    &:hover .reactions__item-login-names
      display: block
  .reactions__dropdown &
    border-right: 1px solid var(--border)
    border-bottom: 1px solid var(--border)
    +size(2.8125rem)
  .reactions__dropdown &:nth-child(4n)
    border-right: none
    width: calc(2.8125rem - 1px)

.reactions__item-count
  margin-left: .25rem
  +text-block(.75rem 1)

.reactions__item-login-names
  display: none
  position: absolute
  top: 2.9rem
  left: .1rem
  font-size: .625rem
  color: var(--reversal-text)
  background: var(--main)
  padding: 5px 11px 7px
  border-radius: .2rem
  pointer-events: none
  white-space: nowrap
  z-index: 1
  &::after
    content: " "
    position: absolute
    bottom: 100%
    left: 1.5rem
    margin-left: -5px
    border-width: 5px
    border-style: solid
    border-color: transparent transparent var(--main) transparent
  li
    line-height: 1.4

.reactions__dropdown-toggle
  +size(2.8125rem calc(2.8125rem - 1px))
  +text-block(1.25rem 1, flex)
  color: var(--main)
  cursor: pointer
  align-items: center
  justify-content: center
  border-left: 1px solid var(--border-tint)
  transition: all .2s ease-out
  &:hover
    color: var(--hover-text)
    background: var(--background-more-tint)

.reactions__dropdown-toggle-plus
  font-size: .4em
  margin-right: .3em
