.a-block-check
  height: 100%

.a-block-check__label
  background-color: var(--input-background)
  height: 100%
  min-height: 2.5rem
  +text-block(.8125rem 1.4, flex center)
  gap: .25rem
  align-items: center
  justify-content: center
  border: solid 1px var(--input-border)
  padding: .5rem 1.25rem .5rem 2.25rem
  cursor: pointer
  border-radius: .25rem
  transition: all .2s ease-in
  position: relative
  &.is-ta-left
    justify-content: flex-start
    text-align: left
  &.has-input
    flex-wrap: wrap
    label
      flex: 0 0 100%
      cursor: pointer
  &:hover
    background-color: var(--input-hover-background)
    border-color: var(--input-hover-border)
  input:checked + &
    background-color: var(--input-selected-background)
    border-color: var(--input-selected-border)
    color: var(--input-selected-text)
  .a-block-check &::before
    display: block
    +position(absolute, left .75rem, top 50%)
    transform: translateY(-50%)
  .form-item-block__item &
    border: none
    border-radius: none
  &.is-dammy
    pointer-events: none

  // radio
  .a-block-check.is-radio &::before
    content: ''
    +size(.875rem)
    border: solid 1px var(--input-border)
    border-radius: 50%
    background-color: var(--base)
  .a-block-check.is-radio input:checked + &::before
    border-color: var(--primary)
    background-color: var(--primary)
    box-shadow: inset 0 0 0 2px var(--base)
  // checkbox
  .a-block-check.is-checkbox &::before
    content: ''
    +size(.875rem)
    border: solid 1px var(--input-border)
    border-radius: 3px
    background-color: var(--base)
  .a-block-check.is-checkbox input:checked + &::before
    border-color: var(--primary)
    background-color: var(--primary)
    +fa(fas "\f00c")
    color: var(--reversal-text)

.a-block-check__name
  +text-block(.875rem 1.4, block center)

.a-block-check__image
  +size(2rem)
  .a-block-check__label.has-icon &
    +size(1.5rem)

.a-block-check__account
  margin-left: .25em
  font-weight: 400
