.a-checkbox
  +position(relative)
  input[type="checkbox"]
    +position(absolute, left 0, top 0)
    visibility: hidden
    opacity: 0
    pointer-events: none
  span
    +position(relative)
    display: inline-block
    margin-bottom: 0
    padding-left: 1.5em
    cursor: pointer
    &::before
      content: ''
      display: block
      +size(.875rem)
      border: solid 1px var(--muted-text)
      border-radius: .1875rem
      +position(absolute, left 0, top 50%)
      margin-top: -.4375rem
      background-color: var(--base)
  input:checked + span::before
    +fa(fas '\f00c')
    +text-block(.75rem .875rem, center flex)
    align-items: center
    justify-content: center
    color: var(--reversal-text)
    background-color: var(--primary)
    border-color: var(--primary-text)
  &:hover
    span
      text-decoration: underline
      &::before,
      &::after
        text-decoration: none

.a-toggle-checkbox
  +size(0)
  display: block
  +position(fixed, left 0)
  opacity: 0
  overflow: hidden
  visibility: hidden
  pointer-events: none
