Fix Color Animation Implementation

src/app/components/dropdown/dropdown.scss

@@ -13,6 +13,18 @@ $border_radius: 8px;
 $animation_timing: cubic-bezier(0.4, 0, 0.2, 1);
 $default_animation_duration: 0.2s;
 
+@property --hover-state {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --selected-state {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 0;
+}
+
 :host {
   display: inline-block;
   position: relative;
@@ -113,15 +125,27 @@ $default_animation_duration: 0.2s;
   padding: 0 16px;
   position: relative;
   align-content: center;
-  transition: background-color var(--animation-duration) $animation_timing;
+  transition: --hover-state var(--animation-duration) $animation_timing, --selected-state var(--animation-duration) $animation_timing;
   font-size: 16px;
 
+  background-color: color-mix(
+  in oklch,
+    color-mix(
+      in oklch,
+      transparent,
+      light-dark($hover_bg, $hover_dark_bg)
+      calc(var(--hover-state) * 100%)
+    ),
+    light-dark(list.nth(library.$brand_palette, 1), list.nth(library.$brand_palette, 11))
+    calc(var(--selected-state) * 100%)
+  );
+
   &:hover, &.focused {
-    background-color: light-dark($hover_bg, $hover_dark_bg);
+    --hover-state: 1;
   }
 
   &.selected {
-    background-color: light-dark(list.nth(library.$brand_palette, 1), list.nth(library.$brand_palette, 11));
+    --selected-state: 1;
     color: list.nth(library.$brand_palette, 5);
     font-weight: 600;
   }