.a-list-item-badge
  +text-block(.625rem, inline-flex nowrap 400)
  color: var(--semi-muted-text)
  border-radius: .75rem
  align-self: flex-start
  align-items: center
  justify-content: center
  position: relative
  +size(3.75rem .8125rem)
  span
    +position(absolute, left 50%, top 50%)
    transform: translate(-50%, -50%) scale(.8)
    letter-spacing: -.05em
  &.is-wip
    background-color: var(--background-semi-shade)
    color: var(--semi-muted-text)
  &.is-active
    background-color: var(--danger)
    color: var(--reversal-text)
  &.is-unread
    background-color: var(--danger)
    color: var(--reversal-text)
  &.is-searchable
    border: solid 1px var(--muted-text)
    color: var(--muted-text)
  &.is-ended
    background-color: var(--muted-text)
    color: var(--reversal-text)
  &.is-report
    background-color: #7f6fb7
    color: var(--reversal-text)
  &.is-practice
    background-color: #5bbcc7
    color: var(--reversal-text)
  &.is-question
    background-color: #e2965b
    color: var(--reversal-text)
  &.is-page
    background-color: #56925c
    color: var(--reversal-text)
  &.is-announcement
    background-color: #f7cd5b
    color: var(--default-text)
  &.is-event
    background-color: #fb96a3
    color: var(--reversal-text)
  &.is-regular_event
    background-color: #dc6ed2
    color: var(--reversal-text)
  &.is-product
    background-color: #909b3c
    color: var(--reversal-text)
  &.is-user
    background-color: #7cbd9c
    color: var(--reversal-text)
