@use '@lucca-front/scss/src/components/formLabel/exports' as formLabel;
@use '@lucca-front/scss/src/components/inlineMessage/exports' as inlineMessage;
@use '@lucca-front/scss/src/commons/utils/a11y';
@use '@lucca-front/icons/src/icon/exports' as icon;
@use '@lucca-front/scss/src/commons/utils/namespace';

@mixin component($atRoot: namespace.$defaultAtRoot) {
	display: flex;
	align-items: stretch;
	border-radius: var(--component-textField-borderRadius);
	background-color: var(--component-textField-background);
	box-shadow: 0 0 0 1px var(--component-textField-border);
	inline-size: var(--component-textField-width);

	&:has(.textField-input-value:focus-visible) {
		@include a11y.focusVisible($offset: 3px);
	}

	.textField-input-affix-toggle {
		pointer-events: auto;
		inline-size: var(--component-textField-affix-size);
		block-size: var(--component-textField-affix-size);
		color: var(--pr-t-color-input-icon);
	}

	@at-root ($atRoot) {
		.textField-input {
			display: flex;
			align-items: center;
			inline-size: 100%;
			border-radius: var(--component-textField-borderRadius);
			background-color: var(--component-textField-background);
			position: relative;

			&:has(.textField-input-affix-icon) {
				--component-textField-affix-padding: 2.5rem;
			}

			&:has(.textField-input-affix-toggle) {
				--component-textField-affix-padding: 3rem;
			}

			&:has(.textField-input-affix-clear) {
				--component-textField-affix-padding: 2rem;

				&:has(.textField-input-affix-icon) {
					--component-textField-affix-padding: 4rem;
				}

				&:has(.textField-input-affix-toggle) {
					--component-textField-affix-padding: 4.5rem;
				}
			}
		}

		.textField-input-valueClone,
		.textField-input-value {
			border: 0;
			outline: none;
			font: var(--component-textField-font);
			inline-size: 100%;
			padding-block: var(--component-textField-padding) var(--component-textField-padding);
			padding-inline: var(--component-textField-padding) var(--component-textField-affix-padding);
			background-color: transparent;
			color: var(--component-textField-color);

			/* autoprefixer: off */
			text-decoration: var(--component-textField-textDecoration);
			text-overflow: ellipsis;

			&:is(textarea, div) {
				max-block-size: var(--component-textField-maxHeight);

				@supports not (height: 1dvh) {
					--component-textField-maxHeight: var(--component-textField-maxHeightFallback);
				}
			}

			&::placeholder {
				color: var(--component-textField-placeholder);
			}

			&:is(textarea) {
				resize: block;
				min-block-size: calc(2lh + var(--component-textField-padding) * 2);

				&:not([rows]) {
					block-size: calc(3lh + var(--component-textField-padding) * 2);
				}

				&[rows='1'] {
					min-block-size: calc(1lh + var(--component-textField-padding) * 2);
				}
			}
		}

		.textField-input-affix {
			display: inline-flex;
			align-items: center;
			gap: var(--pr-t-spacings-100);
			position: absolute;
			inset-inline-end: var(--pr-t-spacings-100);
			pointer-events: none;
		}

		.textField-input-affix-icon {
			@include icon.M;

			color: var(--pr-t-color-input-icon);
			pointer-events: none;
		}

		.textField-input-affix-clear {
			pointer-events: auto;
		}

		.textField-prefix {
			display: inline-flex;
			padding-inline-start: var(--component-textField-padding);
			align-items: center;
			color: var(--pr-t-color-input-text-suffix);
			font: var(--component-textField-font);
			border-start-start-radius: var(--pr-t-border-radius-input);
			border-end-start-radius: var(--pr-t-border-radius-input);
			flex-shrink: 0;

			~ .textField-input {
				border-start-start-radius: 0;
				border-end-start-radius: 0;
			}
		}

		.textField-suffix {
			display: inline-flex;
			padding-inline-end: var(--component-textField-padding);
			align-items: center;
			color: var(--pr-t-color-input-text-suffix);
			font: var(--component-textField-font);
			border-start-end-radius: var(--pr-t-border-radius-input);
			border-end-end-radius: var(--pr-t-border-radius-input);
			order: 1;
			flex-shrink: 0;

			~ .textField-input {
				border-start-end-radius: 0;
				border-end-end-radius: 0;
			}
		}
	}
}