extract play button from item card and add long press animation

src/renderer/features/shared/components/play-button.module.css

@@ -1,4 +1,4 @@
-.button {
+.text-button {
     width: 3rem;
     height: 3rem;
     border-radius: 50%;
@@ -15,7 +15,7 @@
     }
 }
 
-.button.unthemed {
+.text-button.unthemed {
     @mixin light {
         color: white;
         background: black;
@@ -45,7 +45,7 @@
     }
 }
 
-.wide-button {
+.wide-text-button {
     padding-right: var(--theme-spacing-xl);
     padding-left: var(--theme-spacing-xl);
     background: white;
@@ -53,7 +53,7 @@
     transition: background-color 0.2s ease-in-out;
 }
 
-.wide-button.unthemed {
+.wide-text-button.unthemed {
     @mixin light {
         background: black;
 
@@ -81,7 +81,7 @@
     }
 }
 
-.wide-button-label {
+.wide-text-button-label {
     font-size: var(--theme-font-size-md);
     font-weight: 600;
     color: black;
@@ -91,3 +91,78 @@
         fill: black;
     }
 }
+
+.play-button {
+    all: unset;
+    position: absolute;
+    top: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #fff;
+    border: none;
+    border-radius: 100%;
+    opacity: 1;
+    --play-button-scale: 1;
+    --long-press-duration: 500ms;
+    transform: translate(-50%, -50%) scale(var(--play-button-scale, 1));
+    transition: opacity 0.1s ease-in-out;
+    transition: transform 0.1s ease-in-out;
+    overflow: visible;
+    isolation: isolate;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 100%;
+        height: 100%;
+        background-color: var(--theme-colors-primary);
+        border-radius: 50%;
+        transform: translate(-50%, -50%) scale(0);
+        opacity: 1;
+        transition: transform 0.15s ease-out;
+        z-index: 0;
+        pointer-events: none;
+    }
+
+    &[data-pressing='true']::before {
+        animation: expand-long-press var(--long-press-duration) linear 100ms forwards;
+        transition: none;
+    }
+
+    &:hover {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1.1);
+    }
+
+    &:active {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(0.9);
+    }
+
+    svg {
+        position: relative;
+        z-index: 1;
+        stroke: rgb(0 0 0);
+    }
+}
+
+@keyframes expand-long-press {
+    0% {
+        transform: translate(-50%, -50%) scale(0);
+        opacity: 0.2;
+    }
+    100% {
+        transform: translate(-50%, -50%) scale(1.05);
+        opacity: 0.8;
+    }
+}
+
+.play-button.disabled,
+.play-button.loading {
+    cursor: not-allowed;
+    opacity: 0.5;
+    transform: translate(-50%, -50%) scale(1);
+}