fiat combobox + happy utenti page uWu

src/styles/components.scss

@@ -608,7 +608,7 @@
         gap: 1rem;
     }
 
-    .filter-select {
+    /* .filter-select {
         width: 100%;
         height: 2.5rem;
 
@@ -646,5 +646,63 @@
 
             background: var(--filter-bg-color, #ddd);
         }
+    } */
+
+    .combobox {
+        width: 100%;
+        height: 2.5rem;
+        position: relative;
+        padding: 0 0.25rem 0 0.25rem;
+
+        @include neo-brutalist-card;
+
+        cursor: pointer;
+
+        --filter-bg-color-hover: color-mix(in srgb, var(--filter-bg-color, #ddd), #000 10%);
+
+        background: var(--filter-bg-color, #ddd);
+
+        .material-symbols-outlined {
+            padding: 0 0.35rem;
+        }
+
+        .selected {
+            height: 100%;
+            gap: 0.25rem;
+            display: grid;
+            grid-auto-flow: column;
+            grid-template-columns: 1fr auto;
+            align-items: center;
+
+            .content {
+                display: grid;
+                grid-auto-flow: column;
+                align-items: center;
+                justify-content: start;
+            }
+        }
+
+        .dropdown {
+            position: absolute;
+            z-index: 10;
+            top: calc(100% + 8px);
+            left: -3px;
+
+            @include neo-brutalist-card;
+
+            background: #fff;
+
+            .option {
+                height: 2rem;
+                padding: 0 0.5rem 0 0.25rem;
+                display: grid;
+                grid-auto-flow: column;
+                align-items: center;
+                justify-content: start;
+                &:hover {
+                    background: #ddd;
+                }
+            }
+        }
     }
 }