Hover effect for collection picker on cards

app/assets/stylesheets/cards.css

@@ -64,6 +64,17 @@
     max-inline-size: 100%;
     min-inline-size: 0;
     padding: var(--block-space-half) var(--inline-space) var(--block-space-half) var(--card-padding-inline);
+
+    &:has(.collection-picker__button) {
+      cursor: pointer;
+      transition: background-color: 100ms ease-out;
+
+      @media (any-hover: hover) {
+        &:hover {
+          background-color: color-mix(in srgb, var(--card-color) 90%, var(--color-ink));
+        }
+      }
+    }
   }
 
   .card__collection-name {

app/assets/stylesheets/fizzy-menu.css

@@ -14,12 +14,19 @@
     --input-border-color: var(--color-selected-dark);
     --input-padding: 0.2em 2em 0.2em 0.9em;
 
+    background-color: var(--color-canvas);
     box-shadow: 0 0 0 1px oklch(var(--lch-blue-medium) / 5%),
                 0 0.2em 0.2em oklch(var(--lch-blue-medium) / 5%),
                 0 0.4em 0.4em oklch(var(--lch-blue-medium) / 5%),
                 0 0.8em 0.8em oklch(var(--lch-blue-medium) / 5%);
     margin-block-start: 0.1em;
 
+    @media (any-hover: hover) {
+      &:hover {
+        filter: brightness(0.9);
+      }
+    }
+
     svg {
       block-size: auto;
       inline-size: 1.1em;
@@ -69,4 +76,4 @@
       }
     }
   }
-}
+}

app/assets/stylesheets/workflows.css

@@ -11,7 +11,7 @@
 
     @media (hover: hover) {
       &:hover {
-        background-color: color(from var(--card-color) srgb r g b / 0.15);
+        --btn-background: color(from var(--card-color) srgb r g b / 0.15);
       }
     }
   }
@@ -23,7 +23,7 @@
 
     @media (hover: hover) {
       &:hover {
-        background-color: color(from var(--card-color) srgb r g b / 0.65);
+        --btn-background: var(--card-color);
       }
     }
   }