#search-button {
  width: 40px;
  height: 50px;
  background-size: 25px 25px;
  background-repeat: no-repeat;
  background-image: url(../assets/search.png);
  background-position: center center;
  cursor: pointer;

  &:hover, &.open {
    background-image: url(../assets/search-filled.png);
  }

  &.open {
    animation: search-button-anim 5s forwards infinite;
  }
}

.theme-dark, .theme-hc {
  #search-button {
    background-image: url(../assets/dark/search.png);

    &:hover, &.open {
      background-image: url(../assets/dark/search-filled.png);
    }
  }
}

@keyframes search-button-anim {
  20% {
    transform: translate(3px, -3px);
  }
  40% {
    transform: translate(-3px, 3px);
  }
  60% {
    transform: translate(-3px, -3px);
  }
  80% {
    transform:  translate(3px, 3px);
  }
}