Add css custom property to audioPlayer

components/audioPlayer/audioPlayer.js

@@ -3,13 +3,20 @@ const template = document.createElement('template');
 template.innerHTML = `
 <style>
   audio {
-    border-radius: 0px 0px 10px 10px;
+    height: 2rem;
+    margin: .5rem;
+  }
+  .round-corners {
+    border-radius: 10px;
+  }
+  .small-shadow {
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,.2);
   }
   #audioPlayerContainer {
-    border-radius: 10px;
-    box-shadow: 0 4px 8px 0 rgba(0,0,0,.2);
+  background: var(--background);
     display: flex;
     flex-flow: column nowrap;
+    height: 13.5rem;
   }
   #audioDetailsContainer {
     display: flex;
@@ -17,24 +24,26 @@ template.innerHTML = `
   }
   #audioTextContainer {
     padding: 0 1rem 0 1rem;
+    height: 10rem;
+    overflow-y: scroll;
   }
   img {
-    border-radius: 10px 0px 0px 0px;
     height: 10rem;
+    margin: .5rem 0rem 0rem .5rem;
     object-fit: cover;
     width: 10rem;
   }
 </style>
 
-  <div id="audioPlayerContainer">
+  <div id="audioPlayerContainer" class="small-shadow round-corners">
     <div id="audioDetailsContainer">
-      <img src="" alt="">
+      <img src="" alt="" class="small-shadow round-corners">
       <div id="audioTextContainer">
         <slot name="title"><h3>TITLE</h3></slot>
         <slot name="description"><p>DESCRIPTION</p></slot>
       </div>
     </div>
-    <audio controls>
+    <audio class="small-shadow round-corners" controls>
       <source src="">
       Your browser does not support the audio element.
     </audio>