.pasek-narzedzi {
  --kolor-fokusu-kontekstowy: var(--kolor-fokusu);
  color: var(--kolor-tekstu);
  background: var(--kolor-karty);
  border-bottom: var(--grubosc-linii) solid var(--kolor-linii);
}

.pasek-narzedzi__wewnatrz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--odstep-2) var(--odstep-5);
  width: 100%;
  max-width: calc(var(--szerokosc-kontenera) + 2 * var(--odstep-kontenera));
  min-height: calc(var(--minimalny-cel-dotykowy) + 2 * var(--odstep-2));
  margin-inline: auto;
  padding: var(--odstep-2) var(--odstep-kontenera);
}

.pasek-narzedzi__slot {
  min-width: 0;
}

.pasek-narzedzi__nawigacja {
  flex: 1 1 18rem;
}

.pasek-narzedzi__wyszukiwanie {
  flex: 1 1 16rem;
  max-width: 24rem;
  margin-inline-start: auto;
}

.pasek-narzedzi__spolecznosciowy {
  flex: 0 0 auto;
}

.pasek-narzedzi__link,
.pasek-narzedzi__okruszki a {
  color: var(--kolor-tekstu);
  text-decoration-thickness: var(--grubosc-linii);
  text-underline-offset: var(--odsuniecie-podkreslenia);
}

.pasek-narzedzi__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--minimalny-cel-dotykowy);
  font-size: var(--rozmiar-maly);
  font-weight: var(--waga-mocna);
}

.pasek-narzedzi__link:hover,
.pasek-narzedzi__okruszki a:hover {
  text-decoration-line: underline;
}

.pasek-narzedzi__okruszki {
  color: var(--kolor-tekstu-wtornego);
  font-size: var(--rozmiar-maly);
}

.pasek-narzedzi__okruszki ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--odstep-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pasek-narzedzi__okruszki li {
  display: inline-flex;
  align-items: center;
}

.pasek-narzedzi__okruszki li + li::before {
  content: "/";
  margin-inline: var(--odstep-2);
  color: var(--kolor-tekstu-wtornego);
}

.pasek-narzedzi__okruszki a,
.pasek-narzedzi__okruszki span {
  display: inline-flex;
  align-items: center;
  min-height: var(--minimalny-cel-dotykowy);
}

.pasek-narzedzi__okruszki [aria-current="page"] {
  color: var(--kolor-tekstu-wtornego);
}

.pasek-narzedzi__wyszukiwanie form {
  display: flex;
  align-items: stretch;
  gap: var(--odstep-2);
  width: 100%;
  margin: 0;
}

.pasek-narzedzi__wyszukiwanie form > label {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.pasek-narzedzi__wyszukiwanie input[type="search"] {
  width: 100%;
  min-height: var(--minimalny-cel-dotykowy);
  padding: var(--odstep-2) var(--odstep-3);
  border: var(--grubosc-linii) solid var(--kolor-linii);
  border-radius: var(--promien-maly);
  color: var(--kolor-tekstu);
  background: var(--kolor-karty);
  font: inherit;
  font-size: var(--rozmiar-maly);
}

.pasek-narzedzi__wyszukiwanie input[type="search"]::placeholder {
  color: var(--kolor-tekstu-wtornego);
  opacity: 1;
}

.pasek-narzedzi__wyszukiwanie button,
.pasek-narzedzi__wyszukiwanie input[type="submit"] {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: var(--minimalny-cel-dotykowy);
  min-height: var(--minimalny-cel-dotykowy);
  padding: var(--odstep-2) var(--odstep-3);
  border: var(--grubosc-linii) solid var(--kolor-tla-kontrastowego);
  border-radius: var(--promien-maly);
  color: var(--kolor-tekstu-na-kontrascie);
  background: var(--kolor-tla-kontrastowego);
  font: inherit;
  font-size: var(--rozmiar-maly);
  font-weight: var(--waga-mocna);
  cursor: pointer;
  transition:
    color var(--czas-przejscia) var(--krzywa-przejscia),
    background-color var(--czas-przejscia) var(--krzywa-przejscia);
}

.pasek-narzedzi__wyszukiwanie button:hover,
.pasek-narzedzi__wyszukiwanie input[type="submit"]:hover {
  color: var(--kolor-tekstu);
  background: var(--kolor-tla-alternatywnego);
}

.pasek-narzedzi__ikona-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--minimalny-cel-dotykowy);
  height: var(--minimalny-cel-dotykowy);
  border: var(--grubosc-linii) solid var(--kolor-linii);
  border-radius: var(--promien-pelny);
  color: var(--kolor-tekstu);
  background: var(--kolor-karty);
  transition:
    color var(--czas-przejscia) var(--krzywa-przejscia),
    background-color var(--czas-przejscia) var(--krzywa-przejscia),
    border-color var(--czas-przejscia) var(--krzywa-przejscia);
}

.pasek-narzedzi__ikona-link:hover {
  border-color: var(--kolor-tla-kontrastowego);
  color: var(--kolor-tekstu-na-kontrascie);
  background: var(--kolor-tla-kontrastowego);
}

.pasek-narzedzi__ikona-link svg {
  width: var(--rozmiar-ikony);
  height: var(--rozmiar-ikony);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--grubosc-ikony);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pasek-narzedzi :where(a, input, button):focus-visible {
  outline: var(--grubosc-fokusu) solid var(--kolor-fokusu-kontekstowy);
  outline-offset: var(--odsuniecie-obrysu);
}

.pasek-narzedzi .screen-reader-text {
  position: absolute;
  width: var(--wymiar-tylko-dla-czytnika);
  height: var(--wymiar-tylko-dla-czytnika);
  padding: 0;
  margin: calc(-1 * var(--wymiar-tylko-dla-czytnika));
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .pasek-narzedzi__wyszukiwanie button,
  .pasek-narzedzi__wyszukiwanie input[type="submit"],
  .pasek-narzedzi__ikona-link {
    transition: none;
  }
}

@media (max-width: 34.99rem) {
  .pasek-narzedzi__nawigacja {
    flex-basis: 100%;
  }

  .pasek-narzedzi__wyszukiwanie {
    max-width: none;
    margin-inline-start: 0;
  }
}