.navigation__search {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.navigation__actions > .navigation__search:hover {
  animation: none;
}
.navigation__search:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
  border-radius: 4px;
}
.search-icon {
  width: 25px;
  height: 28px;
  display: block;
  overflow: visible;
  pointer-events: none;
  fill: currentColor;
  stroke: none;
}
.search-icon__shape {
  transform-origin: 50% 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .js-search-trigger:focus-visible .search-icon__shape {
    animation: kb-search-look 700ms ease-in-out;
  }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .js-search-trigger:hover .search-icon__shape {
    animation: kb-search-look 700ms ease-in-out;
  }
}
@keyframes kb-search-look {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-28px, -15px) rotate(-12deg);
  }
  60% {
    transform: translate(23px, -10px) rotate(8deg);
  }
  82% {
    transform: translate(-6px, 0) rotate(-3deg);
  }
}
.navigation__actions > .navigation__search {
  width: 25px;
  height: 28px;
  flex: 0 0 25px;
}
.navigation__actions > .navigation__search .search-icon {
  position: static;
  width: 25px;
  height: 28px;
  margin: 0;
  transform: none;
}
/* Match the search icon motion at the basket SVG's own dimensions. */
.navigation__actions > .navigation__basket:hover {
  animation: none;
}
.js-toggle-mini-basket > svg {
  transform-origin: 50% 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .js-toggle-mini-basket:focus-visible > svg {
    animation: kb-basket-look 700ms ease-in-out;
  }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .js-toggle-mini-basket:hover > svg {
    animation: kb-basket-look 700ms ease-in-out;
  }
}
@keyframes kb-basket-look {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-5.46875%, -2.9296875%) rotate(-12deg);
  }
  60% {
    transform: translate(4.4921875%, -1.953125%) rotate(8deg);
  }
  82% {
    transform: translate(-1.171875%, 0) rotate(-3deg);
  }
}