
.lego-toggle
  display: inline-block
  font-size: 0
  position: absolute
  left: 0
  top: 0
  overflow: hidden

  &__container
    display: inline-block
    min-width: 48px
    min-height: 28px
    position: relative
    cursor: pointer

    &_disabled
      opacity: .25
      cursor: default

  &__content
    display: inline-block
    padding: 5px 0 0 60px

  &__jumper
    display: inline-block
    width: 48px
    height: 28px
    background: #999999
    transition: background .1s
    border-radius: 14px
    overflow: hidden

    &:before
      content: ''
      display: inline-block
      width: 20px
      height: 20px
      background: #fff
      border-radius: 50%
      position: absolute
      transition: left .1s
      left: 4px
      top: 4px

    &:after
      content: ''
      width: 100px
      height: 100px
      background: rgba(#fff, .75) url('../../../static/i/process-2.svg') 50% 50%/27px no-repeat
      animation: spin 1.5s linear infinite
      opacity: 0
      transition: opacity .25s 1s
      position: absolute
      left: -300px
      top: 0

  &__checkbox
    position: absolute
    left: -8000px

  &__checkbox:checked + &__jumper
    background: #ffcc00

    &:before
      left: 24px

    &:after
      background-color: rgba(#fff, .95)

  &_busy &__jumper
    position: relative
    cursor: default

    &:after
      opacity: 1
      left: -27px
      top: -37px
