abafr-search {
  --abafr-search-background: var(--background, var(--pagina-sfondo, light-dark(#fff, #323639)));
  --abafr-search-foreground: currentColor;
  --abafr-search-border: color-mix(in srgb, var(--abafr-search-foreground) 28%, transparent);
  --abafr-search-focus-border: color-mix(in srgb, var(--abafr-search-foreground) 62%, transparent);
  --abafr-search-focus-ring: light-dark(#005fcc, #ffb74d);
  --abafr-search-focus-glow: color-mix(in srgb, var(--abafr-search-focus-ring) 28%, transparent);
  display: block;
  color: inherit;
}

abafr-search > form[role="search"] {
  display: flex;
  align-items: center;
  inline-size: 100%;
  transition: border-color .2s var(--site-header-easing, ease), box-shadow .2s var(--site-header-easing, ease);
  border: 1.5px solid var(--abafr-search-border);
  border-radius: 4em;
}

abafr-search > form[role="search"]:has(> :is(input, button):focus-visible) {
  box-shadow:
    0 0 0 3px var(--abafr-search-focus-ring),
    0 0 .6em .12em var(--abafr-search-focus-glow);
  border-color: var(--abafr-search-focus-border);
}

abafr-search input {
  min-inline-size: 0;
  inline-size: 100%;
  padding: .2em 0 .2em 1em;
  border: none;
  border-radius: 4em 0 0 4em;
  background: transparent;
  color: inherit;
  caret-color: var(--abafr-search-foreground);
  font: inherit;
  font-size: .9em;
  outline: none;
}

abafr-search input::selection {
  background: Highlight;
  color: HighlightText;
}

abafr-search button {
  display: grid;
  place-items: center;
  align-self: stretch;
  padding: 0 1em;
  border: none;
  border-inline-start: 0;
  border-radius: 0 4em 4em 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color .4s ease, color .4s ease;
}

abafr-search button:hover {
  background-color: color-mix(in srgb, var(--abafr-search-foreground) 10%, transparent);
}

abafr-search button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--abafr-search-focus-ring);
}

abafr-search button svg {
  inline-size: 1em;
  block-size: 1em;
}

@media (prefers-reduced-motion: reduce) {
  abafr-search > form[role="search"],
  abafr-search button {
    transition: none;
  }
}