1 files changed, 18 insertions, 2 deletions
diff --git a/packages/merchant-backoffice-ui/src/scss/toggle.scss b/packages/merchant-backoffice-ui/src/scss/toggle.scss
index 24636da2f..6c7346eb3 100644
--- a/packages/merchant-backoffice-ui/src/scss/toggle.scss
+++ b/packages/merchant-backoffice-ui/src/scss/toggle.scss
@@ -4,6 +4,7 @@ $green: #56c080;
   cursor: pointer;
   display: inline-block;
 }
+
 .toggle-switch {
   display: inline-block;
   background: #ccc;
@@ -13,10 +14,12 @@ $green: #56c080;
   position: relative;
   vertical-align: middle;
   transition: background 0.25s;
+
   &:before,
   &:after {
     content: "";
   }
+
   &:before {
     display: block;
     background: linear-gradient(to bottom, #fff 0%, #eee 100%);
@@ -29,23 +32,36 @@ $green: #56c080;
     left: 4px;
     transition: left 0.25s;
   }
+
   .toggle:hover &:before {
     background: linear-gradient(to bottom, #fff 0%, #fff 100%);
     box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
   }
-  .toggle-checkbox:checked + & {
+
+  &.disabled:before {
+    background: linear-gradient(to bottom, #ccc 0%, #bbb 100%);
+  }
+
+  .toggle:hover &.disabled:before {
+    background: linear-gradient(to bottom, #ccc 0%, #bbb 100%);
+  }
+
+  .toggle-checkbox:checked+& {
     background: $green;
+
     &:before {
       left: 30px;
     }
   }
 }
+
 .toggle-checkbox {
   position: absolute;
   visibility: hidden;
 }
+
 .toggle-label {
   margin-left: 5px;
   position: relative;
   top: 2px;
-}
+}
+\ No newline at end of file