/* ============================================
   xm-text-field — concrete control for XmField (Story 2.1).

   The chrome (surface, border, radius, height, focus ring, label, helper/
   error row, disabled/readonly) is owned by the XmField base — see
   field/index.css. The native <input> rendered by this subclass is already
   styled by the base's `.field__control input` rule (transparent, borderless,
   full-bleed, inherits ink + type). So THIS file owns only the leading/trailing
   affordance rails: the icon-left / icon-right slots and the prefix / suffix
   inline units that flank the input inside the shared control wrapper.

   Surface/ink: the field sits on the inverse-surface card tier, so all ink here
   is inverse-on-surface (icons) or inverse-on-surface-muted (prefix/suffix
   units) — matching the host surface (AD-13). No error color: severity is the base's
   icon + copy in the message row (AD-11). Tokens only (AD-1).

   BEM block: `text-field`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
   ============================================ */

/* ---------- Leading / trailing rails ----------
   Flex children of the base's .field__control row, sitting on either side of
   the input. Each collapses to zero width when its slots are empty, so the
   input keeps its native edge padding when no affordance is authored. The
   icon↔text gap rides the --s-N spacing scale to match the shared chrome. */
.text-field__lead,
.text-field__trail {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
  color: var(--md-sys-color-inverse-on-surface);
}

/* Empty rails contribute no inset — the inner pad-collapse below removes the
   matching input padding so a field with no affordance looks untouched. */
.text-field__lead--empty,
.text-field__trail--empty {
  display: none;
}

/* When a leading rail is present it owns the leading inset; the input drops its
   own left pad so the icon/prefix sits at the wrapper edge inset, and text
   follows the rail's gap. Mirror on the trailing side. */
.text-field__lead {
  padding-left: var(--s-3);
}
.text-field__trail {
  padding-right: var(--s-3);
}
.text-field__lead--empty + .text-field__input {
  padding-left: var(--xm-field-control-pad-x, var(--s-3));
}

/* ---------- Prefix / suffix inline units ----------
   Static affordances like `$` or `KB` — quieter than the live value, so they
   take the muted inverse ink. Slotted content inherits this via the rail color +
   ::slotted override. */
.text-field__lead ::slotted([slot="prefix"]),
.text-field__trail ::slotted([slot="suffix"]) {
  color: var(--xm-color-inverse-on-surface-muted);
  font:
    var(--md-sys-typescale-body-large-weight)
    var(--md-sys-typescale-body-large-size) /
    var(--md-sys-typescale-body-large-line-height)
    var(--md-sys-typescale-body-large-font);
  white-space: nowrap;
}

/* Icons inherit currentColor from the rail (inverse-on-surface), matching the
   host card surface — never an accent or error hue. */
.text-field__lead ::slotted([slot="icon-left"]),
.text-field__trail ::slotted([slot="icon-right"]) {
  display: inline-flex;
  align-items: center;
  color: inherit;
}

/* The input flexes to fill the gap between the rails. Its transparent /
   borderless / type styling comes from the base; the rails set the inset, so
   when a rail is present the input loses the matching native edge pad. */
.text-field__input {
  flex: 1;
  min-width: 0;
}
.text-field__lead:not(.text-field__lead--empty) + .text-field__input {
  padding-left: var(--s-2);
}
.text-field__input:has(+ .text-field__trail:not(.text-field__trail--empty)) {
  padding-right: var(--s-2);
}

/* ---------- Clear button ----------
   The rendered clear affordance for type="search" / [clearable]. Replaces the
   UA-default ::-webkit-search-cancel-button (hidden below) with the design
   system close glyph, so the control reads on the inverse-surface card tier in
   both themes. Mirrors the .ds-icon-btn--ghost idiom: quiet muted ink, hover
   lifts to the outline-variant well + full inverse ink. */
.text-field__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.text-field__clear {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--md-sys-shape-corner-extra-small);
  color: var(--xm-color-inverse-on-surface-muted);
  flex-shrink: 0;
  transition:
    background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.text-field__clear:hover {
  background: var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-inverse-on-surface);
}
.text-field__clear:focus-visible {
  outline: none;
  box-shadow: var(--xm-state-focus-ring);
}