@mixin S {
	--component-checkboxField-size: 1rem;
	--component-checkboxField-borderRadius: var(--pr-t-border-radius-50);
	--component-checkboxField-icon-fontSize: var(--pr-t-font-body-XS-lineHeight);
	--component-checkboxField-label-fontSize: var(--pr-t-font-body-S-fontSize);
	--component-checkboxField-label-lineHeight: var(--pr-t-font-body-S-lineHeight);
}

@mixin checklist {
	// stylelint-disable-next-line declaration-property-value-disallowed-list -- --commons-borderRadius-full is deprecated
	--component-checkboxField-borderRadius: var(--commons-borderRadius-full);
	--component-checkboxField-borderColor: var(--palettes-neutral-300);
	--component-checkboxField-icon-color: var(--palettes-neutral-300);
	--component-checkboxField-icon-scale: 1;

	.formLabel:has(~ & > .checkboxField-input:not(:disabled):checked) {
		--components-formLabel-color: var(--pr-t-color-text-subtle);
	}

	@keyframes checklist-bounce {
		0% {
			transform: scale(1);
		}

		55% {
			transform: scale(1.3);
		}

		100% {
			transform: scale(1);
		}
	}
}