{#if leadingIcon} {/if} {#if showTextarea}

{:else}
			<input
				{type}
				bind:this={inputEl}
				class="mdc-text-field__input"
				style="caret-color: {error ? errors : color}"
				{disabled}
				id={randomId}
				on:input={handleInput}
				on:keyup={handleKeyup}
				on:keydown={handleKeydown}
				on:focus={handleFocus}
				on:blur={handleBlur} />
		{/if}

{#if placeholder != null && !outlined}
			<label
				class="mdc-floating-label"
				class:mdc-floating-label--float-above={floatAboveStart}
				class:mdc-floating-label__float-above={floatAboveStart}
				for={randomId}
				style="color: {error ? errors : isFocused ? color : placeholderColor}">
				{placeholder}
			</label>
		{/if}

{#if error && showErrorIcon}
			<i
				class="material-icons mdc-text-field__icon error-icon"
				tabindex="0"
				style="color: {errors}">
				error
			</i>
		{:else if trailingIcon}
			<i
				class="material-icons mdc-text-field__icon trailing-icon"
				tabindex="0"
				on:click={(e) => dispatch('trailingiconclick', e)}
				on:mouseover={(e) => {
					trailingIconHovering = true;
					dispatch('trailingiconhover', e);
				}}
				on:mouseout={(e) => (trailingIconHovering = false)}
				style="{!trailingIconIsButton ? 'z-index: -1;' : ''}color: {trailingIconColor}">
				{trailingIcon}
			</i>
		{/if}

{#if outlined}
			<div
				class="mdc-notched-outline"
				class:mdc-notched-outline--notched={floatAboveStart}>
				<div
					class="mdc-notched-outline__leading"
					style="border-color: {isFocused ? color : hovering ? outlineHover : outlineColor}" />
				{#if placeholder != null}
					<div
						class="mdc-notched-outline__notch"
						style="border-color: {isFocused ? color : hovering ? outlineHover : outlineColor}"
						bind:this={outlinedElement}>
						<label
							for={randomId}
							bind:this={labelOutlined}
							class="mdc-floating-label"
							class:mdc-floating-label--float-above={floatAboveStart}
							class:mdc-floating-label__float-above={floatAboveStart}
							style="color: {isFocused ? color : placeholderColor}">
							{placeholder}
						</label>
					</div>
				{/if}
				<div
					class="mdc-notched-outline__trailing"
					style="border-color: {isFocused ? color : hovering ? outlineHover : outlineColor}" />
			</div>
		{:else}
			<div
				class="mdc-line-ripple"
				style="background-color: {error ? errors : color}" />
		{/if}
	</div>

{#if !trim}
		<div class="mdc-text-field-helper-line">
			{#if error == null}
				<div class="mdc-text-field-helper-text" aria-hidden={false}>
					{#if helper}{helper}{/if}
				</div>
			{/if}
			<div class="mdc-custom-error">
				{#if error}{error}{/if}
			</div>

{#if maxChars != null}
				<div class="mdc-text-field-character-counter" />
			{/if}
		</div>
	{/if}
</div>