colors and filters

front/sass/_autocomplete.scss

@@ -4,6 +4,12 @@
   overflow: visible;
   .autocomplete-option {
     cursor: pointer;
+    font-size: 14px;
+    padding: 3px 10px;
+    &:hover {
+      background: var(--p40);
+      border-radius: 12px;
+    }
   }
   &:focus-within {
     .autocomplete-results{
@@ -17,19 +23,17 @@
   font-size: 13px;
   margin-top: 10px;
   border-radius: 12px;
-  background: var(--background);
-  filter: brightness(97%);
+  background: var(--p30);
   padding: 3px 10px;
   display: inline-flex;
   justify-content: center;
   gap: 4px;
   line-height: 22px;
+  &:hover {
+    background: var(--p40);
+  }
 }
 
-.autocomplete-selected-value:hover {
-  opacity: .8;
-  background-color: #eee;
-}
 .autocomplete-results {
   display: none;
   flex-direction: column;
@@ -38,10 +42,10 @@
   position: absolute;
   border-radius: 12px;
   z-index: 20;
-  background: var(--background);
-  filter: brightness(97%);
+  background: var(--p30);
+  //border: 1px solid var(--p40);
   transition: 600ms;
   flex-grow: 1;
   top: 45px;
-  min-width: max-content;
+  width: 100%;
 }