/*
 * SearchField
 *
 * The box is `.ion-input` itself — the component renders Input's classes, so
 * every size and state comes from input.css and cannot drift from it. This
 * file owns only what Input does not have: the clear button, and silencing the
 * browser's own.
 *
 * The clear button is (field height − 8px) square — 24 / 32 / 40 — like
 * NumberInput's steps, so a Small field's target still meets WCAG 2.5.8.
 */

/* Restates Input's surface at zero specificity, for the contrast gate — the
 * same reason, and the same :where(), as number-input.css. */
:where(.ion-search-field) {
  background-color: var(--surface-default);
}

.ion-search-field--clearable {
  /* The button carries its own inset; full padding would double it. */
  padding-inline-end: var(--spacing-4);
}

/*
 * `type="search"` gets a native cancel button in Chromium and Safari, drawn in
 * the platform's style and sitting beside ours. Two clear buttons, one of them
 * unlabelled and unstyled, is the bug this removes.
 */
.ion-search-field__field::-webkit-search-cancel-button,
.ion-search-field__field::-webkit-search-decoration {
  display: none;
}

.ion-search-field__clear {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(var(--ion-input-height) - var(--spacing-8));
  height: calc(var(--ion-input-height) - var(--spacing-8));
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: var(--icon-secondary);
  cursor: pointer;
  transition:
    background-color var(--ion-duration-base) var(--ion-ease-out),
    color var(--ion-duration-base) var(--ion-ease-out);
}

.ion-search-field__clear svg {
  width: var(--ion-input-icon-size);
  height: var(--ion-input-icon-size);
}

@media (hover: hover) {
  .ion-search-field__clear:hover {
    background-color: var(--surface-hover);
    color: var(--icon-default);
  }
}

.ion-search-field__clear:active {
  background-color: var(--surface-pressed);
  color: var(--icon-default);
}

.ion-search-field__clear:focus-visible {
  outline: var(--border-width-thick) solid var(--border-focus);
  outline-offset: calc(-1 * var(--border-width-thick));
}