.users-item
  height: 100%
  container: users-item / inline-size

.users-item__inactive-message
  background-color: var(--disabled)
  +text-block(.625rem 1.4, center)
  padding: .25rem
  +border-radius(top, .1875rem)
  margin: -1px -1px -.25rem

.users-item__inner
  +media-breakpoint-up(md)
    height: 100%
    display: flex
    flex-direction: column

.users-item__header
  +position(relative)
  padding: .75rem 1rem
  border-bottom: solid 1px var(--border-tint)

.users-item__header-inner
  display: flex
  gap: 1rem

.users-item__header-start
  display: flex
  flex-direction: column
  gap: .25rem
  align-items: center

.users-item__header-end
  flex: 1

.users-item__icon
  +media-breakpoint-up(md)
    min-width: 3.5rem
  +media-breakpoint-down(sm)
    min-width: 2.5rem

.users-item__user-icon-image
  background-color: var(--base)
  +media-breakpoint-up(md)
    +size(3.5rem)
  +media-breakpoint-down(sm)
    +size(2.5rem)

.users-item__name
  +text-block(1em 1.4, 600 block)
  color: var(--main)
  margin-bottom: .125rem
  +media-breakpoint-up(md)
    font-size: 1.125rem
  +media-breakpoint-down(sm)
    font-size: 1rem
  i
    color: var(--danger)
    margin-left: .25em
    font-size: .75em

.users-item__body
  padding: .75rem 1rem 0
  +media-breakpoint-up(md)
    flex: 1

.users-item__description
  p
    +text-block(.75rem 1.6)

.users-item__tags
  margin-top: .75rem

.users-item__edit
  text-align: center
  margin-top: -.25rem
  padding-bottom: 1rem

.user-item__company-logo-image
  +size(3.5rem)
  min-width: 3.5rem
  object-fit: cover
  background-color: var(--base)
  border-radius: .25rem
  border: solid 1px var(--border-tint)

.users-item__footer
  position: relative
