/* text-input.css: Text input (component 3). Owner: group A (P2.T4). Tokens only, logical properties only.
   The .text-input__* frame (label, control box, helper, error) is also used by the select and the date picker, which sit in the same group. */

.text-input,
[data-component="select"],
[data-component="date-picker"] {
  display: grid;
  gap: var(--space-2);
  min-inline-size: 0;
  inline-size: 100%;
  align-self: flex-start;
  max-inline-size: var(--size-field-max);
}
.text-input[data-width="mid"],
[data-component="select"][data-width="mid"],
[data-component="date-picker"][data-width="mid"] { max-inline-size: var(--size-field-mid); }
.text-input[data-width="short"],
[data-component="select"][data-width="short"],
[data-component="date-picker"][data-width="short"] { max-inline-size: var(--size-field-short); }
.text-input[data-width="full"] { max-inline-size: var(--size-form-max); }

.text-input__label { font: var(--type-label); color: var(--text); }
.text-input__optional { color: var(--text-secondary); font-weight: 400; }
.text-input__helper { font: var(--type-caption); color: var(--text-secondary); }
.text-input__error { font: var(--type-caption); color: var(--critical); }

/* The control box: input, select trigger and date trigger look the same. */
.text-input__control {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  box-sizing: border-box;
  min-block-size: var(--size-control);
  min-inline-size: 0;
  padding-inline: var(--space-4);
  background: var(--surface);
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--radius-control);
  color: var(--text);
  font: var(--type-body);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
[data-size="sm"] > .text-input__control { min-block-size: var(--size-control-sm); padding-inline: var(--space-3); }
.text-input__control > .icon { color: var(--text-secondary); }

.text-input__control:hover,
[data-force="hover"] .text-input__control { border-color: var(--text-secondary); }
.text-input__control:focus-visible,
.text-input__control:has(.text-input__input:focus-visible),
[data-force="focus-visible"] .text-input__control {
  border-color: var(--brand);
  outline: var(--border-width-thick) solid var(--focus-ring);
  outline-offset: var(--space-2);
}
[data-force="active"] .text-input__control { border-color: var(--brand); }

.text-input__input {
  flex: 1 1 auto;
  min-inline-size: 0;
  min-block-size: calc(var(--size-control-sm) - 2 * var(--border-width));
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: var(--type-body);
  text-overflow: ellipsis;
}
.text-input__input:focus-visible { outline: 0; }
.text-input__input::placeholder { color: var(--text-muted); opacity: 1; }
.text-input__input::-webkit-search-cancel-button,
.text-input__input::-webkit-search-decoration { appearance: none; display: none; }
[data-size="sm"] .text-input__input { min-block-size: calc(var(--size-control-sm) - 2 * var(--border-width)); }

/* Error: critical border and message, alert-circle at the inline-end inside the field. */
[data-invalid="true"] > .text-input__control,
[data-invalid="true"] > .text-input__control:hover { border-color: var(--critical); }
.text-input__error-slot { display: inline-flex; flex: none; color: var(--critical); }
.text-input__error-slot[hidden] { display: none; }
.text-input__error-slot .icon { color: var(--critical); }

/* Read-only: sunken, hairline border, no hover. */
[data-readonly="true"] > .text-input__control,
[data-readonly="true"] > .text-input__control:hover,
[data-readonly="true"][data-force="hover"] > .text-input__control { background: var(--surface-sunken); border-color: var(--border); }
[data-readonly="true"] .text-input__input { cursor: default; }

/* Disabled: the global recipe with a --border border. */
[data-disabled="true"] > .text-input__control,
[data-disabled="true"] > .text-input__control:hover {
  background: var(--surface-sunken);
  border-color: var(--border);
  color: var(--text-disabled);
  cursor: not-allowed;
}
[data-disabled="true"] .text-input__input,
[data-disabled="true"] .text-input__input::placeholder { color: var(--text-disabled); cursor: not-allowed; }
[data-disabled="true"] .text-input__label { color: var(--text-secondary); }

/* Search: icon at the inline-start, clear button at the inline-end. */
.text-input[data-variant="search"] .text-input__control { padding-inline-start: var(--space-4); }
.text-input__clear {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: var(--size-target-min);
  block-size: var(--size-target-min);
  margin-inline-end: calc(-1 * var(--space-2));
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.text-input__clear[hidden] { display: none; }
.text-input__clear:hover { background: var(--surface-hover); color: var(--text); }
.text-input__clear:active { background: var(--border); }

/* Amount: fixed prefix, hairline divider, end-aligned tabular digits. */
.text-input__prefix { flex: none; font: var(--type-label); color: var(--text-secondary); }
.text-input__divider { flex: none; align-self: stretch; margin-block: var(--space-3); border-inline-start: var(--border-width) solid var(--border); }
.text-input[data-variant="amount"] .text-input__input,
.text-input[data-variant="number"] .text-input__input {
  text-align: end;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Multiline: three rows minimum, eight maximum, resize in the block direction. */
.text-input[data-variant="multiline"] .text-input__control { align-items: flex-start; padding-block: var(--space-3); padding-inline: var(--space-4); }
.text-input[data-variant="multiline"] .text-input__input {
  resize: block;
  min-block-size: calc(3 * var(--space-6));
  max-block-size: calc(8 * var(--space-6));
}
.text-input[data-variant="multiline"] .text-input__error-slot { align-self: flex-start; }

/* Small width on a coarse pointer: 44 tall, full width. */
@media (width < 768px) and (pointer: coarse) {
  .text-input,
  [data-component="select"],
  [data-component="date-picker"] { max-inline-size: none; }
  .text-input__control,
  [data-size="sm"] > .text-input__control { min-block-size: var(--size-control-touch); }
}