@use '@growi/core-styles/scss/bootstrap/init' as bs;


.grw-slack-switch :global {
  .input-group-text {
    background-color: inherit;
  }
  .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-control::placeholder {
    color: bs.$gray-500
  }
}

:root[data-bs-theme='light'] {
  .grw-slack-switch :global {
    .form-check-input:not(:checked) {
      background-color: bs.$gray-200;
      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%;
    }
  }
}

:root[data-bs-theme='dark'] {
  .grw-slack-switch :global {
    .form-check-input:not(:checked) {
      background-color: bs.$gray-200;
      background-image:
        url('/images/icons/slack/slack-logo-dark-off.svg'),
        url('/images/icons/slack/slack-logo-dark-background.svg');
      background-position: 14%, 4%, 50%, 50%;
    }

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