src/components/tool/currency.tsx

@@ -376,21 +376,22 @@ const Tool: FC = () => {
               <Badge
                 key={code}
                 variant={isRequired ? "default" : "secondary"}
-                className="gap-1 pr-1"
+                className={`relative gap-1 px-2.5 py-1 transition-all duration-200 ${
+                  !isRequired 
+                    ? "cursor-pointer hover:bg-destructive hover:text-destructive-foreground hover:border-destructive group" 
+                    : ""
+                }`}
+                onClick={() => {
+                  if (!isRequired) {
+                    removeCurrency(code);
+                  }
+                }}
               >
-                <span>{currency?.symbol} {code}</span>
+                <span className={!isRequired ? "group-hover:opacity-0 transition-opacity duration-200" : ""}>
+                  {currency?.symbol} {code}
+                </span>
                 {!isRequired && (
-                  <button
-                    type="button"
-                    className="ml-1 rounded-sm opacity-70 hover:opacity-100 hover:text-destructive transition-opacity"
-                    onClick={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      removeCurrency(code);
-                    }}
-                  >
-                    <X className="size-3 pointer-events-auto" />
-                  </button>
+                  <X className="absolute inset-0 m-auto size-4 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none" />
                 )}
               </Badge>
             );