@use '@lucca-front/scss/src/commons/utils/form';
@use '@lucca-front/icons/src/commons/utils/icon';
@use '@lucca-front/scss/src/components/clear/exports' as clear;

@mixin password {
	.textfield-suffix {
		pointer-events: auto;
	}

	.textfield-input {
		padding-inline-end: var(--pr-t-spacings-600) !important;

		&::-ms-reveal {
			display: none;
		}
	}

	.textfield-suffix-action {
		text-decoration: none;
		color: currentColor;
		display: block;
	}
}

@mixin clearable {
	.textfield-input {
		padding-inline-end: 2rem;
	}

	.textfield-clear {
		position: absolute;
		inset-block-end: var(--pr-t-spacings-150);
		inset-inline-end: var(--pr-t-spacings-100);
	}
}

@mixin clearableS {
	.textfield-clear {
		inset-block-end: var(--pr-t-spacings-100);
		inset-inline-end: var(--pr-t-spacings-50);
	}
}

@mixin clearableXS {
	.textfield-clear {
		inset-block-end: var(--pr-t-spacings-50);
		inset-inline-end: var(--pr-t-spacings-50);
	}
}

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

@mixin noLabel {
	.textfield-suffix {
		inset-block-start: var(--components-textfield-input-padding-vertical);
	}
}

@mixin S {
	.textfield-label {
		line-height: var(--pr-t-font-body-S-lineHeight);
		font-size: var(--pr-t-font-body-S-fontSize);
	}

	.textfield-input {
		line-height: var(--pr-t-font-body-S-lineHeight);
		font-size: var(--pr-t-font-body-S-fontSize);
		padding: var(--pr-t-spacings-75);
	}

	.textfield-suffix {
		line-height: calc(var(--pr-t-font-body-S-fontSize) * 1.25);
		font-size: var(--pr-t-font-body-S-fontSize);

		.lucca-icon {
			font-size: calc(var(--pr-t-font-body-S-fontSize) * 1.25);
		}
	}
}

@mixin XS {
	.textfield-label {
		line-height: var(--pr-t-font-body-XS-lineHeight);
		font-size: var(--pr-t-font-body-XS-fontSize);
	}

	.textfield-input {
		line-height: var(--pr-t-font-body-XS-lineHeight);
		font-size: var(--pr-t-font-body-XS-fontSize);
		padding: var(--pr-t-spacings-50);
	}

	.textfield-suffix {
		line-height: calc(var(--pr-t-font-body-XS-fontSize) * 1.25);
		font-size: var(--pr-t-font-body-XS-fontSize);
		inset-block-start: calc(var(--components-textfield-suffix-top) + var(--pr-t-spacings-50));

		.lucca-icon {
			font-size: calc(var(--pr-t-font-body-XS-fontSize) * 1.25);
		}
	}

	.textfield-messages {
		font-size: var(--pr-t-font-body-XS-fontSize);
		line-height: var(--pr-t-font-body-XS-lineHeight);

		.lucca-icon {
			font-size: 0.75rem;
			line-height: var(--pr-t-font-body-XS-lineHeight);
		}
	}
}

@mixin noLabelXS {
	.textfield-suffix {
		inset-block-start: var(--pr-t-spacings-50);
	}
}

@mixin inputIconS {
	line-height: var(--pr-t-font-body-XS-lineHeight);
	font-size: var(--pr-t-font-body-S-fontSize);
}

@mixin inputIconXS {
	line-height: var(--pr-t-font-body-XS-lineHeight);
	font-size: var(--pr-t-font-body-S-fontSize);
}

@mixin size($size) {
	inline-size: var(--components-textfield-sizes-#{$size});
}

@mixin multiline {
	.textfield-input {
		line-height: var(--pr-t-font-body-M-lineHeight);
		font-size: var(--pr-t-font-body-M-fontSize);
		resize: block;
		block-size: 5rem;
	}
}

@mixin multilineS {
	.textfield-input {
		line-height: var(--pr-t-font-body-XS-lineHeight);
		font-size: var(--pr-t-font-body-S-fontSize);
		block-size: 4rem;
	}
}

@mixin invert {
	.textfield-label {
		color: var(--pr-t-color-text-reverse);
	}
}

@mixin materialSearchBlockClearableInput {
	.textfield-input {
		padding-inline-end: 3.75rem;
	}

	.textfield-clear {
		inset-inline-end: 2rem;
	}
}

@mixin search {
	&::after {
		@include icon.generate('search_magnifying_glass');

		color: var(--palettes-neutral-600);
		position: absolute;
		pointer-events: none;
		inset-block-end: var(--pr-t-spacings-100);
		font-size: var(--pr-t-font-body-M-lineHeight);
		line-height: var(--pr-t-font-body-M-lineHeight);
		inset-inline-end: var(--pr-t-spacings-100);
	}

	.textfield-input {
		padding-inline-end: 2.5rem;

		&[type='search'] {
			&::-webkit-search-cancel-button {
				display: none;
			}
		}
	}
}

@mixin searchClearable {
	.textfield-input {
		padding-inline-end: 4rem;
	}

	.textfield-clear {
		inset-inline-end: 2.5rem;
	}
}

@mixin searchS {
	&::after {
		line-height: var(--pr-t-font-body-S-lineHeight);
		font-size: var(--pr-t-font-body-S-lineHeight);
		inset-block-end: var(--pr-t-spacings-75);
		inset-inline-end: var(--pr-t-spacings-75);
	}

	.textfield-input {
		padding-inline-end: 2rem;
	}
}

@mixin searchClearableS {
	.textfield-input {
		padding-inline-end: 3.5rem;
	}

	.textfield-clear {
		// :not(.class) is only there to increase specificity when the class isn’t present
		// but the class should be present, and this code is temporary
		&.clear,
		&:not(.clear) {
			@include clear.S;

			inset-inline-end: 2.125rem;
			inset-block-end: calc(var(--pr-t-spacings-100) + var(--pr-t-spacings-25));
		}
	}
}

@mixin searchXS {
	&::after {
		line-height: var(--pr-t-font-body-XS-lineHeight);
		font-size: var(--pr-t-font-body-XS-lineHeight);
		inset-block-end: var(--pr-t-spacings-50);
		inset-inline-end: var(--pr-t-spacings-50);
	}

	.textfield-input {
		padding-inline-end: 1.5rem;
	}
}

@mixin searchClearableXS {
	.textfield-input {
		padding-inline-end: 3rem;
	}

	.textfield-clear {
		// :not(.class) is only there to increase specificity when the class isn’t present
		// but the class should be present, and this code is temporary
		&.clear,
		&:not(.clear) {
			@include clear.S;

			inset-inline-end: 1.75rem;
			inset-block-end: var(--pr-t-spacings-75);
		}
	}
}

@mixin radio {
	display: inline-block;
	margin-inline-start: var(--pr-t-spacings-50);

	.textfield-input {
		padding-block: 0;
	}
}

@mixin filter {
	inline-size: var(--components-textfield-filter-width);
	block-size: var(--components-filters-height);
	border-inline-end-color: var(--commons-divider-color);
	border-inline-end-width: 1px;
	border-inline-end-style: solid;
	transition-duration: var(--commons-animations-durations-standard);
	transition-property: background-color;
	display: block;
	position: relative;

	.textfield-label {
		color: var(--palettes-neutral-600);
		inset-inline-start: var(--pr-t-spacings-200);
		font-size: var(--pr-t-font-body-S-fontSize);
		font-weight: var(--pr-t-font-fontWeight-regular);
		line-height: var(--pr-t-font-body-S-lineHeight);
		pointer-events: none;
		position: absolute;
		inset-block-start: var(--pr-t-spacings-100);
	}

	.textfield-input {
		background-color: transparent;
		padding-block: var(--pr-t-spacings-200) 0;
		padding-inline: var(--pr-t-spacings-200) 2.5rem;

		// todo: déplacer dans filters ?
		block-size: var(--components-filters-height);
		border-radius: 0;
		box-shadow: none;

		&::after {
			inset-block-end: var(--pr-t-spacings-100);
			color: var(--palettes-neutral-600);
			font-weight: var(--pr-t-font-fontWeight-regular);
		}
	}
}

@mixin suffixIcon {
	color: var(--palettes-neutral-600);
	line-height: var(--pr-t-font-body-M-lineHeight);
}

@mixin compact {
	.textfield-options {
		inline-size:
			calc(
				100%
				- var(--components-textfield-compact-label-right-margin)
				- var(--components-textfield-compact-label-sizes-default)
			);
		inset-inline-start: auto;
		inset-inline-end: 0;
	}

	.textfield-suffix {
		inset-block-start: var(--components-textfield-compact-padding);
		inset-inline-end: var(--components-textfield-compact-padding);
	}
}

@mixin compactMultiline {
	align-items: flex-start;
}

@mixin compactSize($size) {
	inline-size:
		calc(
			var(--components-textfield-sizes-#{$size})
			+ var(--components-textfield-compact-label-right-margin)
			+ var(--components-textfield-compact-label-sizes-default)
		);

	.textfield-options {
		// inline-size: $input-width; // todo: récupérer la bonne taille
		outline: 2px dashed greenyellow !important;
	}
}

@mixin framed {
	inline-size: 100%;
	margin-block-end: 0 !important;

	.textfield.mod-search {
		@include framedSearch;
	}

	.textfield-options {
		inline-size: auto;
		margin-block-start: -2px;
		inset-inline-end: 1px;

		mark {
			background-color: transparent;
			text-decoration: underline;
			color: inherit;
		}
	}

	.textfield-input {
		inline-size: 100%;
		border-radius: 0;
		box-shadow: form.fakeBorderOverlay(var(--components-field-framed-border));
		padding-block: var(--components-field-framed-top-padding) var(--components-field-framed-bottom-padding);
		padding-inline: var(--components-field-framed-side-padding);
		line-height: var(--pr-t-font-body-M-lineHeight);
		outline: none;

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

	.textfield-label {
		padding-block: var(--components-field-framed-label-top-offset);
		padding-inline: var(--components-field-framed-side-padding);
		position: absolute;
		pointer-events: none;
		inset-inline-start: 0;
		inset-block-start: 0;
		z-index: 10;
		line-height: var(--pr-t-font-body-M-lineHeight);
		font-size: var(--pr-t-font-body-S-fontSize);
		color: var(--palettes-neutral-600);
	}

	.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(--palettes-error-700);
		color: var(--palettes-neutral-0);
	}

	.textfield-messages-warning,
	.radiosfield-messages-warning,
	.checkboxesfield-messages-warning {
		background-color: var(--palettes-warning-700);
		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(--palettes-success-700);
		color: var(--palettes-neutral-0);
	}

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

@mixin framedMultiline {
	.textfield-input {
		block-size: var(--components-field-framed-textarea-height);
		min-block-size: var(--components-field-framed-textarea-min-height);
		max-block-size: var(--components-field-framed-textarea-max-height);
	}
}

@mixin framedMultilineS {
	.textfield-input {
		block-size: auto;
	}
}

@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 material {
	padding-block-start: var(--components-textfield-material-padding-top);
	vertical-align: baseline;

	.textfield-input {
		box-shadow: 0 1px 0 0 var(--components-textfield-material-border-color);
		background-color: transparent;
		border-radius: 0;
		padding-inline-start: 0;
		padding-inline-end: 0;

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

	.textfield-label {
		color: var(--components-textfield-material-label-color);
		font-size: var(--components-textfield-material-label-font-size);
		position: absolute;
		pointer-events: none;
		font-weight: var(--pr-t-font-fontWeight-regular);
		line-height: var(--pr-t-font-body-M-lineHeight);
		inline-size: 100%;
		inset-block-start: var(--pr-t-spacings-300);
		inset-inline-start: 0;
	}

	.textfield-suffix {
		inset-block-start: calc(var(--components-textfield-material-padding-top) + var(--components-textfield-input-padding-vertical));
		position: absolute;
		inset-inline-end: 0;
	}
}

@mixin materialS {
	.textfield-label {
		line-height: var(--pr-t-font-body-S-lineHeight);
		font-size: var(--pr-t-font-body-S-fontSize);
	}
}

@mixin materialSuffix {
	.textfield-input {
		padding-inline-end: var(--components-textfield-material-suffix-padding-right);
	}
}

@mixin materialNoLabel {
	padding-block-start: 0;

	.textfield-input {
		&::placeholder {
			opacity: 1;
		}
	}

	.textfield-label {
		display: none;
	}

	.textfield-suffix {
		inset-block-start: var(--components-textfield-input-padding-vertical);
	}
}

@mixin materialSearch {
	&::after {
		color: var(--palettes-neutral-500);
		inset-block-end: var(--pr-t-spacings-100);
		inset-inline-end: 0;
	}

	.textfield-input {
		padding-inline-end: 1.75rem;
	}

	.textfield-label {
		padding-inline-end: 0;
	}
}

@mixin materialRadio {
	padding-block-start: 0;
}

@mixin materialValid {
	&::before {
		inset-block-end: 0.7rem !important;
		inset-inline-end: 0 !important;
	}

	.textfield-label {
		padding-inline-end: var(--pr-t-spacings-300);
	}

	.textfield-input {
		padding-inline-end: var(--pr-t-spacings-300);
	}
}