npm - scu-web-components - Versions diffs - 0.0.38 → 0.0.40 - Mend

scu-web-components 0.0.38 → 0.0.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/dist/custom-elements.json +1747 -1747
package/dist/custom-elements.json.gz +0 -0
package/dist/docs/components/manifest.json +49 -49
package/dist/docs/config.json +1 -1
package/dist/tokens/css.html +2 -2
package/dist/tokens/css.html.gz +0 -0
package/dist/tokens/source/cssPropertiesApi.css +247 -215
package/dist/tokens/source/cssPropertiesApi.css.gz +0 -0
package/dist/tokens/source/cssPropertiesApi.ts +7 -2
package/dist/tokens/source/cssPropertiesApiTypedStyles.ts +15 -5
package/dist/tokens/source/cssPropertiesApiTypedStylesCssType.ts +12 -4
package/dist/tokens/source/jsCss.js +1 -1
package/dist/tokens/source/jsCss.js.gz +0 -0
package/dist/tokens/source/jsCssGenerator.js +1 -1
package/dist/tokens/source/jsCssGenerator.js.gz +0 -0
package/dist/tokens/source/jsCssGeneratorSansAssets.js +1 -1
package/dist/tokens/source/jsCssGeneratorSansAssets.js.gz +0 -0
package/dist/tokens/tokens.html +2 -2
package/dist/tokens/tokens.html.gz +0 -0
package/package.json +2 -2

package/dist/tokens/source/cssPropertiesApi.css CHANGED Viewed

@@ -1,219 +1,223 @@
-[style*="--scw-background-color: var("] {
+[style~="--scw-background-color:"] {
   --background-color: var( --scw-color-01, var( --scw-background-color ));
   background-color: var( --background-color );
 }
-[style*="--scw-background-color-hover: var("]:hover {
+[style~="--scw-background-color-hover:"]:hover {
   background-color: var( --scw-color-01, var( --scw-background-color-hover ));
 }
-[style*="--scw-color: var("] {
+[style~="--scw-color:"] {
   --color: var( --scw-color-01, var( --scw-color ));
   color: var( --color );
 }
-[style*="--scw-color-hover: var("]:hover {
+[style~="--scw-color-hover:"]:hover {
   color: var( --scw-color-01, var( --scw-color-hover ));
 }
-[style*="--scw-border-color: var("] {
+[style~="--scw-border-color:"] {
   border-color: var( --scw-color-01, var( --scw-border-color ));
 }
-[style*="--scw-border-top: var("] {
+[style~="--scw-border-top:"] {
   border-top: 1px solid var( --scw-color-01, var( --scw-border-top ));
 }
-[style*="--scw-border-bottom: var("] {
+[style~="--scw-border-bottom:"] {
   border-bottom: 1px solid var( --scw-color-01, var( --scw-border-bottom ));
 }
-[style*="--scw-border-left: var("] {
+[style~="--scw-border-left:"] {
   border-left: 1px solid var( --scw-color-01, var( --scw-border-left ));
 }
-[style*="--scw-border-right: var("] {
+[style~="--scw-border-right:"] {
   border-right: 1px solid var( --scw-color-01, var( --scw-border-right ));
 }
+[style~="--scw-border:"] {
+  border: 1px solid var( --scw-color-01, var( --scw-border ));
+}
-[style*="--scw-font: var("] {
+[style~="--scw-font:"] {
   font: var( --scw-font );
 }
-[style*="--scw-size: var("] {
+[style~="--scw-size:"] {
   width: var( --scw-size );
   height: var( --scw-size );
 }
-[style*="--scw-max-size: var("] {
+[style~="--scw-max-size:"] {
   max-width: var( --scw-max-size );
   max-height: var( --scw-max-size );
 }
-[style*="--scw-min-size: var("] {
+[style~="--scw-min-size:"] {
   min-width: var( --scw-min-size );
   min-height: var( --scw-min-size );
 }
-[style*="--scw-width: var("] {
+[style~="--scw-width:"] {
   width: var( --scw-width );
 }
-[style*="--scw-max-width: var("] {
+[style~="--scw-max-width:"] {
   max-width: var( --scw-max-width );
 }
-[style*="--scw-min-width: var("] {
+[style~="--scw-min-width:"] {
   min-width: var( --scw-min-width );
 }
-[style*="--scw-height: var("] {
+[style~="--scw-height:"] {
   height: var( --scw-height );
 }
-[style*="--scw-max-height: var("] {
+[style~="--scw-max-height:"] {
   max-height: var( --scw-max-height );
 }
-[style*="--scw-min-height: var("] {
+[style~="--scw-min-height:"] {
   min-height: var( --scw-min-height );
 }
-[style*="--scw-left: var("] {
+[style~="--scw-left:"] {
   left: var( --scw-left );
 }
-[style*="--scw-right: var("] {
+[style~="--scw-right:"] {
   right: var( --scw-right );
 }
-[style*="--scw-top: var("] {
+[style~="--scw-top:"] {
   top: var( --scw-top );
 }
-[style*="--scw-bottom: var("] {
+[style~="--scw-bottom:"] {
   bottom: var( --scw-bottom );
 }
-[style*="--scw-margin: var("] {
+[style~="--scw-margin:"] {
   margin: var( --scw-margin );
 }
-[style*="--scw-margin-left: var("] {
+[style~="--scw-margin-left:"] {
   margin-left: var( --scw-margin-left );
 }
-[style*="--scw-margin-right: var("] {
+[style~="--scw-margin-right:"] {
   margin-right: var( --scw-margin-right );
 }
-[style*="--scw-margin-top: var("] {
+[style~="--scw-margin-top:"] {
   margin-top: var( --scw-margin-top );
 }
-[style*="--scw-margin-bottom: var("] {
+[style~="--scw-margin-bottom:"] {
   margin-bottom: var( --scw-margin-bottom );
 }
-[style*="--scw-margin-width: var("] {
+[style~="--scw-margin-width:"] {
   margin-left: var( --scw-margin-width );
   margin-right: var( --scw-margin-width );
 }
-[style*="--scw-margin-x: var("] {
+[style~="--scw-margin-x:"] {
   margin-left: var( --scw-margin-x );
   margin-right: var( --scw-margin-x );
 }
-[style*="--scw-margin-height: var("] {
+[style~="--scw-margin-height:"] {
   margin-top: var( --scw-margin-height );
   margin-bottom: var( --scw-margin-height );
 }
-[style*="--scw-margin-y: var("] {
+[style~="--scw-margin-y:"] {
   margin-top: var( --scw-margin-y );
   margin-bottom: var( --scw-margin-y );
 }
-[style*="--scw-padding: var("] {
+[style~="--scw-padding:"] {
   padding: var( --scw-padding );
 }
-[style*="--scw-padding-left: var("] {
+[style~="--scw-padding-left:"] {
   padding-left: var( --scw-padding-left );
 }
-[style*="--scw-padding-right: var("] {
+[style~="--scw-padding-right:"] {
   padding-right: var( --scw-padding-right );
 }
-[style*="--scw-padding-top: var("] {
+[style~="--scw-padding-top:"] {
   padding-top: var( --scw-padding-top );
 }
-[style*="--scw-padding-bottom: var("] {
+[style~="--scw-padding-bottom:"] {
   padding-bottom: var( --scw-padding-bottom );
 }
-[style*="--scw-padding-width: var("] {
+[style~="--scw-padding-width:"] {
   padding-left: var( --scw-padding-width );
   padding-right: var( --scw-padding-width );
 }
-[style*="--scw-padding-x: var("] {
+[style~="--scw-padding-x:"] {
   padding-left: var( --scw-padding-x );
   padding-right: var( --scw-padding-x );
 }
-[style*="--scw-padding-height: var("] {
+[style~="--scw-padding-height:"] {
   padding-top: var( --scw-padding-height );
   padding-bottom: var( --scw-padding-height );
 }
-[style*="--scw-padding-y: var("] {
+[style~="--scw-padding-y:"] {
   padding-top: var( --scw-padding-y );
   padding-bottom: var( --scw-padding-y );
 }
-[style*="--scw-border-radius: var("] {
+[style~="--scw-border-radius:"] {
   border-radius: var( --scw-border-radius );
 }
-[style*="--scw-gap: var("] > * {
+[style~="--scw-gap:"] > * {
   --gap: var( --scw-gap );
 }
@@ -633,7 +637,7 @@ scw-float::after,
 @media screen and (max-width: 1200px) {
-[style*="--scw-background-color-xlg: var("] {
+[style~="--scw-background-color-xlg:"] {
   --background-color: var( --scw-color-01, var( --scw-background-color-xlg ));
   background-color: var( --background-color );
 }
@@ -641,14 +645,14 @@ scw-float::after,
 @media screen and (max-width: 1200px) {
-[style*="--scw-background-color-hover-xlg: var("]:hover {
+[style~="--scw-background-color-hover-xlg:"]:hover {
   background-color: var( --scw-color-01, var( --scw-background-color-hover-xlg ));
 }
 }
 @media screen and (max-width: 1200px) {
-[style*="--scw-color-xlg: var("] {
+[style~="--scw-color-xlg:"] {
   --color: var( --scw-color-01, var( --scw-color-xlg ));
   color: var( --color );
 }
@@ -656,56 +660,63 @@ scw-float::after,
 @media screen and (max-width: 1200px) {
-[style*="--scw-color-hover-xlg: var("]:hover {
+[style~="--scw-color-hover-xlg:"]:hover {
   color: var( --scw-color-01, var( --scw-color-hover-xlg ));
 }
 }
 @media screen and (max-width: 1200px) {
-[style*="--scw-border-color-xlg: var("] {
+[style~="--scw-border-color-xlg:"] {
   border-color: var( --scw-color-01, var( --scw-border-color-xlg ));
 }
 }
 @media screen and (max-width: 1200px) {
-[style*="--scw-border-top-xlg: var("] {
+[style~="--scw-border-top-xlg:"] {
   border-top: 1px solid var( --scw-color-01, var( --scw-border-top-xlg ));
 }
 }
 @media screen and (max-width: 1200px) {
-[style*="--scw-border-bottom-xlg: var("] {
+[style~="--scw-border-bottom-xlg:"] {
   border-bottom: 1px solid var( --scw-color-01, var( --scw-border-bottom-xlg ));
 }
 }
 @media screen and (max-width: 1200px) {
-[style*="--scw-border-left-xlg: var("] {
+[style~="--scw-border-left-xlg:"] {
   border-left: 1px solid var( --scw-color-01, var( --scw-border-left-xlg ));
 }
 }
 @media screen and (max-width: 1200px) {
-[style*="--scw-border-right-xlg: var("] {
+[style~="--scw-border-right-xlg:"] {
   border-right: 1px solid var( --scw-color-01, var( --scw-border-right-xlg ));
 }
 }
+@media screen and (max-width: 1200px) {
+[style~="--scw-border-xlg:"] {
+  border: 1px solid var( --scw-color-01, var( --scw-border-xlg ));
+}
+}
 @media screen and (max-width: 1200px) {
-[style*="--scw-font-xlg: var("] {
+[style~="--scw-font-xlg:"] {
   font: var( --scw-font-xlg );
 }
 }
 @media screen and (max-width: 1200px) {
-[style*="--scw-size-xlg: var("] {
+[style~="--scw-size-xlg:"] {
   width: var( --scw-size-xlg );
   height: var( --scw-size-xlg );
 }
@@ -714,7 +725,7 @@ scw-float::after,
 @media screen and (max-width: 1200px) {
-[style*="--scw-max-size-xlg: var("] {
+[style~="--scw-max-size-xlg:"] {
   max-width: var( --scw-max-size-xlg );
   max-height: var( --scw-max-size-xlg );
 }
@@ -723,7 +734,7 @@ scw-float::after,
 @media screen and (max-width: 1200px) {
-[style*="--scw-min-size-xlg: var("] {
+[style~="--scw-min-size-xlg:"] {
   min-width: var( --scw-min-size-xlg );
   min-height: var( --scw-min-size-xlg );
 }
@@ -732,7 +743,7 @@ scw-float::after,
 @media screen and (max-width: 1200px) {
-[style*="--scw-width-xlg: var("] {
+[style~="--scw-width-xlg:"] {
   width: var( --scw-width-xlg );
 }
 }
@@ -740,7 +751,7 @@ scw-float::after,
 @media screen and (max-width: 1200px) {
-[style*="--scw-max-width-xlg: var("] {
+[style~="--scw-max-width-xlg:"] {
   max-width: var( --scw-max-width-xlg );
 }
 }
@@ -748,7 +759,7 @@ scw-float::after,
 @media screen and (max-width: 1200px) {
-[style*="--scw-min-width-xlg: var("] {
+[style~="--scw-min-width-xlg:"] {
   min-width: var( --scw-min-width-xlg );
 }
 }
@@ -756,7 +767,7 @@ scw-float::after,
 @media screen and (max-width: 1200px) {
-[style*="--scw-height-xlg: var("] {
+[style~="--scw-height-xlg:"] {
   height: var( --scw-height-xlg );
 }
 }
@@ -764,7 +775,7 @@ scw-float::after,
 @media screen and (max-width: 1200px) {
-[style*="--scw-max-height-xlg: var("] {
+[style~="--scw-max-height-xlg:"] {
   max-height: var( --scw-max-height-xlg );
 }
 }
@@ -772,7 +783,7 @@ scw-float::after,
 @media screen and (max-width: 1200px) {
-[style*="--scw-min-height-xlg: var("] {
+[style~="--scw-min-height-xlg:"] {
   min-height: var( --scw-min-height-xlg );
 }
 }
@@ -780,7 +791,7 @@ scw-float::after,
 @media screen and (max-width: 1200px) {
-[style*="--scw-left-xlg: var("] {
+[style~="--scw-left-xlg:"] {
   left: var( --scw-left-xlg );
 }
 }
@@ -788,7 +799,7 @@ scw-float::after,
 @media screen and (max-width: 1200px) {
-[style*="--scw-right-xlg: var("] {
+[style~="--scw-right-xlg:"] {
   right: var( --scw-right-xlg );
 }
 }
@@ -796,7 +807,7 @@ scw-float::after,
 @media screen and (max-width: 1200px) {
-[style*="--scw-top-xlg: var("] {
+[style~="--scw-top-xlg:"] {
   top: var( --scw-top-xlg );
 }
 }
@@ -804,7 +815,7 @@ scw-float::after,
 @media screen and (max-width: 1200px) {
-[style*="--scw-bottom-xlg: var("] {
+[style~="--scw-bottom-xlg:"] {
   bottom: var( --scw-bottom-xlg );
 }
 }
@@ -812,7 +823,7 @@ scw-float::after,
 @media screen and (max-width: 1200px) {
-[style*="--scw-margin-xlg: var("] {
+[style~="--scw-margin-xlg:"] {
   margin: var( --scw-margin-xlg );
 }
 }
@@ -820,7 +831,7 @@ scw-float::after,
 @media screen and (max-width: 1200px) {
-[style*="--scw-margin-left-xlg: var("] {
+[style~="--scw-margin-left-xlg:"] {
   margin-left: var( --scw-margin-left-xlg );
 }
 }
@@ -828,7 +839,7 @@ scw-float::after,
 @media screen and (max-width: 1200px) {
-[style*="--scw-margin-right-xlg: var("] {
+[style~="--scw-margin-right-xlg:"] {
   margin-right: var( --scw-margin-right-xlg );
 }
 }
@@ -836,7 +847,7 @@ scw-float::after,
 @media screen and (max-width: 1200px) {
-[style*="--scw-margin-top-xlg: var("] {
+[style~="--scw-margin-top-xlg:"] {
   margin-top: var( --scw-margin-top-xlg );
 }
 }
@@ -844,7 +855,7 @@ scw-float::after,
 @media screen and (max-width: 1200px) {
-[style*="--scw-margin-bottom-xlg: var("] {
+[style~="--scw-margin-bottom-xlg:"] {
   margin-bottom: var( --scw-margin-bottom-xlg );
 }
 }
@@ -852,7 +863,7 @@ scw-float::after,
 @media screen and (max-width: 1200px) {
-[style*="--scw-margin-width-xlg: var("] {
+[style~="--scw-margin-width-xlg:"] {
   margin-left: var( --scw-margin-width-xlg );
   margin-right: var( --scw-margin-width-xlg );
 }
@@ -861,7 +872,7 @@ scw-float::after,
 @media screen and (max-width: 1200px) {
-[style*="--scw-margin-x-xlg: var("] {
+[style~="--scw-margin-x-xlg:"] {
   margin-left: var( --scw-margin-x-xlg );
   margin-right: var( --scw-margin-x-xlg );
 }
@@ -870,7 +881,7 @@ scw-float::after,
 @media screen and (max-width: 1200px) {
-[style*="--scw-margin-height-xlg: var("] {
+[style~="--scw-margin-height-xlg:"] {
   margin-top: var( --scw-margin-height-xlg );
   margin-bottom: var( --scw-margin-height-xlg );
 }
@@ -879,7 +890,7 @@ scw-float::after,
 @media screen and (max-width: 1200px) {
-[style*="--scw-margin-y-xlg: var("] {
+[style~="--scw-margin-y-xlg:"] {
   margin-top: var( --scw-margin-y-xlg );
   margin-bottom: var( --scw-margin-y-xlg );
 }
@@ -888,7 +899,7 @@ scw-float::after,
 @media screen and (max-width: 1200px) {
-[style*="--scw-padding-xlg: var("] {
+[style~="--scw-padding-xlg:"] {
   padding: var( --scw-padding-xlg );
 }
 }
@@ -896,7 +907,7 @@ scw-float::after,
 @media screen and (max-width: 1200px) {
-[style*="--scw-padding-left-xlg: var("] {
+[style~="--scw-padding-left-xlg:"] {
   padding-left: var( --scw-padding-left-xlg );
 }
 }
@@ -904,7 +915,7 @@ scw-float::after,
 @media screen and (max-width: 1200px) {
-[style*="--scw-padding-right-xlg: var("] {
+[style~="--scw-padding-right-xlg:"] {
   padding-right: var( --scw-padding-right-xlg );
 }
 }
@@ -912,7 +923,7 @@ scw-float::after,
 @media screen and (max-width: 1200px) {
-[style*="--scw-padding-top-xlg: var("] {
+[style~="--scw-padding-top-xlg:"] {
   padding-top: var( --scw-padding-top-xlg );
 }
 }
@@ -920,7 +931,7 @@ scw-float::after,
 @media screen and (max-width: 1200px) {
-[style*="--scw-padding-bottom-xlg: var("] {
+[style~="--scw-padding-bottom-xlg:"] {
   padding-bottom: var( --scw-padding-bottom-xlg );
 }
 }
@@ -928,7 +939,7 @@ scw-float::after,
 @media screen and (max-width: 1200px) {
-[style*="--scw-padding-width-xlg: var("] {
+[style~="--scw-padding-width-xlg:"] {
   padding-left: var( --scw-padding-width-xlg );
   padding-right: var( --scw-padding-width-xlg );
 }
@@ -937,7 +948,7 @@ scw-float::after,
 @media screen and (max-width: 1200px) {
-[style*="--scw-padding-x-xlg: var("] {
+[style~="--scw-padding-x-xlg:"] {
   padding-left: var( --scw-padding-x-xlg );
   padding-right: var( --scw-padding-x-xlg );
 }
@@ -946,7 +957,7 @@ scw-float::after,
 @media screen and (max-width: 1200px) {
-[style*="--scw-padding-height-xlg: var("] {
+[style~="--scw-padding-height-xlg:"] {
   padding-top: var( --scw-padding-height-xlg );
   padding-bottom: var( --scw-padding-height-xlg );
 }
@@ -955,7 +966,7 @@ scw-float::after,
 @media screen and (max-width: 1200px) {
-[style*="--scw-padding-y-xlg: var("] {
+[style~="--scw-padding-y-xlg:"] {
   padding-top: var( --scw-padding-y-xlg );
   padding-bottom: var( --scw-padding-y-xlg );
 }
@@ -964,7 +975,7 @@ scw-float::after,
 @media screen and (max-width: 1200px) {
-[style*="--scw-border-radius-xlg: var("] {
+[style~="--scw-border-radius-xlg:"] {
   border-radius: var( --scw-border-radius-xlg );
 }
 }
@@ -972,7 +983,7 @@ scw-float::after,
 @media screen and (max-width: 1200px) {
-[style*="--scw-gap-xlg: var("] > * {
+[style~="--scw-gap-xlg:"] > * {
   --gap: var( --scw-gap-xlg );
 }
 }
@@ -1506,7 +1517,7 @@ scw-float::after,
 @media screen and (max-width: 992px) {
-[style*="--scw-background-color-lg: var("] {
+[style~="--scw-background-color-lg:"] {
   --background-color: var( --scw-color-01, var( --scw-background-color-lg ));
   background-color: var( --background-color );
 }
@@ -1514,14 +1525,14 @@ scw-float::after,
 @media screen and (max-width: 992px) {
-[style*="--scw-background-color-hover-lg: var("]:hover {
+[style~="--scw-background-color-hover-lg:"]:hover {
   background-color: var( --scw-color-01, var( --scw-background-color-hover-lg ));
 }
 }
 @media screen and (max-width: 992px) {
-[style*="--scw-color-lg: var("] {
+[style~="--scw-color-lg:"] {
   --color: var( --scw-color-01, var( --scw-color-lg ));
   color: var( --color );
 }
@@ -1529,56 +1540,63 @@ scw-float::after,
 @media screen and (max-width: 992px) {
-[style*="--scw-color-hover-lg: var("]:hover {
+[style~="--scw-color-hover-lg:"]:hover {
   color: var( --scw-color-01, var( --scw-color-hover-lg ));
 }
 }
 @media screen and (max-width: 992px) {
-[style*="--scw-border-color-lg: var("] {
+[style~="--scw-border-color-lg:"] {
   border-color: var( --scw-color-01, var( --scw-border-color-lg ));
 }
 }
 @media screen and (max-width: 992px) {
-[style*="--scw-border-top-lg: var("] {
+[style~="--scw-border-top-lg:"] {
   border-top: 1px solid var( --scw-color-01, var( --scw-border-top-lg ));
 }
 }
 @media screen and (max-width: 992px) {
-[style*="--scw-border-bottom-lg: var("] {
+[style~="--scw-border-bottom-lg:"] {
   border-bottom: 1px solid var( --scw-color-01, var( --scw-border-bottom-lg ));
 }
 }
 @media screen and (max-width: 992px) {
-[style*="--scw-border-left-lg: var("] {
+[style~="--scw-border-left-lg:"] {
   border-left: 1px solid var( --scw-color-01, var( --scw-border-left-lg ));
 }
 }
 @media screen and (max-width: 992px) {
-[style*="--scw-border-right-lg: var("] {
+[style~="--scw-border-right-lg:"] {
   border-right: 1px solid var( --scw-color-01, var( --scw-border-right-lg ));
 }
 }
+@media screen and (max-width: 992px) {
+[style~="--scw-border-lg:"] {
+  border: 1px solid var( --scw-color-01, var( --scw-border-lg ));
+}
+}
 @media screen and (max-width: 992px) {
-[style*="--scw-font-lg: var("] {
+[style~="--scw-font-lg:"] {
   font: var( --scw-font-lg );
 }
 }
 @media screen and (max-width: 992px) {
-[style*="--scw-size-lg: var("] {
+[style~="--scw-size-lg:"] {
   width: var( --scw-size-lg );
   height: var( --scw-size-lg );
 }
@@ -1587,7 +1605,7 @@ scw-float::after,
 @media screen and (max-width: 992px) {
-[style*="--scw-max-size-lg: var("] {
+[style~="--scw-max-size-lg:"] {
   max-width: var( --scw-max-size-lg );
   max-height: var( --scw-max-size-lg );
 }
@@ -1596,7 +1614,7 @@ scw-float::after,
 @media screen and (max-width: 992px) {
-[style*="--scw-min-size-lg: var("] {
+[style~="--scw-min-size-lg:"] {
   min-width: var( --scw-min-size-lg );
   min-height: var( --scw-min-size-lg );
 }
@@ -1605,7 +1623,7 @@ scw-float::after,
 @media screen and (max-width: 992px) {
-[style*="--scw-width-lg: var("] {
+[style~="--scw-width-lg:"] {
   width: var( --scw-width-lg );
 }
 }
@@ -1613,7 +1631,7 @@ scw-float::after,
 @media screen and (max-width: 992px) {
-[style*="--scw-max-width-lg: var("] {
+[style~="--scw-max-width-lg:"] {
   max-width: var( --scw-max-width-lg );
 }
 }
@@ -1621,7 +1639,7 @@ scw-float::after,
 @media screen and (max-width: 992px) {
-[style*="--scw-min-width-lg: var("] {
+[style~="--scw-min-width-lg:"] {
   min-width: var( --scw-min-width-lg );
 }
 }
@@ -1629,7 +1647,7 @@ scw-float::after,
 @media screen and (max-width: 992px) {
-[style*="--scw-height-lg: var("] {
+[style~="--scw-height-lg:"] {
   height: var( --scw-height-lg );
 }
 }
@@ -1637,7 +1655,7 @@ scw-float::after,
 @media screen and (max-width: 992px) {
-[style*="--scw-max-height-lg: var("] {
+[style~="--scw-max-height-lg:"] {
   max-height: var( --scw-max-height-lg );
 }
 }
@@ -1645,7 +1663,7 @@ scw-float::after,
 @media screen and (max-width: 992px) {
-[style*="--scw-min-height-lg: var("] {
+[style~="--scw-min-height-lg:"] {
   min-height: var( --scw-min-height-lg );
 }
 }
@@ -1653,7 +1671,7 @@ scw-float::after,
 @media screen and (max-width: 992px) {
-[style*="--scw-left-lg: var("] {
+[style~="--scw-left-lg:"] {
   left: var( --scw-left-lg );
 }
 }
@@ -1661,7 +1679,7 @@ scw-float::after,
 @media screen and (max-width: 992px) {
-[style*="--scw-right-lg: var("] {
+[style~="--scw-right-lg:"] {
   right: var( --scw-right-lg );
 }
 }
@@ -1669,7 +1687,7 @@ scw-float::after,
 @media screen and (max-width: 992px) {
-[style*="--scw-top-lg: var("] {
+[style~="--scw-top-lg:"] {
   top: var( --scw-top-lg );
 }
 }
@@ -1677,7 +1695,7 @@ scw-float::after,
 @media screen and (max-width: 992px) {
-[style*="--scw-bottom-lg: var("] {
+[style~="--scw-bottom-lg:"] {
   bottom: var( --scw-bottom-lg );
 }
 }
@@ -1685,7 +1703,7 @@ scw-float::after,
 @media screen and (max-width: 992px) {
-[style*="--scw-margin-lg: var("] {
+[style~="--scw-margin-lg:"] {
   margin: var( --scw-margin-lg );
 }
 }
@@ -1693,7 +1711,7 @@ scw-float::after,
 @media screen and (max-width: 992px) {
-[style*="--scw-margin-left-lg: var("] {
+[style~="--scw-margin-left-lg:"] {
   margin-left: var( --scw-margin-left-lg );
 }
 }
@@ -1701,7 +1719,7 @@ scw-float::after,
 @media screen and (max-width: 992px) {
-[style*="--scw-margin-right-lg: var("] {
+[style~="--scw-margin-right-lg:"] {
   margin-right: var( --scw-margin-right-lg );
 }
 }
@@ -1709,7 +1727,7 @@ scw-float::after,
 @media screen and (max-width: 992px) {
-[style*="--scw-margin-top-lg: var("] {
+[style~="--scw-margin-top-lg:"] {
   margin-top: var( --scw-margin-top-lg );
 }
 }
@@ -1717,7 +1735,7 @@ scw-float::after,
 @media screen and (max-width: 992px) {
-[style*="--scw-margin-bottom-lg: var("] {
+[style~="--scw-margin-bottom-lg:"] {
   margin-bottom: var( --scw-margin-bottom-lg );
 }
 }
@@ -1725,7 +1743,7 @@ scw-float::after,
 @media screen and (max-width: 992px) {
-[style*="--scw-margin-width-lg: var("] {
+[style~="--scw-margin-width-lg:"] {
   margin-left: var( --scw-margin-width-lg );
   margin-right: var( --scw-margin-width-lg );
 }
@@ -1734,7 +1752,7 @@ scw-float::after,
 @media screen and (max-width: 992px) {
-[style*="--scw-margin-x-lg: var("] {
+[style~="--scw-margin-x-lg:"] {
   margin-left: var( --scw-margin-x-lg );
   margin-right: var( --scw-margin-x-lg );
 }
@@ -1743,7 +1761,7 @@ scw-float::after,
 @media screen and (max-width: 992px) {
-[style*="--scw-margin-height-lg: var("] {
+[style~="--scw-margin-height-lg:"] {
   margin-top: var( --scw-margin-height-lg );
   margin-bottom: var( --scw-margin-height-lg );
 }
@@ -1752,7 +1770,7 @@ scw-float::after,
 @media screen and (max-width: 992px) {
-[style*="--scw-margin-y-lg: var("] {
+[style~="--scw-margin-y-lg:"] {
   margin-top: var( --scw-margin-y-lg );
   margin-bottom: var( --scw-margin-y-lg );
 }
@@ -1761,7 +1779,7 @@ scw-float::after,
 @media screen and (max-width: 992px) {
-[style*="--scw-padding-lg: var("] {
+[style~="--scw-padding-lg:"] {
   padding: var( --scw-padding-lg );
 }
 }
@@ -1769,7 +1787,7 @@ scw-float::after,
 @media screen and (max-width: 992px) {
-[style*="--scw-padding-left-lg: var("] {
+[style~="--scw-padding-left-lg:"] {
   padding-left: var( --scw-padding-left-lg );
 }
 }
@@ -1777,7 +1795,7 @@ scw-float::after,
 @media screen and (max-width: 992px) {
-[style*="--scw-padding-right-lg: var("] {
+[style~="--scw-padding-right-lg:"] {
   padding-right: var( --scw-padding-right-lg );
 }
 }
@@ -1785,7 +1803,7 @@ scw-float::after,
 @media screen and (max-width: 992px) {
-[style*="--scw-padding-top-lg: var("] {
+[style~="--scw-padding-top-lg:"] {
   padding-top: var( --scw-padding-top-lg );
 }
 }
@@ -1793,7 +1811,7 @@ scw-float::after,
 @media screen and (max-width: 992px) {
-[style*="--scw-padding-bottom-lg: var("] {
+[style~="--scw-padding-bottom-lg:"] {
   padding-bottom: var( --scw-padding-bottom-lg );
 }
 }
@@ -1801,7 +1819,7 @@ scw-float::after,
 @media screen and (max-width: 992px) {
-[style*="--scw-padding-width-lg: var("] {
+[style~="--scw-padding-width-lg:"] {
   padding-left: var( --scw-padding-width-lg );
   padding-right: var( --scw-padding-width-lg );
 }
@@ -1810,7 +1828,7 @@ scw-float::after,
 @media screen and (max-width: 992px) {
-[style*="--scw-padding-x-lg: var("] {
+[style~="--scw-padding-x-lg:"] {
   padding-left: var( --scw-padding-x-lg );
   padding-right: var( --scw-padding-x-lg );
 }
@@ -1819,7 +1837,7 @@ scw-float::after,
 @media screen and (max-width: 992px) {
-[style*="--scw-padding-height-lg: var("] {
+[style~="--scw-padding-height-lg:"] {
   padding-top: var( --scw-padding-height-lg );
   padding-bottom: var( --scw-padding-height-lg );
 }
@@ -1828,7 +1846,7 @@ scw-float::after,
 @media screen and (max-width: 992px) {
-[style*="--scw-padding-y-lg: var("] {
+[style~="--scw-padding-y-lg:"] {
   padding-top: var( --scw-padding-y-lg );
   padding-bottom: var( --scw-padding-y-lg );
 }
@@ -1837,7 +1855,7 @@ scw-float::after,
 @media screen and (max-width: 992px) {
-[style*="--scw-border-radius-lg: var("] {
+[style~="--scw-border-radius-lg:"] {
   border-radius: var( --scw-border-radius-lg );
 }
 }
@@ -1845,7 +1863,7 @@ scw-float::after,
 @media screen and (max-width: 992px) {
-[style*="--scw-gap-lg: var("] > * {
+[style~="--scw-gap-lg:"] > * {
   --gap: var( --scw-gap-lg );
 }
 }
@@ -2379,7 +2397,7 @@ scw-float::after,
 @media screen and (max-width: 768px) {
-[style*="--scw-background-color-md: var("] {
+[style~="--scw-background-color-md:"] {
   --background-color: var( --scw-color-01, var( --scw-background-color-md ));
   background-color: var( --background-color );
 }
@@ -2387,14 +2405,14 @@ scw-float::after,
 @media screen and (max-width: 768px) {
-[style*="--scw-background-color-hover-md: var("]:hover {
+[style~="--scw-background-color-hover-md:"]:hover {
   background-color: var( --scw-color-01, var( --scw-background-color-hover-md ));
 }
 }
 @media screen and (max-width: 768px) {
-[style*="--scw-color-md: var("] {
+[style~="--scw-color-md:"] {
   --color: var( --scw-color-01, var( --scw-color-md ));
   color: var( --color );
 }
@@ -2402,56 +2420,63 @@ scw-float::after,
 @media screen and (max-width: 768px) {
-[style*="--scw-color-hover-md: var("]:hover {
+[style~="--scw-color-hover-md:"]:hover {
   color: var( --scw-color-01, var( --scw-color-hover-md ));
 }
 }
 @media screen and (max-width: 768px) {
-[style*="--scw-border-color-md: var("] {
+[style~="--scw-border-color-md:"] {
   border-color: var( --scw-color-01, var( --scw-border-color-md ));
 }
 }
 @media screen and (max-width: 768px) {
-[style*="--scw-border-top-md: var("] {
+[style~="--scw-border-top-md:"] {
   border-top: 1px solid var( --scw-color-01, var( --scw-border-top-md ));
 }
 }
 @media screen and (max-width: 768px) {
-[style*="--scw-border-bottom-md: var("] {
+[style~="--scw-border-bottom-md:"] {
   border-bottom: 1px solid var( --scw-color-01, var( --scw-border-bottom-md ));
 }
 }
 @media screen and (max-width: 768px) {
-[style*="--scw-border-left-md: var("] {
+[style~="--scw-border-left-md:"] {
   border-left: 1px solid var( --scw-color-01, var( --scw-border-left-md ));
 }
 }
 @media screen and (max-width: 768px) {
-[style*="--scw-border-right-md: var("] {
+[style~="--scw-border-right-md:"] {
   border-right: 1px solid var( --scw-color-01, var( --scw-border-right-md ));
 }
 }
+@media screen and (max-width: 768px) {
+[style~="--scw-border-md:"] {
+  border: 1px solid var( --scw-color-01, var( --scw-border-md ));
+}
+}
 @media screen and (max-width: 768px) {
-[style*="--scw-font-md: var("] {
+[style~="--scw-font-md:"] {
   font: var( --scw-font-md );
 }
 }
 @media screen and (max-width: 768px) {
-[style*="--scw-size-md: var("] {
+[style~="--scw-size-md:"] {
   width: var( --scw-size-md );
   height: var( --scw-size-md );
 }
@@ -2460,7 +2485,7 @@ scw-float::after,
 @media screen and (max-width: 768px) {
-[style*="--scw-max-size-md: var("] {
+[style~="--scw-max-size-md:"] {
   max-width: var( --scw-max-size-md );
   max-height: var( --scw-max-size-md );
 }
@@ -2469,7 +2494,7 @@ scw-float::after,
 @media screen and (max-width: 768px) {
-[style*="--scw-min-size-md: var("] {
+[style~="--scw-min-size-md:"] {
   min-width: var( --scw-min-size-md );
   min-height: var( --scw-min-size-md );
 }
@@ -2478,7 +2503,7 @@ scw-float::after,
 @media screen and (max-width: 768px) {
-[style*="--scw-width-md: var("] {
+[style~="--scw-width-md:"] {
   width: var( --scw-width-md );
 }
 }
@@ -2486,7 +2511,7 @@ scw-float::after,
 @media screen and (max-width: 768px) {
-[style*="--scw-max-width-md: var("] {
+[style~="--scw-max-width-md:"] {
   max-width: var( --scw-max-width-md );
 }
 }
@@ -2494,7 +2519,7 @@ scw-float::after,
 @media screen and (max-width: 768px) {
-[style*="--scw-min-width-md: var("] {
+[style~="--scw-min-width-md:"] {
   min-width: var( --scw-min-width-md );
 }
 }
@@ -2502,7 +2527,7 @@ scw-float::after,
 @media screen and (max-width: 768px) {
-[style*="--scw-height-md: var("] {
+[style~="--scw-height-md:"] {
   height: var( --scw-height-md );
 }
 }
@@ -2510,7 +2535,7 @@ scw-float::after,
 @media screen and (max-width: 768px) {
-[style*="--scw-max-height-md: var("] {
+[style~="--scw-max-height-md:"] {
   max-height: var( --scw-max-height-md );
 }
 }
@@ -2518,7 +2543,7 @@ scw-float::after,
 @media screen and (max-width: 768px) {
-[style*="--scw-min-height-md: var("] {
+[style~="--scw-min-height-md:"] {
   min-height: var( --scw-min-height-md );
 }
 }
@@ -2526,7 +2551,7 @@ scw-float::after,
 @media screen and (max-width: 768px) {
-[style*="--scw-left-md: var("] {
+[style~="--scw-left-md:"] {
   left: var( --scw-left-md );
 }
 }
@@ -2534,7 +2559,7 @@ scw-float::after,
 @media screen and (max-width: 768px) {
-[style*="--scw-right-md: var("] {
+[style~="--scw-right-md:"] {
   right: var( --scw-right-md );
 }
 }
@@ -2542,7 +2567,7 @@ scw-float::after,
 @media screen and (max-width: 768px) {
-[style*="--scw-top-md: var("] {
+[style~="--scw-top-md:"] {
   top: var( --scw-top-md );
 }
 }
@@ -2550,7 +2575,7 @@ scw-float::after,
 @media screen and (max-width: 768px) {
-[style*="--scw-bottom-md: var("] {
+[style~="--scw-bottom-md:"] {
   bottom: var( --scw-bottom-md );
 }
 }
@@ -2558,7 +2583,7 @@ scw-float::after,
 @media screen and (max-width: 768px) {
-[style*="--scw-margin-md: var("] {
+[style~="--scw-margin-md:"] {
   margin: var( --scw-margin-md );
 }
 }
@@ -2566,7 +2591,7 @@ scw-float::after,
 @media screen and (max-width: 768px) {
-[style*="--scw-margin-left-md: var("] {
+[style~="--scw-margin-left-md:"] {
   margin-left: var( --scw-margin-left-md );
 }
 }
@@ -2574,7 +2599,7 @@ scw-float::after,
 @media screen and (max-width: 768px) {
-[style*="--scw-margin-right-md: var("] {
+[style~="--scw-margin-right-md:"] {
   margin-right: var( --scw-margin-right-md );
 }
 }
@@ -2582,7 +2607,7 @@ scw-float::after,
 @media screen and (max-width: 768px) {
-[style*="--scw-margin-top-md: var("] {
+[style~="--scw-margin-top-md:"] {
   margin-top: var( --scw-margin-top-md );
 }
 }
@@ -2590,7 +2615,7 @@ scw-float::after,
 @media screen and (max-width: 768px) {
-[style*="--scw-margin-bottom-md: var("] {
+[style~="--scw-margin-bottom-md:"] {
   margin-bottom: var( --scw-margin-bottom-md );
 }
 }
@@ -2598,7 +2623,7 @@ scw-float::after,
 @media screen and (max-width: 768px) {
-[style*="--scw-margin-width-md: var("] {
+[style~="--scw-margin-width-md:"] {
   margin-left: var( --scw-margin-width-md );
   margin-right: var( --scw-margin-width-md );
 }
@@ -2607,7 +2632,7 @@ scw-float::after,
 @media screen and (max-width: 768px) {
-[style*="--scw-margin-x-md: var("] {
+[style~="--scw-margin-x-md:"] {
   margin-left: var( --scw-margin-x-md );
   margin-right: var( --scw-margin-x-md );
 }
@@ -2616,7 +2641,7 @@ scw-float::after,
 @media screen and (max-width: 768px) {
-[style*="--scw-margin-height-md: var("] {
+[style~="--scw-margin-height-md:"] {
   margin-top: var( --scw-margin-height-md );
   margin-bottom: var( --scw-margin-height-md );
 }
@@ -2625,7 +2650,7 @@ scw-float::after,
 @media screen and (max-width: 768px) {
-[style*="--scw-margin-y-md: var("] {
+[style~="--scw-margin-y-md:"] {
   margin-top: var( --scw-margin-y-md );
   margin-bottom: var( --scw-margin-y-md );
 }
@@ -2634,7 +2659,7 @@ scw-float::after,
 @media screen and (max-width: 768px) {
-[style*="--scw-padding-md: var("] {
+[style~="--scw-padding-md:"] {
   padding: var( --scw-padding-md );
 }
 }
@@ -2642,7 +2667,7 @@ scw-float::after,
 @media screen and (max-width: 768px) {
-[style*="--scw-padding-left-md: var("] {
+[style~="--scw-padding-left-md:"] {
   padding-left: var( --scw-padding-left-md );
 }
 }
@@ -2650,7 +2675,7 @@ scw-float::after,
 @media screen and (max-width: 768px) {
-[style*="--scw-padding-right-md: var("] {
+[style~="--scw-padding-right-md:"] {
   padding-right: var( --scw-padding-right-md );
 }
 }
@@ -2658,7 +2683,7 @@ scw-float::after,
 @media screen and (max-width: 768px) {
-[style*="--scw-padding-top-md: var("] {
+[style~="--scw-padding-top-md:"] {
   padding-top: var( --scw-padding-top-md );
 }
 }
@@ -2666,7 +2691,7 @@ scw-float::after,
 @media screen and (max-width: 768px) {
-[style*="--scw-padding-bottom-md: var("] {
+[style~="--scw-padding-bottom-md:"] {
   padding-bottom: var( --scw-padding-bottom-md );
 }
 }
@@ -2674,7 +2699,7 @@ scw-float::after,
 @media screen and (max-width: 768px) {
-[style*="--scw-padding-width-md: var("] {
+[style~="--scw-padding-width-md:"] {
   padding-left: var( --scw-padding-width-md );
   padding-right: var( --scw-padding-width-md );
 }
@@ -2683,7 +2708,7 @@ scw-float::after,
 @media screen and (max-width: 768px) {
-[style*="--scw-padding-x-md: var("] {
+[style~="--scw-padding-x-md:"] {
   padding-left: var( --scw-padding-x-md );
   padding-right: var( --scw-padding-x-md );
 }
@@ -2692,7 +2717,7 @@ scw-float::after,
 @media screen and (max-width: 768px) {
-[style*="--scw-padding-height-md: var("] {
+[style~="--scw-padding-height-md:"] {
   padding-top: var( --scw-padding-height-md );
   padding-bottom: var( --scw-padding-height-md );
 }
@@ -2701,7 +2726,7 @@ scw-float::after,
 @media screen and (max-width: 768px) {
-[style*="--scw-padding-y-md: var("] {
+[style~="--scw-padding-y-md:"] {
   padding-top: var( --scw-padding-y-md );
   padding-bottom: var( --scw-padding-y-md );
 }
@@ -2710,7 +2735,7 @@ scw-float::after,
 @media screen and (max-width: 768px) {
-[style*="--scw-border-radius-md: var("] {
+[style~="--scw-border-radius-md:"] {
   border-radius: var( --scw-border-radius-md );
 }
 }
@@ -2718,7 +2743,7 @@ scw-float::after,
 @media screen and (max-width: 768px) {
-[style*="--scw-gap-md: var("] > * {
+[style~="--scw-gap-md:"] > * {
   --gap: var( --scw-gap-md );
 }
 }
@@ -3252,7 +3277,7 @@ scw-float::after,
 @media screen and (max-width: 576px) {
-[style*="--scw-background-color-sm: var("] {
+[style~="--scw-background-color-sm:"] {
   --background-color: var( --scw-color-01, var( --scw-background-color-sm ));
   background-color: var( --background-color );
 }
@@ -3260,14 +3285,14 @@ scw-float::after,
 @media screen and (max-width: 576px) {
-[style*="--scw-background-color-hover-sm: var("]:hover {
+[style~="--scw-background-color-hover-sm:"]:hover {
   background-color: var( --scw-color-01, var( --scw-background-color-hover-sm ));
 }
 }
 @media screen and (max-width: 576px) {
-[style*="--scw-color-sm: var("] {
+[style~="--scw-color-sm:"] {
   --color: var( --scw-color-01, var( --scw-color-sm ));
   color: var( --color );
 }
@@ -3275,56 +3300,63 @@ scw-float::after,
 @media screen and (max-width: 576px) {
-[style*="--scw-color-hover-sm: var("]:hover {
+[style~="--scw-color-hover-sm:"]:hover {
   color: var( --scw-color-01, var( --scw-color-hover-sm ));
 }
 }
 @media screen and (max-width: 576px) {
-[style*="--scw-border-color-sm: var("] {
+[style~="--scw-border-color-sm:"] {
   border-color: var( --scw-color-01, var( --scw-border-color-sm ));
 }
 }
 @media screen and (max-width: 576px) {
-[style*="--scw-border-top-sm: var("] {
+[style~="--scw-border-top-sm:"] {
   border-top: 1px solid var( --scw-color-01, var( --scw-border-top-sm ));
 }
 }
 @media screen and (max-width: 576px) {
-[style*="--scw-border-bottom-sm: var("] {
+[style~="--scw-border-bottom-sm:"] {
   border-bottom: 1px solid var( --scw-color-01, var( --scw-border-bottom-sm ));
 }
 }
 @media screen and (max-width: 576px) {
-[style*="--scw-border-left-sm: var("] {
+[style~="--scw-border-left-sm:"] {
   border-left: 1px solid var( --scw-color-01, var( --scw-border-left-sm ));
 }
 }
 @media screen and (max-width: 576px) {
-[style*="--scw-border-right-sm: var("] {
+[style~="--scw-border-right-sm:"] {
   border-right: 1px solid var( --scw-color-01, var( --scw-border-right-sm ));
 }
 }
+@media screen and (max-width: 576px) {
+[style~="--scw-border-sm:"] {
+  border: 1px solid var( --scw-color-01, var( --scw-border-sm ));
+}
+}
 @media screen and (max-width: 576px) {
-[style*="--scw-font-sm: var("] {
+[style~="--scw-font-sm:"] {
   font: var( --scw-font-sm );
 }
 }
 @media screen and (max-width: 576px) {
-[style*="--scw-size-sm: var("] {
+[style~="--scw-size-sm:"] {
   width: var( --scw-size-sm );
   height: var( --scw-size-sm );
 }
@@ -3333,7 +3365,7 @@ scw-float::after,
 @media screen and (max-width: 576px) {
-[style*="--scw-max-size-sm: var("] {
+[style~="--scw-max-size-sm:"] {
   max-width: var( --scw-max-size-sm );
   max-height: var( --scw-max-size-sm );
 }
@@ -3342,7 +3374,7 @@ scw-float::after,
 @media screen and (max-width: 576px) {
-[style*="--scw-min-size-sm: var("] {
+[style~="--scw-min-size-sm:"] {
   min-width: var( --scw-min-size-sm );
   min-height: var( --scw-min-size-sm );
 }
@@ -3351,7 +3383,7 @@ scw-float::after,
 @media screen and (max-width: 576px) {
-[style*="--scw-width-sm: var("] {
+[style~="--scw-width-sm:"] {
   width: var( --scw-width-sm );
 }
 }
@@ -3359,7 +3391,7 @@ scw-float::after,
 @media screen and (max-width: 576px) {
-[style*="--scw-max-width-sm: var("] {
+[style~="--scw-max-width-sm:"] {
   max-width: var( --scw-max-width-sm );
 }
 }
@@ -3367,7 +3399,7 @@ scw-float::after,
 @media screen and (max-width: 576px) {
-[style*="--scw-min-width-sm: var("] {
+[style~="--scw-min-width-sm:"] {
   min-width: var( --scw-min-width-sm );
 }
 }
@@ -3375,7 +3407,7 @@ scw-float::after,
 @media screen and (max-width: 576px) {
-[style*="--scw-height-sm: var("] {
+[style~="--scw-height-sm:"] {
   height: var( --scw-height-sm );
 }
 }
@@ -3383,7 +3415,7 @@ scw-float::after,
 @media screen and (max-width: 576px) {
-[style*="--scw-max-height-sm: var("] {
+[style~="--scw-max-height-sm:"] {
   max-height: var( --scw-max-height-sm );
 }
 }
@@ -3391,7 +3423,7 @@ scw-float::after,
 @media screen and (max-width: 576px) {
-[style*="--scw-min-height-sm: var("] {
+[style~="--scw-min-height-sm:"] {
   min-height: var( --scw-min-height-sm );
 }
 }
@@ -3399,7 +3431,7 @@ scw-float::after,
 @media screen and (max-width: 576px) {
-[style*="--scw-left-sm: var("] {
+[style~="--scw-left-sm:"] {
   left: var( --scw-left-sm );
 }
 }
@@ -3407,7 +3439,7 @@ scw-float::after,
 @media screen and (max-width: 576px) {
-[style*="--scw-right-sm: var("] {
+[style~="--scw-right-sm:"] {
   right: var( --scw-right-sm );
 }
 }
@@ -3415,7 +3447,7 @@ scw-float::after,
 @media screen and (max-width: 576px) {
-[style*="--scw-top-sm: var("] {
+[style~="--scw-top-sm:"] {
   top: var( --scw-top-sm );
 }
 }
@@ -3423,7 +3455,7 @@ scw-float::after,
 @media screen and (max-width: 576px) {
-[style*="--scw-bottom-sm: var("] {
+[style~="--scw-bottom-sm:"] {
   bottom: var( --scw-bottom-sm );
 }
 }
@@ -3431,7 +3463,7 @@ scw-float::after,
 @media screen and (max-width: 576px) {
-[style*="--scw-margin-sm: var("] {
+[style~="--scw-margin-sm:"] {
   margin: var( --scw-margin-sm );
 }
 }
@@ -3439,7 +3471,7 @@ scw-float::after,
 @media screen and (max-width: 576px) {
-[style*="--scw-margin-left-sm: var("] {
+[style~="--scw-margin-left-sm:"] {
   margin-left: var( --scw-margin-left-sm );
 }
 }
@@ -3447,7 +3479,7 @@ scw-float::after,
 @media screen and (max-width: 576px) {
-[style*="--scw-margin-right-sm: var("] {
+[style~="--scw-margin-right-sm:"] {
   margin-right: var( --scw-margin-right-sm );
 }
 }
@@ -3455,7 +3487,7 @@ scw-float::after,
 @media screen and (max-width: 576px) {
-[style*="--scw-margin-top-sm: var("] {
+[style~="--scw-margin-top-sm:"] {
   margin-top: var( --scw-margin-top-sm );
 }
 }
@@ -3463,7 +3495,7 @@ scw-float::after,
 @media screen and (max-width: 576px) {
-[style*="--scw-margin-bottom-sm: var("] {
+[style~="--scw-margin-bottom-sm:"] {
   margin-bottom: var( --scw-margin-bottom-sm );
 }
 }
@@ -3471,7 +3503,7 @@ scw-float::after,
 @media screen and (max-width: 576px) {
-[style*="--scw-margin-width-sm: var("] {
+[style~="--scw-margin-width-sm:"] {
   margin-left: var( --scw-margin-width-sm );
   margin-right: var( --scw-margin-width-sm );
 }
@@ -3480,7 +3512,7 @@ scw-float::after,
 @media screen and (max-width: 576px) {
-[style*="--scw-margin-x-sm: var("] {
+[style~="--scw-margin-x-sm:"] {
   margin-left: var( --scw-margin-x-sm );
   margin-right: var( --scw-margin-x-sm );
 }
@@ -3489,7 +3521,7 @@ scw-float::after,
 @media screen and (max-width: 576px) {
-[style*="--scw-margin-height-sm: var("] {
+[style~="--scw-margin-height-sm:"] {
   margin-top: var( --scw-margin-height-sm );
   margin-bottom: var( --scw-margin-height-sm );
 }
@@ -3498,7 +3530,7 @@ scw-float::after,
 @media screen and (max-width: 576px) {
-[style*="--scw-margin-y-sm: var("] {
+[style~="--scw-margin-y-sm:"] {
   margin-top: var( --scw-margin-y-sm );
   margin-bottom: var( --scw-margin-y-sm );
 }
@@ -3507,7 +3539,7 @@ scw-float::after,
 @media screen and (max-width: 576px) {
-[style*="--scw-padding-sm: var("] {
+[style~="--scw-padding-sm:"] {
   padding: var( --scw-padding-sm );
 }
 }
@@ -3515,7 +3547,7 @@ scw-float::after,
 @media screen and (max-width: 576px) {
-[style*="--scw-padding-left-sm: var("] {
+[style~="--scw-padding-left-sm:"] {
   padding-left: var( --scw-padding-left-sm );
 }
 }
@@ -3523,7 +3555,7 @@ scw-float::after,
 @media screen and (max-width: 576px) {
-[style*="--scw-padding-right-sm: var("] {
+[style~="--scw-padding-right-sm:"] {
   padding-right: var( --scw-padding-right-sm );
 }
 }
@@ -3531,7 +3563,7 @@ scw-float::after,
 @media screen and (max-width: 576px) {
-[style*="--scw-padding-top-sm: var("] {
+[style~="--scw-padding-top-sm:"] {
   padding-top: var( --scw-padding-top-sm );
 }
 }
@@ -3539,7 +3571,7 @@ scw-float::after,
 @media screen and (max-width: 576px) {
-[style*="--scw-padding-bottom-sm: var("] {
+[style~="--scw-padding-bottom-sm:"] {
   padding-bottom: var( --scw-padding-bottom-sm );
 }
 }
@@ -3547,7 +3579,7 @@ scw-float::after,
 @media screen and (max-width: 576px) {
-[style*="--scw-padding-width-sm: var("] {
+[style~="--scw-padding-width-sm:"] {
   padding-left: var( --scw-padding-width-sm );
   padding-right: var( --scw-padding-width-sm );
 }
@@ -3556,7 +3588,7 @@ scw-float::after,
 @media screen and (max-width: 576px) {
-[style*="--scw-padding-x-sm: var("] {
+[style~="--scw-padding-x-sm:"] {
   padding-left: var( --scw-padding-x-sm );
   padding-right: var( --scw-padding-x-sm );
 }
@@ -3565,7 +3597,7 @@ scw-float::after,
 @media screen and (max-width: 576px) {
-[style*="--scw-padding-height-sm: var("] {
+[style~="--scw-padding-height-sm:"] {
   padding-top: var( --scw-padding-height-sm );
   padding-bottom: var( --scw-padding-height-sm );
 }
@@ -3574,7 +3606,7 @@ scw-float::after,
 @media screen and (max-width: 576px) {
-[style*="--scw-padding-y-sm: var("] {
+[style~="--scw-padding-y-sm:"] {
   padding-top: var( --scw-padding-y-sm );
   padding-bottom: var( --scw-padding-y-sm );
 }
@@ -3583,7 +3615,7 @@ scw-float::after,
 @media screen and (max-width: 576px) {
-[style*="--scw-border-radius-sm: var("] {
+[style~="--scw-border-radius-sm:"] {
   border-radius: var( --scw-border-radius-sm );
 }
 }
@@ -3591,7 +3623,7 @@ scw-float::after,
 @media screen and (max-width: 576px) {
-[style*="--scw-gap-sm: var("] > * {
+[style~="--scw-gap-sm:"] > * {
   --gap: var( --scw-gap-sm );
 }
 }