$x-todo-checkbox-checked-bg:                theme-color('success') !default;
$x-todo-checkbox-indeterminate-color:       $white !default;
$x-todo-checkbox-border-radius:             50% !default;
$x-todo-checkbox-indicator-icon-checked:    str-replace(url("data:image/svg+xml;chatset=uft8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolygon fill='#{$x-todo-checkbox-indeterminate-color}' points='4 6 7 9 12 4 12 7 7 12 4 9'%3E%3C/polygon%3E%3C/svg%3E"), "#","%23") !default;


.x-checkbox-round {

  .custom-control-input {
    &:checked ~ .custom-control-label::before {
      border-color: $x-todo-checkbox-checked-bg !important;
      background-color: $x-todo-checkbox-checked-bg !important;
      color: $x-todo-checkbox-indeterminate-color !important;
    }
  }

  .custom-checkbox {
    @extend %mb-0;
  }

  .custom-control-label {

    &::before {
      @extend .border-info;
      border-width: 2px !important;
    }

    &::after {
      background-image: $x-todo-checkbox-indicator-icon-checked !important;
    }

    &::after,
    &::before {
      @extend %overflow-hidden;
      border-radius: $x-todo-checkbox-border-radius !important;
    }
  }
}