diff --git a/less/_togglebutton.less b/less/_togglebutton.less
index 3cf74f83..c9f3ccc2 100644
--- a/less/_togglebutton.less
+++ b/less/_togglebutton.less
@@ -64,16 +64,17 @@
       }
     }
 
-    & label input[type=checkbox]:checked {
-      & + .toggle {
+    // set bg when checked
+    input[type=checkbox]:checked {
+      + .toggle {
         background-color: fade(@brand-primary, 50%); // Switch bg on
       }
 
-      & + .toggle:after {
+      + .toggle:after {
         background-color: @brand-primary; // Handle on
       }
 
-      & + .toggle:active:after {
+      + .toggle:active:after {
         box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px fade(@brand-primary, 10%); // Ripple on
       }
     }
diff --git a/sass/_togglebutton.scss b/sass/_togglebutton.scss
index d1bc3110..337f5917 100644
--- a/sass/_togglebutton.scss
+++ b/sass/_togglebutton.scss
@@ -66,16 +66,29 @@
       }
     }
 
-    & label input[type=checkbox]:checked {
-      & + .toggle {
+    //// Switch bg on
+    //.generic-variations(unquote(" label input[type=checkbox]:checked + .toggle"), $primary, {
+    //  background-color: rgba($material-color, (50/100));
+    //});
+    //// Handle on
+    //.variations(unquote(" label input[type=checkbox]:checked + .toggle:after"), background-color, $primary);
+    //// Ripple on
+    //.generic-variations(unquote(" label input[type=checkbox]:checked + .toggle:active:after"), $primary, {
+    //  box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba($material-color, (10/100));
+    //});
+
+
+    // set bg when checked
+    input[type=checkbox]:checked {
+      + .toggle {
         background-color: rgba($brand-primary, (50/100)); // Switch bg on
       }
 
-      & + .toggle:after {
+      + .toggle:after {
         background-color: $brand-primary; // Handle on
       }
 
-      & + .toggle:active:after {
+      + .toggle:active:after {
         box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba($brand-primary, (10/100)); // Ripple on
       }
     }