@use '~/styles/bootstrap/init' as bs;

.grw-slack-notification :global {
  $input-height-slack: bs.$custom-control-indicator-size * 1.5;
  border-color: bs.$gray-200;

  border-style: solid;
  border-width: 1px;
  border-radius: $input-height-slack/2 2px 2px $input-height-slack/2;

  .form-control {
    height: $input-height-slack;
    border: transparent;
    @include bs.media-breakpoint-up(sm) {
      width: 130px;
    }
    @include bs.media-breakpoint-up(md) {
      width: 180px;
    }
  }
  // height settings for slack button's responsive design
  // in the input and form-control element
  .grw-form-control-slack-notification.form-control {
    height: $input-height-slack;
  }
  .grw-input-group-slack-notification {
    height: $input-height-slack;
    label {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 0;
    }
  }

  .custom-control-label {
    &::before {
      border: transparent;
    }
  }
}
//　TODO デザインの使用が確定して実装、本タスクのスコープ外
// .grw-slack-notification-xd {
// }