@sc-360-v2/storefront-cms-library 0.5.58 → 0.5.60

package/dist/repeater copy.scss

@@ -445,6 +445,18 @@ $rai: "repeater-advertise-item";
                 --_ctm-mob-dn-by-nw-dt-se-ft-fy,
                 var(--_ctm-tab-dn-by-nw-dt-se-ft-fy, var(--_ctm-dn-by-nw-dt-se-ft-fy))
               );
+              text-transform: var(
+                --_ctm-mob-dn-by-nw-dt-se-tt-tm,
+                var(--_ctm-tab-dn-by-nw-dt-se-tt-tm, var(--_ctm-dn-by-nw-dt-se-tt-tm))
+              );
+              word-wrap: var(
+                --_ctm-mob-dn-by-nw-dt-se-wd-wp,
+                var(--_ctm-tab-dn-by-nw-dt-se-wd-wp, var(--_ctm-dn-by-nw-dt-se-wd-wp))
+              );
+              word-break: var(
+                --_ctm-mob-dn-by-nw-dt-se-wd-bk,
+                var(--_ctm-tab-dn-by-nw-dt-se-wd-bk, var(--_ctm-dn-by-nw-dt-se-wd-bk))
+              );
               font-size: var(
                 --_ctm-mob-dn-by-nw-dt-se-ft-se,
                 var(--_ctm-tab-dn-by-nw-dt-se-ft-se, var(--_ctm-dn-by-nw-dt-se-ft-se))
@@ -584,6 +596,18 @@ $rai: "repeater-advertise-item";
                     --_ctm-mob-dn-by-nw-hr-se-ft-fy,
                     var(--_ctm-tab-dn-by-nw-hr-se-ft-fy, var(--_ctm-dn-by-nw-hr-se-ft-fy))
                   );
+                  text-transform: var(
+                    --_ctm-mob-dn-by-nw-hr-se-tt-tm,
+                    var(--_ctm-tab-dn-by-nw-hr-se-tt-tm, var(--_ctm-dn-by-nw-hr-se-tt-tm))
+                  );
+                  word-wrap: var(
+                    --_ctm-mob-dn-by-nw-hr-se-wd-wp,
+                    var(--_ctm-tab-dn-by-nw-hr-se-wd-wp, var(--_ctm-dn-by-nw-hr-se-wd-wp))
+                  );
+                  word-break: var(
+                    --_ctm-mob-dn-by-nw-hr-se-wd-bk,
+                    var(--_ctm-tab-dn-by-nw-hr-se-wd-bk, var(--_ctm-dn-by-nw-hr-se-wd-bk))
+                  );
                   font-size: var(
                     --_ctm-mob-dn-by-nw-hr-se-ft-se,
                     var(--_ctm-tab-dn-by-nw-hr-se-ft-se, var(--_ctm-dn-by-nw-hr-se-ft-se))

package/dist/repeater-embla-controls.scss

@@ -3,22 +3,26 @@
 @use "./functions.scss" as *;
 
 @mixin CMSRepeaterEmblaControlStyles($type: 1) {
-  @if ($type == 1) {
+  @if ($type ==1) {
+
     &:is(body[data-iframe-body="true"] *),
     &:hover {
       --_sf-nv-ic-vt: visible;
       --_sf-nv-ic-op: 1;
     }
   }
+
   @include emblaBtnStylesV1($type);
   @include emblaDotsStylesV1($type);
 
-  @if ($type == 2 or $type == 3) {
+  @if ($type ==2 or $type ==3) {
+
     &:is(body[data-iframe-body="true"] *),
     &:hover {
       --_sf-pg-ic-vt: visible;
       --_sf-pg-ic-op: 1;
     }
+
     .repeater__control__element {
       position: absolute;
       bottom: var(--_sf-t3-bt-bl-v2, 20px);
@@ -26,11 +30,14 @@
       transform: var(--_sf-t3-tr-bl-v2, translateX(-50%));
       // z-index: calc(var(--_higher-zIndex, 99999) - 2);
       z-index: 2;
-      @if ($type != 3) {
+
+      @if ($type !=3) {
         visibility: var(--_sf-pg-ic-vt, hidden);
         opacity: var(--_sf-pg-ic-op, 0);
         transition: all 0.45s ease;
-      } @else {
+      }
+
+      @else {
         // min-height: var(
         //   --_ctm-mob-rep-lt-aw-in-se,
         //   var(--_ctm-tab-rep-lt-aw-in-se, var(--_ctm-rep-lt-aw-in-se, 40px))
@@ -53,10 +60,11 @@
 }
 
 @mixin emblaBtnStylesV1($type: 1) {
+
   // Navigation
   button {
     &.embla__btn {
-      @if ($type == 1) {
+      @if ($type ==1) {
         position: absolute;
         // z-index: calc(var(--_higher-zIndex, 99999) - 2);
         z-index: 2;
@@ -65,13 +73,16 @@
         visibility: var(--_sf-nv-ic-vt, hidden);
         opacity: var(--_sf-nv-ic-op, 0);
         transition: all 0.45s ease;
+
         &.embla__prev {
           left: var(--_sf-nv-lt-vl, 10px);
         }
+
         &.embla__next {
           right: var(--_sf-nv-lt-vl, 10px);
         }
       }
+
       // --_sf-ic-sz-nn: var(
       //   --_ctm-mob-rep-lt-aw-in-se,
       //   var(--_ctm-tab-rep-lt-aw-in-se, var(--_ctm-rep-lt-aw-in-se, 40px))
@@ -81,12 +92,14 @@
       height: var(--_sf-ic-sz-nn);
       border-radius: var(--_sf-nv-ic-br, 50%);
 
-      @if ($type == 3) {
+      @if ($type ==3) {
         --_sf-dd-vl-bg-t3: transparent;
+
         &:is(body[data-iframe-body="true"] *) {
           pointer-events: none !important;
         }
       }
+
       background: var(--_sf-nv-ic-bg, var(--_sf-dd-vl-bg-t3, #fff));
 
       &:hover:not(:disabled) {
@@ -99,12 +112,13 @@
           }
         }
       }
+
       &:disabled {
         opacity: 0.45;
         cursor: auto;
       }
 
-      & > svg {
+      &>svg {
         width: calc(var(--_sf-ic-sz-nn) * 0.5);
         height: calc(var(--_sf-ic-sz-nn) * 0.5);
         display: flex;
@@ -117,6 +131,7 @@
           stroke: var(--_sf-sl-ct-aw-in-cl, #667085);
         }
       }
+
       display: flex;
       justify-content: center;
       align-items: center;
@@ -126,7 +141,7 @@
 
 @mixin emblaDotsStylesV1($type: 1) {
   :is(.pagination__v1) {
-    @if ($type == 1) {
+    @if ($type ==1) {
       position: absolute;
       // z-index: calc(var(--_higher-zIndex, 99999) - 2);
       z-index: 2;
@@ -135,7 +150,7 @@
       bottom: var(--_sf-nv-tp-vl, 10px);
     }
 
-    @if ($type == 3) {
+    @if ($type ==3) {
       --_sf-dt-wh-t3: 16px;
       --_sf-dt-ht-t3: 2px;
       // --_sf-dt-br-t3: 100px;
@@ -152,13 +167,14 @@
     gap: var(--_sf-dt-gp-vl, 8px);
     max-width: 200px;
 
-    & > button {
+    &>button {
       &.embla__dot {
+
         // --_sf-ed-vl-sz: var(
         //   --_ctm-mob-rep-lt-dt-se,
         //   var(--_ctm-tab-rep-lt-dt-se, var(--_ctm-rep-lt-dt-se, 10px))
         // );
-        @if ($type != 3) {
+        @if ($type !=3) {
           transition: all 0.45s ease;
           width: var(--_sf-nv-pg-sz-ac, var(--_sf-ed-vl-sz, 10px));
           height: var(--_sf-ed-vl-sz, 10px);
@@ -168,7 +184,9 @@
           &:not(.embla__dot--selected) {
             border: 1px solid color-mix(in srgb, var(--_sf-sl-ct-ic-dt-at-cl) 30%, transparent);
           }
-        } @else if($type == 3) {
+        }
+
+        @else if($type ==3) {
           width: var(--_sf-dt-at-wh-t3, var(--_sf-dt-wh-t3, 10px));
           height: var(--_sf-dt-at-ht-t3, var(--_sf-dt-ht-t3, 10px));
           border-radius: var(--_sf-dt-at-br-t3, var(--_sf-dt-bt-at, 0px));
@@ -176,9 +194,11 @@
 
           &:not(.embla__dot--selected) {
             --_sf-br-vl-t3: 16px;
+
             &:nth-of-type(1) {
               --_sf-dt-bt-at: var(--_sf-br-vl-t3) 0px 0px var(--_sf-br-vl-t3);
             }
+
             &:last-of-type {
               --_sf-dt-bt-at: 0px var(--_sf-br-vl-t3) var(--_sf-br-vl-t3) 0px;
             }
@@ -190,7 +210,7 @@
           --_sf-dt-bt-at: min(calc(var(--_sf-ed-vl-sz, 10px) * 0.5), 10px);
           --_sf-nv-pg-sz-ac: max(calc(var(--_sf-ed-vl-sz, 10px) * 2), 20px);
 
-          @if ($type == 3) {
+          @if ($type ==3) {
             --_sf-dt-at-wh-t3: calc(2 * var(--_sf-dt-wh-t3));
             --_sf-dt-at-ht-t3: 6px;
             --_sf-dt-at-br-t3: var(--_sf-dt-at-ht-t3);
@@ -199,4 +219,4 @@
       }
     }
   }
-}
+}

package/dist/repeater-grid-toggle.scss

@@ -14,193 +14,183 @@ $wrapper: ".tgl__wrapper";
     bottom: var(--_sf-rp-gt-t3-bottom-vl, auto);
     top: var(--_sf-rp-gt-t3-top-vl, 0px);
 
-    & > div {
+    &>div {
       &#{$wrapper} {
         display: var(--_d-flex);
         align-items: center;
+
         // border: 1px solid var(--_gray-200);
         // Gated on the Layout Style > Show Border switch; previously the border was
         // unconditional, so turning the switch off changed nothing.
         &[data-show-border="true"] {
           border-style: prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-lt-se-br-se, solid);
           border-width: prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-lt-se-br-wh, 1px);
-          border-color: prepareMediaVariable(
-            --_ctm-rep-dn-gd-vw-cl-se-lt-se-br-cr,
-            var(--_gray-200)
-          );
+          border-color: prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-lt-se-br-cr,
+              var(--_gray-200));
         }
+
         --_br-6: 6px;
         --_width-40: 40px;
         --_width-20: 20px;
         border-radius: 4px;
         // --_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-bd-cr,
-        background-color: prepareMediaVariable(
-          --_ctm-rep-dn-gd-vw-cl-se-lt-se-bd-cr,
-          var(--_base-white)
-        );
+        background-color: prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-lt-se-bd-cr,
+          var(--_base-white));
 
-        & > button {
+        &>button {
           display: var(--_d-flex);
           // $size: var(--_width-40);
           $size: #{var(
-              --_sf-at-btn-size,
-              #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-in-se, var(--_width-20))}
-            )};
-          width: var(
-            --_sf-at-btn-wh,
-            #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-wh, calc(#{$size} * 2))}
-          );
-          height: calc(#{$size} * 2);
-          align-items: center;
-          justify-content: center;
-          background: var(
-            --_sf-at-btn-bd,
-            #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-bd-cr)}
-          );
-
-          padding: var(
-            --_sf-at-btn-pg,
-            #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-pg, 0px)}
-          );
-
-          // Border / radius / shadow now come from the button's own settings. The
-          // first/last radius overrides below only apply while no radius is configured,
-          // so the default pill shape survives an unconfigured toggle.
-          &[data-show-border="true"] {
-            border-color: var(
-              --_sf-at-btn-br-cr,
-              #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-cr)}
-            );
-            border-style: var(
-              --_sf-at-btn-br-se,
-              #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-se)}
-            );
-            border-width: var(
-              --_sf-at-btn-br-wh,
-              #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-wh)}
-            );
-          }
-
-          // Show Shadow / Show Icon are per-state switches on the Button accordion; they
-          // reach the markup as data attributes and gate the two variables below.
-          &[data-show-shadow="false"] {
-            --_show-shadow: none;
-          }
-          &[data-show-icon="false"] {
-            --_show-icon: none;
-          }
-
-          box-shadow: var(
-            --_show-shadow,
-            var(
-                --_sf-at-btn-sw-ae,
-                #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-sw-ae, 0)}
-              )
-              var(
-                --_sf-at-btn-sw-br,
-                #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-sw-br, 0)}
-              )
-              var(
-                --_sf-at-btn-sw-sd,
-                #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-sw-sd, 0)}
-              )
-              var(
-                --_sf-at-btn-sw-cr,
-                #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-sw-cr, transparent)}
-              )
-          );
-
-          // Radius falls back to the pill geometry these two buttons have always had.
-          // It is NOT routed through an --_sf-at-btn-* variable: prepareMediaVariable
-          // tails with `inherit`, so the variable would always be "set" and the
-          // per-position fallback below would never fire, collapsing the pill to 0.
-          &:first-of-type {
-            border-radius: #{prepareMediaVariable(
-                --_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-rs,
-                4px 0 0 4px
-              )};
-          }
-          &:last-of-type {
-            border-radius: #{prepareMediaVariable(
-                --_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-rs,
-                0 4px 4px 0
-              )};
-          }
-
-          // Hover sits between default and selected: it overrides the same
-          // `--_sf-at-btn-*` layer, and the `[data-style-active="true"]` block below
-          // comes later in source order, so the selected button keeps its own styling
-          // while hovered rather than flipping to the hover look.
-          &:hover {
-            --_sf-at-btn-size: #{prepareMediaVariable(
-                --_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-in-se,
-                var(--_width-20)
-              )};
-            --_sf-at-pt-cl: #{prepareMediaVariable(
-                --_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-in-c1,
-                var(--_gray-700)
-              )};
-            --_sf-at-btn-bd: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-bd-cr)};
-            --_sf-at-btn-br-cr: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-br-cr)};
-            --_sf-at-btn-br-se: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-br-se)};
-            --_sf-at-btn-br-wh: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-br-wh)};
-            --_sf-at-btn-sw-ae: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-sw-ae)};
-            --_sf-at-btn-sw-br: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-sw-br)};
-            --_sf-at-btn-sw-sd: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-sw-sd)};
-            --_sf-at-btn-sw-cr: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-sw-cr)};
-            --_sf-at-btn-wh: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-wh)};
-            --_sf-at-btn-pg: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-pg)};
-          }
-
-          &[data-style-active="true"] {
-            // --_sf-at-pt-cl: var(--_gray-700);
-            --_sf-at-btn-size: #{prepareMediaVariable(
-                --_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-in-se,
-                var(--_width-20)
-              )};
-            --_sf-at-pt-cl: #{prepareMediaVariable(
-                --_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-in-c1,
-                var(--_gray-700)
-              )};
-            --_sf-at-btn-bd: #{prepareMediaVariable(
-                --_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-bd-cr,
-                var(--_gray-200)
-              )};
-            // background: var(--_gray-200);
-
-            // Selected state overrides the same properties via the --_sf-at-btn-* layer
-            // the default declarations above already read from.
-            --_sf-at-btn-br-cr: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-br-cr)};
-            --_sf-at-btn-br-se: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-br-se)};
-            --_sf-at-btn-br-wh: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-br-wh)};
-            --_sf-at-btn-sw-ae: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-sw-ae)};
-            --_sf-at-btn-sw-br: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-sw-br)};
-            --_sf-at-btn-sw-sd: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-sw-sd)};
-            --_sf-at-btn-sw-cr: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-sw-cr)};
-            --_sf-at-btn-wh: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-wh)};
-            --_sf-at-btn-pg: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-pg)};
-          }
-
-          // `img` covers custom uploaded toggle icons, which render as an <img>.
-          svg,
-          img {
-            display: var(--_show-icon, block);
-            width: calc(#{$size} * 1);
-            height: calc(#{$size} * 1);
-          }
-
-          svg {
-            path {
-              stroke: var(
-                --_sf-at-pt-cl,
-                #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-in-c1, var(--_gray-500))}
-              );
-              // Overrides the stroke-width presentation attribute baked into the icon markup.
-              stroke-width: prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-se-wh, 1.25);
-            }
-          }
+ --_sf-at-btn-size,
+            #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-in-se, var(--_width-20))})
         }
+
+        ;
+        width: var(--_sf-at-btn-wh,
+          #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-wh, calc(#{$size} * 2))
+      });
+      height: calc(#{$size} * 2);
+      align-items: center;
+      justify-content: center;
+      background: var(--_sf-at-btn-bd,
+        #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-bd-cr)});
+
+      padding: var(--_sf-at-btn-pg,
+        #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-pg, 0px)});
+
+      // Border / radius / shadow now come from the button's own settings. The
+      // first/last radius overrides below only apply while no radius is configured,
+      // so the default pill shape survives an unconfigured toggle.
+      &[data-show-border="true"] {
+        border-color: var(--_sf-at-btn-br-cr,
+          #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-cr)});
+        border-style: var(--_sf-at-btn-br-se,
+          #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-se)});
+        border-width: var(--_sf-at-btn-br-wh,
+          #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-wh)});
+      }
+
+      // Show Shadow / Show Icon are per-state switches on the Button accordion; they
+      // reach the markup as data attributes and gate the two variables below.
+      &[data-show-shadow="false"] {
+        --_show-shadow: none;
+      }
+
+      &[data-show-icon="false"] {
+        --_show-icon: none;
+      }
+
+      box-shadow: var(--_show-shadow,
+        var(--_sf-at-btn-sw-ae,
+          #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-sw-ae, 0)}) var(--_sf-at-btn-sw-br,
+          #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-sw-br, 0)}) var(--_sf-at-btn-sw-sd,
+          #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-sw-sd, 0)}) var(--_sf-at-btn-sw-cr,
+          #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-sw-cr, transparent)}));
+
+      // Radius falls back to the pill geometry these two buttons have always had.
+      // It is NOT routed through an --_sf-at-btn-* variable: prepareMediaVariable
+      // tails with `inherit`, so the variable would always be "set" and the
+      // per-position fallback below would never fire, collapsing the pill to 0.
+      &:first-of-type {
+        border-radius: #{prepareMediaVariable(
+ --_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-rs,
+        4px 0 0 4px)
       }
+
+      ;
+    }
+
+    &:last-of-type {
+      border-radius: #{prepareMediaVariable(
+ --_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-rs,
+      0 4px 4px 0)
     }
+
+    ;
+  }
+
+  // Hover sits between default and selected: it overrides the same
+  // `--_sf-at-btn-*` layer, and the `[data-style-active="true"]` block below
+  // comes later in source order, so the selected button keeps its own styling
+  // while hovered rather than flipping to the hover look.
+  &:hover {
+    --_sf-at-btn-size: #{prepareMediaVariable(
+ --_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-in-se,
+    var(--_width-20))
   }
+
+  ;
+  --_sf-at-pt-cl: #{prepareMediaVariable(
+ --_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-in-c1,
+  var(--_gray-700))
+}
+
+;
+--_sf-at-btn-bd: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-bd-cr)};
+--_sf-at-btn-br-cr: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-br-cr)};
+--_sf-at-btn-br-se: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-br-se)};
+--_sf-at-btn-br-wh: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-br-wh)};
+--_sf-at-btn-sw-ae: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-sw-ae)};
+--_sf-at-btn-sw-br: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-sw-br)};
+--_sf-at-btn-sw-sd: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-sw-sd)};
+--_sf-at-btn-sw-cr: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-sw-cr)};
+--_sf-at-btn-wh: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-wh)};
+--_sf-at-btn-pg: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-pg)};
+}
+
+&[data-style-active="true"] {
+  // --_sf-at-pt-cl: var(--_gray-700);
+  --_sf-at-btn-size: #{prepareMediaVariable(
+ --_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-in-se,
+  var(--_width-20))
+}
+
+;
+--_sf-at-pt-cl: #{prepareMediaVariable(
+ --_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-in-c1,
+var(--_gray-700))
+}
+
+;
+--_sf-at-btn-bd: #{prepareMediaVariable(
+ --_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-bd-cr,
+var(--_gray-200))
+}
+
+;
+// background: var(--_gray-200);
+
+// Selected state overrides the same properties via the --_sf-at-btn-* layer
+// the default declarations above already read from.
+--_sf-at-btn-br-cr: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-br-cr)};
+--_sf-at-btn-br-se: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-br-se)};
+--_sf-at-btn-br-wh: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-br-wh)};
+--_sf-at-btn-sw-ae: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-sw-ae)};
+--_sf-at-btn-sw-br: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-sw-br)};
+--_sf-at-btn-sw-sd: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-sw-sd)};
+--_sf-at-btn-sw-cr: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-sw-cr)};
+--_sf-at-btn-wh: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-wh)};
+--_sf-at-btn-pg: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-pg)};
+}
+
+// `img` covers custom uploaded toggle icons, which render as an <img>.
+svg,
+img {
+  display: var(--_show-icon, block);
+  width: calc(#{$size} * 1);
+  height: calc(#{$size} * 1);
+}
+
+svg {
+  path {
+    stroke: var(--_sf-at-pt-cl,
+      #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-in-c1, var(--_gray-500))});
+    // Overrides the stroke-width presentation attribute baked into the icon markup.
+    stroke-width: prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-se-wh, 1.25);
+  }
+}
+}
+}
+}
 }
+}