:root {
  --input-background: var(--color-input);
  --input-foreground: var(--color-input-foreground);
  --input-placeholder-color: var(--color-placeholder);
  --input-placeholder-opacity: var(--opacity-100);
  --input-default-border: var(--control-border-width) solid var(--color-input-border);
  --input-invalid-border: var(--control-border-width) solid var(--color-error-border);
  --input-disabled-border: var(--control-border-width) solid var(--color-disabled-border);
  --input-radius: var(--control-radius);
  --input-icon-size: var(--space-4);
  --input-icon-inset: var(--space-3);
  --input-icon-gap: var(--space-2);
  --input-icon-color: var(--color-muted-foreground);
  --input-padding: var(--space-2) var(--space-3);
  --input-padding-start: calc(var(--input-icon-inset) + var(--input-icon-size) + var(--input-icon-gap));
  --input-height: var(--control-target-size);
  --input-font: var(--font-type-body);
  --input-focus-outline: var(--focus-width) solid var(--color-focus-ring);
  --input-field-gap: var(--space-2);
  --input-label-font: var(--font-type-label-strong);
  --input-description-font: var(--font-type-caption);
}

.input-control {
  --input-border: var(--input-default-border);
}

.input-control[aria-invalid="true"] {
  --input-border: var(--input-invalid-border);
}

.input-field {
  display: grid;
  gap: var(--input-field-gap);
  inline-size: 100%;
  min-inline-size: 0;
  color: var(--color-foreground);
  white-space: normal;
}

.input-field__label {
  font: var(--input-label-font);
  overflow-wrap: anywhere;
}

.input-field__control {
  position: relative;
  display: grid;
  align-items: center;
  min-inline-size: 0;
}

.input-field__icon {
  position: absolute;
  inset-inline-start: var(--input-icon-inset);
  display: block;
  color: var(--input-icon-color);
  pointer-events: none;
}

.input-control {
  box-sizing: border-box;
  appearance: none;
  display: block;
  inline-size: 100%;
  min-inline-size: 0;
  block-size: var(--input-height);
  margin: 0;
  padding: var(--input-padding);
  border: var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-background);
  color: var(--input-foreground);
  font: var(--input-font);
}

.input-control--icon {
  padding-inline-start: var(--input-padding-start);
}

.input-control::placeholder {
  color: var(--input-placeholder-color);
  opacity: var(--input-placeholder-opacity);
}

.input-control:focus-visible {
  outline: var(--input-focus-outline);
  outline-offset: var(--focus-offset);
}

.input-control:disabled {
  background: var(--color-disabled);
  color: var(--color-disabled-foreground);
  border: var(--input-disabled-border);
  cursor: not-allowed;
}
.input-field__control:has(.input-control:disabled) .input-field__icon { color: var(--color-disabled-foreground); }

.input-field__description,
.input-field__error {
  margin: 0;
  font: var(--input-description-font);
  overflow-wrap: anywhere;
}

.input-field__description { color: var(--color-muted-foreground); }
.input-field__error { color: var(--color-error-text); }