@use 'exports' as *;

.textField {
	@layer components {
		@include vars;
		@include component;
	}

	@layer mods {
		&:hover {
			@include hover;
		}

		&.mod-S {
			@include S;
		}

		&.mod-XS {
			@include XS;
		}

		&.mod-valueAlignRight {
			@include valueAlignRight;
		}

		&.is-invalid,
		&:has(.textField-input-value[aria-invalid='true']) {
			@include invalid;

			&:hover {
				@include invalidHover;
			}
		}

		&.is-disabled,
		&:has(.textField-input-value:disabled) {
			@include disabled;
		}

		&.mod-autoResize {
			@include autoResize;
		}

		&.mod-filterPill {
			@include filterPill;
		}
	}

	&.is-lineThrough {
		@include lineThrough;
	}
}