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

@mixin hover {
	&::placeholder {
		color: var(--palettes-neutral-500);
	}
}

@mixin focus {
	&::placeholder {
		color: var(--palettes-neutral-200);
	}
}

@mixin required {
	.textfield-label,
	.radiosfield-label,
	.checkboxesfield-label,
	~ .textfield-label,
	~ .radiosfield-label,
	~ .checkboxesfield-label {
		&:not(:empty) {
			&::after {
				@include form.required;
			}
		}
	}
}

@mixin inputDisabled {
	color: var(--palettes-neutral-500); // disabled token candidate
	cursor: not-allowed; // disabled token candidate
}

@mixin inputState($state) {
	&:not(:disabled, .is-disabled) {
		background-color: var(--palettes-#{$state}-50);
		box-shadow: 0 0 0 1px var(--palettes-#{$state}-600);

		~ .textfield-label,
		~ .checkboxesfield-label,
		~ .radiosfield-label,
		~ .textfield-suffix,
		~ .checkboxesfield-suffix,
		~ .radiosfield-suffix {
			color: var(--palettes-#{$state}-700);
		}

		&::placeholder {
			color: var(--palettes-#{$state}-400);
		}

		&:focus,
		&.is-focused {
			~ .textfield-label,
			~ .checkboxesfield-label,
			~ .radiosfield-label {
				color: var(--palettes-#{$state}-700);
			}
		}

		&:focus {
			&::placeholder {
				color: var(--palettes-#{$state}-400);
			}
		}
	}
}

@mixin loading {
	@include loading.spinner;

	&::before,
	&::after {
		content: '' !important;
		inset-inline-end: var(--pr-t-spacings-100) !important;
		inset-block-end: 0.7rem !important;
		z-index: 2 !important;
		inset-inline-start: inherit !important;
		inset-block-start: inherit !important;
		position: absolute !important;
	}

	.textfield-input,
	.radiosfield-input,
	.checkboxesfield-input {
		padding-inline-end: var(--pr-t-spacings-400);
	}
}

@mixin success {
	@keyframes success {
		0% {
			opacity: 0;
			transform: scale(0);
		}

		5% {
			opacity: 1;
			transform: scale(1.2);
		}

		7% {
			opacity: 1;
			transform: scale(1);
		}

		93% {
			opacity: 1;
			transform: scale(1);
		}

		95% {
			opacity: 1;
			transform: scale(1.2);
		}

		100% {
			opacity: 0;
			transform: scale(0);
		}
	}

	&::before {
		@include icon.generate('sign_confirm');

		color: var(--palettes-success-700);
		position: absolute;
		animation-fill-mode: forwards;
		animation-name: success;
		animation-duration: 3s;
		border-radius: var(--pr-t-border-radius-full);
		inset-block-end: 0.85rem;
		font-size: 1.2rem;
		block-size: 1rem;
		inset-inline-end: 0.4rem;
		z-index: 1;
	}

	.textfield-input,
	.radiosfield-input,
	.checkboxesfield-input {
		padding-inline-end: var(--pr-t-spacings-400);
	}
}

@mixin error {
	.textfield-label,
	.radiosfield-label,
	.checkboxesfield-label {
		color: var(--palettes-error-700);
	}

	.textfield-input,
	.radiosfield-input,
	.checkboxesfield-input {
		@include state('error');
	}
}

@mixin state($state) {
	&:not(:disabled, .is-disabled) {
		background-color: var(--palettes-#{$state}-50);

		&::placeholder {
			color: var(--palettes-#{$state}-400);
		}

		&:focus-visible,
		&.is-focused {
			~ .textfield-label,
			~ .radiosfield-label,
			~ .checkboxesfield-label {
				color: var(--palettes-#{$state}-700);
			}
		}

		@if $state == 'error' {
			box-shadow: 0 0 0 1px var(--palettes-#{$state}-400);
		}
	}
}