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

@mixin inputHover {
	box-shadow: 0 0 0 1px var(--palettes-neutral-400);
}

@mixin inputFocus {
	@include a11y.focusVisible($offset: 3px);
}

@mixin inputDisabled {
	background-color: var(--components-textfield-disabled-background);
	color: var(--components-textfield-disabled-color);
	box-shadow: 0 0 0 1px var(--palettes-neutral-300); // disabled token candidate
	cursor: default;

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

	~ .textfield-clear {
		--components-clear-cross-color: var(--palettes-neutral-500) !important; // disabled token candidate

		pointer-events: none;
	}
}

@mixin filterHover {
	background-color: var(--palettes-neutral-50);
}

@mixin open {
	z-index: 999 !important;

	.textfield-options {
		opacity: 1;
		transform: scaleY(1);
	}
}

@mixin inputFramedHover {
	&:not(:disabled, .is-error, .is-success, .is-valid, .is-warning, .is-invalid) {
		position: relative;
		z-index: 1;
		background-color: var(--palettes-neutral-0);
		box-shadow: form.fakeBorderOverlay(var(--components-field-framed-color));
	}
}

@mixin inputFramedFocus {
	&:not(:disabled, .is-error, .is-success, .is-valid, .is-warning, .is-invalid) {
		position: relative;
		z-index: 4;
		background-color: var(--palettes-neutral-0);
		box-shadow:
			form.fakeBorderOverlay(var(--components-field-framed-color)),
			0 0 0 4px var(--components-field-framed-color50);
	}
}

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

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

	// todo: déplacer dans field
	.radiosfield-label,
	.checkboxesfield-label,
	.textfield-label {
		color: var(--palettes-#{$state}-700);
	}

	.textfield-input {
		&::placeholder {
			color: var(--palettes-#{$state}-300);
		}

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

@mixin framedLoading {
	&::before,
	&::after {
		inset-inline-end: var(--components-field-framed-side-padding) !important;
		inset-block-start: var(--components-field-framed-side-padding) !important;
		inset-block-end: auto !important;
	}
}

@mixin framedStateInputHover($state) {
	background-color: var(--palettes-#{$state}-50) !important;

	@if $state == 'error' {
		background-color: var(--palettes-#{$state}-100) !important;
	}
}

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

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

@mixin framedErrorHover {
	z-index: 4;
}

@mixin framedStateSearch($state) {
	&::after {
		color: var(--palettes-#{$state}-700);
	}
}

@mixin framedStateHover($state) {
	background-color: var(--palettes-#{$state}-50);

	// todo: déplacer dans field
	.textfield-messages,
	.radiosfield-messages,
	.checkboxesfield-messages {
		transform: translateY(100%);
	}
}

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

	// todo: déplacer dans field
	.textfield-messages,
	.radiosfield-messages,
	.checkboxesfield-messages {
		transform: translateY(100%);
	}
}

@mixin passwordActionPressed {
	.icon-eye {
		display: none;
	}
}

@mixin passwordActionNotPressed {
	.icon-eyeStrikethrough {
		display: none;
	}
}

@mixin materialInputFocus {
	outline: none;

	&::placeholder {
		opacity: 1;
	}

	.textfield-label,
	~ .textfield-label {
		font-size: var(--pr-t-font-body-S-fontSize);
		color: var(--palettes-700, var(--components-textfield-material-default-palette-color));
		inset-block-start: 0;
	}
}

@mixin materialLoading {
	&::before,
	&::after {
		inset-block-end: 0.4rem !important;
		inset-inline-end: 0 !important;
	}
}

@mixin materialInputFilled {
	~ .textfield-label {
		font-size: var(--pr-t-font-body-S-fontSize);
		inset-block-start: 0;
	}
}

@mixin materialInputDisabled {
	background-image:
		linear-gradient(
			to right,
			var(--components-textfield-material-border-color) 33%,
			color.transparentize(var(--palettes-neutral-0), 0) 0%
		);
	background-size: 3px 1px;
	background-color: transparent;
	background-position: bottom;
	background-repeat: repeat-x;
	box-shadow: none;
}

@mixin materialInputState($state) {
	@if $state == 'error' {
		box-shadow: 0 2px 0 0 var(--palettes-#{$state}-700);
	}

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

	&:focus {
		box-shadow: 0 2px 0 0 var(--palettes-#{$state}-700);

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

@mixin entryHover {
	background-color: var(--palettes-product-50);
}