Restyle play/pause button for new item page preview

app/assets/stylesheets/items/_show.sass

@@ -74,10 +74,48 @@ body.items-show
       left: 8px
       bottom: 8px
       display: none
+      align-items: center
+      justify-content: center
+      color: white
+      background: rgba(0, 0, 0, 0.64)
+      width: 2.5em
+      height: 2.5em
+      border-radius: 100%
+      border: 2px solid transparent
+      transition: all .25s
+
+      .playing-label, .paused-label
+        display: none
+        width: 1em
+        height: 1em
+
+      .play-pause-toggle
+        // Visually hidden
+        clip: rect(0 0 0 0)
+        clip-path: inset(50%)
+        height: 1px
+        overflow: hidden
+        position: absolute
+        white-space: nowrap
+        width: 1px
+
+        &:checked ~ .playing-label
+          display: block
+
+        &:not(:checked) ~ .paused-label
+          display: block
+
+      &:hover, &:has(.play-pause-toggle:focus)
+        border: 2px solid $module-border-color
+        background: $module-bg-color
+        color: $text-color
+
+      &:active
+        transform: translateY(2px)
 
     &:has(outfit-layer:state(has-animations))
       .play-pause-button
-        display: block
+        display: flex
 
   .error-indicator
     font-size: 85%

app/views/items/_outfit_viewer.html.haml

@@ -1,12 +1,15 @@
 %outfit-viewer
   .loading-indicator= render partial: "hanger_spinner"
 
-  %label.play-pause-button
+  %label.play-pause-button{title: "Pause/play animations"}
     %input.play-pause-toggle{
       type: "checkbox",
       checked: outfit_viewer_is_playing,
     }
-    Play/pause
+    %svg.playing-label{viewBox: "0 0 24 24", "aria-hidden": "true", "aria-label": "Pause"}
+      %path{fill: "currentColor", d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z"}
+    %svg.paused-label{viewBox: "0 0 24 24", "aria-hidden": "true", "aria-label": "Play"}
+      %path{fill: "currentColor", d: "M8 5v14l11-7z"}
 
   - outfit.visible_layers.each do |swf_asset|
     %outfit-layer{