/*!
 * Copyright 2024 Adobe. All rights reserved.
 *
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

@import "./themes/spectrum-two.css";

.spectrum-Textfield {
	/* set input line-height to the height of the textfield - prevents the cutting off of diacritics in some languages */
	/* disallow mod for max compatibility */
	--spectrum-textfield-input-line-height: var(--spectrum-textfield-height);
	--spectrum-texfield-animation-duration: var(--spectrum-animation-duration-100);

	--spectrum-textfield-width: 240px; /* override per api */
	--spectrum-textfield-min-width: var(--spectrum-text-field-minimum-width-multiplier);
	--spectrum-textfield-corner-radius: var(--spectrum-corner-radius-100);

	/* default spacing */
	--spectrum-textfield-spacing-inline-quiet: var(--spectrum-field-edge-to-text-quiet);
	--spectrum-textfield-spacing-block-start: var(--spectrum-component-top-to-text-100);
	--spectrum-textfield-spacing-block-end: var(--spectrum-component-bottom-to-text-100);
	--spectrum-textfield-spacing-block-quiet: var(--spectrum-field-edge-to-border-quiet);

	/* default label spacing */
	--spectrum-textfield-label-spacing-block: var(--spectrum-field-label-to-component);

	/* default help text spacing */
	--spectrum-textfield-helptext-spacing-block: var(--spectrum-help-text-to-component);

	/* default icon spacing - invalid */
	--spectrum-textfield-icon-spacing-inline-end-quiet-invalid: var(--spectrum-field-edge-to-alert-icon-quiet);

	/* default icon spacing - valid */
	--spectrum-textfield-icon-spacing-inline-end-quiet-valid: var(--spectrum-field-edge-to-validation-icon-quiet);

	/* font styles */
	--spectrum-textfield-font-family: var(--spectrum-sans-font-family-stack);
	--spectrum-textfield-font-weight: var(--spectrum-regular-font-weight);

	/* character count */
	--spectrum-textfield-character-count-font-family: var(--spectrum-sans-font-family-stack);
	--spectrum-textfield-character-count-font-weight: var(--spectrum-regular-font-weight);
	--spectrum-textfield-character-count-spacing-inline: var(--spectrum-spacing-200);
	--spectrum-textfield-character-count-spacing-inline-side: var(--spectrum-side-label-character-count-to-field);

	/* focus indicator */
	--spectrum-textfield-focus-indicator-width: var(--spectrum-focus-indicator-thickness);
	--spectrum-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap);

	/* Text Colors */
	--spectrum-textfield-text-color-default: var(--spectrum-neutral-content-color-default);
	--spectrum-textfield-text-color-hover: var(--spectrum-neutral-content-color-hover);
	--spectrum-textfield-text-color-focus: var(--spectrum-neutral-content-color-focus);
	--spectrum-textfield-text-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover);
	--spectrum-textfield-text-color-keyboard-focus: var(--spectrum-neutral-content-color-key-focus);

	/* Read Only Text Color */
	--spectrum-textfield-text-color-readonly: var(--spectrum-neutral-content-color-default);

	/* Disabled Colors */
	--spectrum-textfield-text-color-disabled: var(--spectrum-disabled-content-color);

	/* Invalid Colors */
	--spectrum-textfield-border-color-invalid-default: var(--spectrum-negative-border-color-default);
	--spectrum-textfield-border-color-invalid-hover: var(--spectrum-negative-border-color-hover);
	--spectrum-textfield-border-color-invalid-focus: var(--spectrum-negative-border-color-focus);
	--spectrum-textfield-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover);
	--spectrum-textfield-border-color-invalid-keyboard-focus: var(--spectrum-negative-border-color-key-focus);
	--spectrum-textfield-icon-color-invalid: var(--spectrum-negative-visual-color);

	--spectrum-textfield-text-color-invalid: var(--spectrum-neutral-content-color-default);

	/* Valid Colors */
	--spectrum-textfield-text-color-valid: var(--spectrum-neutral-content-color-default);
	--spectrum-textfield-icon-color-valid: var(--spectrum-positive-visual-color);

	/* Focus Indicator Color */
	--spectrum-textfield-focus-indicator-color: var(--spectrum-focus-indicator-color);

	/* Text Area / Multiline */
	--spectrum-text-area-min-inline-size: var(--spectrum-text-area-minimum-width);
	--spectrum-text-area-min-block-size: var(--spectrum-text-area-minimum-height);

	/* Default sizing values: Medium */
	--spectrum-textfield-height: var(--spectrum-component-height-100);
	--spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-medium);
	--spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200);
	--spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-100);
	--spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-100);
	--spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-100);
	--spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100);
	--spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-medium);
	--spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-medium);
	--spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-medium);
	--spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-medium);
	--spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-medium);
	--spectrum-textfield-character-count-font-size: var(--spectrum-font-size-75);
	--spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75);
	--spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-medium);
	--spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-medium);

	/* Text Area / Multiline size medium */
	--spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-100);
}

/********* Text field t-shirt sizes *********/
.spectrum-Textfield--sizeS {
	--spectrum-textfield-height: var(--spectrum-component-height-75);
	--spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-small);
	--spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-100);
	--spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-75);
	--spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-75);
	--spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-75);
	--spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-75);
	--spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-small);
	--spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-small);
	--spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-small);
	--spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-small);
	--spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-small);
	--spectrum-textfield-character-count-font-size: var(--spectrum-font-size-75);
	--spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75);
	--spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-small);
	--spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-small);

	/* Text Area / Multiline size small */
	--spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-75);
}

.spectrum-Textfield--sizeL {
	--spectrum-textfield-height: var(--spectrum-component-height-200);
	--spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-large);
	--spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200);
	--spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-200);
	--spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-200);
	--spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-200);
	--spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-200);
	--spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-large);
	--spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-large);
	--spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-large);
	--spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-large);
	--spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-large);
	--spectrum-textfield-character-count-font-size: var(--spectrum-font-size-100);
	--spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-100);
	--spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-large);
	--spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-large);

	/* Text Area / Multiline size large */
	--spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-200);
}

.spectrum-Textfield--sizeXL {
	--spectrum-textfield-height: var(--spectrum-component-height-300);
	--spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-extra-large);
	--spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200);
	--spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-300);
	--spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-200);
	--spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-300);
	--spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-300);
	--spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-extra-large);
	--spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-extra-large);
	--spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-extra-large);
	--spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-extra-large);
	--spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-extra-large);
	--spectrum-textfield-character-count-font-size: var(--spectrum-font-size-200);
	--spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-200);
	--spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-extra-large);
	--spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-extra-large);

	/* Text Area / Multiline size extra large */
	--spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-300);
}

/********* TEXT FIELD and TEXT AREA Outer Wrapper *********/
.spectrum-Textfield {
	position: relative;
	text-overflow: ellipsis;

	/* Prevent input from expanding to width of Help text */
	inline-size: var(--mod-textfield-width, var(--spectrum-textfield-width));

	/* Grid layout for child components */
	display: inline-grid;
	grid-template-columns: auto auto;
	grid-template-rows: auto auto auto;

	/*** ↓ Browser Mitigations for Text Field ↓ ***/
	/* Edge - Show the overflow for input. */
	overflow: visible;

	/* Firefox and Safari - Remove the margin for input. */
	margin: 0;
}

/********* Child Element - Validation Icons - ⚠️ ✅ *********/
.spectrum-Textfield-validationIcon {
	/* specify validation class or web components will apply this to all icons */
	.spectrum-Textfield.is-valid &,
	.spectrum-Textfield.is-invalid & {
		position: absolute;
		pointer-events: all;
		inset-block-start: 0;
		margin-inline-start: auto;
		grid-row: 2;
		grid-column: 2;
	}

	.spectrum-Textfield.spectrum-Textfield--sideLabel & {
		grid-row: 1 / span 1;
		grid-column: 2 / span 1;
	}

	/****** Validation Icon - Valid ✅ ******/
	.spectrum-Textfield.is-valid & {
		inset-block-start: var(--mod-textfield-icon-spacing-block-valid, var(--spectrum-textfield-icon-spacing-block-valid));
		inset-block-end: var(--mod-textfield-icon-spacing-block-valid, var(--spectrum-textfield-icon-spacing-block-valid));
		inset-inline-end: var(--mod-textfield-icon-spacing-inline-end-valid, var(--spectrum-textfield-icon-spacing-inline-end-valid));
		color: var(--mod-textfield-icon-color-valid, var(--spectrum-textfield-icon-color-valid));
	}

	/****** Validation Icon - Invalid ⚠️ ******/
	.spectrum-Textfield.is-invalid & {
		block-size: var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid));
		inline-size: var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid));
		inset-block-start: var(--mod-textfield-icon-spacing-block-invalid, var(--spectrum-textfield-icon-spacing-block-invalid));
		inset-block-end: var(--mod-textfield-icon-spacing-block-invalid, var(--spectrum-textfield-icon-spacing-block-invalid));
		inset-inline-end: var(--mod-textfield-icon-spacing-inline-end-invalid, var(--spectrum-textfield-icon-spacing-inline-end-invalid));
		color: var(--mod-textfield-icon-color-invalid, var(--spectrum-textfield-icon-color-invalid));
	}

	.spectrum-Textfield.is-disabled &,
	.spectrum-Textfield.is-readOnly & {
		/* Disabled validation icons are transparent */
		color: transparent;
	}

	.spectrum-Textfield--quiet & {
		padding-inline-end: 0;
	}

	.spectrum-Textfield--quiet.is-valid & {
		inset-inline-end: var(--mod-textfield-icon-spacing-inline-end-quiet-valid, var(--spectrum-textfield-icon-spacing-inline-end-quiet-valid));
	}

	.spectrum-Textfield--quiet.is-invalid & {
		inset-inline-end: var(--mod-textfield-icon-spacing-inline-end-quiet-invalid, var(--spectrum-textfield-icon-spacing-inline-end-quiet-invalid));
	}
}

/********* Child Component - Label *********/
.spectrum-FieldLabel {
	.spectrum-Textfield & {
		margin-block-end: var(--mod-textfield-label-spacing-block, var(--spectrum-textfield-label-spacing-block));
		grid-row: 1;
		grid-column: 1 / span 1;
	}

	.spectrum-Textfield--quiet & {
		margin-block-end: var(--mod-textfield-label-spacing-block-quiet, var(--spectrum-textfield-label-spacing-block-quiet));
	}

	.spectrum-Textfield.is-disabled & {
		color: var(--spectrum-textfield-text-color-disabled);
	}
}

/********* Child Component - Help Text *********/
.spectrum-Textfield .spectrum-HelpText {
	margin-block-start: var(--mod-textfield-helptext-spacing-block, var(--spectrum-textfield-helptext-spacing-block));
	grid-row: 3;
	grid-column: 1 / span 2;
}

/********* Child Element - Character Count *********/
.spectrum-Textfield-characterCount {
	display: inline-flex;
	align-items: flex-end;
	justify-content: flex-end;
	inline-size: auto;
	margin-block-end: var(--mod-textfield-character-count-spacing-block, var(--spectrum-textfield-character-count-spacing-block));
	margin-inline-start: var(--mod-textfield-character-count-spacing-inline, var(--spectrum-textfield-character-count-spacing-inline));
	margin-inline-end: 0;
	font-size: var(--mod-textfield-character-count-font-size, var(--spectrum-textfield-character-count-font-size));
	font-family: var(--mod-textfield-character-count-font-family, var(--spectrum-textfield-character-count-font-family));
	font-weight: var(--mod-textfield-character-count-font-weight, var(--spectrum-textfield-character-count-font-weight));
	grid-row: 1;
	grid-column: 2 / span 1;
	padding-inline-end: calc(var(--mod-textfield-corner-radius, var(--spectrum-textfield-corner-radius)) / 2);

	.spectrum-Textfield--quiet & {
		margin-block-end: var(--mod-textfield-character-count-spacing-block-quiet, var(--spectrum-textfield-character-count-spacing-block-quiet));
	}
}

/********* Child Element - Input *********/
.spectrum-Textfield-input {
	/* no mod defined to allow for maximum compatibility */
	line-height: var(--spectrum-textfield-input-line-height);
	box-sizing: border-box;
	inline-size: 100%;
	min-inline-size: var(--mod-textfield-min-width, var(--spectrum-textfield-min-width));
	block-size: var(--mod-textfield-height, var(--spectrum-textfield-height));
	padding-block-start: calc(var(--mod-textfield-spacing-block-start, var(--spectrum-textfield-spacing-block-start)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)));
	padding-block-end: calc(var(--mod-textfield-spacing-block-end, var(--spectrum-textfield-spacing-block-end)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)));

	padding-inline: calc(var(--mod-textfield-spacing-inline, var(--spectrum-textfield-spacing-inline)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)));

	vertical-align: top; /* used to align them correctly in forms. */
	outline: none;
	background-color: var(--mod-textfield-background-color, var(--spectrum-textfield-background-color));
	border-width: var(--mod-textfield-border-width, var(--spectrum-textfield-border-width));
	border-style: solid;
	border-color: var(--highcontrast-textfield-border-color, var(--mod-textfield-border-color, var(--spectrum-textfield-border-color)));
	border-radius: var(--mod-textfield-corner-radius, var(--spectrum-textfield-corner-radius));
	transition: border-color var(--mod-texfield-animation-duration, var(--spectrum-texfield-animation-duration)) ease-in-out;

	font-size: var(--mod-textfield-placeholder-font-size, var(--spectrum-textfield-placeholder-font-size));
	font-family: var(--mod-textfield-font-family, var(--spectrum-textfield-font-family));
	font-weight: var(--mod-textfield-font-weight, var(--spectrum-textfield-font-weight));
	color: var(--highcontrast-textfield-text-color-default, var(--mod-textfield-text-color-default, var(--spectrum-textfield-text-color-default)));
	text-overflow: ellipsis;

	/* place in same cell: input, focus indicator, and grows sizer */
	grid-row: 2;
	grid-column: 1 / span 2;

	/*** ↓ Browser Mitigations for Input ↓ ***/
	/* Firefox and Safari - Remove the margin for input. */
	margin: 0;
	appearance: none;

	&[type="number"] {
		/* stylelint-disable-next-line property-no-vendor-prefix -- Removes the native spin buttons in Firefox. */
		-moz-appearance: textfield;

		&::-webkit-inner-spin-button,
		&::-webkit-outer-spin-button {
			/* stylelint-disable-next-line property-no-vendor-prefix -- Remove the native spin buttons in webkit-based browsers. */
			-webkit-appearance: none;
			margin: 0;
		}
	}

	/* Removes the red border that appears in Firefox (normalize). */
	&:-moz-ui-invalid {
		box-shadow: none;
	}

	/*** Input Placeholder Text ***/
	&::placeholder {
		/* Normalize opacity between browsers. */
		opacity: 1;
		font-size: var(--mod-textfield-placeholder-font-size, var(--spectrum-textfield-placeholder-font-size));
		font-family: var(--mod-textfield-font-family, var(--spectrum-textfield-font-family));
		font-weight: var(--mod-textfield-font-weight, var(--spectrum-textfield-font-weight));
		color: var(--highcontrast-textfield-text-color-default, var(--mod-textfield-text-color-default, var(--spectrum-textfield-text-color-default)));
		transition: color var(--mod-texfield-animation-duration, var(--spectrum-texfield-animation-duration)) ease-in-out;
	}

	/*** Input Placeholder Text - CJK ***/
	&:lang(ja),
	&:lang(zh),
	&:lang(ko) {
		&::placeholder {
			font-style: normal;
		}
	}

	/* hover */
	.spectrum-Textfield:hover &,
	&:hover {
		border-color: var(--highcontrast-textfield-border-color-hover, var(--mod-textfield-border-color-hover, var(--spectrum-textfield-border-color-hover)));
		color: var(--highcontrast-textfield-text-color-hover, var(--mod-textfield-text-color-hover, var(--spectrum-textfield-text-color-hover)));

		&::placeholder {
			color: var(--highcontrast-textfield-text-color-hover, var(--mod-textfield-text-color-hover, var(--spectrum-textfield-text-color-hover)));
		}
	}

	/* mouse focus */
	.is-focused &,
	&:focus {
		border-color: var(--highcontrast-textfield-border-color-focus, var(--mod-textfield-border-color-focus, var(--spectrum-textfield-border-color-focus)));
		color: var(--mod-textfield-text-color-focus, var(--spectrum-textfield-text-color-focus));

		&::placeholder {
			color: var(--mod-textfield-text-color-focus, var(--spectrum-textfield-text-color-focus));
		}

		/* focus hover */
		&:hover {
			border-color: var(--mod-textfield-border-color-focus-hover, var(--spectrum-textfield-border-color-focus-hover));
			color: var(--mod-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover));
		}

		&:hover::placeholder {
			color: var(--mod-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover));
		}
	}

	/* keyboard focus */
	.is-keyboardFocused & {
		border-color: var(--highcontrast-textfield-border-color-keyboard-focus, var(--mod-textfield-border-color-keyboard-focus, var(--spectrum-textfield-border-color-keyboard-focus)));
		color: var(--highcontrast-textfield-text-color-keyboard-focus, var(--mod-textfield-text-color-keyboard-focus, var(--spectrum-textfield-text-color-keyboard-focus)));

		&::placeholder {
			color: var(--highcontrast-textfield-text-color-keyboard-focus, var(--mod-textfield-text-color-keyboard-focus, var(--spectrum-textfield-text-color-keyboard-focus)));
		}

		/* focus indicator is focused state */
		outline: var(--mod-textfield-focus-indicator-width, var(--spectrum-textfield-focus-indicator-width)) solid;
		outline-color: var(--highcontrast-textfield-focus-indicator-color, var(--mod-textfield-focus-indicator-color, var(--spectrum-textfield-focus-indicator-color)));
		outline-offset: var(--mod-textfield-focus-indicator-gap, var(--spectrum-textfield-focus-indicator-gap));
	}

	/*** Input Valid ✅ ***/
	.is-valid & {
		padding-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-valid, var(--spectrum-textfield-icon-spacing-inline-start-valid)) + var(--mod-textfield-icon-size-valid, var(--spectrum-textfield-icon-size-valid)) + var(--mod-textfield-icon-spacing-inline-end-valid, var(--spectrum-textfield-icon-spacing-inline-end-valid)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)));
		color: var(--highcontrast-textfield-text-color-valid, var(--mod-textfield-text-color-valid, var(--spectrum-textfield-text-color-valid)));
	}

	/*** Input Invalid ⚠️ ***/
	.is-invalid & {
		padding-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-invalid, var(--spectrum-textfield-icon-spacing-inline-start-invalid)) + var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid)) + var(--mod-textfield-icon-spacing-inline-end-invalid, var(--spectrum-textfield-icon-spacing-inline-end-invalid)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)));
		color: var(--highcontrast-textfield-text-color-invalid, var(--mod-textfield-text-color-invalid, var(--spectrum-textfield-text-color-invalid)));
		border-color: var(--highcontrast-textfield-border-color-invalid-default, var(--mod-textfield-border-color-invalid-default, var(--spectrum-textfield-border-color-invalid-default)));
	}

	/* Invalid hover */
	.is-invalid:hover:not(.is-disabled) &,
	.is-invalid &:hover:not(.is-disabled) {
		border-color: var(--highcontrast-textfield-border-color-invalid-hover, var(--mod-textfield-border-color-invalid-hover, var(--spectrum-textfield-border-color-invalid-hover)));
	}

	/* Invalid mouse focus */
	.is-invalid.is-focused &,
	.is-invalid:focus &,
	.is-invalid &:focus {
		border-color: var(--highcontrast-textfield-border-color-invalid-focus, var(--mod-textfield-border-color-invalid-focus, var(--spectrum-textfield-border-color-invalid-focus)));

		/* focus hover */
		&:hover {
			border-color: var(--mod-textfield-border-color-invalid-focus-hover, var(--spectrum-textfield-border-color-invalid-focus-hover));
		}
	}

	/* invalid keyboard focus */
	.is-invalid.is-keyboardFocused &,
	.is-invalid &:focus-visible {
		border-color: var(--highcontrast-textfield-border-color-invalid-keyboard-focus, var(--mod-textfield-border-color-invalid-keyboard-focus, var(--spectrum-textfield-border-color-invalid-keyboard-focus)));
	}

	/****** Input Disabled 🚫 ******/
	.spectrum-Textfield.is-disabled &,
	.spectrum-Textfield.is-disabled:hover &,
	&:disabled {
		background-color: var(--mod-textfield-background-color-disabled, var(--spectrum-textfield-background-color-disabled));
		border-color: var(--mod-textfield-border-color-disabled, var(--spectrum-textfield-border-color-disabled));
		color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)));

		/* Disable the resize functionality when disabled */
		resize: none;

		/* The opacity must be set to 1 */
		opacity: 1;

		&::placeholder {
			color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)));
		}
	}

	/****** Input - Quiet 🤫 ******/
	.spectrum-Textfield--quiet & {
		outline: none;
		border-block-start-width: 0;
		border-inline-width: 0;

		margin-block-end: var(--mod-textfield-spacing-block-quiet, var(--spectrum-textfield-spacing-block-quiet));
		padding-block-start: var(--mod-textfield-spacing-block-start, var(--spectrum-textfield-spacing-block-start));
		padding-inline: var(--mod-textfield-spacing-inline-quiet, var(--spectrum-textfield-spacing-inline-quiet));
		background-color: transparent;
		border-radius: 0;

		/* Treat all quiet inputs and text areas the same */
		resize: none;
		overflow-y: hidden;
	}

	/****** Input - Quiet 🤫 + Disabled 🚫 ******/
	.spectrum-Textfield--quiet.is-disabled &,
	.spectrum-Textfield--quiet.is-disabled:hover &,
	&:disabled {
		background-color: transparent;
		border-color: var(--mod-textfield-border-color-disabled, var(--spectrum-textfield-border-color-disabled));
		color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)));

		&::placeholder {
			color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)));
		}
	}

	/****** Input ReadOnly ******/
	.spectrum-Textfield.is-readOnly &,
	.spectrum-Textfield.is-readOnly:hover &,
	&:read-only {
		background-color: transparent;
		border-color: transparent;
		color: var(--highcontrast-textfield-text-color-readonly, var(--mod-textfield-text-color-readonly, var(--spectrum-textfield-text-color-readonly)));
		outline: none;

		&::placeholder {
			color: var(--highcontrast-textfield-text-color-readonly, var(--mod-textfield-text-color-readonly, var(--spectrum-textfield-text-color-readonly)));
			background-color: transparent;
		}
	}
}

/*** Layout Variant - Side Label ***/
.spectrum-Textfield--sideLabel {
	grid-template-columns: auto auto auto;
	grid-template-rows: auto auto;

	/*** Focus Indicator ***/
	&::after {
		grid-row: 1 / span 1;
		grid-column: 2 / span 1;
	}

	.spectrum-FieldLabel {
		margin-inline-end: var(--mod-textfield-label-spacing-inline-side-label, var(--spectrum-textfield-label-spacing-inline-side-label));
		grid-row: 1 / span 2;
		grid-column: 1 / span 1;
	}

	.spectrum-Textfield-characterCount {
		align-items: flex-start;
		margin-block-start: var(--mod-textfield-character-count-spacing-block-side, var(--spectrum-textfield-character-count-spacing-block-side));
		margin-inline-start: var(--mod-textfield-character-count-spacing-inline-side, var(--spectrum-textfield-character-count-spacing-inline-side));
		grid-row: 1;
		grid-column: 3 / span 1;
	}

	.spectrum-HelpText {
		grid-row: 2;
		grid-column: 2 / span 1;
	}

	.spectrum-Textfield-validationIcon {
		grid-row: 1 / span 1;
		grid-column: 2 / span 1;
	}

	.spectrum-Textfield-input {
		grid-row: 1 / span 1;
		grid-column: 2 / span 1;
	}
}

/*** Text Area ***/
.spectrum-Textfield--multiline {
	--spectrum-textfield-input-line-height: normal;

	.spectrum-Textfield-input {
		min-inline-size: var(--mod-text-area-min-inline-size, var(--spectrum-text-area-min-inline-size));
		min-block-size: var(--mod-text-area-min-block-size, var(--spectrum-text-area-min-block-size));
		resize: inherit;
	}

	&.spectrum-Textfield--grows {
		.spectrum-Textfield-input {
			grid-row: 2 / auto;
		}

		&.spectrum-Textfield--sideLabel .spectrum-Textfield-input {
			grid-row: 1 / auto;
		}
	}

	&.spectrum-Textfield--quiet .spectrum-Textfield-input {
		min-block-size: var(--mod-text-area-min-block-size-quiet, var(--spectrum-text-area-min-block-size-quiet));

		/* Treat all quiet inputs and text areas the same */
		resize: none;
		overflow-y: hidden;
	}
}

.spectrum-Textfield--quiet {
	&::after {
		content: "";
		pointer-events: none;
		position: absolute;
		inset-block-end: calc(-1 * (var(--mod-textfield-focus-indicator-gap, var(--spectrum-textfield-focus-indicator-gap)) + var(--mod-textfield-focus-indicator-width, var(--spectrum-textfield-focus-indicator-width))));
		inset-inline-start: 0;
		inline-size: 100%;
		block-size: var(--mod-textfield-focus-indicator-width, var(--spectrum-textfield-focus-indicator-width));
	}

	&.is-keyboardFocused::after {
		background-color: var(--highcontrast-textfield-focus-indicator-color, var(--mod-textfield-focus-indicator-color, var(--spectrum-textfield-focus-indicator-color)));
	}

	/*** Quiet Input Invalid ⚠️ ***/
	&.is-invalid .spectrum-Textfield-input {
		padding-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-invalid, var(--spectrum-textfield-icon-spacing-inline-start-invalid)) + var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid)));
	}

	/*** Quiet Input Valid ✅ ***/
	&.is-valid .spectrum-Textfield-input {
		padding-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-valid, var(--spectrum-textfield-icon-spacing-inline-start-valid)) + var(--mod-textfield-icon-size-valid, var(--spectrum-textfield-icon-size-valid)));
	}
}

/********* WHCM *********/
@media (forced-colors: active) {
	.spectrum-Textfield {
		--highcontrast-textfield-border-color: CanvasText;
		--highcontrast-textfield-border-color-hover: Highlight;
		--highcontrast-textfield-border-color-focus: Highlight;
		--highcontrast-textfield-border-color-keyboard-focus: CanvasText;
		--highcontrast-textfield-focus-indicator-color: Highlight;

		--highcontrast-textfield-border-color-invalid-default: Highlight;
		--highcontrast-textfield-border-color-invalid-hover: Highlight;
		--highcontrast-textfield-border-color-invalid-focus: Highlight;
		--highcontrast-textfield-border-color-invalid-keyboard-focus: Highlight;

		--highcontrast-textfield-text-color-valid: CanvasText;
		--highcontrast-textfield-text-color-invalid: CanvasText;

		.spectrum-Textfield-input {
			--highcontrast-textfield-text-color-default: CanvasText;
			--highcontrast-textfield-text-color-hover: CanvasText;
			--highcontrast-textfield-text-color-keyboard-focus: CanvasText;
			--highcontrast-textfield-text-color-disabled: GrayText;
			--highcontrast-textfield-text-color-readonly: CanvasText;

			&::placeholder {
				--highcontrast-textfield-text-color-default: GrayText;
				--highcontrast-textfield-text-color-hover: GrayText;
				--highcontrast-textfield-text-color-keyboard-focus: GrayText;
				--highcontrast-textfield-text-color-disabled: GrayText;
				--highcontrast-textfield-text-color-readonly: CanvasText;
			}
		}
	}
}
