.x-text-input {
  font-family: var(--default-font-family);
  font-weight: var(--font-weight-regular);
  text-align: start;
  font-style: normal;
}

.x-text-input:where(input) {
  width: 100%;
  height: var(--text-input-height);
  border-radius: var(--text-input-border-radius);
  text-indent: var(--text-input-padding);
  cursor: text;
}

.x-text-input:where(input):where([type="number"]) {
  -moz-appearance: textfield;
}

.x-text-input:where(input)::-webkit-inner-spin-button {
  appearance: none;
}

.x-text-input:where(input)::-webkit-search-cancel-button {
  appearance: none;
}

.x-text-input:where(input)::selection {
  background-color: var(--text-input-selection-color);
}

.x-text-input:where(input):where([type="date"], [type="datetime-local"], [type="time"], [type="week"], [type="month"]) {
  text-indent: 0;
  padding-left: var(--text-input-padding);
  padding-right: var(--text-input-padding);
}

.x-text-input:where(input)::-webkit-calendar-picker-indicator {
  box-sizing: content-box;
  width: var(--text-input-native-icon-size);
  height: var(--text-input-native-icon-size);
  padding: var(--space-1);
  margin-left: var(--space-1);
  margin-right: calc(var(--space-1) * -1);
  border-radius: calc(var(--text-input-border-radius) - 2px);
}

.x-text-input:where(input)::-webkit-calendar-picker-indicator:where(:hover) {
  background-color: var(--neutral-a3);
}

.x-text-input:where(input)::-webkit-calendar-picker-indicator:where(:focus-visible) {
  outline: 2px solid var(--text-input-focus-color);
}

.x-text-input:where(input):where(:focus-visible) {
  outline: 2px solid var(--text-input-focus-color);
  outline-offset: -1px;
}

@supports selector(:has(*)) {
  .x-text-input:where(input):where(:-webkit-autofill, [data-com-onepassword-filled]) {
    -webkit-text-fill-color: var(--neutral-12);
    -webkit-background-clip: text;
    background-clip: text;
  }

  .x-text-input:where(input):where(:autofill, [data-com-onepassword-filled]) {
    -webkit-text-fill-color: var(--neutral-12);
    -webkit-background-clip: text;
    background-clip: text;
  }
}

.x-text-input:where(textarea) {
  width: 100%;
  min-height: var(--text-input-min-height);
  padding: var(--text-input-padding);
  border-radius: var(--text-input-border-radius);
  resize: vertical;
  cursor: text;
  overflow: auto;
}

.x-text-input:where(textarea)::selection {
  background-color: var(--text-input-selection-color);
}

.x-text-input:where(textarea)::-webkit-scrollbar {
  width: var(--space-3);
  height: var(--space-3);
}

.x-text-input:where(textarea)::-webkit-scrollbar-track {
  background-color: #0000;
}

.x-text-input:where(textarea)::-webkit-scrollbar-thumb {
  background-color: var(--neutral-a5);
  border-radius: var(--space-3);
  background-clip: padding-box;
  border: 3px solid #0000;
}

.x-text-input:where(textarea)::-webkit-scrollbar-thumb:where(:hover) {
  background-color: var(--neutral-a7);
}

.x-text-input:where(textarea):where(:focus-visible) {
  outline: 2px solid var(--text-input-focus-color);
  outline-offset: -1px;
}

@supports selector(:has(*)) {
  .x-text-input:where(textarea):where(:-webkit-autofill, [data-com-onepassword-filled]) {
    -webkit-text-fill-color: var(--neutral-12);
    -webkit-background-clip: text;
    background-clip: text;
  }

  .x-text-input:where(textarea):where(:autofill, [data-com-onepassword-filled]) {
    -webkit-text-fill-color: var(--neutral-12);
    -webkit-background-clip: text;
    background-clip: text;
  }
}

.x-text-input:where(:has( > input)) {
  box-sizing: border-box;
  height: var(--text-input-height);
  border-radius: var(--text-input-border-radius);
  cursor: text;
  flex-direction: row;
  align-items: stretch;
  padding: 0;
  display: flex;
}

.x-text-input:where(:has( > input)):where(:has( > input:focus)) {
  outline: 2px solid var(--text-input-focus-color);
  outline-offset: -1px;
}

.x-text-input:where(:has( > input)) > :where(input) {
  width: 100%;
  min-width: 0;
  height: 100%;
  text-indent: var(--text-input-padding);
  color: inherit;
  font: inherit;
  border-radius: calc(var(--text-input-border-radius) - var(--text-input-border-width));
  background: none;
  border: 0;
  outline: 0;
  flex: auto;
  padding: 0;
}

.x-text-input:where(:has( > input)) > :where(input)::selection {
  background-color: var(--text-input-selection-color);
}

.x-text-input:where(:has( > input)) > :where(input)::-webkit-search-cancel-button {
  appearance: none;
}

.x-text-input:where(:has( > input)) > :where(input)::-webkit-inner-spin-button {
  appearance: none;
}

.x-text-input:where(:has( > input)) > :where(:not(input, textarea)) ~ input {
  text-indent: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding-left: 0;
}

.x-text-input:where(:has( > input)) > input:where(:has( ~ :not(input, textarea))) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-right: 0;
}

.x-text-input:where(:has( > textarea)) {
  box-sizing: border-box;
  min-height: var(--text-input-min-height);
  border-radius: var(--text-input-border-radius);
  cursor: text;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  display: flex;
}

.x-text-input:where(:has( > textarea)):where(:has( > textarea:focus)) {
  outline: 2px solid var(--text-input-focus-color);
  outline-offset: -1px;
}

.x-text-input:where(:has( > textarea)) > :where(textarea) {
  width: 100%;
  min-height: 0;
  padding: var(--text-input-padding);
  color: inherit;
  font: inherit;
  resize: vertical;
  border-radius: calc(var(--text-input-border-radius) - var(--text-input-border-width));
  background: none;
  border: 0;
  outline: 0;
  flex: auto;
}

.x-text-input:where(:has( > textarea)) > :where(textarea)::selection {
  background-color: var(--text-input-selection-color);
}

.x-text-input:where(:has( > textarea)) > :where(:not(input, textarea)) ~ textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding-top: 0;
}

.x-text-input:where(:has( > textarea)) > textarea:where(:has( ~ :not(input, textarea))) {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  padding-bottom: 0;
}

.x-text-input > :where(:not(input, textarea)) {
  box-sizing: border-box;
  cursor: text;
  flex-shrink: 0;
  align-items: center;
  display: flex;
}

.x-text-input:where([data-size="1"]) {
  --text-input-height: var(--space-5);
  --text-input-min-height: var(--space-8);
  --text-input-padding: calc(var(--space-1) * 1.5 - var(--text-input-border-width));
  --text-input-radius: var(--radius-2);
  --text-input-border-radius: var(--text-input-radius);
  --text-input-native-icon-size: var(--space-3);
  font-size: var(--font-size-1);
  line-height: var(--line-height-1);
  letter-spacing: var(--letter-spacing-1);
}

.x-text-input:where([data-size="1"]) > :where(:not(input, textarea)) {
  gap: var(--space-2);
  padding-left: var(--space-1);
  padding-right: var(--space-1);
}

.x-text-input:where([data-size="2"]) {
  --text-input-height: var(--space-6);
  --text-input-min-height: var(--space-9);
  --text-input-padding: calc(var(--space-2) - var(--text-input-border-width));
  --text-input-radius: var(--radius-2);
  --text-input-border-radius: var(--text-input-radius);
  --text-input-native-icon-size: var(--space-4);
  font-size: var(--font-size-2);
  line-height: var(--line-height-2);
  letter-spacing: var(--letter-spacing-2);
}

.x-text-input:where([data-size="2"]) > :where(:not(input, textarea)) {
  gap: var(--space-2);
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

.x-text-input:where([data-size="3"]) {
  --text-input-height: var(--space-7);
  --text-input-min-height: 80px;
  --text-input-padding: calc(var(--space-3) - var(--text-input-border-width));
  --text-input-radius: var(--radius-3);
  --text-input-border-radius: var(--text-input-radius);
  --text-input-native-icon-size: var(--space-4);
  font-size: var(--font-size-3);
  line-height: var(--line-height-3);
  letter-spacing: var(--letter-spacing-3);
}

.x-text-input:where([data-size="3"]) > :where(:not(input, textarea)) {
  gap: var(--space-3);
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

.x-text-input:where(:not([data-size])) {
  --text-input-height: var(--space-6);
  --text-input-min-height: var(--space-9);
  --text-input-padding: calc(var(--space-2) - var(--text-input-border-width));
  --text-input-radius: var(--radius-2);
  --text-input-border-radius: var(--text-input-radius);
  --text-input-native-icon-size: var(--space-4);
  font-size: var(--font-size-2);
  line-height: var(--line-height-2);
  letter-spacing: var(--letter-spacing-2);
}

.x-text-input:where(:not([data-size])) > :where(:not(input, textarea)) {
  gap: var(--space-2);
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

.x-text-input:where(input), .x-text-input:where(:has( > input)) {
  --text-input-border-radius: max(var(--text-input-radius), var(--radius-pill));
}

.x-text-input:where(:not([data-variant="soft"])) {
  --text-input-border-width: 1px;
  --text-input-selection-color: var(--focus-a5);
  --text-input-focus-color: var(--focus-8);
  background-color: var(--color-surface);
  border: var(--text-input-border-width) solid var(--neutral-a7);
  color: var(--neutral-12);
}

.x-text-input:where(:not([data-variant="soft"])):where(input)::placeholder, .x-text-input:where(:not([data-variant="soft"])):where(textarea)::placeholder, .x-text-input:where(:not([data-variant="soft"])):where(:has( > :is(input, textarea))) > :where(:is(input, textarea))::placeholder {
  color: var(--neutral-a10);
}

.x-text-input:where(:not([data-variant="soft"])) > :where(:not(input, textarea)) {
  color: var(--neutral-a11);
}

.x-text-input:where(:not([data-variant="soft"])) > :where(:not(input, textarea))[data-accent] {
  color: var(--accent-a11);
}

.x-text-input:where([data-variant="soft"]) {
  --text-input-border-width: 0px;
  --text-input-selection-color: var(--accent-a5);
  --text-input-focus-color: var(--accent-8);
  background-color: var(--accent-a3);
  color: var(--accent-12);
}

.x-text-input:where([data-variant="soft"]):where(input)::placeholder, .x-text-input:where([data-variant="soft"]):where(textarea)::placeholder, .x-text-input:where([data-variant="soft"]):where(:has( > :is(input, textarea))) > :where(:is(input, textarea))::placeholder {
  color: var(--accent-12);
  opacity: .6;
}

.x-text-input:where([data-variant="soft"]) > :where(:not(input, textarea)) {
  color: var(--accent-12);
}

.x-text-input:where([data-variant="soft"]) > :where(:not(input, textarea))[data-accent] {
  color: var(--accent-a11);
}

.x-text-input:where(:is(input, textarea)):where(:disabled, :read-only) {
  cursor: text;
  color: var(--neutral-a11);
  -webkit-text-fill-color: var(--neutral-a11);
}

.x-text-input:where(:is(input, textarea)):where(:disabled, :read-only)::placeholder {
  opacity: .5;
}

.x-text-input:where(:is(input, textarea)):where(:disabled, :read-only):where(:placeholder-shown) {
  cursor: var(--cursor-disabled);
}

.x-text-input:where(:has( > :is(input, textarea):is(:disabled, :read-only))) {
  background-color: var(--neutral-a2);
}

.x-text-input:where(:has( > :is(input, textarea):is(:disabled, :read-only))) > :where(:is(input, textarea)) {
  cursor: text;
  color: var(--neutral-a11);
  -webkit-text-fill-color: var(--neutral-a11);
}

.x-text-input:where(:has( > :is(input, textarea):is(:disabled, :read-only))) > :where(:is(input, textarea))::placeholder {
  opacity: .5;
}

.x-text-input:where(:has( > :is(input, textarea):is(:disabled, :read-only))):where(:has( > :is(input, textarea):placeholder-shown)) {
  cursor: var(--cursor-disabled);
}

.x-text-input:where(:has( > :is(input, textarea):is(:disabled, :read-only))):where(:has( > :is(input, textarea):placeholder-shown)) > :where(:not(input, textarea)) {
  cursor: var(--cursor-disabled);
}

.x-text-input:where(:not([data-variant="soft"])):where(:has( > :is(input, textarea):is(:disabled, :read-only))) {
  border-color: var(--neutral-a6);
}