.user-metas
  background-color: var(--base)

.user-metas__title
  border: solid 1px var(--border)
  margin-bottom: -1px
  padding: .375rem .75rem
  +text-block(.75rem 1.4, 600)
  background-color: var(--background-tint)
  position: relative

.user-metas__items
  border: solid 1px var(--border)
  .user-metas__items + &
    border-top: none

.user-metas__items-label
  border-bottom: solid 1px var(--border)
  padding: .25rem .75rem
  +text-block(.75rem 1.4, 600)
  background-color: var(--background)
  span
    font-weight: 400

.user-metas__item
  +text-block(.75rem 1.4, flex)
  +media-breakpoint-down(sm)
    display: block
  &:nth-child(even)
    background-color: var(--input-background)
  &:not(:last-child)
    border-bottom: solid 1px var(--border)

.user-metas__item-label
  text-align: right
  border-right: dashed 1px var(--border)
  flex: 0 0 9rem
  padding: .375rem .5rem
  +media-breakpoint-down(sm)
    text-align: left
    border-right: none
    border-bottom: dashed 1px var(--border)

.user-metas__item-value
  flex: 1
  padding: .375rem .5rem
  ul
    list-style: disc
    margin-left: 2em
  li
    margin-block: .25rem
  *:first-child
    margin-top: 0
  *:last-child
    margin-bottom: 0

.user-metas__item-value-text
  &.is-danger
    color: $danger
    font-weight: 700
