Implement styling options for all the bar components (not menus) through options variables.

scss/style/menus/media.scss

@@ -0,0 +1,109 @@
+@import "../colors";
+
+.menu-items-container.media {
+  min-width: 23em;
+  min-height: 10em;
+
+  .menu-section-container {
+    margin: 1em 0em;
+  }
+
+  .menu-items-section {
+    border-radius: 0.4em;
+    padding: 0em;
+  }
+
+  .menu-content {
+    border-radius: 0.4em;
+    background-size: cover;
+    background-position: center;
+  }
+
+  .media-content {
+    margin: 1em;
+  }
+
+  .media-indicator-current-song-name {
+    margin-bottom: 0.75rem;
+  }
+
+  .media-indicator-current-song-author {
+    margin-bottom: 0.75rem;
+  }
+
+  .media-indicator-current-song-name-label {
+    color: $lavender;
+    font-size: 1.35em;
+  }
+
+  .media-indicator-current-song-author-label {
+    color: $teal;
+    font-size: 1em;
+  }
+
+  .media-indicator-current-song-album-label {
+    color: $pink;
+    font-size: 1em;
+  }
+
+  .media-indicator-current-controls {
+    margin-top: 1.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .media-indicator-control-button {
+    margin: 0rem 0.5rem;
+  }
+
+  .media-indicator-control-button {
+    background: $lavender;
+    color: $crust;
+    min-height: 1.8em;
+    min-width: 2.5em;
+    border-radius: 0.2rem;
+
+    &.disabled {
+      background: $surface2;
+    }
+
+    &.enabled {
+      background: $lavender;
+
+      &:hover {
+        background: $pink;
+      }
+
+      &.active {
+        background: $green;
+      }
+    }
+
+  }
+
+  image {
+    font-size: 1.1em;
+  }
+
+  .menu-slider.media.progress {
+    margin-top: 1em;
+    margin-bottom: 1em;
+
+    trough {
+      background: $surface2;
+      border-radius: 0.2em;
+
+      highlight,
+      progress {
+        border-radius: 0.2em;
+        min-height: .85em;
+        background: $pink;
+      }
+    }
+
+    &:hover {
+      trough {
+        background: $surface1;
+      }
+    }
+  }
+}