@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 checked {
	~ .radioField-icon {
		background-color: var(--palettes-product-700);
		border-color: var(--palettes-product-700);

		.radioField-icon-check {
			transform: scale(1);
		}
	}
}

@mixin hover {
	~ .radioField-icon {
		border-color: var(--palettes-neutral-600);
	}
}

@mixin checkedActive {
	~ .radioField-icon {
		background-color: var(--palettes-product-900);
		border-color: var(--palettes-product-900);
	}
}

@mixin checkedDisabled {
	~ .radioField-icon {
		background-color: var(--palettes-neutral-500); // disabled token candidate
		border-color: var(--palettes-neutral-500); // disabled token candidate
		color: var(--palettes-neutral-500); // disabled token candidate
	}
}

@mixin checkedHover {
	~ .radioField-icon {
		background-color: var(--palettes-product-800);
		border-color: var(--palettes-product-800);
	}
}

@mixin checkedInvalid {
	~ .radioField-icon {
		background-color: var(--palettes-error-700);
		border-color: var(--palettes-error-700);
	}
}

@mixin active {
	~ .radioField-icon {
		border-color: var(--palettes-neutral-800);
	}
}

@mixin disabled {
	cursor: default;

	~ .radioField-icon {
		border-color: var(--palettes-neutral-500); // disabled token candidate
	}
}

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

@mixin invalid {
	~ .radioField-icon {
		border-color: var(--palettes-error-700);
	}
}

@mixin invalidHover {
	~ .radioField-icon {
		border-color: var(--palettes-error-800);
	}
}

@mixin invalidActive {
	~ .radioField-icon {
		border-color: var(--palettes-error-900);
	}
}

@mixin checkedInvalidHover {
	~ .radioField-icon {
		background-color: var(--palettes-error-800);
		border-color: var(--palettes-error-800);
	}
}

@mixin checkedInvalidActive {
	~ .radioField-icon {
		background-color: var(--palettes-error-900);
		border-color: var(--palettes-error-900);
	}
}