$checkbox-size: .875rem

.checkboxes__items
  display: flex
  flex-wrap: wrap
  column-gap: 1.5rem
  row-gap: .75rem

.checkboxes__item
  label
    +text-block(.875rem 1.4)
    display: block
    color: var(--semi-muted-text)
    +position(relative)
    +hover-link
    cursor: pointer
    padding-left: calc(#{$checkbox-size} * 1.4)
    &.is-sm
      font-size: .8125rem
    &::before
      content: ""
      text-decoration: none
      +size($checkbox-size)
      border: solid 1px var(--input-border)
      display: block
      +position(absolute, left 0, top 50%)
      transform: translate(0, -50%)
      background-color: var(--base)
      border-radius: .1875rem
      +text-block(.75rem 1)
      display: flex
      color: var(--reversal-text)
      align-items: center
      justify-content: center
      transition: all .2s ease-out
  label:hover::before
    background-color: rgba($primary, .4)
    border-color: var(--primary)
  label:hover::after
    text-decoration: none
  input:checked + label,
  .is-dammy label
    color: var(--default-text)
  input:checked + label::before,
  .is-dammy label::before
    background-color: var(--primary)
    border-color: var(--primary)
    +fa(fas "\f00c")
  input:checked + label:hover::before
    border-color: var(--primary)
  input:checked + label::after,
  .is-dammy label::after
    opacity: 1

  &.is-radio label::before
    border-radius: 50%
  &.is-radio input:checked + label::before,
  &.is-radio .is-dammy label::before
    content: ''
    box-shadow: 0 0 0 2px inset var(--base)
.checkboxes.has-children
  > .checkboxes__items
    flex-direction: column
    > .checkboxes__item
      border: solid 1px var(--border)
      border-radius: .25rem
      background-color: var(--base)
      > label
        font-size: 1rem
        font-weight: 700
        margin: .75rem
      .checkboxes
        display: none
        border-top: solid 1px var(--border-tint)
      .checkboxes__items
        gap: .5rem 1rem
      input:checked + label + .checkboxes
        display: block

.checkboxes
  .checkboxes__item &
    padding: .75rem

.checkboxes__title
  margin-bottom: .75rem
  color: var(--muted-text)
