Fix Color Animation Implementation

src/app/components/popup/popup.scss

@@ -1,6 +1,12 @@
 $animation_timing: cubic-bezier(0.16, 1, 0.3, 1);
 $default_animation_duration: 0.2s;
 
+@property --close-hover-state {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 0;
+}
+
 :host {
   display: block;
   --animation-duration: calc(#{$default_animation_duration} * var(--motion-duration-multiplier));
@@ -77,17 +83,29 @@ $default_animation_duration: 0.2s;
 
   .header-right {
     .close-btn {
-      background: none;
+      --close-hover-state: 0;
       border: none;
       padding: 4px;
       cursor: pointer;
       border-radius: 50%;
-      color: oklch(0.4 0 0);
-      transition: background-color 0.2s, color 0.2s;
+
+      background: color-mix(
+        in oklch,
+        transparent,
+        light-dark(oklch(0 0 0 / 5%), oklch(1 0 0 / 5%))
+        calc(var(--close-hover-state) * 100%)
+      );
+
+      color: color-mix(
+        in oklch,
+        light-dark(oklch(0.4 0 0), oklch(0.6 0 0)),
+        light-dark(oklch(0 0 0), oklch(1 0 0))
+        calc(var(--close-hover-state) * 100%)
+      );
+      transition: --close-hover-state 0.2s;
 
       &:hover {
-        background-color: oklch(0 0 0 / 5%);
-        color: oklch(0 0 0);
+        --close-hover-state: 1;
       }
     }
   }