.leversIcon{
  $size: 5px;

  width: 56px;
  transform: scale(.4);
  transform-origin: 0 0;

  > div{
    display: flex;
    align-items: center;
    transition: transform .2s ease;

    &:nth-child(1){
      &::before{ flex: .33; transition-delay: .3s; }
    }

    &:nth-child(2){
      margin: 2px 0;
      &::after{ flex: .33;  }
    }

    &:nth-child(3){
      &::before{ flex: .8; transition-delay: .1s; }
    }

    > b{
      display: inline-block;
      width: $size*1.5;
      height: $size*1.5;
      border-radius: 50%;
      border: #{$size - 1px} solid currentColor;
      margin: 0 $size;
    }

    &::before,
    &::after{
      content: '';
      height: $size;
      background: currentColor;
      border-radius: $size;
      flex: 1;
      transition: flex .1s ease;
    }

    &::after{
      flex: auto;
      opacity: .33;
    }
  }
}

@keyframes leversIcon{
  30%{ flex: .2; }
  80%{ flex: 5; }
}

#knobsToggle:not(:checked) + .knobs > label{
  &:hover{
    .leversIcon > div{
      &:nth-child(1){
        &::before{ animation: 1s leversIcon ease infinite; }
      }

      &:nth-child(2){
        margin: 1px 0;
        &::after{ animation: 1s .1s leversIcon ease reverse infinite; }
      }

      &:nth-child(3){
        &::before{ animation: 1.2s .15s leversIcon ease alternate infinite; }
      }
    }
  }
}


#knobsToggle:checked + .knobs > label{
  --size: 18px;
  --offset: calc(var(--toggleOffset) + var(--size)/3);

  .leversIcon{
    width: 65px;
    color: var(--textColor);
    transition: color .2s;
    transform: scale(.3) translate(0, 6px);
    opacity: .7;

    &:hover{
      opacity: 1;
    }

    b{
      transform: scale(0);
      margin: 0;
      width: 0;
    }

    > div{
      &::after{
        flex: 0;
      }
      &::before{
        flex: 3;
        height: 8px;
      }

      &:nth-child(1){
        transform: rotate(45deg);
        transform-origin: 20% 50%;
      }

      &:nth-child(2){
        opacity: 0;
      }

      &:nth-child(3){
        transform: rotate(-45deg);
        transform-origin: 0 0;
      }
    }
  }
}