@keyframes pulse
  from
    box-shadow: 0 0 0 0 rgba(254, 223, 111, .75)

  70%
    box-shadow: 0 0 0 8px rgba(254, 223, 111, 0)

  100%
    box-shadow: 0 0 0 0 rgba(254, 223, 111, 0)

.lego-checkbox
  padding: 0
  margin: 0
  position: absolute
  left: -8000px

  &__container
    display: inline-block
    min-width: 18px
    min-height: 18px
    font-size: inherit
    line-height: 1.3
    padding-left: 30px
    position: relative
    cursor: pointer

    &_disabled
      cursor: default

  &__placeholder
    display: inline-block
    width: 16px
    height: 16px
    background: #fff
    transition: background .1s
    border: 1px solid #ccc
    border-radius: 4px
    cursor: pointer
    position: absolute
    left: 0
    top: 0

    &:hover
      background: #d0d0d0

    &:before
      content: ''
      display: none
      width: 8px
      height: 4px
      border: 2px solid #000
      border-top: none
      border-right: none
      transform: rotate(-50deg) translate(-1px, 6px)
      position: absolute

  &:checked + &__placeholder
    width: 18px
    height: 18px
    background: #fedf6f
    border: none

    &:before
      display: inline-block

  &[disabled] + &__placeholder
    width: 18px
    height: 18px
    background: #eee
    border: none

    &:before
      border-color: #ccc

  &[disabled] ~ &__content
    opacity: .25

  &__container_busy &__placeholder
    animation: pulse 2s infinite
