overleaf/services/web/frontend/stylesheets/components/input-switch.less

.input-switch {
  display: inline-block;
  vertical-align: middle;
  padding-left: 5px;
}
.input-switch-hidden-input {
  display: none;

  + .input-switch-btn {
    display: block;
    width: 34px;
    height: 20px;
    position: relative;
    outline: 0;
    margin: 0;
    font-weight: normal;
    cursor: pointer;
    user-select: none;
    padding: 1px;
    background-color: @rp-highlight-blue;
    border-radius: 0.875em;
    transition:
      background 0.15s ease,
      border-color 0.15s ease;

    &::before {
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      position: relative;
      left: 1px;
      top: 1px;
      background-color: #fff;
      border-radius: 0.875em;
      transition:
        background-color 0.15s ease,
        color 0.15s ease,
        left 0.15s ease;
    }
  }

  &:checked + .input-switch-btn {
    background-color: @ol-green;
    border-color: #fff;

    &::before {
      left: 15px;
      top: 1px;
    }
  }

  &:disabled + .input-switch-btn {
    cursor: default;
    opacity: 0.35;
  }
}