diff --git a/Gruntfile.js b/Gruntfile.js
index 216087ad..fdb63a91 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -17,16 +17,18 @@ module.exports = function (grunt) {
         }],
         options: {
           replacements: [
-            // bad conversions of shadow-z-* to @include instead of @extend
-            { // https://regex101.com/r/bF2iJ2/1
-              pattern: /@include shadow-z-(\d+)((?:-hover)?)\(\);/gi,
-              replacement: '@extend .shadow-z-$1$2;',
+
+
+            // convert all shadow mixins
+            { // https://regex101.com/r/sJ2lH4/1
+              pattern: /.shadow-z-(\d+)((?:-hover)?) {/gi,
+              replacement: '@mixin shadow-z-$1$2 {',
               order: 2
             },
             // bad conversions of .shadow-z-*
-            { // https://regex101.com/r/pV0yB0/2
+            { // https://regex101.com/r/pV0yB0/3
               pattern: /\.shadow-z-(\d+)((?:-hover)?)(?:\(\))?;/gi,
-              replacement: '@extend .shadow-z-$1$2;',
+              replacement: '@include shadow-z-$1$2;',
               order: 2
             },
 
diff --git a/sass/_buttons.scss b/sass/_buttons.scss
index 84bef2b7..bbfbe4a1 100644
--- a/sass/_buttons.scss
+++ b/sass/_buttons.scss
@@ -1,8 +1,8 @@
 @mixin btn-shadow(){
-  @extend .shadow-z-1;
+  @include shadow-z-1();
   transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   &:active:not(.btn-link) {
-    @extend .shadow-z-1-hover;
+    @include shadow-z-1-hover();
   }
 }
 
@@ -18,10 +18,10 @@
   color: $darkbg-text;
 
   &:hover:not(.btn-link):not(.btn-flat):not(.btn-fab) {
-    @extend .shadow-z-1;
+    @include shadow-z-1();
   }
   &:active:not(.btn-link):not(.btn-flat):not(.btn-fab) {
-    @extend .shadow-z-1-hover;
+    @include shadow-z-1-hover();
   }
   transition: background-color 0.2s ease, box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   outline: none !important;
@@ -75,10 +75,10 @@
       @include variations(unquote(""), background-color, transparent);
     }
     &, &:hover {
-      @extend .shadow-z-1;
+      @include shadow-z-1();
     }
     &:active {
-      @extend .shadow-z-1-hover;
+      @include shadow-z-1-hover();
     }
     &, .ripple-wrapper {
       border-radius: 100%;
diff --git a/sass/_cards.scss b/sass/_cards.scss
index c51eaa58..53556083 100644
--- a/sass/_cards.scss
+++ b/sass/_cards.scss
@@ -23,7 +23,7 @@
     color: $card-body-text;
     background: $card-body-background;
 
-    @extend .shadow-z-2;
+    @include shadow-z-2();
 
     .card-image {
         height: 60%;
diff --git a/sass/_dialogs.scss b/sass/_dialogs.scss
index 3753122c..2cb75f38 100644
--- a/sass/_dialogs.scss
+++ b/sass/_dialogs.scss
@@ -3,7 +3,7 @@
 // Material Design element Dialogs
 // --------------------------------------------------
 .modal-content {
-  @extend .shadow-z-5;
+  @include shadow-z-5();
   border-radius: 2px;
   border: none;
   // Modal header
diff --git a/sass/_panels.scss b/sass/_panels.scss
index 24080e06..0ad4b2f1 100644
--- a/sass/_panels.scss
+++ b/sass/_panels.scss
@@ -3,7 +3,7 @@
   border: 0;
 
   @include variations(unquote(" > .panel-heading"), background-color, $grey-200);
-  @extend .shadow-z-1;
+  @include shadow-z-1;
 }
 
 
diff --git a/sass/_plugin-snackbarjs.scss b/sass/_plugin-snackbarjs.scss
index ed6e39c1..d469e095 100644
--- a/sass/_plugin-snackbarjs.scss
+++ b/sass/_plugin-snackbarjs.scss
@@ -7,7 +7,7 @@
     color: $darkbg-text;
     font-size: 14px;
     border-radius: 2px;
-    @extend .shadow-z-1;
+    @include shadow-z-1;
 
     // Animation
     height: 0;
diff --git a/sass/_popups.scss b/sass/_popups.scss
index 3de6fa6d..508e493d 100644
--- a/sass/_popups.scss
+++ b/sass/_popups.scss
@@ -4,7 +4,7 @@
   background: $popover-background;
   border: none;
   border-radius: $material-border-radius;
-  @extend .shadow-z-1;
+  @include shadow-z-1();
 }
 
 .tooltip, .tooltip.in {
diff --git a/sass/_shadows.scss b/sass/_shadows.scss
index 64788473..f3f6cf26 100644
--- a/sass/_shadows.scss
+++ b/sass/_shadows.scss
@@ -1,34 +1,34 @@
-.shadow-z-1 {
+@mixin shadow-z-1 {
   box-shadow:
     0 1px 6px 0 rgba(0, 0, 0, 0.12),
     0 1px  6px 0 rgba(0, 0, 0, 0.12);
 }
 
-.shadow-z-1-hover {
+@mixin shadow-z-1-hover {
   box-shadow:
     0 5px 11px 0 rgba(0, 0, 0, 0.18),
     0 4px 15px 0 rgba(0, 0, 0, 0.15);
 }
 
-.shadow-z-2 {
+@mixin shadow-z-2 {
   box-shadow:
     0 8px 17px 0 rgba(0, 0, 0, 0.2),
     0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
-.shadow-z-3 {
+@mixin shadow-z-3 {
   box-shadow:
     0 12px 15px 0 rgba(0, 0, 0, 0.24),
     0 17px 50px 0 rgba(0, 0, 0, 0.19);
 }
 
-.shadow-z-4 {
+@mixin shadow-z-4 {
   box-shadow:
     0 16px 28px 0 rgba(0, 0, 0, 0.22),
     0 25px 55px 0 rgba(0, 0, 0, 0.21);
 }
 
-.shadow-z-5 {
+@mixin shadow-z-5 {
   box-shadow:
     0 27px 24px 0 rgba(0, 0, 0, 0.2),
     0 40px 77px 0 rgba(0, 0, 0, 0.22);
diff --git a/sass/_welljumbo.scss b/sass/_welljumbo.scss
index 6aff7f38..dffa7965 100644
--- a/sass/_welljumbo.scss
+++ b/sass/_welljumbo.scss
@@ -11,7 +11,7 @@ body, .container, .container-fluid {
     background-color: #fff;
     padding: 19px;
     margin-bottom: 20px;
-    @extend .shadow-z-2;
+    @include shadow-z-2();
     border-radius: 2px;
     border: 0;
     p {
diff --git a/sass/material.scss b/sass/material.scss
index 43807de1..9729b6a7 100644
--- a/sass/material.scss
+++ b/sass/material.scss
@@ -2,6 +2,7 @@
 @import '_variables';
 @import '_mixins';
 @import '_icons-material-design';
+@import '_shadows'; // these are mixins only, and must be placed at the top before use (sass requiremnt)
 
 body {
   background-color: $body-bg;
@@ -136,7 +137,3 @@ legend {
 @import '_plugin-nouislider';
 @import '_plugin-selectize';
 @import '_plugin-dropdownjs';
-
-// Material shadows
-// Place them on bottom of stylesheet to increase the importance of it and override other same-specificity selectors
-@import '_shadows';