/* Root control group */
.container {
  display: inline-flex;
  align-items: stretch;
  flex-grow: 1;
  gap: 0;
  inline-size: var(--input-width, auto);
  min-inline-size: var(--input-min-width, 0);
  max-inline-size: var(--input-max-width, none);
}

/* When you want it to take available space */
.fullWidth {
  display: flex;
  inline-size: 100%;
  min-inline-size: 0;
}

/* The "field" (input + icons + clear) */
.field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  height: 100%;
  min-inline-size: 0;
  color: var(--color-fg-default);
  background: var(--color-bg-surface);
  border: var(--border-width-thin) solid var(--color-border-default);
  border-radius: var(--border-radius-default);
  box-sizing: border-box;
  transition:
    background-color var(--transition-fast) var(--ease-standard),
    border-color var(--transition-fast) var(--ease-standard),
    box-shadow var(--transition-fast) var(--ease-standard),
    color var(--transition-fast) var(--ease-standard);
}

/* Actual input */
.input {
  flex: 1 1 auto;
  min-inline-size: 0;
  inline-size: 100%;
  /* Size classes also apply to the field; keep the input inside its border. */
  max-block-size: 100%;
  box-sizing: border-box;
  /* Matches `.field`'s radius so the autofill box-shadow below (which paints
     within this element's own box) doesn't show sharp corners under it. */
  border-radius: inherit;
  text-overflow: ellipsis;
  color: var(--color-fg-default);
  background: transparent;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  border: none;
  outline: none;
  padding-inline: var(--spacing-sm);
  padding-block: var(--spacing-xs);
  margin: 0;
}

.input::placeholder {
  color: var(--color-fg-subtle) !important;
}

/* Match the design system's selection color instead of the browser default. */
.input::selection {
  background-color: var(--color-bg-selected);
  color: var(--color-fg-default);
}

.input::-moz-selection {
  background-color: var(--color-bg-selected);
  color: var(--color-fg-default);
}

/* Neutralize the browser's native autofill tint (Chrome's light-blue fill,
   applied via this pseudo-class) so a filled field keeps the field's normal
   background instead of the browser's own color - this also fires for
   Chrome's "previous values typed in this field" history dropdown, which
   uses the same autofill styling even though it's not real autofill data.
   The huge transition delay is the standard trick to stop Chrome animating
   its own background/text color in on top of this.

   The field overlay below keeps the focus ring above this opaque fill. */
.input:-webkit-autofill,
.input:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--color-fg-default);
  -webkit-box-shadow: 0 0 0 1000px var(--color-bg-surface) inset;
  box-shadow: 0 0 0 1000px var(--color-bg-surface) inset;
  transition:
    background-color 600000s 0s,
    color 600000s 0s;
}

.subtle .input:-webkit-autofill,
.subtle .input:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0 1000px var(--color-bg-toolbar) inset;
  box-shadow: 0 0 0 1000px var(--color-bg-toolbar) inset;
}

.embedded .input:-webkit-autofill,
.embedded .input:-webkit-autofill:hover,
.embedded .input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  box-shadow: 0 0 0 1000px transparent inset;
}

.header .input:-webkit-autofill,
.header .input:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  box-shadow: 0 0 0 1000px transparent inset;
}

.header .input:-webkit-autofill {
  -webkit-text-fill-color: var(--color-navbar-fg);
}

/* Paint over the autofill fill using the whole field's geometry, including
   adornments. A ring on the input itself creates an extra inner rectangle.
   Keep this overlay non-interactive so clear buttons remain clickable. */
.field:has(.input:-webkit-autofill)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 var(--border-width-thin)
    var(--input-autofill-ring, var(--color-field-focus));
  opacity: 0;
  transition: opacity var(--transition-fast) var(--ease-standard);
}

.field:has(.input:-webkit-autofill):focus-within:not([aria-disabled='true'])::after {
  opacity: 1;
}

.header {
  --input-autofill-ring: var(--color-navbar-fg);
}

.modified {
  --input-autofill-ring: color-mix(
    in srgb,
    var(--color-status-warning-border) 55%,
    var(--color-border-default)
  );
}

.embedded:has(.input:-webkit-autofill)::after {
  content: none;
}

.input:disabled {
  background-color: transparent;
  color: var(--color-disabled-fg);
  cursor: not-allowed;
  opacity: 1;
  box-shadow: none;
}

/* Button group styling */
.withButton .field {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/*
  When onClear exists, do not keep extra inline-end padding on the input itself.
  The clear affordance already reserves the needed space via the inline clearSlot.
*/
.withClear .input {
  padding-inline-end: 0;
}

/* When clear is inline with other end adornments, keep the input tight as well. */
.withInlineClear .input {
  padding-inline-end: 0;
}

/* Global focus reset - variants own visible focus treatment */
.input:focus-visible {
  outline: none;
}

/* =========================
   Variants
   ========================= */

/* Stronger field chrome for forms/settings */
.outlined {
  background-color: var(--color-bg-surface);
  border-color: var(--color-border-default);
}

.outlined:hover:not([aria-disabled='true']) {
  border-color: var(--color-border-strong);
}

.outlined:focus-within:not([aria-disabled='true']) {
  border-color: var(--color-field-focus);
  box-shadow: inset 0 0 0 1px var(--color-field-focus);
}

.surface {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.surface:hover:not([aria-disabled='true']) {
  border-color: var(--color-border-default);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.surface:focus-within:not([aria-disabled='true']) {
  border-color: var(--color-field-focus);
  box-shadow: inset 0 0 0 1px var(--color-field-focus);
}

/* Old filled/tinted behavior, now renamed subtle */
.subtle {
  background-color: var(--color-bg-toolbar);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px transparent;
}

.subtle:hover:not([aria-disabled='true']) {
  background-color: var(--color-bg-toolbar-hover);
}

.subtle:focus-within:not([aria-disabled='true']) {
  border-color: var(--color-field-focus);
  box-shadow: inset 0 0 0 1px var(--color-field-focus);
}

.embedded {
  background-color: transparent;
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
  padding-block: 0;
  block-size: 100%;
}

.embedded:hover:not([aria-disabled='true']),
.embedded:focus-within:not([aria-disabled='true']) {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
  outline: none;
}

.standalone {
  background-color: var(--color-bg-surface);
  border-color: var(--color-border-subtle);
  border-radius: var(--border-radius-rounded);
  box-shadow: var(--shadow-xs), var(--shadow-sm);
}

.standalone .input {
  padding-inline: var(--spacing-md);
}

.standalone:hover:not([aria-disabled='true']) {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm), var(--shadow-md);
}

.standalone:focus-within:not([aria-disabled='true']) {
  border-color: var(--color-field-focus);
  box-shadow:
    var(--shadow-xs),
    var(--shadow-md),
    inset 0 0 0 1px var(--color-field-focus);
}

/* Ghost field for use inside/near AppHeader — only meaningful there */
.header {
  background-color: transparent;
  border-color: var(--color-navbar-border);
  color: var(--color-navbar-fg);
}

.header:hover:not([aria-disabled='true']) {
  background-color: transparent;
  border-color: var(--color-navbar-fg);
}

.header:focus-within:not([aria-disabled='true']) {
  border-color: var(--color-navbar-fg);
  box-shadow: inset 0 0 0 1px var(--color-navbar-fg);
}

.header .input {
  color: var(--color-navbar-fg);
}

.header .input::placeholder {
  color: var(--color-navbar-fg-muted) !important;
}

.header .icon {
  color: var(--color-navbar-fg-muted);
}

.header:focus-within .icon {
  color: var(--color-navbar-fg);
}

/* =========================
   Modified state
   ========================= */

.modified {
  background-color: color-mix(in srgb, var(--color-status-warning-bg) 22%, var(--color-bg-surface));
  border-color: color-mix(
    in srgb,
    var(--color-status-warning-border) 45%,
    var(--color-border-default)
  );
  border-left-color: var(--color-status-warning-border);
  border-left-width: 4px;
}

/* Hover should stay warm, not switch back to the normal border */
.modified:hover:not([aria-disabled='true']) {
  background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
  border-color: color-mix(
    in srgb,
    var(--color-status-warning-border) 60%,
    var(--color-border-default)
  );
  border-left-color: var(--color-status-warning-border);
}

/* Focus should also stay warm and readable */
.modified:focus-within:not([aria-disabled='true']) {
  background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
  border-color: color-mix(
    in srgb,
    var(--color-status-warning-border) 75%,
    var(--color-border-default)
  );
  border-left-color: var(--color-status-warning-border);
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
}

/* Variant-specific tweaks when modified */
.surface.modified {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.surface.modified:hover:not([aria-disabled='true']) {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.surface.modified:focus-within:not([aria-disabled='true']) {
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
}

.subtle.modified {
  background-color: color-mix(in srgb, var(--color-status-warning-bg) 30%, var(--color-bg-toolbar));
  border-color: transparent;
  border-left-color: var(--color-status-warning-border);
  border-left-width: 4px;
  box-shadow: none;
}

.subtle.modified:hover:not([aria-disabled='true']) {
  background-color: color-mix(
    in srgb,
    var(--color-status-warning-bg) 36%,
    var(--color-bg-toolbar-hover)
  );
}

.subtle.modified:focus-within:not([aria-disabled='true']) {
  border-color: color-mix(
    in srgb,
    var(--color-status-warning-border) 75%,
    var(--color-border-default)
  );
  border-left-color: var(--color-status-warning-border);
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
}

.standalone.modified {
  box-shadow: var(--shadow-xs), var(--shadow-md);
}

.standalone.modified:hover:not([aria-disabled='true']) {
  box-shadow: var(--shadow-sm), var(--shadow-md);
}

.standalone.modified:focus-within:not([aria-disabled='true']) {
  box-shadow:
    var(--shadow-xs),
    var(--shadow-md),
    inset 0 0 0 1px
      color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
}

/* Embedded should stay visually light, but can still get the marker */
.embedded.modified {
  background-color: color-mix(in srgb, var(--color-status-warning-bg) 18%, transparent);
  border-color: transparent;
  border-left-color: var(--color-status-warning-border);
  border-left-width: 3px;
  box-shadow: none;
}

.embedded.modified:hover:not([aria-disabled='true']),
.embedded.modified:focus-within:not([aria-disabled='true']) {
  background-color: color-mix(in srgb, var(--color-status-warning-bg) 22%, transparent);
  border-color: transparent;
  border-left-color: var(--color-status-warning-border);
  box-shadow: none;
}

/* Disabled modified state */
.modified[aria-disabled='true'] {
  background-color: var(--color-disabled-bg);
  border-color: var(--color-disabled-border);
  border-left-color: var(--color-disabled-border);
  border-left-width: var(--border-width-thin);
  box-shadow: none;
}

/* Sizes */
.xs {
  block-size: var(--component-size-xs);
  font-size: var(--font-size-xs);
}

.input.xs {
  padding-inline: var(--spacing-xxs);
}

.sm {
  block-size: var(--component-size-sm);
  font-size: var(--font-size-sm);
}

.sm.embedded,
.md.embedded,
.lg.embedded {
  block-size: 100%;
}

.md {
  block-size: var(--component-size-md);
  font-size: var(--font-size-sm);
}

.lg {
  block-size: var(--component-size-lg);
  font-size: var(--font-size-lg);
}

/* Leading icon */
.fieldWithIcon .input {
  padding-inline-start: calc(var(--spacing-sm) + var(--icon-size-md) + var(--spacing-xs));
}

.embedded.fieldWithIcon .input {
  padding-inline-start: calc(var(--spacing-xs) + var(--icon-size-md) + var(--spacing-xs));
}

.icon {
  position: absolute;
  inset-inline-start: var(--spacing-sm);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--icon-size-md);
  block-size: var(--icon-size-md);
  pointer-events: none;
  color: var(--color-fg-subtle);
  transition: color var(--transition-fast) var(--ease-standard);
}

.embedded .icon {
  inset-inline-start: var(--spacing-xs);
}

.field:focus-within .icon {
  color: var(--color-fg-muted);
}

.icon svg {
  inline-size: var(--icon-size-md);
  block-size: var(--icon-size-md);
}

/* Trailing label (unit, currency, etc.) */
.withTrailingLabel .field {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.trailingLabel {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding-inline: var(--spacing-sm);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  color: var(--color-fg-muted);
  background: var(--color-bg-toolbar);
  border: var(--border-width-thin) solid var(--color-border-default);
  margin-left: calc(-1 * var(--border-width-thin));
  border-top-right-radius: var(--border-radius-default);
  border-bottom-right-radius: var(--border-radius-default);
  white-space: nowrap;
  user-select: none;
  box-sizing: border-box;
}

.withTrailingLabel:has(.standalone) .trailingLabel {
  border-top-right-radius: var(--border-radius-rounded);
  border-bottom-right-radius: var(--border-radius-rounded);
  border-color: var(--color-border-subtle);
  background-color: var(--color-bg-surface);
  box-shadow: var(--shadow-xs), var(--shadow-sm);
}

/* Trailing action button (outside field) */
.trailingButton {
  flex: 0 0 auto;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: var(--border-width-thin) solid transparent;
  margin-left: calc(-1 * var(--border-width-thin));
}

.trailingButton:hover {
  border-color: var(--color-border-default);
  z-index: 2;
}

/* Standalone variant: pill-shaped trailing button to match the field */
.withButton:has(.standalone) .trailingButton {
  border-top-right-radius: var(--border-radius-rounded);
  border-bottom-right-radius: var(--border-radius-rounded);
  border-left-color: var(--color-border-subtle);
  border-color: var(--color-border-subtle);
  background-color: var(--color-bg-surface);
  box-shadow: var(--shadow-xs), var(--shadow-sm);
}

.withButton:has(.standalone) .trailingButton:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm), var(--shadow-sm);
}

/* Date/time picker indicator (WebKit) */
.input[type='datetime-local']::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
}

/* Start and end adornments */
.startAdornment {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: var(--spacing-xs);
}

.endAdornment {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 2px;
  margin-inline-start: auto;
  margin-right: var(--spacing-xxs);
  color: var(--color-fg-subtle);
}

.clearSlot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: calc(16px + (var(--spacing-xxs) * 2));
  min-block-size: calc(16px + (var(--spacing-xxs) * 2));
}

.clearSlot > * {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast) var(--ease-standard);
}

.field:hover .clearSlot > *,
.field:focus-within .clearSlot > * {
  opacity: 1;
  pointer-events: auto;
}