Fix contrast issues with search select dropdown

games/static/base.css

@@ -2892,6 +2892,16 @@
       }
     }
   }
+  .group-data-\[search-select-highlighted\]\:border-white {
+    &:is(:where(.group)[data-search-select-highlighted] *) {
+      border-color: var(--color-white);
+    }
+  }
+  .group-data-\[search-select-highlighted\]\:text-white {
+    &:is(:where(.group)[data-search-select-highlighted] *) {
+      color: var(--color-white);
+    }
+  }
   .placeholder\:text-body {
     &::placeholder {
       color: var(--color-body);
@@ -3160,6 +3170,24 @@
       }
     }
   }
+  .group-data-\[search-select-highlighted\]\:hover\:border-white {
+    &:is(:where(.group)[data-search-select-highlighted] *) {
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--color-white);
+        }
+      }
+    }
+  }
+  .group-data-\[search-select-highlighted\]\:hover\:bg-brand-strong {
+    &:is(:where(.group)[data-search-select-highlighted] *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-brand-strong);
+        }
+      }
+    }
+  }
   .focus\:z-10 {
     &:focus {
       z-index: 10;
@@ -3259,6 +3287,28 @@
       outline-style: none;
     }
   }
+  .data-\[search-select-highlighted\]\:bg-brand {
+    &[data-search-select-highlighted] {
+      background-color: var(--color-brand);
+    }
+  }
+  .data-\[search-select-highlighted\]\:outline {
+    &[data-search-select-highlighted] {
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+    }
+  }
+  .data-\[search-select-highlighted\]\:outline-1 {
+    &[data-search-select-highlighted] {
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+    }
+  }
+  .data-\[search-select-highlighted\]\:outline-brand-strong {
+    &[data-search-select-highlighted] {
+      outline-color: var(--color-brand-strong);
+    }
+  }
   .sm\:table-cell {
     @media (width >= 40rem) {
       display: table-cell;

games/static/js/search_select.js

@@ -77,16 +77,14 @@
     function highlightOption(row) {
       clearHighlight();
       if (!row) return;
-      row.style.backgroundColor = "var(--color-brand, rgba(59, 130, 246, 0.15))";
-      row.style.outline = "1px solid var(--color-brand, #3b82f6)";
+      row.setAttribute("data-search-select-highlighted", "");
       highlightedRow = row;
       row.scrollIntoView({ block: "nearest" });
     }
 
     function clearHighlight() {
       if (highlightedRow) {
-        highlightedRow.style.backgroundColor = "";
-        highlightedRow.style.outline = "";
+        highlightedRow.removeAttribute("data-search-select-highlighted");
         highlightedRow = null;
       }
     }