/* Pole wyszukiwarki katalogu (task03.51; styl per komponent — docs/podejscie-css.md). Wg FeuerDS „Input 56/Default"
   5324:5965 (strona „Oferta Feuer 7" 5324:5930): pole 56 atomu .pole-wejscie (css/atomy.css motywu), placeholder
   „Szukaj produktu", lupa 24 po prawej. Poza projektem (decyzje użytkownika — task03.51): licznik „Znaleziono: N"
   wewnątrz pola przed ikoną, kolorem placeholdera; przy niepustym polu × w miejscu lupy. Szerokość i położenie pola
   ustala komponent, w którym stoi (css/sekcje-otwierajace.css, css/kafle-produktowe.css). Działanie: js/wyszukiwarka.js. */

.pole-wejscie.wyszukiwarka-pole {           /* dwie klasy: atomy.css motywu ładuje się później */
  display: flex;
  align-items: center;
  gap: var(--odstep-1);                     /* 8 */
  color: var(--kolor-ciemny);               /* także na ciemnym tle top visualu */

  &:focus-within { border-color: var(--kolor-ciemny); }   /* stan aktywny pola (DS Active) */
}

.wyszukiwarka-wejscie {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  caret-color: var(--kolor-marki);
  outline: none;                            /* fokus = obrys pola (.wyszukiwarka-pole:focus-within) */

  &::placeholder { color: var(--kolor-tekstu-pomocniczy); opacity: 1; }
}

.wyszukiwarka-licznik {
  flex: none;
  color: var(--kolor-tekstu-pomocniczy);
  white-space: nowrap;

  &:empty { display: none; }
}

.wyszukiwarka-lupa,
.wyszukiwarka-wyczysc {
  flex: none;
  display: block;
  width: 1.5rem;                            /* 24 */
  height: 1.5rem;
  color: inherit;

  & svg { display: block; width: 100%; height: 100%; }
}

.wyszukiwarka-wyczysc {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;

  &[hidden] { display: none; }
}

.wyszukiwarka-lupa[hidden] { display: none; }