Change Highlight Color When Hovering Over Option

When I open the autocomplete dropdown and hover the mouse over one of the search options, the option’s background changes to a light purple color. How do I change this to a different color? I am using autocomplete with vanilla javascript (not react).

Thanks!

I changed my styles by just inspecting the element and adding the CSS in my main.css file. My custom styles. So most start with ais. You can also add a class and overwrite the styles that way as well.

            <p class="hit-text text-n-gray text-sm italic">
            ${instantsearch.snippet({ attribute: "text", hit })} 
            </p>
.ais-Highlight-highlighted {
  background-color: theme("colors.n.green-search") !important;
  color: theme("colors.n.gray-dark") !important;
}

.ais-Snippet-highlighted{
  background-color: theme("colors.n.green-search") !important;
  color: theme("colors.n.gray-dark") !important;
}

.ais-SearchBox-input {
  border: none !important;
  box-shadow: none !important;
}

.ais-SearchBox-input::placeholder{
  color: theme("colors.n.gray");
  font-size: 17px;

}

.ais-SearchBox-input::-webkit-input-placeholder{
  color: theme("colors.n.gray");
  font-size: 17px;
}

.ais-SearchBox-input::-moz-placeholder{
  color: theme("colors.n.gray");
  font-size: 17px;
}

.ais-SearchBox-resetIcon{
  display: none;
}