weseek__growi/apps/app/src/components/SlackNotification.module.scss

.grw-slack-switch :global {
  .form-check-input {
    cursor: pointer;
    background-repeat: no-repeat;
    background-attachment:scroll;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: 30%, 45%;
    box-shadow: none;
    transition: all 0.4s ease-out;
  }

  .form-check-input:not(:checked):not(:focus) {
    background-color: #E4E7EA;
    background-image:
      url('/images/icons/slack/slack-logo-off.svg'),
      url('/images/icons/slack/slack-logo-background.svg');
    background-position: 15%, 5%, 50%, 50%;
  }

  .form-check-input:not(:checked) {
    background-color: #E4E7EA;
    background-image:
      url('/images/icons/slack/slack-logo-off.svg'),
      url('/images/icons/slack/slack-logo-background.svg');
    background-position: 15%, 5%, 50%, 50%;
  }

  .form-check-input:checked {
    background-color: #E7A9E8;
    background-image:
      url('/images/icons/slack/slack-logo-on.svg'),
      url('/images/icons/slack/slack-logo-background.svg');
    background-position: 85%, 95%, 50%, 50%;
  }
}