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

@mixin component($atRoot: namespace.$defaultAtRoot) {
	vertical-align: middle;
	inline-size: var(--components-textfield-sizes-default);

	@at-root ($atRoot) {
		.textfield-input {
			min-inline-size: 0;
			border: 0;
			box-shadow: 0 0 0 1px var(--palettes-neutral-300);
			line-height: var(--pr-t-font-body-M-lineHeight);
			appearance: none;
			background-color: var(--palettes-neutral-0);
			border-radius: var(--components-textfield-border-radius);
			padding-block: var(--components-textfield-input-padding-vertical);
			padding-inline: var(--components-textfield-input-padding-horizontal);
			transition-property: box-shadow, background-color, color;
			transition-duration: var(--commons-animations-durations-fast);

			&::placeholder {
				color: var(--palettes-neutral-400);
				transition-property: color;
				transition-duration: var(--commons-animations-durations-fast);
			}

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

		.textfield-suffix {
			color: var(--palettes-neutral-600);
			inset-block-start: calc(var(--components-textfield-suffix-top) + var(--components-textfield-input-padding-vertical));
			inset-inline-end: var(--components-textfield-input-padding-horizontal);
			position: absolute;
			pointer-events: none;
			line-height: var(--pr-t-font-body-M-lineHeight);
			z-index: 1;
		}

		.textfield-options {
			box-shadow: var(--pr-t-elevation-shadow-overflow);
			background-color: var(--palettes-neutral-0);
			border-radius: var(--pr-t-border-radius-small);
			transition-duration: var(--commons-animations-durations-fast);
			transition-property: all;
			list-style: none;
			overflow: auto;
			position: absolute;
			transform-origin: right top;
			transform: scaleY(0);
			margin-block-start: 3px;
			margin-inline: 0;
			margin-block-end: 0;
			max-block-size: 15rem;
			opacity: 0;
			padding: 0;
			inset-inline-start: 0;
			inset-block-start: 100%;
			z-index: 999;
			inline-size: 100%;
		}

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

		.textfield-options-entry {
			transition-duration: var(--commons-animations-durations-fast);
			transition-property: background-color;
			padding-block: var(--pr-t-spacings-100);
			padding-inline: var(--pr-t-spacings-200);
			cursor: pointer;
		}
	}
}