Restructure Sass files and folders for proper application Sass development

UI/WebServerResources/scss/components/switch/switch-theme.scss

@@ -0,0 +1,52 @@
+md-switch.md-THEME_NAME-theme {
+  .md-thumb {
+    background-color: '{{background-50}}';
+  }
+  .md-bar {
+    background-color: '{{background-500}}';
+  }
+
+  &.md-checked {
+    .md-thumb {
+      background-color: '{{accent-color}}';
+    }
+    .md-bar {
+      background-color: '{{accent-color-0.5}}';
+    }
+
+    &.md-primary {
+      .md-thumb {
+        background-color: '{{primary-color}}';
+      }
+      .md-bar {
+        background-color: '{{primary-color-0.5}}';
+      }
+    }
+
+    &.md-warn {
+      .md-thumb {
+        background-color: '{{warn-color}}';
+      }
+      .md-bar {
+        background-color: '{{warn-color-0.5}}';
+      }
+    }
+  }
+
+  &[disabled] {
+    .md-thumb {
+      background-color: '{{background-400}}';
+    }
+    .md-bar {
+      background-color: '{{foreground-4}}';
+    }
+  }
+
+  &:focus {
+    .md-label:not(:empty) {
+      border-color: '{{foreground-1}}';
+      border-style: dotted;
+    }
+  }
+
+}