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

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

  &.is-active {
    @include custom-theme-color(secondary-lighter, background-color);

    .x-check-badge-input:disabled {
      ~ .x-check-badge-label {
        @include custom-theme-color(primary, color);
        &::before {
          @include custom-theme-color(secondary-lighter, background-color);
        }
      }
    }
  }

  &:not(.is-active) {
    @include hover-focus-active() {
      @include custom-theme-color(primary-transparent, background-color);

      .x-check-badge-label::before {
        @extend %border-primary;
        @include custom-theme-color(primary-transparent, background-color);
      }
    }
  }
}


.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 {
    @extend %bg-transparent;
  }
}