add design to controls

src/components/Controls.svelte

@@ -1,29 +1,29 @@
 <div class="controls">
-    <div class="controls-group">
+    <div class="controls__volume">
         <Volume></Volume>
     </div>
 
-    <div class="controls-group">
-        <button class:cant={!$canPrevious} on:click={() => selectPrevious()}>⏮️</button>
-
-        <button on:click={() => $paused = !$paused}>
-            {#if $current === null}
-                ▶️
-            {:else if $loading}
-                🕒
-            {:else if $paused}
-                ▶️
-            {:else }
-                ⏸️
-            {/if}
-        </button>
-
-        <button class:cant={!$canNext} on:click={() => selectNext()}>⏭️</button>
+    <div class="controls__controls">
+        <button
+            class="controls__prevnext"
+            class:disabled={!$canPrevious} on:click={() => selectPrevious()}
+            disabled={!$canPrevious} on:click={() => selectPrevious()}
+            aria-label="Prev"
+            title="Previous song"
+        ><Prev></Prev></button>
+        <PlayPause on:click={() => $paused = !$paused}></PlayPause>
+        <button
+            class="controls__prevnext"
+            class:disabled={!$canNext}
+            disabled={!$canNext}
+            on:click={() => selectNext()}
+            aria-label="Next"
+            title="Next Song"
+        ><Next></Next></button>
     </div>
 
-    <div class="controls-group">
-        <button>⭐</button>
-        <button>🔁</button>
+    <div class="controls__menu">
+        <button class="controls__menuBtn" aria-label="track menu"><IconMenu></IconMenu></button>
     </div>
 </div>
 
@@ -40,20 +40,13 @@
         loading
     } from '/store.js'
     import Volume from '/components/Volume'
+    import PlayPause from '/components/icons/controls/PlayPause'
+    import Prev from '/components/icons/controls/Prev'
+    import Next from '/components/icons/controls/Next'
+    import IconMenu from '/components/icons/Menu'
 </script>
 
 <style>
-    .controls {
-        width: 100%;
-        display: flex;
-        flex-wrap: wrap;
-    }
-
-    .controls-group {
-        margin: 0 1rem;
-
-    }
-
     .cant {
         background-color: red;
     }