.pl-checkbox-base {
  --enabled-unchecked-icon: url("../../assets/images/24_checkbox-light-enabled-unchecked.svg");
  --enabled-checked-icon: url("../../assets/images/24_checkbox-light-enabled-checked.svg");
  --enabled-indeterminate-icon: url("../../assets/images/24_checkbox-light-enabled-indeterminate.svg");
  --disabled-unchecked-icon: url("../../assets/images/24_checkbox-light-disabled-unchecked.svg");
  --disabled-checked-icon: url("../../assets/images/24_checkbox-light-disabled-checked.svg");
  --disabled-indeterminate-icon: url("../../assets/images/24_checkbox-light-disabled-indeterminate.svg");

  cursor: pointer;
  outline: none;
  border-radius: 4px;
  min-block-size: 24px;
  min-inline-size: 24px;
  background: var(--enabled-unchecked-icon) no-repeat center;

  &.checked {
    background-image: var(--enabled-checked-icon);
  }

  &.indeterminate {
    background-image: var(--enabled-indeterminate-icon);
  }

  &.disabled {
    background-image: var(--disabled-unchecked-icon);
    pointer-events: none;
  }

  &.disabled:is(.checked) {
    background-image: var(--disabled-checked-icon);
    pointer-events: none;
  }

  &:focus-visible {
    box-shadow: 0 0 0 2px var(--border-color-focus);
  }

  [data-theme="dark"] & {
    --enabled-unchecked-icon: url("../../assets/images/24_checkbox-dark-enabled-unchecked.svg");
    --enabled-checked-icon: url("../../assets/images/24_checkbox-dark-enabled-checked.svg");
    --enabled-indeterminate-icon: url("../../assets/images/24_checkbox-dark-enabled-indeterminate.svg");
    --disabled-unchecked-icon: url("../../assets/images/24_checkbox-dark-disabled-unchecked.svg");
    --disabled-checked-icon: url("../../assets/images/24_checkbox-dark-disabled-checked.svg");
    --disabled-indeterminate-icon: url("../../assets/images/24_checkbox-dark-disabled-indeterminate.svg");
  }
}