feat(charts): manage investigation charts in a scrolling workspace

src/features/map/core/components/layer-control.tsx

@@ -1,6 +1,7 @@
 import { Eye, EyeOff, Layers3, Lock } from "lucide-react";
 import { cn } from "@/shared/ui/cn";
 import {
+  mapOptionInteractionVariants,
   MAP_COMPACT_RADIUS_CLASS_NAME,
   MAP_ICON_CELL_RADIUS_CLASS_NAME,
   MAP_MAJOR_PANEL_RADIUS_CLASS_NAME,
@@ -79,23 +80,24 @@ export function MapLayerControl({
             <button
               key={item.id}
               type="button"
+              data-map-option=""
               disabled={disabled}
               aria-pressed={item.visible}
               onClick={() => onToggleLayer(item.id, !item.visible)}
               className={cn(
-                "flex min-h-12 w-full items-center gap-3 border px-2.5 text-left text-sm transition duration-150",
+                "flex min-h-12 w-full items-center gap-3 border px-2.5 text-left text-sm",
                 MAP_COMPACT_RADIUS_CLASS_NAME,
                 item.visible
                   ? "surface-control border-[var(--surface-border)] text-slate-900"
-                  : "surface-well border-transparent text-[var(--ink-muted)] hover:border-[var(--surface-divider)] hover:bg-[var(--surface-reading)]",
-                disabled && "cursor-not-allowed opacity-60 hover:bg-transparent"
+                  : "surface-well border-transparent text-[var(--ink-muted)]",
+                mapOptionInteractionVariants({ state: item.visible ? "selected" : "default" })
               )}
             >
               <span
                 className={cn(
                   "grid h-8 w-8 shrink-0 place-items-center",
                   MAP_ICON_CELL_RADIUS_CLASS_NAME,
-                  item.visible ? "bg-[var(--action-blue)] text-white" : "bg-[var(--surface-control)] text-[var(--ink-muted)]"
+                  item.visible ? "bg-[var(--action-blue)] text-white" : "bg-[var(--surface-control)] text-inherit"
                 )}
               >
                 {item.locked ? <Lock size={15} aria-hidden="true" /> : <Icon size={15} aria-hidden="true" />}