Added bluetooth menu.

scss/menus/audiomenu.scss

@@ -1,51 +1,32 @@
 @import "../colors";
 
-.audiomenu-items {
-    background: $mantle;
-    border: .15rem solid $peach;
-    border-radius: .7rem;
-    min-width: 30rem;
-    min-height: 200px;
+.menu-dropdown-label.audio {
+    color: $peach;
 }
 
-.audiomenu-items-container {
-    margin: .5rem 1rem;
+.menu-label.audio {
+    color: $peach;
 }
 
-.click-me {
-    background: $lavender;
-    margin: 140px 0px;
+.menu-button-isactive.audio {
+    color: $peach;
 }
 
-.audiomenu-dropdown-label {
-    font-size: 1.5rem;
-    font-weight: bold;
+.menu-active-slider {
+    trough {
+        highlight,
+        progress {
+            background: $peach;
+        }
+    }
 }
 
-.audiomenu-separator {
-    min-height: .1rem;
-    margin: .6rem 0rem;
-    background: $surface1;
+.menu-button.audio {
+     &:hover {
+        color: $peach;
+    }
 }
 
-.audiomenu-active {
-    font-size: 1.15rem;
-    font-weight: bold;
-    margin: 0rem .5rem;
-    margin-bottom: 1rem;
-}
-
-.audiomenu-active-slider {
-    margin-left: 1rem;
-    margin-right: 1.5rem;
-}
-
-.audiomenu-active-slider * {
-    background: $peach;
-    background-color: $peach;
-    min-height: 1.3rem;
-    border-radius: .6rem;
-}
-.audiomenu-slider-container {
-    margin-bottom: 1.5rem;
+.menu-items {
+    min-width: 25rem;
 }

scss/menus/bluetooth.scss

@@ -0,0 +1,43 @@
+@import "../colors";
+
+.menu-dropdown-label.bluetooth {
+    color: $sky;
+}
+
+.menu-label.bluetooth {
+    color: $sky;
+}
+
+.menu-button-isactive.bluetooth {
+    color: $sky;
+}
+
+.menu-button.bluetooth {
+     &:hover {
+        color: $sky;
+    }
+}
+
+.menu-items {
+    min-width: 300px;
+}
+
+.menu-icon-button {
+    font-size: 1.2rem;
+    min-width: 2rem;
+    &:hover {
+        color: $sky;
+    }
+}
+
+.menu-icon-button.delete {
+    margin-left: 0.5rem;
+}
+
+.menu-icon-button-label {
+    font-size: 1.3rem;
+}
+
+.menu-button-name.status {
+    margin-left: 2.1rem;
+}

scss/menus/menu.scss

@@ -0,0 +1,209 @@
+.menu-slider {
+    // @include unset($rec: true);
+
+    trough {
+        background: $base;
+
+        highlight,
+        progress {
+            background: $peach;
+            border-radius: 0.7rem;
+        }
+    }
+
+    slider {
+        box-shadow: none;
+        background-color: transparent;
+        min-height: 1.6rem;
+        min-width: 1.6rem;
+        border: 0rem solid transparent;
+        border-radius: 0.7rem;
+    }
+
+    &:hover {
+        trough {
+            background: $surface0;
+        }
+
+        slider {
+            background: $overlay0;
+            box-shadow: none;
+        }
+    }
+
+    &:disabled {
+
+        highlight,
+        progress {
+        }
+    }
+
+    trough:focus {
+
+        slider {
+        }
+    }
+}
+
+.menu-switch {
+    background-color: $surface0;
+
+    &:checked {
+        background: $sky;
+    }
+
+    trough {
+        highlight,
+        progress {
+            background-color: $peach;
+            border-radius: 0.7rem;
+        }
+    }
+
+    slider {
+        box-shadow: none;
+        background-color: $overlay0;
+        min-height: 1.2rem;
+        min-width: 1.2rem;
+        border: 0rem solid transparent;
+        border-radius: 0.7rem;
+        margin: 0.1rem 0.2rem;
+    }
+
+    &:hover {
+        trough {
+            background: $surface0;
+        }
+
+        slider {
+            background: $overlay0;
+            box-shadow: none;
+        }
+    }
+
+    &:active {
+        background-color: $sky;
+        highlight,
+        progress {
+        }
+    }
+
+    &:disabled {
+
+        highlight,
+        progress {
+        }
+    }
+
+    trough:focus {
+
+        slider {
+        }
+    }
+}
+
+.menu-separator {
+    min-height: .1rem;
+    margin: .6rem 0rem;
+    background: $surface1;
+}
+
+.menu-items {
+    background: $mantle;
+    border: .25rem solid $surface0;
+    border-radius: .7rem;
+    min-width: 375px;
+    color: $text;
+}
+
+.menu-items-container {
+    margin: 1rem 1.5rem;
+}
+
+.menu-dropdown-label {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: $text;
+}
+
+.menu-active {
+    font-size: 1.15rem;
+    font-weight: bold;
+    margin: 0rem .5rem;
+    margin-bottom: 0.5rem;
+    margin-top: 0.5rem;
+}
+
+.menu-active-icon {
+    color: $overlay1;
+    font-size: 1.7rem;
+    font-weight: bold;
+    margin-right: 0.7rem;
+}
+
+.menu-active-percentage {
+    font-size: 1.1rem;
+    margin-left: 0.5rem;
+    font-weight: bold;
+}
+
+.menu-active-slider {
+    margin-left: 1rem;
+    margin-right: 1.5rem;
+}
+
+.menu-active-slider * {
+    min-height: 1.3rem;
+    border-radius: .7rem;
+}
+.menu-slider-container {
+    margin-bottom: .7rem;
+}
+
+.menu-label {
+    color: $text;
+    font-size: 1.3rem;
+    font-weight: bold;
+}
+
+.menu-label-dim {
+    color: $overlay0;
+    margin-right: 1rem;
+    font-size: 1rem;
+    font-weight: bold;
+}
+
+.dim {
+    color: $overlay0;
+}
+.menu-icon-button {
+    &:hover {
+        color: $surface2;
+    }
+}
+
+.menu-label-container {
+    margin-bottom: 1.3rem;
+}
+
+.menu-button {
+    margin-bottom: .4rem;
+}
+
+.menu-button-name {
+    font-size: 1.1rem;
+    font-weight: bold;
+    margin-left: 1rem;
+    margin-right: 1.2rem;
+}
+
+.menu-button-icon {
+    font-size: 1.3rem;
+    font-weight: bold;
+    color: $overlay0;
+    margin-right: .5rem;
+}
+
+.menu-item-box {
+    margin-bottom: 0.5rem;
+}