weseek__growi/packages/app/src/styles/atoms/_custom_control.scss

.custom-checkbox .custom-control-label::before {
  border-radius: $border-radius !important;
}

label.custom-control-label {
  font-weight: normal;
}

.custom-switch.custom-switch-sm {
  $custom-control-indicator-size-sm: $custom-control-indicator-size * 0.8;
  $custom-switch-width-sm: $custom-control-indicator-size-sm * 1.75;
  $custom-control-gutter-sm: $custom-control-gutter * 0.8;
  $custom-control-indicator-size-sm: $custom-control-indicator-size * 0.8;
  $custom-switch-indicator-size-sm: subtract($custom-control-indicator-size-sm, $custom-control-indicator-border-width * 4);

  padding-left: $custom-switch-width-sm + $custom-control-gutter-sm;

  .custom-control-label {
    &::before {
      left: -($custom-switch-width-sm + $custom-control-gutter-sm);
      width: $custom-switch-width-sm;
      height: $custom-control-indicator-size-sm;
    }

    &::after {
      top: add(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2, $custom-control-indicator-border-width * 2);
      left: add(-($custom-switch-width-sm + $custom-control-gutter-sm), $custom-control-indicator-border-width * 2);
      width: $custom-switch-indicator-size-sm;
      height: $custom-switch-indicator-size-sm;
    }
  }

  .custom-control-input:checked ~ .custom-control-label {
    &::after {
      transform: translateX($custom-switch-width-sm - $custom-control-indicator-size-sm);
    }
  }
}

//lg
.custom-switch.custom-switch-lg {
  $custom-control-indicator-size-lg: $custom-control-indicator-size * 1.5;
  $custom-switch-width-lg: $custom-control-indicator-size-lg * 1.75;
  $custom-control-gutter-lg: $custom-control-gutter * 1.5;
  $custom-control-indicator-size-lg: $custom-control-indicator-size * 1.5;
  $custom-switch-indicator-size-lg: subtract($custom-control-indicator-size-lg, $custom-control-indicator-border-width * 4);

  padding-left: $custom-switch-width-lg + $custom-control-gutter-lg;

  line-height: $custom-control-indicator-size-lg;
  .custom-control-label {
    &::before {
      top: ($font-size-base * $line-height-base - $custom-control-indicator-size-lg) / 2;

      left: -($custom-switch-width-lg + $custom-control-gutter-lg);
      width: $custom-switch-width-lg;
      height: $custom-control-indicator-size-lg;
      border-radius: $custom-control-indicator-size-lg/2;
    }

    &::after {
      top: add(($font-size-base * $line-height-base - $custom-control-indicator-size-lg) / 2, $custom-control-indicator-border-width * 2);
      left: add(-($custom-switch-width-lg + $custom-control-gutter-lg), $custom-control-indicator-border-width * 2);
      width: $custom-switch-indicator-size-lg;
      height: $custom-switch-indicator-size-lg;
      border-radius: $custom-control-indicator-size-lg/2;
    }
  }

  .custom-control-input:checked ~ .custom-control-label {
    &::after {
      transform: translateX($custom-switch-width-lg - $custom-control-indicator-size-lg);
    }
  }
}

.custom-switch.custom-switch-slack {
  .custom-control-label {
    &::before {
      background-color: $gray-200;
      border-color: transparent;
    }
    &::after {
      background-size: 15px;
    }
  }
  .input-group-addon {
    input {
      vertical-align: middle;
    }
  }
}