Style pin icon more better

src/app/components/VideoCallContent.svelte

@@ -176,8 +176,6 @@
       layout === "default" && "aspect-video w-full min-h-0",
       layout === "strip" && "aspect-video w-44 shrink-0",
       tile.source === Track.Source.ScreenShare ? "bg-black" : "bg-base-100",
-      $videoPrimaryTileKey === tileKey(tile) &&
-        "ring-2 ring-primary ring-offset-2 ring-offset-base-300",
     )}>
     {#if tile.attachable}
       <VideoCallVideo
@@ -195,9 +193,14 @@
       {labelFor(tile.identity, tile.source)}{tile.isLocal ? " (you)" : ""}
     </span>
     {#if tiles.length > 1}
+      {@const pinned = $videoPrimaryTileKey === tileKey(tile)}
       <Button
-        data-tip={$videoPrimaryTileKey === tileKey(tile) ? "Exit spotlight" : "Spotlight"}
+        data-tip={pinned ? "Exit spotlight" : "Spotlight"}
-        class="absolute right-1 top-1 z-20 btn btn-xs btn-circle btn-ghost bg-base-100/70"
+        aria-pressed={pinned}
+        class={cx(
+          "absolute right-1 top-1 z-20 btn btn-xs btn-square btn-ghost",
+          pinned ? "btn-active bg-primary/25 text-primary" : "bg-base-100/70",
+        )}
         onclick={spotlightHandlerFor(tileKey(tile))}>
         <Icon icon={Pin} size={3} />
       </Button>

src/lib/components/Button.svelte

@@ -14,6 +14,7 @@
     style?: string
     disabled?: boolean
     "data-tip"?: string
+    "aria-pressed"?: boolean
   } = $props()
 
   const className = $derived(`text-left ${restProps.class}`)