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

@mixin inline {
	margin-inline-end: calc(var(--components-field-input-inline-margin) * 2);
	display: inline-flex;
}

@mixin block {
	inline-size: 100%;
}

@mixin compact {
	align-items: center;
	flex-direction: row;
	margin-block-end: var(--pr-t-spacings-200);
	inline-size:
		calc(
			var(--components-field-sizes-default)
			+ var(--components-field-compact-label-right-margin)
			+ var(--components-field-compact-label-sizes-default)
		);

	.textfield-label,
	.radiosfield-label,
	.checkboxesfield-label {
		margin-inline-end: var(--components-field-compact-label-right-margin);
		inline-size: var(--components-field-compact-label-sizes-default);
		flex: 0 0 auto;
		margin-block-end: 0;
		order: -1;
	}

	.textfield-messages,
	.radiosfield-messages,
	.checkboxesfield-messages {
		max-inline-size: var(--components-field-compact-label-sizes-default);
		align-items: center;
		display: inline-flex;
		position: absolute;
		inset-block: 0;
		inset-inline-start: 100%;
		inline-size: 100%;
		margin-block: 0;
		margin-inline: var(--pr-t-spacings-200) 0;

		&.mod-helper {
			padding-inline-start: calc(var(--components-field-compact-label-sizes-default) + var(--components-field-compact-label-right-margin));
			inset-block-end: auto;
			max-inline-size: 100%;
			inset-block-start: 100%;
			inset-inline: 0;
		}
	}

	.radiosfield-input,
	.checkboxesfield-input {
		display: flex;
		flex-wrap: wrap;
	}

	.radio,
	.checkbox {
		margin-inline-end: var(--pr-t-spacings-300);
	}
}

@mixin compactBlock {
	inline-size: 100%;
}

@mixin framed {
	display: block;

	fieldset {
		border: 0;
		padding: 0;
	}

	.textfield-messages,
	.radiosfield-messages,
	.checkboxesfield-messages {
		transition-duration: var(--commons-animations-durations-standard);
		transition-property: transform;
		position: absolute;
		text-align: center;
		inset-block-end: 0;
		inset-inline-start: -1px;
		inset-inline-end: 0;
		transform: translateY(0);
		z-index: 4;

		> * {
			display: block;
		}
	}

	.textfield-messages-error,
	.radiosfield-messages-error,
	.checkboxesfield-messages-error {
		background-color: var(--pr-t-color-text-critical);
		color: var(--palettes-neutral-0);
	}

	.textfield-messages-warning,
	.radiosfield-messages-warning,
	.checkboxesfield-messages-warning {
		background-color: var(--pr-t-color-text-warning);
		color: var(--palettes-neutral-0);
	}

	.textfield-messages-valid,
	.radiosfield-messages-valid,
	.checkboxesfield-messages-valid,
	.textfield-messages-success,
	.radiosfield-messages-success,
	.checkboxesfield-messages-success {
		background-color: var(--pr-t-color-text-success);
		color: var(--palettes-neutral-0);
	}

	.textfield-messages-helper,
	.radiosfield-messages-helper,
	.checkboxesfield-messages-helper {
		background-color: var(--palettes-neutral-600);
		color: var(--palettes-neutral-0);
	}

	.textfield-input,
	.radiosfield-input,
	.checkboxesfield-input {
		display: flex;
		flex-wrap: wrap;
		gap: var(--components-field-horizontal-spacing);

		.checkbox {
			margin-block-start: 0;
			margin-block-end: 0;
		}
	}

	.textfield-input {
		&:not(:disabled, .is-error, .is-success, .is-valid, .is-warning, .is-invalid) {
			background-color: var(--palettes-neutral-0); // disabled token candidate

			&::placeholder {
				color: var(--commons-disabled-placeholder);
			}

			&:focus,
			&:hover {
				position: relative;
				z-index: 1;
				background-color: var(--palettes-neutral-0); // disabled token candidate
				box-shadow: form.fakeBorderOverlay(var(--components-field-framed-color));

				~ .textfield-messages,
				~ .radiosfield-messages,
				~ .checkboxesfield-messages {
					transform: translateY(100%);
				}
			}

			&:focus {
				z-index: 4;
				box-shadow:
					form.fakeBorderOverlay(var(--components-field-framed-color)),
					0 0 0 4px var(--components-field-framed-color50);
			}
		}
	}

	.textfield-suffix,
	.radiosfield-suffix,
	.checkboxesfield-suffix {
		padding: var(--components-field-framed-side-padding);
		inset-block-start: auto;
		z-index: 10;
		inset-inline-end: 0;
		inset-block-end: 0;

		// todo: déplacer dans textfield
		~ .textfield-input {
			padding-inline-end: var(--components-field-framed-suffix-padding-right);
		}
	}
}

@mixin fieldFramedState($state) {
	@if ($state == 'error') {
		z-index: 3;
		box-shadow: form.fakeBorderOverlay(var(--palettes-#{$state}-700)) !important;
		background-color: var(--palettes-#{$state}-50);

		&:focus-within,
		&:hover {
			z-index: 4;
		}
	}

	&.mod-search,
	&.mod-autocomplete,
	&.mod-select {
		&::after {
			color: var(--palettes-#{$state}-700);
		}
	}

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

	.textfield-input {
		&:hover {
			background-color: var(--palettes-#{$state}-50) !important;
		}

		&:focus {
			background-color: var(--palettes-neutral-0) !important;
			box-shadow:
				form.fakeBorderOverlay(var(--palettes-#{$state}-700)),
				0 0 0 4px var(--palettes-#{$state}-50) !important;
		}

		&::placeholder {
			color: var(--palettes-neutral-400);
		}

		@if ($state == 'error') {
			background-color: var(--palettes-#{$state}-50) !important;
			box-shadow: form.fakeBorderOverlay(var(--palettes-#{$state}-700)) !important;

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

			&:hover {
				background-color: var(--palettes-#{$state}-100) !important;
			}

			&:focus {
				box-shadow:
					form.fakeBorderOverlay(var(--palettes-#{$state}-700)),
					0 0 0 4px var(--palettes-#{$state}-50) !important;
				background-color: var(--palettes-neutral-0) !important;
			}
		}
	}

	&:hover {
		background-color: var(--palettes-#{$state}-50);

		.textfield-messages,
		.radiosfield-messages,
		.checkboxesfield-messages {
			transform: translateY(100%);
		}
	}

	&:focus-within {
		background-color: var(--palettes-neutral-0);
		box-shadow:
			form.fakeBorderOverlay(var(--palettes-#{$state}-700)),
			0 0 0 4px var(--palettes-#{$state}-50);

		.textfield-messages,
		.radiosfield-messages,
		.checkboxesfield-messages {
			transform: translateY(100%);
		}
	}
}

@mixin framedSearch {
	&::after {
		color: var(--palettes-neutral-600);
		padding: var(--components-field-framed-side-padding);
		inset-block-end: 0;
		inset-inline-end: 0;
		z-index: 4;
	}

	.textfield {
		inline-size: 100%;
	}

	.textfield-input {
		padding-inline-end: var(--components-field-framed-suffix-padding-right);
	}
}

@mixin fieldFramedError($fieldname) {
	@if ($fieldname == 'textfield') {
		&:not(:disabled) {
			z-index: 3;
			box-shadow: form.fakeBorderOverlay(var(--palettes-error-700));
			background-color: var(--palettes-error-50);
			transition: background-color var(--commons-animations-durations-fast);

			~ .textfield-label {
				color: var(--palettes-error-700);
			}

			&:hover {
				z-index: 4;
				background-color: var(--palettes-error-100);

				~ .textfield-messages {
					transform: translateY(100%);
				}
			}

			&:focus {
				background-color: var(--palettes-neutral-0);
				box-shadow:
					form.fakeBorderOverlay(var(--palettes-error-700)),
					0 0 0 4px var(--palettes-error-50);

				~ .textfield-messages {
					transform: translateY(100%);
				}
			}
		}
	}

	@if ($fieldname == 'radiosfield') {
		&:not(:disabled) {
			~ .radio-label,
			~ .checkbox-label {
				&::before {
					border-color: var(--palettes-error-700);
				}
			}
		}
	}
}

@mixin inputRow {
	@include field-row;
}

@mixin field-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: var(--components-field-horizontal-spacing);
}