lightning-base-components 1.21.2-alpha → 1.21.4-alpha

package/src/lightning/sldsUtilsSizing/sldsUtilsSizing.css

@@ -9,1400 +9,1394 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 /* Size + Order */
 
-.slds-size_xxx-small,
-:host(.slds-size_xxx-small) {
+:host([data-render-mode='shadow']) .slds-size_xxx-small,
+:host([data-render-mode='shadow'].slds-size_xxx-small) {
     width: 3rem;
 }
 
-.slds-size_xx-small,
-:host(.slds-size_xx-small) {
+:host([data-render-mode='shadow']) .slds-size_xx-small,
+:host([data-render-mode='shadow'].slds-size_xx-small) {
     width: 6rem;
 }
 
-.slds-size_x-small,
-:host(.slds-size_x-small) {
+:host([data-render-mode='shadow']) .slds-size_x-small,
+:host([data-render-mode='shadow'].slds-size_x-small) {
     width: 12rem;
 }
 
-.slds-size_small,
-:host(.slds-size_small) {
+:host([data-render-mode='shadow']) .slds-size_small,
+:host([data-render-mode='shadow'].slds-size_small) {
     width: 15rem;
 }
 
-.slds-size_medium,
-:host(.slds-size_medium) {
+:host([data-render-mode='shadow']) .slds-size_medium,
+:host([data-render-mode='shadow'].slds-size_medium) {
     width: 20rem;
 }
 
-.slds-size_large,
-:host(.slds-size_large) {
+:host([data-render-mode='shadow']) .slds-size_large,
+:host([data-render-mode='shadow'].slds-size_large) {
     width: 25rem;
 }
 
-.slds-size_x-large,
-:host(.slds-size_x-large) {
+:host([data-render-mode='shadow']) .slds-size_x-large,
+:host([data-render-mode='shadow'].slds-size_x-large) {
     width: 40rem;
 }
 
-.slds-size_xx-large,
-:host(.slds-size_xx-large) {
+:host([data-render-mode='shadow']) .slds-size_xx-large,
+:host([data-render-mode='shadow'].slds-size_xx-large) {
     width: 60rem;
 }
 
-.slds-size_full,
-:host(.slds-size_full) {
+:host([data-render-mode='shadow']) .slds-size_full,
+:host([data-render-mode='shadow'].slds-size_full) {
     width: 100%;
 }
 
-.slds-size_1-of-1,
-:host(.slds-size_1-of-1) {
+:host([data-render-mode='shadow']) .slds-size_1-of-1,
+:host([data-render-mode='shadow'].slds-size_1-of-1) {
     width: 100%;
 }
 
-.slds-size_1-of-2,
-:host(.slds-size_1-of-2) {
+:host([data-render-mode='shadow']) .slds-size_1-of-2,
+:host([data-render-mode='shadow'].slds-size_1-of-2) {
     width: 50%;
 }
 
-.slds-size_2-of-2,
-:host(.slds-size_2-of-2) {
+:host([data-render-mode='shadow']) .slds-size_2-of-2,
+:host([data-render-mode='shadow'].slds-size_2-of-2) {
     width: 100%;
 }
 
-.slds-size_1-of-3,
-:host(.slds-size_1-of-3) {
+:host([data-render-mode='shadow']) .slds-size_1-of-3,
+:host([data-render-mode='shadow'].slds-size_1-of-3) {
     width: 33.3333333333%;
 }
 
-.slds-size_2-of-3,
-:host(.slds-size_2-of-3) {
+:host([data-render-mode='shadow']) .slds-size_2-of-3,
+:host([data-render-mode='shadow'].slds-size_2-of-3) {
     width: 66.6666666667%;
 }
 
-.slds-size_3-of-3,
-:host(.slds-size_3-of-3) {
+:host([data-render-mode='shadow']) .slds-size_3-of-3,
+:host([data-render-mode='shadow'].slds-size_3-of-3) {
     width: 100%;
 }
 
-.slds-size_1-of-4,
-:host(.slds-size_1-of-4) {
+:host([data-render-mode='shadow']) .slds-size_1-of-4,
+:host([data-render-mode='shadow'].slds-size_1-of-4) {
     width: 25%;
 }
 
-.slds-size_2-of-4,
-:host(.slds-size_2-of-4) {
+:host([data-render-mode='shadow']) .slds-size_2-of-4,
+:host([data-render-mode='shadow'].slds-size_2-of-4) {
     width: 50%;
 }
 
-.slds-size_3-of-4,
-:host(.slds-size_3-of-4) {
+:host([data-render-mode='shadow']) .slds-size_3-of-4,
+:host([data-render-mode='shadow'].slds-size_3-of-4) {
     width: 75%;
 }
 
-.slds-size_4-of-4,
-:host(.slds-size_4-of-4) {
+:host([data-render-mode='shadow']) .slds-size_4-of-4,
+:host([data-render-mode='shadow'].slds-size_4-of-4) {
     width: 100%;
 }
 
-.slds-size_1-of-5,
-:host(.slds-size_1-of-5) {
+:host([data-render-mode='shadow']) .slds-size_1-of-5,
+:host([data-render-mode='shadow'].slds-size_1-of-5) {
     width: 20%;
 }
 
-.slds-size_2-of-5,
-:host(.slds-size_2-of-5) {
+:host([data-render-mode='shadow']) .slds-size_2-of-5,
+:host([data-render-mode='shadow'].slds-size_2-of-5) {
     width: 40%;
 }
 
-.slds-size_3-of-5,
-:host(.slds-size_3-of-5) {
+:host([data-render-mode='shadow']) .slds-size_3-of-5,
+:host([data-render-mode='shadow'].slds-size_3-of-5) {
     width: 60%;
 }
 
-.slds-size_4-of-5,
-:host(.slds-size_4-of-5) {
+:host([data-render-mode='shadow']) .slds-size_4-of-5,
+:host([data-render-mode='shadow'].slds-size_4-of-5) {
     width: 80%;
 }
 
-.slds-size_5-of-5,
-:host(.slds-size_5-of-5) {
+:host([data-render-mode='shadow']) .slds-size_5-of-5,
+:host([data-render-mode='shadow'].slds-size_5-of-5) {
     width: 100%;
 }
 
-.slds-size_1-of-6,
-:host(.slds-size_1-of-6) {
+:host([data-render-mode='shadow']) .slds-size_1-of-6,
+:host([data-render-mode='shadow'].slds-size_1-of-6) {
     width: 16.6666666667%;
 }
 
-.slds-size_2-of-6,
-:host(.slds-size_2-of-6) {
+:host([data-render-mode='shadow']) .slds-size_2-of-6,
+:host([data-render-mode='shadow'].slds-size_2-of-6) {
     width: 33.3333333333%;
 }
 
-.slds-size_3-of-6,
-:host(.slds-size_3-of-6) {
+:host([data-render-mode='shadow']) .slds-size_3-of-6,
+:host([data-render-mode='shadow'].slds-size_3-of-6) {
     width: 50%;
 }
 
-.slds-size_4-of-6,
-:host(.slds-size_4-of-6) {
+:host([data-render-mode='shadow']) .slds-size_4-of-6,
+:host([data-render-mode='shadow'].slds-size_4-of-6) {
     width: 66.6666666667%;
 }
 
-.slds-size_5-of-6,
-:host(.slds-size_5-of-6) {
+:host([data-render-mode='shadow']) .slds-size_5-of-6,
+:host([data-render-mode='shadow'].slds-size_5-of-6) {
     width: 83.3333333333%;
 }
 
-.slds-size_6-of-6,
-:host(.slds-size_6-of-6) {
+:host([data-render-mode='shadow']) .slds-size_6-of-6,
+:host([data-render-mode='shadow'].slds-size_6-of-6) {
     width: 100%;
 }
 
-.slds-size_1-of-7,
-:host(.slds-size_1-of-7) {
+:host([data-render-mode='shadow']) .slds-size_1-of-7,
+:host([data-render-mode='shadow'].slds-size_1-of-7) {
     width: 14.2857142857%;
 }
 
-.slds-size_2-of-7,
-:host(.slds-size_2-of-7) {
+:host([data-render-mode='shadow']) .slds-size_2-of-7,
+:host([data-render-mode='shadow'].slds-size_2-of-7) {
     width: 28.5714285714%;
 }
 
-.slds-size_3-of-7,
-:host(.slds-size_3-of-7) {
+:host([data-render-mode='shadow']) .slds-size_3-of-7,
+:host([data-render-mode='shadow'].slds-size_3-of-7) {
     width: 42.8571428571%;
 }
 
-.slds-size_4-of-7,
-:host(.slds-size_4-of-7) {
+:host([data-render-mode='shadow']) .slds-size_4-of-7,
+:host([data-render-mode='shadow'].slds-size_4-of-7) {
     width: 57.1428571429%;
 }
 
-.slds-size_5-of-7,
-:host(.slds-size_5-of-7) {
+:host([data-render-mode='shadow']) .slds-size_5-of-7,
+:host([data-render-mode='shadow'].slds-size_5-of-7) {
     width: 71.4285714286%;
 }
 
-.slds-size_6-of-7,
-:host(.slds-size_6-of-7) {
+:host([data-render-mode='shadow']) .slds-size_6-of-7,
+:host([data-render-mode='shadow'].slds-size_6-of-7) {
     width: 85.7142857143%;
 }
 
-.slds-size_7-of-7,
-:host(.slds-size_7-of-7) {
+:host([data-render-mode='shadow']) .slds-size_7-of-7,
+:host([data-render-mode='shadow'].slds-size_7-of-7) {
     width: 100%;
 }
 
-.slds-size_1-of-8,
-:host(.slds-size_1-of-8) {
+:host([data-render-mode='shadow']) .slds-size_1-of-8,
+:host([data-render-mode='shadow'].slds-size_1-of-8) {
     width: 12.5%;
 }
 
-.slds-size_2-of-8,
-:host(.slds-size_2-of-8) {
+:host([data-render-mode='shadow']) .slds-size_2-of-8,
+:host([data-render-mode='shadow'].slds-size_2-of-8) {
     width: 25%;
 }
 
-.slds-size_3-of-8,
-:host(.slds-size_3-of-8) {
+:host([data-render-mode='shadow']) .slds-size_3-of-8,
+:host([data-render-mode='shadow'].slds-size_3-of-8) {
     width: 37.5%;
 }
 
-.slds-size_4-of-8,
-:host(.slds-size_4-of-8) {
+:host([data-render-mode='shadow']) .slds-size_4-of-8,
+:host([data-render-mode='shadow'].slds-size_4-of-8) {
     width: 50%;
 }
 
-.slds-size_5-of-8,
-:host(.slds-size_5-of-8) {
+:host([data-render-mode='shadow']) .slds-size_5-of-8,
+:host([data-render-mode='shadow'].slds-size_5-of-8) {
     width: 62.5%;
 }
 
-.slds-size_6-of-8,
-:host(.slds-size_6-of-8) {
+:host([data-render-mode='shadow']) .slds-size_6-of-8,
+:host([data-render-mode='shadow'].slds-size_6-of-8) {
     width: 75%;
 }
 
-.slds-size_7-of-8,
-:host(.slds-size_7-of-8) {
+:host([data-render-mode='shadow']) .slds-size_7-of-8,
+:host([data-render-mode='shadow'].slds-size_7-of-8) {
     width: 87.5%;
 }
 
-.slds-size_8-of-8,
-:host(.slds-size_8-of-8) {
+:host([data-render-mode='shadow']) .slds-size_8-of-8,
+:host([data-render-mode='shadow'].slds-size_8-of-8) {
     width: 100%;
 }
 
-.slds-size_1-of-12,
-:host(.slds-size_1-of-12) {
+:host([data-render-mode='shadow']) .slds-size_1-of-12,
+:host([data-render-mode='shadow'].slds-size_1-of-12) {
     width: 8.3333333333%;
 }
 
-.slds-size_2-of-12,
-:host(.slds-size_2-of-12) {
+:host([data-render-mode='shadow']) .slds-size_2-of-12,
+:host([data-render-mode='shadow'].slds-size_2-of-12) {
     width: 16.6666666667%;
 }
 
-.slds-size_3-of-12,
-:host(.slds-size_3-of-12) {
+:host([data-render-mode='shadow']) .slds-size_3-of-12,
+:host([data-render-mode='shadow'].slds-size_3-of-12) {
     width: 25%;
 }
 
-.slds-size_4-of-12,
-:host(.slds-size_4-of-12) {
+:host([data-render-mode='shadow']) .slds-size_4-of-12,
+:host([data-render-mode='shadow'].slds-size_4-of-12) {
     width: 33.3333333333%;
 }
 
-.slds-size_5-of-12,
-:host(.slds-size_5-of-12) {
+:host([data-render-mode='shadow']) .slds-size_5-of-12,
+:host([data-render-mode='shadow'].slds-size_5-of-12) {
     width: 41.6666666667%;
 }
 
-.slds-size_6-of-12,
-:host(.slds-size_6-of-12) {
+:host([data-render-mode='shadow']) .slds-size_6-of-12,
+:host([data-render-mode='shadow'].slds-size_6-of-12) {
     width: 50%;
 }
 
-.slds-size_7-of-12,
-:host(.slds-size_7-of-12) {
+:host([data-render-mode='shadow']) .slds-size_7-of-12,
+:host([data-render-mode='shadow'].slds-size_7-of-12) {
     width: 58.3333333333%;
 }
 
-.slds-size_8-of-12,
-:host(.slds-size_8-of-12) {
+:host([data-render-mode='shadow']) .slds-size_8-of-12,
+:host([data-render-mode='shadow'].slds-size_8-of-12) {
     width: 66.6666666667%;
 }
 
-.slds-size_9-of-12,
-:host(.slds-size_9-of-12) {
+:host([data-render-mode='shadow']) .slds-size_9-of-12,
+:host([data-render-mode='shadow'].slds-size_9-of-12) {
     width: 75%;
 }
 
-.slds-size_10-of-12,
-:host(.slds-size_10-of-12) {
+:host([data-render-mode='shadow']) .slds-size_10-of-12,
+:host([data-render-mode='shadow'].slds-size_10-of-12) {
     width: 83.3333333333%;
 }
 
-.slds-size_11-of-12,
-:host(.slds-size_11-of-12) {
+:host([data-render-mode='shadow']) .slds-size_11-of-12,
+:host([data-render-mode='shadow'].slds-size_11-of-12) {
     width: 91.6666666667%;
 }
 
-.slds-size_12-of-12,
-:host(.slds-size_12-of-12) {
+:host([data-render-mode='shadow']) .slds-size_12-of-12,
+:host([data-render-mode='shadow'].slds-size_12-of-12) {
     width: 100%;
 }
 
-.slds-order_1,
-:host(.slds-order_1) {
+:host([data-render-mode='shadow']) .slds-order_1,
+:host([data-render-mode='shadow'].slds-order_1) {
     order: 1;
 }
 
-.slds-order_2,
-:host(.slds-order_2) {
+:host([data-render-mode='shadow']) .slds-order_2,
+:host([data-render-mode='shadow'].slds-order_2) {
     order: 2;
 }
 
-.slds-order_3,
-:host(.slds-order_3) {
+:host([data-render-mode='shadow']) .slds-order_3,
+:host([data-render-mode='shadow'].slds-order_3) {
     order: 3;
 }
 
-.slds-order_4,
-:host(.slds-order_4) {
+:host([data-render-mode='shadow']) .slds-order_4,
+:host([data-render-mode='shadow'].slds-order_4) {
     order: 4;
 }
 
-.slds-order_5,
-:host(.slds-order_5) {
+:host([data-render-mode='shadow']) .slds-order_5,
+:host([data-render-mode='shadow'].slds-order_5) {
     order: 5;
 }
 
-.slds-order_6,
-:host(.slds-order_6) {
+:host([data-render-mode='shadow']) .slds-order_6,
+:host([data-render-mode='shadow'].slds-order_6) {
     order: 6;
 }
 
-.slds-order_7,
-:host(.slds-order_7) {
+:host([data-render-mode='shadow']) .slds-order_7,
+:host([data-render-mode='shadow'].slds-order_7) {
     order: 7;
 }
 
-.slds-order_8,
-:host(.slds-order_8) {
+:host([data-render-mode='shadow']) .slds-order_8,
+:host([data-render-mode='shadow'].slds-order_8) {
     order: 8;
 }
 
-.slds-order_9,
-:host(.slds-order_9) {
+:host([data-render-mode='shadow']) .slds-order_9,
+:host([data-render-mode='shadow'].slds-order_9) {
     order: 9;
 }
 
-.slds-order_10,
-:host(.slds-order_10) {
+:host([data-render-mode='shadow']) .slds-order_10,
+:host([data-render-mode='shadow'].slds-order_10) {
     order: 10;
 }
 
-.slds-order_11,
-:host(.slds-order_11) {
+:host([data-render-mode='shadow']) .slds-order_11,
+:host([data-render-mode='shadow'].slds-order_11) {
     order: 11;
 }
 
-.slds-order_12,
-:host(.slds-order_12) {
+:host([data-render-mode='shadow']) .slds-order_12,
+:host([data-render-mode='shadow'].slds-order_12) {
     order: 12;
 }
 
 /* Size Small + Order */
 
 @media (min-width: 30em) {
-
-    [class*=slds-small-size_],
-    :host([class*=slds-small-size_]) {
+    :host([data-render-mode='shadow']) [class*='slds-small-size_'],
+    :host([data-render-mode='shadow'][class*='slds-small-size_']) {
         flex: none;
     }
 
-    .slds-small-size_xxx-small,
-    :host(.slds-small-size_xxx-small) {
+    :host([data-render-mode='shadow']) .slds-small-size_xxx-small,
+    :host([data-render-mode='shadow'].slds-small-size_xxx-small) {
         width: 3rem;
     }
 
-    .slds-small-size_xx-small,
-    :host(.slds-small-size_xx-small) {
+    :host([data-render-mode='shadow']) .slds-small-size_xx-small,
+    :host([data-render-mode='shadow'].slds-small-size_xx-small) {
         width: 6rem;
     }
 
-    .slds-small-size_x-small,
-    :host(.slds-small-size_x-small) {
+    :host([data-render-mode='shadow']) .slds-small-size_x-small,
+    :host([data-render-mode='shadow'].slds-small-size_x-small) {
         width: 12rem;
     }
 
-    .slds-small-size_small,
-    :host(.slds-small-size_small) {
+    :host([data-render-mode='shadow']) .slds-small-size_small,
+    :host([data-render-mode='shadow'].slds-small-size_small) {
         width: 15rem;
     }
 
-    .slds-small-size_medium,
-    :host(.slds-small-size_medium) {
+    :host([data-render-mode='shadow']) .slds-small-size_medium,
+    :host([data-render-mode='shadow'].slds-small-size_medium) {
         width: 20rem;
     }
 
-    .slds-small-size_large,
-    :host(.slds-small-size_large) {
+    :host([data-render-mode='shadow']) .slds-small-size_large,
+    :host([data-render-mode='shadow'].slds-small-size_large) {
         width: 25rem;
     }
 
-    .slds-small-size_x-large,
-    :host(.slds-small-size_x-large) {
+    :host([data-render-mode='shadow']) .slds-small-size_x-large,
+    :host([data-render-mode='shadow'].slds-small-size_x-large) {
         width: 40rem;
     }
 
-    .slds-small-size_xx-large,
-    :host(.slds-small-size_xx-large) {
+    :host([data-render-mode='shadow']) .slds-small-size_xx-large,
+    :host([data-render-mode='shadow'].slds-small-size_xx-large) {
         width: 60rem;
     }
 
-    .slds-small-size_1-of-1,
-    :host(.slds-small-size_1-of-1) {
+    :host([data-render-mode='shadow']) .slds-small-size_1-of-1,
+    :host([data-render-mode='shadow'].slds-small-size_1-of-1) {
         width: 100%;
     }
 
-    .slds-small-size_1-of-2,
-    :host(.slds-small-size_1-of-2) {
+    :host([data-render-mode='shadow']) .slds-small-size_1-of-2,
+    :host([data-render-mode='shadow'].slds-small-size_1-of-2) {
         width: 50%;
     }
 
-    .slds-small-size_2-of-2,
-    :host(.slds-small-size_2-of-2) {
+    :host([data-render-mode='shadow']) .slds-small-size_2-of-2,
+    :host([data-render-mode='shadow'].slds-small-size_2-of-2) {
         width: 100%;
     }
 
-    .slds-small-size_1-of-3,
-    :host(.slds-small-size_1-of-3) {
+    :host([data-render-mode='shadow']) .slds-small-size_1-of-3,
+    :host([data-render-mode='shadow'].slds-small-size_1-of-3) {
         width: 33.3333333333%;
     }
 
-    .slds-small-size_2-of-3,
-    :host(.slds-small-size_2-of-3) {
+    :host([data-render-mode='shadow']) .slds-small-size_2-of-3,
+    :host([data-render-mode='shadow'].slds-small-size_2-of-3) {
         width: 66.6666666667%;
     }
 
-    .slds-small-size_3-of-3,
-    :host(.slds-small-size_3-of-3) {
+    :host([data-render-mode='shadow']) .slds-small-size_3-of-3,
+    :host([data-render-mode='shadow'].slds-small-size_3-of-3) {
         width: 100%;
     }
 
-    .slds-small-size_1-of-4,
-    :host(.slds-small-size_1-of-4) {
+    :host([data-render-mode='shadow']) .slds-small-size_1-of-4,
+    :host([data-render-mode='shadow'].slds-small-size_1-of-4) {
         width: 25%;
     }
 
-    .slds-small-size_2-of-4,
-    :host(.slds-small-size_2-of-4) {
+    :host([data-render-mode='shadow']) .slds-small-size_2-of-4,
+    :host([data-render-mode='shadow'].slds-small-size_2-of-4) {
         width: 50%;
     }
 
-    .slds-small-size_3-of-4,
-    :host(.slds-small-size_3-of-4) {
+    :host([data-render-mode='shadow']) .slds-small-size_3-of-4,
+    :host([data-render-mode='shadow'].slds-small-size_3-of-4) {
         width: 75%;
     }
 
-    .slds-small-size_4-of-4,
-    :host(.slds-small-size_4-of-4) {
+    :host([data-render-mode='shadow']) .slds-small-size_4-of-4,
+    :host([data-render-mode='shadow'].slds-small-size_4-of-4) {
         width: 100%;
     }
 
-    .slds-small-size_1-of-5,
-    :host(.slds-small-size_1-of-5) {
+    :host([data-render-mode='shadow']) .slds-small-size_1-of-5,
+    :host([data-render-mode='shadow'].slds-small-size_1-of-5) {
         width: 20%;
     }
 
-    .slds-small-size_2-of-5,
-    :host(.slds-small-size_2-of-5) {
+    :host([data-render-mode='shadow']) .slds-small-size_2-of-5,
+    :host([data-render-mode='shadow'].slds-small-size_2-of-5) {
         width: 40%;
     }
 
-    .slds-small-size_3-of-5,
-    :host(.slds-small-size_3-of-5) {
+    :host([data-render-mode='shadow']) .slds-small-size_3-of-5,
+    :host([data-render-mode='shadow'].slds-small-size_3-of-5) {
         width: 60%;
     }
 
-    .slds-small-size_4-of-5,
-    :host(.slds-small-size_4-of-5) {
+    :host([data-render-mode='shadow']) .slds-small-size_4-of-5,
+    :host([data-render-mode='shadow'].slds-small-size_4-of-5) {
         width: 80%;
     }
 
-    .slds-small-size_5-of-5,
-    :host(.slds-small-size_5-of-5) {
+    :host([data-render-mode='shadow']) .slds-small-size_5-of-5,
+    :host([data-render-mode='shadow'].slds-small-size_5-of-5) {
         width: 100%;
     }
 
-    .slds-small-size_1-of-6,
-    :host(.slds-small-size_1-of-6) {
+    :host([data-render-mode='shadow']) .slds-small-size_1-of-6,
+    :host([data-render-mode='shadow'].slds-small-size_1-of-6) {
         width: 16.6666666667%;
     }
 
-    .slds-small-size_2-of-6,
-    :host(.slds-small-size_2-of-6) {
+    :host([data-render-mode='shadow']) .slds-small-size_2-of-6,
+    :host([data-render-mode='shadow'].slds-small-size_2-of-6) {
         width: 33.3333333333%;
     }
 
-    .slds-small-size_3-of-6,
-    :host(.slds-small-size_3-of-6) {
+    :host([data-render-mode='shadow']) .slds-small-size_3-of-6,
+    :host([data-render-mode='shadow'].slds-small-size_3-of-6) {
         width: 50%;
     }
 
-    .slds-small-size_4-of-6,
-    :host(.slds-small-size_4-of-6) {
+    :host([data-render-mode='shadow']) .slds-small-size_4-of-6,
+    :host([data-render-mode='shadow'].slds-small-size_4-of-6) {
         width: 66.6666666667%;
     }
 
-    .slds-small-size_5-of-6,
-    :host(.slds-small-size_5-of-6) {
+    :host([data-render-mode='shadow']) .slds-small-size_5-of-6,
+    :host([data-render-mode='shadow'].slds-small-size_5-of-6) {
         width: 83.3333333333%;
     }
 
-    .slds-small-size_6-of-6,
-    :host(.slds-small-size_6-of-6) {
+    :host([data-render-mode='shadow']) .slds-small-size_6-of-6,
+    :host([data-render-mode='shadow'].slds-small-size_6-of-6) {
         width: 100%;
     }
 
-    .slds-small-size_1-of-7,
-    :host(.slds-small-size_1-of-7) {
+    :host([data-render-mode='shadow']) .slds-small-size_1-of-7,
+    :host([data-render-mode='shadow'].slds-small-size_1-of-7) {
         width: 14.2857142857%;
     }
 
-    .slds-small-size_2-of-7,
-    :host(.slds-small-size_2-of-7) {
+    :host([data-render-mode='shadow']) .slds-small-size_2-of-7,
+    :host([data-render-mode='shadow'].slds-small-size_2-of-7) {
         width: 28.5714285714%;
     }
 
-    .slds-small-size_3-of-7,
-    :host(.slds-small-size_3-of-7) {
+    :host([data-render-mode='shadow']) .slds-small-size_3-of-7,
+    :host([data-render-mode='shadow'].slds-small-size_3-of-7) {
         width: 42.8571428571%;
     }
 
-    .slds-small-size_4-of-7,
-    :host(.slds-small-size_4-of-7) {
+    :host([data-render-mode='shadow']) .slds-small-size_4-of-7,
+    :host([data-render-mode='shadow'].slds-small-size_4-of-7) {
         width: 57.1428571429%;
     }
 
-    .slds-small-size_5-of-7,
-    :host(.slds-small-size_5-of-7) {
+    :host([data-render-mode='shadow']) .slds-small-size_5-of-7,
+    :host([data-render-mode='shadow'].slds-small-size_5-of-7) {
         width: 71.4285714286%;
     }
 
-    .slds-small-size_6-of-7,
-    :host(.slds-small-size_6-of-7) {
+    :host([data-render-mode='shadow']) .slds-small-size_6-of-7,
+    :host([data-render-mode='shadow'].slds-small-size_6-of-7) {
         width: 85.7142857143%;
     }
 
-    .slds-small-size_7-of-7,
-    :host(.slds-small-size_7-of-7) {
+    :host([data-render-mode='shadow']) .slds-small-size_7-of-7,
+    :host([data-render-mode='shadow'].slds-small-size_7-of-7) {
         width: 100%;
     }
 
-    .slds-small-size_1-of-8,
-    :host(.slds-small-size_1-of-8) {
+    :host([data-render-mode='shadow']) .slds-small-size_1-of-8,
+    :host([data-render-mode='shadow'].slds-small-size_1-of-8) {
         width: 12.5%;
     }
 
-    .slds-small-size_2-of-8,
-    :host(.slds-small-size_2-of-8) {
+    :host([data-render-mode='shadow']) .slds-small-size_2-of-8,
+    :host([data-render-mode='shadow'].slds-small-size_2-of-8) {
         width: 25%;
     }
 
-    .slds-small-size_3-of-8,
-    :host(.slds-small-size_3-of-8) {
+    :host([data-render-mode='shadow']) .slds-small-size_3-of-8,
+    :host([data-render-mode='shadow'].slds-small-size_3-of-8) {
         width: 37.5%;
     }
 
-    .slds-small-size_4-of-8,
-    :host(.slds-small-size_4-of-8) {
+    :host([data-render-mode='shadow']) .slds-small-size_4-of-8,
+    :host([data-render-mode='shadow'].slds-small-size_4-of-8) {
         width: 50%;
     }
 
-    .slds-small-size_5-of-8,
-    :host(.slds-small-size_5-of-8) {
+    :host([data-render-mode='shadow']) .slds-small-size_5-of-8,
+    :host([data-render-mode='shadow'].slds-small-size_5-of-8) {
         width: 62.5%;
     }
 
-    .slds-small-size_6-of-8,
-    :host(.slds-small-size_6-of-8) {
+    :host([data-render-mode='shadow']) .slds-small-size_6-of-8,
+    :host([data-render-mode='shadow'].slds-small-size_6-of-8) {
         width: 75%;
     }
 
-    .slds-small-size_7-of-8,
-    :host(.slds-small-size_7-of-8) {
+    :host([data-render-mode='shadow']) .slds-small-size_7-of-8,
+    :host([data-render-mode='shadow'].slds-small-size_7-of-8) {
         width: 87.5%;
     }
 
-    .slds-small-size_8-of-8,
-    :host(.slds-small-size_8-of-8) {
+    :host([data-render-mode='shadow']) .slds-small-size_8-of-8,
+    :host([data-render-mode='shadow'].slds-small-size_8-of-8) {
         width: 100%;
     }
 
-    .slds-small-size_1-of-12,
-    :host(.slds-small-size_1-of-12) {
+    :host([data-render-mode='shadow']) .slds-small-size_1-of-12,
+    :host([data-render-mode='shadow'].slds-small-size_1-of-12) {
         width: 8.3333333333%;
     }
 
-    .slds-small-size_2-of-12,
-    :host(.slds-small-size_2-of-12) {
+    :host([data-render-mode='shadow']) .slds-small-size_2-of-12,
+    :host([data-render-mode='shadow'].slds-small-size_2-of-12) {
         width: 16.6666666667%;
     }
 
-    .slds-small-size_3-of-12,
-    :host(.slds-small-size_3-of-12) {
+    :host([data-render-mode='shadow']) .slds-small-size_3-of-12,
+    :host([data-render-mode='shadow'].slds-small-size_3-of-12) {
         width: 25%;
     }
 
-    .slds-small-size_4-of-12,
-    :host(.slds-small-size_4-of-12) {
+    :host([data-render-mode='shadow']) .slds-small-size_4-of-12,
+    :host([data-render-mode='shadow'].slds-small-size_4-of-12) {
         width: 33.3333333333%;
     }
 
-    .slds-small-size_5-of-12,
-    :host(.slds-small-size_5-of-12) {
+    :host([data-render-mode='shadow']) .slds-small-size_5-of-12,
+    :host([data-render-mode='shadow'].slds-small-size_5-of-12) {
         width: 41.6666666667%;
     }
 
-    .slds-small-size_6-of-12,
-    :host(.slds-small-size_6-of-12) {
+    :host([data-render-mode='shadow']) .slds-small-size_6-of-12,
+    :host([data-render-mode='shadow'].slds-small-size_6-of-12) {
         width: 50%;
     }
 
-    .slds-small-size_7-of-12,
-    :host(.slds-small-size_7-of-12) {
+    :host([data-render-mode='shadow']) .slds-small-size_7-of-12,
+    :host([data-render-mode='shadow'].slds-small-size_7-of-12) {
         width: 58.3333333333%;
     }
 
-    .slds-small-size_8-of-12,
-    :host(.slds-small-size_8-of-12) {
+    :host([data-render-mode='shadow']) .slds-small-size_8-of-12,
+    :host([data-render-mode='shadow'].slds-small-size_8-of-12) {
         width: 66.6666666667%;
     }
 
-    .slds-small-size_9-of-12,
-    :host(.slds-small-size_9-of-12) {
+    :host([data-render-mode='shadow']) .slds-small-size_9-of-12,
+    :host([data-render-mode='shadow'].slds-small-size_9-of-12) {
         width: 75%;
     }
 
-    .slds-small-size_10-of-12,
-    :host(.slds-small-size_10-of-12) {
+    :host([data-render-mode='shadow']) .slds-small-size_10-of-12,
+    :host([data-render-mode='shadow'].slds-small-size_10-of-12) {
         width: 83.3333333333%;
     }
 
-    .slds-small-size_11-of-12,
-    :host(.slds-small-size_11-of-12) {
+    :host([data-render-mode='shadow']) .slds-small-size_11-of-12,
+    :host([data-render-mode='shadow'].slds-small-size_11-of-12) {
         width: 91.6666666667%;
     }
 
-    .slds-small-size_12-of-12,
-    :host(.slds-small-size_12-of-12) {
+    :host([data-render-mode='shadow']) .slds-small-size_12-of-12,
+    :host([data-render-mode='shadow'].slds-small-size_12-of-12) {
         width: 100%;
     }
 
-    .slds-small-order_1,
-    :host(.slds-small-order_1) {
+    :host([data-render-mode='shadow']) .slds-small-order_1,
+    :host([data-render-mode='shadow'].slds-small-order_1) {
         order: 1;
     }
 
-    .slds-small-order_2,
-    :host(.slds-small-order_2) {
+    :host([data-render-mode='shadow']) .slds-small-order_2,
+    :host([data-render-mode='shadow'].slds-small-order_2) {
         order: 2;
     }
 
-    .slds-small-order_3,
-    :host(.slds-small-order_3) {
+    :host([data-render-mode='shadow']) .slds-small-order_3,
+    :host([data-render-mode='shadow'].slds-small-order_3) {
         order: 3;
     }
 
-    .slds-small-order_4,
-    :host(.slds-small-order_4) {
+    :host([data-render-mode='shadow']) .slds-small-order_4,
+    :host([data-render-mode='shadow'].slds-small-order_4) {
         order: 4;
     }
 
-    .slds-small-order_5,
-    :host(.slds-small-order_5) {
+    :host([data-render-mode='shadow']) .slds-small-order_5,
+    :host([data-render-mode='shadow'].slds-small-order_5) {
         order: 5;
     }
 
-    .slds-small-order_6,
-    :host(.slds-small-order_6) {
+    :host([data-render-mode='shadow']) .slds-small-order_6,
+    :host([data-render-mode='shadow'].slds-small-order_6) {
         order: 6;
     }
 
-    .slds-small-order_7,
-    :host(.slds-small-order_7) {
+    :host([data-render-mode='shadow']) .slds-small-order_7,
+    :host([data-render-mode='shadow'].slds-small-order_7) {
         order: 7;
     }
 
-    .slds-small-order_8,
-    :host(.slds-small-order_8) {
+    :host([data-render-mode='shadow']) .slds-small-order_8,
+    :host([data-render-mode='shadow'].slds-small-order_8) {
         order: 8;
     }
 
-    .slds-small-order_9,
-    :host(.slds-small-order_9) {
+    :host([data-render-mode='shadow']) .slds-small-order_9,
+    :host([data-render-mode='shadow'].slds-small-order_9) {
         order: 9;
     }
 
-    .slds-small-order_10,
-    :host(.slds-small-order_10) {
+    :host([data-render-mode='shadow']) .slds-small-order_10,
+    :host([data-render-mode='shadow'].slds-small-order_10) {
         order: 10;
     }
 
-    .slds-small-order_11,
-    :host(.slds-small-order_11) {
+    :host([data-render-mode='shadow']) .slds-small-order_11,
+    :host([data-render-mode='shadow'].slds-small-order_11) {
         order: 11;
     }
 
-    .slds-small-order_12,
-    :host(.slds-small-order_12) {
+    :host([data-render-mode='shadow']) .slds-small-order_12,
+    :host([data-render-mode='shadow'].slds-small-order_12) {
         order: 12;
     }
-
 }
 
 /* Size Medium + Order */
 
 @media (min-width: 48em) {
-
-    [class*=slds-medium-size_],
-    :host([class*=slds-medium-size_]) {
+    :host([data-render-mode='shadow']) [class*='slds-medium-size_'],
+    :host([data-render-mode='shadow'][class*='slds-medium-size_']) {
         flex: none;
     }
 
-    .slds-medium-size_xxx-small,
-    :host(.slds-medium-size_xxx-small) {
+    :host([data-render-mode='shadow']) .slds-medium-size_xxx-small,
+    :host([data-render-mode='shadow'].slds-medium-size_xxx-small) {
         width: 3rem;
     }
 
-    .slds-medium-size_xx-small,
-    :host(.slds-medium-size_xx-small) {
+    :host([data-render-mode='shadow']) .slds-medium-size_xx-small,
+    :host([data-render-mode='shadow'].slds-medium-size_xx-small) {
         width: 6rem;
     }
 
-    .slds-medium-size_x-small,
-    :host(.slds-medium-size_x-small) {
+    :host([data-render-mode='shadow']) .slds-medium-size_x-small,
+    :host([data-render-mode='shadow'].slds-medium-size_x-small) {
         width: 12rem;
     }
 
-    .slds-medium-size_small,
-    :host(.slds-medium-size_small) {
+    :host([data-render-mode='shadow']) .slds-medium-size_small,
+    :host([data-render-mode='shadow'].slds-medium-size_small) {
         width: 15rem;
     }
 
-    .slds-medium-size_medium,
-    :host(.slds-medium-size_medium) {
+    :host([data-render-mode='shadow']) .slds-medium-size_medium,
+    :host([data-render-mode='shadow'].slds-medium-size_medium) {
         width: 20rem;
     }
 
-    .slds-medium-size_large,
-    :host(.slds-medium-size_large) {
+    :host([data-render-mode='shadow']) .slds-medium-size_large,
+    :host([data-render-mode='shadow'].slds-medium-size_large) {
         width: 25rem;
     }
 
-    .slds-medium-size_x-large,
-    :host(.slds-medium-size_x-large) {
+    :host([data-render-mode='shadow']) .slds-medium-size_x-large,
+    :host([data-render-mode='shadow'].slds-medium-size_x-large) {
         width: 40rem;
     }
 
-    .slds-medium-size_xx-large,
-    :host(.slds-medium-size_xx-large) {
+    :host([data-render-mode='shadow']) .slds-medium-size_xx-large,
+    :host([data-render-mode='shadow'].slds-medium-size_xx-large) {
         width: 60rem;
     }
 
-    .slds-medium-size_1-of-1,
-    :host(.slds-medium-size_1-of-1) {
+    :host([data-render-mode='shadow']) .slds-medium-size_1-of-1,
+    :host([data-render-mode='shadow'].slds-medium-size_1-of-1) {
         width: 100%;
     }
 
-    .slds-medium-size_1-of-2,
-    :host(.slds-medium-size_1-of-2) {
+    :host([data-render-mode='shadow']) .slds-medium-size_1-of-2,
+    :host([data-render-mode='shadow'].slds-medium-size_1-of-2) {
         width: 50%;
     }
 
-    .slds-medium-size_2-of-2,
-    :host(.slds-medium-size_2-of-2) {
+    :host([data-render-mode='shadow']) .slds-medium-size_2-of-2,
+    :host([data-render-mode='shadow'].slds-medium-size_2-of-2) {
         width: 100%;
     }
 
-    .slds-medium-size_1-of-3,
-    :host(.slds-medium-size_1-of-3) {
+    :host([data-render-mode='shadow']) .slds-medium-size_1-of-3,
+    :host([data-render-mode='shadow'].slds-medium-size_1-of-3) {
         width: 33.3333333333%;
     }
 
-    .slds-medium-size_2-of-3,
-    :host(.slds-medium-size_2-of-3) {
+    :host([data-render-mode='shadow']) .slds-medium-size_2-of-3,
+    :host([data-render-mode='shadow'].slds-medium-size_2-of-3) {
         width: 66.6666666667%;
     }
 
-    .slds-medium-size_3-of-3,
-    :host(.slds-medium-size_3-of-3) {
+    :host([data-render-mode='shadow']) .slds-medium-size_3-of-3,
+    :host([data-render-mode='shadow'].slds-medium-size_3-of-3) {
         width: 100%;
     }
 
-    .slds-medium-size_1-of-4,
-    :host(.slds-medium-size_1-of-4) {
+    :host([data-render-mode='shadow']) .slds-medium-size_1-of-4,
+    :host([data-render-mode='shadow'].slds-medium-size_1-of-4) {
         width: 25%;
     }
 
-    .slds-medium-size_2-of-4,
-    :host(.slds-medium-size_2-of-4) {
+    :host([data-render-mode='shadow']) .slds-medium-size_2-of-4,
+    :host([data-render-mode='shadow'].slds-medium-size_2-of-4) {
         width: 50%;
     }
 
-    .slds-medium-size_3-of-4,
-    :host(.slds-medium-size_3-of-4) {
+    :host([data-render-mode='shadow']) .slds-medium-size_3-of-4,
+    :host([data-render-mode='shadow'].slds-medium-size_3-of-4) {
         width: 75%;
     }
 
-    .slds-medium-size_4-of-4,
-    :host(.slds-medium-size_4-of-4) {
+    :host([data-render-mode='shadow']) .slds-medium-size_4-of-4,
+    :host([data-render-mode='shadow'].slds-medium-size_4-of-4) {
         width: 100%;
     }
 
-    .slds-medium-size_1-of-5,
-    :host(.slds-medium-size_1-of-5) {
+    :host([data-render-mode='shadow']) .slds-medium-size_1-of-5,
+    :host([data-render-mode='shadow'].slds-medium-size_1-of-5) {
         width: 20%;
     }
 
-    .slds-medium-size_2-of-5,
-    :host(.slds-medium-size_2-of-5) {
+    :host([data-render-mode='shadow']) .slds-medium-size_2-of-5,
+    :host([data-render-mode='shadow'].slds-medium-size_2-of-5) {
         width: 40%;
     }
 
-    .slds-medium-size_3-of-5,
-    :host(.slds-medium-size_3-of-5) {
+    :host([data-render-mode='shadow']) .slds-medium-size_3-of-5,
+    :host([data-render-mode='shadow'].slds-medium-size_3-of-5) {
         width: 60%;
     }
 
-    .slds-medium-size_4-of-5,
-    :host(.slds-medium-size_4-of-5) {
+    :host([data-render-mode='shadow']) .slds-medium-size_4-of-5,
+    :host([data-render-mode='shadow'].slds-medium-size_4-of-5) {
         width: 80%;
     }
 
-    .slds-medium-size_5-of-5,
-    :host(.slds-medium-size_5-of-5) {
+    :host([data-render-mode='shadow']) .slds-medium-size_5-of-5,
+    :host([data-render-mode='shadow'].slds-medium-size_5-of-5) {
         width: 100%;
     }
 
-    .slds-medium-size_1-of-6,
-    :host(.slds-medium-size_1-of-6) {
+    :host([data-render-mode='shadow']) .slds-medium-size_1-of-6,
+    :host([data-render-mode='shadow'].slds-medium-size_1-of-6) {
         width: 16.6666666667%;
     }
 
-    .slds-medium-size_2-of-6,
-    :host(.slds-medium-size_2-of-6) {
+    :host([data-render-mode='shadow']) .slds-medium-size_2-of-6,
+    :host([data-render-mode='shadow'].slds-medium-size_2-of-6) {
         width: 33.3333333333%;
     }
 
-    .slds-medium-size_3-of-6,
-    :host(.slds-medium-size_3-of-6) {
+    :host([data-render-mode='shadow']) .slds-medium-size_3-of-6,
+    :host([data-render-mode='shadow'].slds-medium-size_3-of-6) {
         width: 50%;
     }
 
-    .slds-medium-size_4-of-6,
-    :host(.slds-medium-size_4-of-6) {
+    :host([data-render-mode='shadow']) .slds-medium-size_4-of-6,
+    :host([data-render-mode='shadow'].slds-medium-size_4-of-6) {
         width: 66.6666666667%;
     }
 
-    .slds-medium-size_5-of-6,
-    :host(.slds-medium-size_5-of-6) {
+    :host([data-render-mode='shadow']) .slds-medium-size_5-of-6,
+    :host([data-render-mode='shadow'].slds-medium-size_5-of-6) {
         width: 83.3333333333%;
     }
 
-    .slds-medium-size_6-of-6,
-    :host(.slds-medium-size_6-of-6) {
+    :host([data-render-mode='shadow']) .slds-medium-size_6-of-6,
+    :host([data-render-mode='shadow'].slds-medium-size_6-of-6) {
         width: 100%;
     }
 
-    .slds-medium-size_1-of-7,
-    :host(.slds-medium-size_1-of-7) {
+    :host([data-render-mode='shadow']) .slds-medium-size_1-of-7,
+    :host([data-render-mode='shadow'].slds-medium-size_1-of-7) {
         width: 14.2857142857%;
     }
 
-    .slds-medium-size_2-of-7,
-    :host(.slds-medium-size_2-of-7) {
+    :host([data-render-mode='shadow']) .slds-medium-size_2-of-7,
+    :host([data-render-mode='shadow'].slds-medium-size_2-of-7) {
         width: 28.5714285714%;
     }
 
-    .slds-medium-size_3-of-7,
-    :host(.slds-medium-size_3-of-7) {
+    :host([data-render-mode='shadow']) .slds-medium-size_3-of-7,
+    :host([data-render-mode='shadow'].slds-medium-size_3-of-7) {
         width: 42.8571428571%;
     }
 
-    .slds-medium-size_4-of-7,
-    :host(.slds-medium-size_4-of-7) {
+    :host([data-render-mode='shadow']) .slds-medium-size_4-of-7,
+    :host([data-render-mode='shadow'].slds-medium-size_4-of-7) {
         width: 57.1428571429%;
     }
 
-    .slds-medium-size_5-of-7,
-    :host(.slds-medium-size_5-of-7) {
+    :host([data-render-mode='shadow']) .slds-medium-size_5-of-7,
+    :host([data-render-mode='shadow'].slds-medium-size_5-of-7) {
         width: 71.4285714286%;
     }
 
-    .slds-medium-size_6-of-7,
-    :host(.slds-medium-size_6-of-7) {
+    :host([data-render-mode='shadow']) .slds-medium-size_6-of-7,
+    :host([data-render-mode='shadow'].slds-medium-size_6-of-7) {
         width: 85.7142857143%;
     }
 
-    .slds-medium-size_7-of-7,
-    :host(.slds-medium-size_7-of-7) {
+    :host([data-render-mode='shadow']) .slds-medium-size_7-of-7,
+    :host([data-render-mode='shadow'].slds-medium-size_7-of-7) {
         width: 100%;
     }
 
-    .slds-medium-size_1-of-8,
-    :host(.slds-medium-size_1-of-8) {
+    :host([data-render-mode='shadow']) .slds-medium-size_1-of-8,
+    :host([data-render-mode='shadow'].slds-medium-size_1-of-8) {
         width: 12.5%;
     }
 
-    .slds-medium-size_2-of-8,
-    :host(.slds-medium-size_2-of-8) {
+    :host([data-render-mode='shadow']) .slds-medium-size_2-of-8,
+    :host([data-render-mode='shadow'].slds-medium-size_2-of-8) {
         width: 25%;
     }
 
-    .slds-medium-size_3-of-8,
-    :host(.slds-medium-size_3-of-8) {
+    :host([data-render-mode='shadow']) .slds-medium-size_3-of-8,
+    :host([data-render-mode='shadow'].slds-medium-size_3-of-8) {
         width: 37.5%;
     }
 
-    .slds-medium-size_4-of-8,
-    :host(.slds-medium-size_4-of-8) {
+    :host([data-render-mode='shadow']) .slds-medium-size_4-of-8,
+    :host([data-render-mode='shadow'].slds-medium-size_4-of-8) {
         width: 50%;
     }
 
-    .slds-medium-size_5-of-8,
-    :host(.slds-medium-size_5-of-8) {
+    :host([data-render-mode='shadow']) .slds-medium-size_5-of-8,
+    :host([data-render-mode='shadow'].slds-medium-size_5-of-8) {
         width: 62.5%;
     }
 
-    .slds-medium-size_6-of-8,
-    :host(.slds-medium-size_6-of-8) {
+    :host([data-render-mode='shadow']) .slds-medium-size_6-of-8,
+    :host([data-render-mode='shadow'].slds-medium-size_6-of-8) {
         width: 75%;
     }
 
-    .slds-medium-size_7-of-8,
-    :host(.slds-medium-size_7-of-8) {
+    :host([data-render-mode='shadow']) .slds-medium-size_7-of-8,
+    :host([data-render-mode='shadow'].slds-medium-size_7-of-8) {
         width: 87.5%;
     }
 
-    .slds-medium-size_8-of-8,
-    :host(.slds-medium-size_8-of-8) {
+    :host([data-render-mode='shadow']) .slds-medium-size_8-of-8,
+    :host([data-render-mode='shadow'].slds-medium-size_8-of-8) {
         width: 100%;
     }
 
-    .slds-medium-size_1-of-12,
-    :host(.slds-medium-size_1-of-12) {
+    :host([data-render-mode='shadow']) .slds-medium-size_1-of-12,
+    :host([data-render-mode='shadow'].slds-medium-size_1-of-12) {
         width: 8.3333333333%;
     }
 
-    .slds-medium-size_2-of-12,
-    :host(.slds-medium-size_2-of-12) {
+    :host([data-render-mode='shadow']) .slds-medium-size_2-of-12,
+    :host([data-render-mode='shadow'].slds-medium-size_2-of-12) {
         width: 16.6666666667%;
     }
 
-    .slds-medium-size_3-of-12,
-    :host(.slds-medium-size_3-of-12) {
+    :host([data-render-mode='shadow']) .slds-medium-size_3-of-12,
+    :host([data-render-mode='shadow'].slds-medium-size_3-of-12) {
         width: 25%;
     }
 
-    .slds-medium-size_4-of-12,
-    :host(.slds-medium-size_4-of-12) {
+    :host([data-render-mode='shadow']) .slds-medium-size_4-of-12,
+    :host([data-render-mode='shadow'].slds-medium-size_4-of-12) {
         width: 33.3333333333%;
     }
 
-    .slds-medium-size_5-of-12,
-    :host(.slds-medium-size_5-of-12) {
+    :host([data-render-mode='shadow']) .slds-medium-size_5-of-12,
+    :host([data-render-mode='shadow'].slds-medium-size_5-of-12) {
         width: 41.6666666667%;
     }
 
-    .slds-medium-size_6-of-12,
-    :host(.slds-medium-size_6-of-12) {
+    :host([data-render-mode='shadow']) .slds-medium-size_6-of-12,
+    :host([data-render-mode='shadow'].slds-medium-size_6-of-12) {
         width: 50%;
     }
 
-    .slds-medium-size_7-of-12,
-    :host(.slds-medium-size_7-of-12) {
+    :host([data-render-mode='shadow']) .slds-medium-size_7-of-12,
+    :host([data-render-mode='shadow'].slds-medium-size_7-of-12) {
         width: 58.3333333333%;
     }
 
-    .slds-medium-size_8-of-12,
-    :host(.slds-medium-size_8-of-12) {
+    :host([data-render-mode='shadow']) .slds-medium-size_8-of-12,
+    :host([data-render-mode='shadow'].slds-medium-size_8-of-12) {
         width: 66.6666666667%;
     }
 
-    .slds-medium-size_9-of-12,
-    :host(.slds-medium-size_9-of-12) {
+    :host([data-render-mode='shadow']) .slds-medium-size_9-of-12,
+    :host([data-render-mode='shadow'].slds-medium-size_9-of-12) {
         width: 75%;
     }
 
-    .slds-medium-size_10-of-12,
-    :host(.slds-medium-size_10-of-12) {
+    :host([data-render-mode='shadow']) .slds-medium-size_10-of-12,
+    :host([data-render-mode='shadow'].slds-medium-size_10-of-12) {
         width: 83.3333333333%;
     }
 
-    .slds-medium-size_11-of-12,
-    :host(.slds-medium-size_11-of-12) {
+    :host([data-render-mode='shadow']) .slds-medium-size_11-of-12,
+    :host([data-render-mode='shadow'].slds-medium-size_11-of-12) {
         width: 91.6666666667%;
     }
 
-    .slds-medium-size_12-of-12,
-    :host(.slds-medium-size_12-of-12) {
+    :host([data-render-mode='shadow']) .slds-medium-size_12-of-12,
+    :host([data-render-mode='shadow'].slds-medium-size_12-of-12) {
         width: 100%;
     }
 
-    .slds-medium-order_1,
-    :host(.slds-medium-order_1) {
+    :host([data-render-mode='shadow']) .slds-medium-order_1,
+    :host([data-render-mode='shadow'].slds-medium-order_1) {
         order: 1;
     }
 
-    .slds-medium-order_2,
-    :host(.slds-medium-order_2) {
+    :host([data-render-mode='shadow']) .slds-medium-order_2,
+    :host([data-render-mode='shadow'].slds-medium-order_2) {
         order: 2;
     }
 
-    .slds-medium-order_3,
-    :host(.slds-medium-order_3) {
+    :host([data-render-mode='shadow']) .slds-medium-order_3,
+    :host([data-render-mode='shadow'].slds-medium-order_3) {
         order: 3;
     }
 
-    .slds-medium-order_4,
-    :host(.slds-medium-order_4) {
+    :host([data-render-mode='shadow']) .slds-medium-order_4,
+    :host([data-render-mode='shadow'].slds-medium-order_4) {
         order: 4;
     }
 
-    .slds-medium-order_5,
-    :host(.slds-medium-order_5) {
+    :host([data-render-mode='shadow']) .slds-medium-order_5,
+    :host([data-render-mode='shadow'].slds-medium-order_5) {
         order: 5;
     }
 
-    .slds-medium-order_6,
-    :host(.slds-medium-order_6) {
+    :host([data-render-mode='shadow']) .slds-medium-order_6,
+    :host([data-render-mode='shadow'].slds-medium-order_6) {
         order: 6;
     }
 
-    .slds-medium-order_7,
-    :host(.slds-medium-order_7) {
+    :host([data-render-mode='shadow']) .slds-medium-order_7,
+    :host([data-render-mode='shadow'].slds-medium-order_7) {
         order: 7;
     }
 
-    .slds-medium-order_8,
-    :host(.slds-medium-order_8) {
+    :host([data-render-mode='shadow']) .slds-medium-order_8,
+    :host([data-render-mode='shadow'].slds-medium-order_8) {
         order: 8;
     }
 
-    .slds-medium-order_9,
-    :host(.slds-medium-order_9) {
+    :host([data-render-mode='shadow']) .slds-medium-order_9,
+    :host([data-render-mode='shadow'].slds-medium-order_9) {
         order: 9;
     }
 
-    .slds-medium-order_10,
-    :host(.slds-medium-order_10) {
+    :host([data-render-mode='shadow']) .slds-medium-order_10,
+    :host([data-render-mode='shadow'].slds-medium-order_10) {
         order: 10;
     }
 
-    .slds-medium-order_11,
-    :host(.slds-medium-order_11) {
+    :host([data-render-mode='shadow']) .slds-medium-order_11,
+    :host([data-render-mode='shadow'].slds-medium-order_11) {
         order: 11;
     }
 
-    .slds-medium-order_12,
-    :host(.slds-medium-order_12) {
+    :host([data-render-mode='shadow']) .slds-medium-order_12,
+    :host([data-render-mode='shadow'].slds-medium-order_12) {
         order: 12;
     }
-
 }
 
 /* Size Large + Order */
 
 @media (min-width: 64em) {
-
-    [class*=slds-large-size_],
-    :host([class*=slds-large-size_]) {
+    :host([data-render-mode='shadow']) [class*='slds-large-size_'],
+    :host([data-render-mode='shadow'][class*='slds-large-size_']) {
         flex: none;
     }
 
-    .slds-large-size_xxx-small,
-    :host(.slds-large-size_xxx-small) {
+    :host([data-render-mode='shadow']) .slds-large-size_xxx-small,
+    :host([data-render-mode='shadow'].slds-large-size_xxx-small) {
         width: 3rem;
     }
 
-    .slds-large-size_xx-small,
-    :host(.slds-large-size_xx-small) {
+    :host([data-render-mode='shadow']) .slds-large-size_xx-small,
+    :host([data-render-mode='shadow'].slds-large-size_xx-small) {
         width: 6rem;
     }
 
-    .slds-large-size_x-small,
-    :host(.slds-large-size_x-small) {
+    :host([data-render-mode='shadow']) .slds-large-size_x-small,
+    :host([data-render-mode='shadow'].slds-large-size_x-small) {
         width: 12rem;
     }
 
-    .slds-large-size_small,
-    :host(.slds-large-size_small) {
+    :host([data-render-mode='shadow']) .slds-large-size_small,
+    :host([data-render-mode='shadow'].slds-large-size_small) {
         width: 15rem;
     }
 
-    .slds-large-size_medium,
-    :host(.slds-large-size_medium) {
+    :host([data-render-mode='shadow']) .slds-large-size_medium,
+    :host([data-render-mode='shadow'].slds-large-size_medium) {
         width: 20rem;
     }
 
-    .slds-large-size_large,
-    :host(.slds-large-size_large) {
+    :host([data-render-mode='shadow']) .slds-large-size_large,
+    :host([data-render-mode='shadow'].slds-large-size_large) {
         width: 25rem;
     }
 
-    .slds-large-size_x-large,
-    :host(.slds-large-size_x-large) {
+    :host([data-render-mode='shadow']) .slds-large-size_x-large,
+    :host([data-render-mode='shadow'].slds-large-size_x-large) {
         width: 40rem;
     }
 
-    .slds-large-size_xx-large,
-    :host(.slds-large-size_xx-large) {
+    :host([data-render-mode='shadow']) .slds-large-size_xx-large,
+    :host([data-render-mode='shadow'].slds-large-size_xx-large) {
         width: 60rem;
     }
 
-    .slds-large-size_1-of-1,
-    :host(.slds-large-size_1-of-1) {
+    :host([data-render-mode='shadow']) .slds-large-size_1-of-1,
+    :host([data-render-mode='shadow'].slds-large-size_1-of-1) {
         width: 100%;
     }
 
-    .slds-large-size_1-of-2,
-    :host(.slds-large-size_1-of-2) {
+    :host([data-render-mode='shadow']) .slds-large-size_1-of-2,
+    :host([data-render-mode='shadow'].slds-large-size_1-of-2) {
         width: 50%;
     }
 
-    .slds-large-size_2-of-2,
-    :host(.slds-large-size_2-of-2) {
+    :host([data-render-mode='shadow']) .slds-large-size_2-of-2,
+    :host([data-render-mode='shadow'].slds-large-size_2-of-2) {
         width: 100%;
     }
 
-    .slds-large-size_1-of-3,
-    :host(.slds-large-size_1-of-3) {
+    :host([data-render-mode='shadow']) .slds-large-size_1-of-3,
+    :host([data-render-mode='shadow'].slds-large-size_1-of-3) {
         width: 33.3333333333%;
     }
 
-    .slds-large-size_2-of-3,
-    :host(.slds-large-size_2-of-3) {
+    :host([data-render-mode='shadow']) .slds-large-size_2-of-3,
+    :host([data-render-mode='shadow'].slds-large-size_2-of-3) {
         width: 66.6666666667%;
     }
 
-    .slds-large-size_3-of-3,
-    :host(.slds-large-size_3-of-3) {
+    :host([data-render-mode='shadow']) .slds-large-size_3-of-3,
+    :host([data-render-mode='shadow'].slds-large-size_3-of-3) {
         width: 100%;
     }
 
-    .slds-large-size_1-of-4,
-    :host(.slds-large-size_1-of-4) {
+    :host([data-render-mode='shadow']) .slds-large-size_1-of-4,
+    :host([data-render-mode='shadow'].slds-large-size_1-of-4) {
         width: 25%;
     }
 
-    .slds-large-size_2-of-4,
-    :host(.slds-large-size_2-of-4) {
+    :host([data-render-mode='shadow']) .slds-large-size_2-of-4,
+    :host([data-render-mode='shadow'].slds-large-size_2-of-4) {
         width: 50%;
     }
 
-    .slds-large-size_3-of-4,
-    :host(.slds-large-size_3-of-4) {
+    :host([data-render-mode='shadow']) .slds-large-size_3-of-4,
+    :host([data-render-mode='shadow'].slds-large-size_3-of-4) {
         width: 75%;
     }
 
-    .slds-large-size_4-of-4,
-    :host(.slds-large-size_4-of-4) {
+    :host([data-render-mode='shadow']) .slds-large-size_4-of-4,
+    :host([data-render-mode='shadow'].slds-large-size_4-of-4) {
         width: 100%;
     }
 
-    .slds-large-size_1-of-5,
-    :host(.slds-large-size_1-of-5) {
+    :host([data-render-mode='shadow']) .slds-large-size_1-of-5,
+    :host([data-render-mode='shadow'].slds-large-size_1-of-5) {
         width: 20%;
     }
 
-    .slds-large-size_2-of-5,
-    :host(.slds-large-size_2-of-5) {
+    :host([data-render-mode='shadow']) .slds-large-size_2-of-5,
+    :host([data-render-mode='shadow'].slds-large-size_2-of-5) {
         width: 40%;
     }
 
-    .slds-large-size_3-of-5,
-    :host(.slds-large-size_3-of-5) {
+    :host([data-render-mode='shadow']) .slds-large-size_3-of-5,
+    :host([data-render-mode='shadow'].slds-large-size_3-of-5) {
         width: 60%;
     }
 
-    .slds-large-size_4-of-5,
-    :host(.slds-large-size_4-of-5) {
+    :host([data-render-mode='shadow']) .slds-large-size_4-of-5,
+    :host([data-render-mode='shadow'].slds-large-size_4-of-5) {
         width: 80%;
     }
 
-    .slds-large-size_5-of-5,
-    :host(.slds-large-size_5-of-5) {
+    :host([data-render-mode='shadow']) .slds-large-size_5-of-5,
+    :host([data-render-mode='shadow'].slds-large-size_5-of-5) {
         width: 100%;
     }
 
-    .slds-large-size_1-of-6,
-    :host(.slds-large-size_1-of-6) {
+    :host([data-render-mode='shadow']) .slds-large-size_1-of-6,
+    :host([data-render-mode='shadow'].slds-large-size_1-of-6) {
         width: 16.6666666667%;
     }
 
-    .slds-large-size_2-of-6,
-    :host(.slds-large-size_2-of-6) {
+    :host([data-render-mode='shadow']) .slds-large-size_2-of-6,
+    :host([data-render-mode='shadow'].slds-large-size_2-of-6) {
         width: 33.3333333333%;
     }
 
-    .slds-large-size_3-of-6,
-    :host(.slds-large-size_3-of-6) {
+    :host([data-render-mode='shadow']) .slds-large-size_3-of-6,
+    :host([data-render-mode='shadow'].slds-large-size_3-of-6) {
         width: 50%;
     }
 
-    .slds-large-size_4-of-6,
-    :host(.slds-large-size_4-of-6) {
+    :host([data-render-mode='shadow']) .slds-large-size_4-of-6,
+    :host([data-render-mode='shadow'].slds-large-size_4-of-6) {
         width: 66.6666666667%;
     }
 
-    .slds-large-size_5-of-6,
-    :host(.slds-large-size_5-of-6) {
+    :host([data-render-mode='shadow']) .slds-large-size_5-of-6,
+    :host([data-render-mode='shadow'].slds-large-size_5-of-6) {
         width: 83.3333333333%;
     }
 
-    .slds-large-size_6-of-6,
-    :host(.slds-large-size_6-of-6) {
+    :host([data-render-mode='shadow']) .slds-large-size_6-of-6,
+    :host([data-render-mode='shadow'].slds-large-size_6-of-6) {
         width: 100%;
     }
 
-    .slds-large-size_1-of-7,
-    :host(.slds-large-size_1-of-7) {
+    :host([data-render-mode='shadow']) .slds-large-size_1-of-7,
+    :host([data-render-mode='shadow'].slds-large-size_1-of-7) {
         width: 14.2857142857%;
     }
 
-    .slds-large-size_2-of-7,
-    :host(.slds-large-size_2-of-7) {
+    :host([data-render-mode='shadow']) .slds-large-size_2-of-7,
+    :host([data-render-mode='shadow'].slds-large-size_2-of-7) {
         width: 28.5714285714%;
     }
 
-    .slds-large-size_3-of-7,
-    :host(.slds-large-size_3-of-7) {
+    :host([data-render-mode='shadow']) .slds-large-size_3-of-7,
+    :host([data-render-mode='shadow'].slds-large-size_3-of-7) {
         width: 42.8571428571%;
     }
 
-    .slds-large-size_4-of-7,
-    :host(.slds-large-size_4-of-7) {
+    :host([data-render-mode='shadow']) .slds-large-size_4-of-7,
+    :host([data-render-mode='shadow'].slds-large-size_4-of-7) {
         width: 57.1428571429%;
     }
 
-    .slds-large-size_5-of-7,
-    :host(.slds-large-size_5-of-7) {
+    :host([data-render-mode='shadow']) .slds-large-size_5-of-7,
+    :host([data-render-mode='shadow'].slds-large-size_5-of-7) {
         width: 71.4285714286%;
     }
 
-    .slds-large-size_6-of-7,
-    :host(.slds-large-size_6-of-7) {
+    :host([data-render-mode='shadow']) .slds-large-size_6-of-7,
+    :host([data-render-mode='shadow'].slds-large-size_6-of-7) {
         width: 85.7142857143%;
     }
 
-    .slds-large-size_7-of-7,
-    :host(.slds-large-size_7-of-7) {
+    :host([data-render-mode='shadow']) .slds-large-size_7-of-7,
+    :host([data-render-mode='shadow'].slds-large-size_7-of-7) {
         width: 100%;
     }
 
-    .slds-large-size_1-of-8,
-    :host(.slds-large-size_1-of-8) {
+    :host([data-render-mode='shadow']) .slds-large-size_1-of-8,
+    :host([data-render-mode='shadow'].slds-large-size_1-of-8) {
         width: 12.5%;
     }
 
-    .slds-large-size_2-of-8,
-    :host(.slds-large-size_2-of-8) {
+    :host([data-render-mode='shadow']) .slds-large-size_2-of-8,
+    :host([data-render-mode='shadow'].slds-large-size_2-of-8) {
         width: 25%;
     }
 
-    .slds-large-size_3-of-8,
-    :host(.slds-large-size_3-of-8) {
+    :host([data-render-mode='shadow']) .slds-large-size_3-of-8,
+    :host([data-render-mode='shadow'].slds-large-size_3-of-8) {
         width: 37.5%;
     }
 
-    .slds-large-size_4-of-8,
-    :host(.slds-large-size_4-of-8) {
+    :host([data-render-mode='shadow']) .slds-large-size_4-of-8,
+    :host([data-render-mode='shadow'].slds-large-size_4-of-8) {
         width: 50%;
     }
 
-    .slds-large-size_5-of-8,
-    :host(.slds-large-size_5-of-8) {
+    :host([data-render-mode='shadow']) .slds-large-size_5-of-8,
+    :host([data-render-mode='shadow'].slds-large-size_5-of-8) {
         width: 62.5%;
     }
 
-    .slds-large-size_6-of-8,
-    :host(.slds-large-size_6-of-8) {
+    :host([data-render-mode='shadow']) .slds-large-size_6-of-8,
+    :host([data-render-mode='shadow'].slds-large-size_6-of-8) {
         width: 75%;
     }
 
-    .slds-large-size_7-of-8,
-    :host(.slds-large-size_7-of-8) {
+    :host([data-render-mode='shadow']) .slds-large-size_7-of-8,
+    :host([data-render-mode='shadow'].slds-large-size_7-of-8) {
         width: 87.5%;
     }
 
-    .slds-large-size_8-of-8,
-    :host(.slds-large-size_8-of-8) {
+    :host([data-render-mode='shadow']) .slds-large-size_8-of-8,
+    :host([data-render-mode='shadow'].slds-large-size_8-of-8) {
         width: 100%;
     }
 
-    .slds-large-size_1-of-12,
-    :host(.slds-large-size_1-of-12) {
+    :host([data-render-mode='shadow']) .slds-large-size_1-of-12,
+    :host([data-render-mode='shadow'].slds-large-size_1-of-12) {
         width: 8.3333333333%;
     }
 
-    .slds-large-size_2-of-12,
-    :host(.slds-large-size_2-of-12) {
+    :host([data-render-mode='shadow']) .slds-large-size_2-of-12,
+    :host([data-render-mode='shadow'].slds-large-size_2-of-12) {
         width: 16.6666666667%;
     }
 
-    .slds-large-size_3-of-12,
-    :host(.slds-large-size_3-of-12) {
+    :host([data-render-mode='shadow']) .slds-large-size_3-of-12,
+    :host([data-render-mode='shadow'].slds-large-size_3-of-12) {
         width: 25%;
     }
 
-    .slds-large-size_4-of-12,
-    :host(.slds-large-size_4-of-12) {
+    :host([data-render-mode='shadow']) .slds-large-size_4-of-12,
+    :host([data-render-mode='shadow'].slds-large-size_4-of-12) {
         width: 33.3333333333%;
     }
 
-    .slds-large-size_5-of-12,
-    :host(.slds-large-size_5-of-12) {
+    :host([data-render-mode='shadow']) .slds-large-size_5-of-12,
+    :host([data-render-mode='shadow'].slds-large-size_5-of-12) {
         width: 41.6666666667%;
     }
 
-    .slds-large-size_6-of-12,
-    :host(.slds-large-size_6-of-12) {
+    :host([data-render-mode='shadow']) .slds-large-size_6-of-12,
+    :host([data-render-mode='shadow'].slds-large-size_6-of-12) {
         width: 50%;
     }
 
-    .slds-large-size_7-of-12,
-    :host(.slds-large-size_7-of-12) {
+    :host([data-render-mode='shadow']) .slds-large-size_7-of-12,
+    :host([data-render-mode='shadow'].slds-large-size_7-of-12) {
         width: 58.3333333333%;
     }
 
-    .slds-large-size_8-of-12,
-    :host(.slds-large-size_8-of-12) {
+    :host([data-render-mode='shadow']) .slds-large-size_8-of-12,
+    :host([data-render-mode='shadow'].slds-large-size_8-of-12) {
         width: 66.6666666667%;
     }
 
-    .slds-large-size_9-of-12,
-    :host(.slds-large-size_9-of-12) {
+    :host([data-render-mode='shadow']) .slds-large-size_9-of-12,
+    :host([data-render-mode='shadow'].slds-large-size_9-of-12) {
         width: 75%;
     }
 
-    .slds-large-size_10-of-12,
-    :host(.slds-large-size_10-of-12) {
+    :host([data-render-mode='shadow']) .slds-large-size_10-of-12,
+    :host([data-render-mode='shadow'].slds-large-size_10-of-12) {
         width: 83.3333333333%;
     }
 
-    .slds-large-size_11-of-12,
-    :host(.slds-large-size_11-of-12) {
+    :host([data-render-mode='shadow']) .slds-large-size_11-of-12,
+    :host([data-render-mode='shadow'].slds-large-size_11-of-12) {
         width: 91.6666666667%;
     }
 
-    .slds-large-size_12-of-12,
-    :host(.slds-large-size_12-of-12) {
+    :host([data-render-mode='shadow']) .slds-large-size_12-of-12,
+    :host([data-render-mode='shadow'].slds-large-size_12-of-12) {
         width: 100%;
     }
 
-    .slds-large-order_1,
-    :host(.slds-large-order_1) {
+    :host([data-render-mode='shadow']) .slds-large-order_1,
+    :host([data-render-mode='shadow'].slds-large-order_1) {
         order: 1;
     }
 
-    .slds-large-order_2,
-    :host(.slds-large-order_2) {
+    :host([data-render-mode='shadow']) .slds-large-order_2,
+    :host([data-render-mode='shadow'].slds-large-order_2) {
         order: 2;
     }
 
-    .slds-large-order_3,
-    :host(.slds-large-order_3) {
+    :host([data-render-mode='shadow']) .slds-large-order_3,
+    :host([data-render-mode='shadow'].slds-large-order_3) {
         order: 3;
     }
 
-    .slds-large-order_4,
-    :host(.slds-large-order_4) {
+    :host([data-render-mode='shadow']) .slds-large-order_4,
+    :host([data-render-mode='shadow'].slds-large-order_4) {
         order: 4;
     }
 
-    .slds-large-order_5,
-    :host(.slds-large-order_5) {
+    :host([data-render-mode='shadow']) .slds-large-order_5,
+    :host([data-render-mode='shadow'].slds-large-order_5) {
         order: 5;
     }
 
-    .slds-large-order_6,
-    :host(.slds-large-order_6) {
+    :host([data-render-mode='shadow']) .slds-large-order_6,
+    :host([data-render-mode='shadow'].slds-large-order_6) {
         order: 6;
     }
 
-    .slds-large-order_7,
-    :host(.slds-large-order_7) {
+    :host([data-render-mode='shadow']) .slds-large-order_7,
+    :host([data-render-mode='shadow'].slds-large-order_7) {
         order: 7;
     }
 
-    .slds-large-order_8,
-    :host(.slds-large-order_8) {
+    :host([data-render-mode='shadow']) .slds-large-order_8,
+    :host([data-render-mode='shadow'].slds-large-order_8) {
         order: 8;
     }
 
-    .slds-large-order_9,
-    :host(.slds-large-order_9) {
+    :host([data-render-mode='shadow']) .slds-large-order_9,
+    :host([data-render-mode='shadow'].slds-large-order_9) {
         order: 9;
     }
 
-    .slds-large-order_10,
-    :host(.slds-large-order_10) {
+    :host([data-render-mode='shadow']) .slds-large-order_10,
+    :host([data-render-mode='shadow'].slds-large-order_10) {
         order: 10;
     }
 
-    .slds-large-order_11,
-    :host(.slds-large-order_11) {
+    :host([data-render-mode='shadow']) .slds-large-order_11,
+    :host([data-render-mode='shadow'].slds-large-order_11) {
         order: 11;
     }
 
-    .slds-large-order_12,
-    :host(.slds-large-order_12) {
+    :host([data-render-mode='shadow']) .slds-large-order_12,
+    :host([data-render-mode='shadow'].slds-large-order_12) {
         order: 12;
     }
-
 }