@use '@lucca-front/icons/src/commons/utils/icon';
@use '@lucca-front/scss/src/commons/utils/form';
@use '@lucca-front/scss/src/commons/utils/a11y';

@mixin mixed {
	~ .checkboxField-icon {
		.checkboxField-icon-check {
			&::before {
				content: '\e975' / '';
			}
		}
	}
}

@mixin checked {
	~ .checkboxField-icon {
		--component-checkboxField-backgroundColor: var(--palettes-700, var(--palettes-product-700));
		--component-checkboxField-borderColor: var(--palettes-700, var(--palettes-product-700));

		.checkboxField-icon-check {
			--component-checkboxField-icon-scale: 1;

			transition-timing-function: cubic-bezier(0.5, 1, 0.5, 1.5);
		}
	}
}

@mixin hover {
	~ .checkboxField-icon {
		--component-checkboxField-borderColor: var(--palettes-neutral-600);
	}
}

@mixin checkedActive {
	~ .checkboxField-icon {
		--component-checkboxField-backgroundColor: var(--palettes-900, var(--palettes-product-900));
		--component-checkboxField-borderColor: var(--palettes-900, var(--palettes-product-900));
	}
}

@mixin checkedDisabled {
	~ .checkboxField-icon {
		--component-checkboxField-backgroundColor: var(--commons-disabled-background);
		--component-checkboxField-borderColor: var(--commons-disabled-background);
		--component-checkboxField-icon-color: var(--palettes-neutral-600);
	}
}

@mixin checkedHover {
	~ .checkboxField-icon {
		--component-checkboxField-backgroundColor: var(--palettes-800, var(--palettes-product-800));
		--component-checkboxField-borderColor: var(--palettes-800, var(--palettes-product-800));
	}
}

@mixin checkedInvalid {
	~ .checkboxField-icon {
		--component-checkboxField-backgroundColor: var(--palettes-error-700);
		--component-checkboxField-borderColor: var(--palettes-error-700);
	}
}

@mixin active {
	~ .checkboxField-icon {
		--component-checkboxField-borderColor: var(--palettes-neutral-900);
	}
}

@mixin disabled {
	cursor: default;

	~ .checkboxField-icon {
		--component-checkboxField-borderColor: var(--palettes-neutral-500);
	}
}

@mixin focusVisible {
	~ .checkboxField-icon {
		&::after {
			@include a11y.focusVisible;
		}
	}
}

@mixin invalid {
	~ .checkboxField-icon {
		--component-checkboxField-borderColor: var(--palettes-error-700);
	}
}

@mixin invalidHover {
	~ .checkboxField-icon {
		--component-checkboxField-borderColor: var(--palettes-error-800);
	}
}

@mixin invalidActive {
	~ .checkboxField-icon {
		--component-checkboxField-borderColor: var(--palettes-error-900);
	}
}

@mixin checkedInvalidHover {
	~ .checkboxField-icon {
		--component-checkboxField-backgroundColor: var(--palettes-error-800);
		--component-checkboxField-borderColor: var(--palettes-error-800);
	}
}

@mixin checkedInvalidActive {
	~ .checkboxField-icon {
		--component-checkboxField-backgroundColor: var(--palettes-error-900);
		--component-checkboxField-borderColor: var(--palettes-error-900);
	}
}

@mixin checklistHover {
	~ .checkboxField-icon {
		--component-checkboxField-backgroundColor: var(--palettes-success-50);
		--component-checkboxField-borderColor: var(--palettes-success-600);
		--component-checkboxField-icon-color: var(--palettes-success-600);
	}
}

@mixin checklistChecked {
	~ .checkboxField-icon {
		--component-checkboxField-backgroundColor: var(--palettes-success-700);
		--component-checkboxField-borderColor: var(--palettes-success-700);
		--component-checkboxField-icon-color: var(--palettes-neutral-0);

		.checkboxField-icon-check {
			animation: var(--commons-animations-durations-standard) ease-in-out checklist-bounce;
		}
	}
}

@mixin checklistCheckedHover {
	~ .checkboxField-icon {
		--component-checkboxField-backgroundColor: var(--palettes-success-800);
		--component-checkboxField-borderColor: var(--palettes-success-800);
		--component-checkboxField-icon-color: var(--palettes-neutral-0);
	}
}

@mixin checklistActive {
	~ .checkboxField-icon {
		--component-checkboxField-backgroundColor: var(--palettes-success-100);
	}
}

@mixin checklistCheckedActive {
	~ .checkboxField-icon {
		--component-checkboxField-backgroundColor: var(--palettes-success-900);
		--component-checkboxField-borderColor: var(--palettes-success-900);
	}
}

@mixin checklistDisabled {
	~ .checkboxField-icon {
		--component-checkboxField-backgroundColor: var(--palettes-neutral-0);
		--component-checkboxField-borderColor: var(--palettes-neutral-300);
		--component-checkboxField-icon-scale: 0;
	}
}

@mixin checklistCheckedDisabled {
	~ .checkboxField-icon {
		--component-checkboxField-backgroundColor: var(--palettes-neutral-100);
		--component-checkboxField-borderColor: var(--palettes-neutral-100);
		--component-checkboxField-icon-color: var(--palettes-neutral-600);
	}
}