@layer components {
  .search-bar {
    position: sticky;
    inset-block-start: var(--space-0);
    z-index: var(--z-sticky);
    padding-block: calc(var(--safe-top) + var(--space-3)) var(--space-3);
    border-block-end: var(--border-width) solid var(--color-border);
  }

  .search-bar__form {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    max-inline-size: var(--measure);
    margin-inline: auto;
    padding-inline: var(--gutter-fluid);
  }

  .search-bar__input {
    flex: auto;
    min-inline-size: var(--space-0);
  }

  .search-bar__input .input__field::-webkit-search-cancel-button {
    appearance: none;
  }

  .search-bar__clear {
    display: grid;
    place-items: center;
    min-inline-size: var(--tap-min);
    padding-inline: var(--space-0);
    color: var(--color-ink-faint);
  }

  .search-bar__cancel {
    flex: none;
  }
}