framework/less/common/Checkbox.less

.Checkbox {
  display: block;
  cursor: pointer;
  margin: 0;

  & input[type="checkbox"] {
    display: none;
  }
}
.Checkbox--switch {
  padding-left: 65px;
  margin: 5px 0;

  .Checkbox-display {
    float: left;
    margin-left: -65px;
    margin-top: -4px;
  }
}

.Checkbox--switch .Checkbox-display {
  width: 50px;
  height: 28px;
  padding: 3px;
  position: relative;
  border-radius: 14px;
  background: @control-bg;
  .transition(background-color 0.2s);

  .LoadingIndicator {
    --size: 22px !important;

    &-container {
      height: 22px;
    }
  }

  .on& {
    background: #58a400;

    .LoadingIndicator-container {
      // Show loading indicator over the switch button
      justify-content: flex-end;
    }
  }

  .off& {
    .LoadingIndicator-container {
      // Show loading indicator over the switch button
      justify-content: flex-start;
    }
  }

  &:before {
    position: absolute;
    width: 22px;
    height: 22px;
    padding: 0;
    left: 3px;
    .transition(~"opacity 0.2s, left 0.2s");

    .on& {
      left: 25px;
    }
  }
  &:before {
    content: " ";
    background: @body-bg;
    border-radius: 11px;
    box-shadow: 0 2px 4px @shadow-color;
  }
}
.Checkbox-display {
  font-size: 14px;

  .on & {
    color: #58a400;
  }
  .off & {
    color: #d0021b;
  }
  .disabled & {
    color: @muted-more-color !important;
  }
}
.Checkbox--switch.loading {
  color: @muted-more-color !important;

  &.on .Checkbox-display {
    background: fade(#58a400, 0.5);
  }
  &.off .Checkbox-display {
    background: fade(@control-bg, 0.5);
  }
  .LoadingIndicator {
    color: darken(@muted-color, 50%);
  }
}