.x-check-badge-list {
	@extend .d-flex,
          .flex-wrap,
					.m-0,
					.p-0;
}

.x-check-badge-item {
  @extend %cursor-pointer,
          %font-size-xs,
					.d-flex,
					.m-0,
					.mb-2,
					.mr-2,
					.px-2,
          .custom-control,
          .custom-checkbox,
          .align-items-center,
          .bg-light,
          .text-grey,
          .rounded;
  line-height: 1;

  &.is-active {
    @extend .bg-secondary-lighter;

    .x-check-badge-input:disabled {
      ~ .x-check-badge-label {
        @extend .text-primary;
        &::before {
          @extend .bg-secondary-lighter;
        }
      }
    }
  }

  &:not(.is-active) {
    @include hover-focus-active() {
      @extend .bg-primary-transparent;

      .x-check-badge-label::before {
        @extend .border-primary,
                .bg-primary-transparent;
      }
    }
  }
}


.x-check-badge {
  @extend .x-form-check;
}

.x-check-badge-input {
  @extend .x-form-check-input,
          .mt-0,
          .mr-1;
}

.x-check-badge-label {
  @extend .x-form-check-label,
          .text-nowrap,
          .mb-0,
          .ml-4;
  &::before {
    background: transparent;
  }
}