@layer components {
  .search-field__root {
    gap: calc(var(--spacing) * 1.5);
  }

  .search-field__group {
    flex-direction: row;
    align-items: center;
  }

  .search-field__search-icon {
    position: absolute;
    inset-inline-start: calc(var(--spacing) * 3);
    z-index: 10;
  }

  /*
   * Only SearchField-specific overrides. Base input styling comes from the
   * Input component (.input__input). Declared after input.css in the index so
   * these paddings win the cascade. The container only exists when the Input
   * renders a background layer (e.g. glass theme); on default themes the text
   * input is bare, so it needs its own flex-grow to fill the row. Inside the
   * column container flex-grow has no free space, so it stays a no-op there.
   */
  .search-field__input-container {
    flex: 1;
  }

  .search-field__input {
    flex-grow: 1;
    /*
     * TextInput textAlign is physical (unlike Text), so this is the LTR
     * alignment; the RTL flip comes from `rtl:text-right` in the styles file.
     */
    text-align: left;
  }

  /*
   * Icon/clear paddings are opt-in. SearchField.Input applies these only
   * when the matching compound part is composed, so omitting SearchIcon or
   * ClearButton falls back to the Input's own inline padding.
   */
  .search-field__input--with-search-icon {
    padding-inline-start: calc(var(--spacing) * 9);
  }

  .search-field__input--with-clear-button {
    padding-inline-end: calc(var(--spacing) * 12);
  }

  .search-field__clear-button {
    position: absolute;
    inset-inline-end: calc(var(--spacing) * 3);
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }
}