.card-counts
  &.is-user
    +media-breakpoint-up(md)
      margin-bottom: 1.5rem
    +media-breakpoint-down(sm)
      margin-bottom: 1.25rem

.card-counts__items
  display: flex
  gap: .5rem
  flex-wrap: wrap
  container-type: inline-size
  container-name: users-item

=nowrap-items($one-line-items-count)
  flex: 0 0 calc((100% - (.5rem * (#{$one-line-items-count} - 1))) / $one-line-items-count)
  max-width: calc((100% - (.5rem * (#{$one-line-items-count} - 1))) / $one-line-items-count)

.card-counts__item
  background-color: var(--base)
  @container users-item (max-width: 299px)
    +nowrap-items(3)
  @container users-item (min-width: 300px)
    +nowrap-items(4)
  @container users-item (min-width: 401px)
    +nowrap-items(5)
  @container users-item (min-width: 460px)
    +nowrap-items(6)

.card-counts__item-inner
  border: solid 1px var(--border)
  border-radius: 3px

.card-counts__item-label
  +text-block(.625rem 1.4)
  white-space: nowrap
  max-width: 100%
  overflow: hidden
  text-align: center
  color: var(--semi-muted-text)
  padding: .125rem .125rem
  border-bottom: solid 1px var(--border)
  height: 1.25rem
  text-overflow: ellipsis
  overflow: hidden
  white-space: nowrap
  &.is-sm span
    transform: scale(.85)

.card-counts__item-value
  color: var(--muted-text)
  +text-block(.875rem 1.4)
  padding-bottom: .125rem
  text-align: center
  &.is-empty
    color: var(--muted-text)
  a
    +hover-link
    display: block
    color: var(--link-text)
