.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;
  }
}