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

package/dist/quotes.scss

@@ -4,30 +4,33 @@
 
 $resizerId: "[data-cms-tool='cms-element-resizer']";
 $resizeActive: '[data-cms-element-resizer="true"]';
-
 [data-div-type="element"] {
   &[data-element-type="quotes"] {
-    width: var(--_sf-el-wh-st-mx,
-        calc(1% * var(--_ctm-mob-ele-nw-wh-vl,
-            var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))))));
+    width: var(
+      --_sf-el-wh-st-mx,
+      calc(
+        1% *
+          var(
+            --_ctm-mob-ele-nw-wh-vl,
+            var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
+          )
+      )
+    );
     margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
 
-    &>div {
+    & > div {
       &.wrapper {
         width: 100%;
         padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
-
         &[data-divider-type="true"] .metric_item {
           border: 0px !important;
           border-top: 2px solid var(--_primary-100) !important;
-
           .quotes_wrapper {
             border: 0px !important;
           }
         }
       }
     }
-
     .embla__container {
       grid-template-columns: max-content !important;
       grid-auto-columns: max-content !important;
@@ -50,12 +53,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       text-transform: prepareMediaVariable(--_ctm-dn-wt-se-tt-tm);
       word-wrap: prepareMediaVariable(--_ctm-dn-wt-se-wd-wp);
       word-break: prepareMediaVariable(--_ctm-dn-wt-se-wd-bk);
-
       &.flex__overflow {
         white-space: normal;
         @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
       }
-
       font-size: prepareMediaVariable(--_ctm-dn-wt-se-ft-se);
       color: prepareMediaVariable(--_ctm-dn-wt-se-cr);
       font-weight: prepareMediaVariable(--_ctm-dn-wt-se-ft-wt);
@@ -69,8 +70,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       border-color: prepareMediaVariable(--_ctm-dn-wt-se-br-cr);
       border-style: prepareMediaVariable(--_ctm-dn-wt-se-br-se);
       border-radius: prepareMediaVariable(--_ctm-dn-wt-se-br-rs);
-      box-shadow: prepareMediaVariable(--_ctm-dn-wt-se-sw-ae) prepareMediaVariable(--_ctm-dn-wt-se-sw-br) prepareMediaVariable(--_ctm-dn-wt-se-sw-sd) prepareMediaVariable(--_ctm-dn-wt-se-sw-cr);
-
+      box-shadow: prepareMediaVariable(--_ctm-dn-wt-se-sw-ae)
+        prepareMediaVariable(--_ctm-dn-wt-se-sw-br) prepareMediaVariable(--_ctm-dn-wt-se-sw-sd)
+        prepareMediaVariable(--_ctm-dn-wt-se-sw-cr);
       .quotes_card {
         display: flex;
         flex-direction: column;
@@ -119,7 +121,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           border-color: prepareMediaVariable(--_ctm-dn-im-se-br-cr);
           border-style: prepareMediaVariable(--_ctm-dn-im-se-br-se);
           border-radius: prepareMediaVariable(--_ctm-dn-im-se-br-rs);
-          box-shadow: prepareMediaVariable(--_ctm-dn-im-se-sw-ae) prepareMediaVariable(--_ctm-dn-im-se-sw-br) prepareMediaVariable(--_ctm-dn-im-se-sw-sd) prepareMediaVariable(--_ctm-dn-im-se-sw-cr);
+          box-shadow: prepareMediaVariable(--_ctm-dn-im-se-sw-ae)
+            prepareMediaVariable(--_ctm-dn-im-se-sw-br) prepareMediaVariable(--_ctm-dn-im-se-sw-sd)
+            prepareMediaVariable(--_ctm-dn-im-se-sw-cr);
 
           .content {
             display: flex;
@@ -134,12 +138,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             text-transform: prepareMediaVariable(--_ctm-dn-im-se-tt-tm);
             word-wrap: prepareMediaVariable(--_ctm-dn-im-se-wd-wp);
             word-break: prepareMediaVariable(--_ctm-dn-im-se-wd-bk);
-
             &.flex__overflow {
               white-space: normal;
               @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
             }
-
             font-size: prepareMediaVariable(--_ctm-dn-im-se-ft-se);
             color: prepareMediaVariable(--_ctm-dn-im-se-cr);
             font-weight: prepareMediaVariable(--_ctm-dn-im-se-ft-wt);
@@ -179,7 +181,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 border-color: prepareMediaVariable(--_ctm-dn-qe-id-br-cr);
                 border-style: prepareMediaVariable(--_ctm-dn-qe-id-br-se);
                 border-radius: prepareMediaVariable(--_ctm-dn-qe-id-br-rs);
-                box-shadow: prepareMediaVariable(--_ctm-dn-qe-id-sw-ae) prepareMediaVariable(--_ctm-dn-qe-id-sw-br) prepareMediaVariable(--_ctm-dn-qe-id-sw-sd) prepareMediaVariable(--_ctm-dn-qe-id-sw-cr);
+                box-shadow: prepareMediaVariable(--_ctm-dn-qe-id-sw-ae)
+                  prepareMediaVariable(--_ctm-dn-qe-id-sw-br)
+                  prepareMediaVariable(--_ctm-dn-qe-id-sw-sd)
+                  prepareMediaVariable(--_ctm-dn-qe-id-sw-cr);
               }
 
               .status_badge {
@@ -195,7 +200,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 border-color: prepareMediaVariable(--_ctm-dn-qe-ss-br-cr);
                 border-style: prepareMediaVariable(--_ctm-dn-qe-ss-br-se);
                 border-radius: prepareMediaVariable(--_ctm-dn-qe-ss-br-rs);
-                box-shadow: prepareMediaVariable(--_ctm-dn-qe-ss-sw-ae) prepareMediaVariable(--_ctm-dn-qe-ss-sw-br) prepareMediaVariable(--_ctm-dn-qe-ss-sw-sd) prepareMediaVariable(--_ctm-dn-qe-ss-sw-cr);
+                box-shadow: prepareMediaVariable(--_ctm-dn-qe-ss-sw-ae)
+                  prepareMediaVariable(--_ctm-dn-qe-ss-sw-br)
+                  prepareMediaVariable(--_ctm-dn-qe-ss-sw-sd)
+                  prepareMediaVariable(--_ctm-dn-qe-ss-sw-cr);
 
                 .quote_status {
                   // color: #b93815;
@@ -241,7 +249,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 border-color: prepareMediaVariable(--_ctm-dn-rd-on-br-cr);
                 border-style: prepareMediaVariable(--_ctm-dn-rd-on-br-se);
                 border-radius: prepareMediaVariable(--_ctm-dn-rd-on-br-rs);
-                box-shadow: prepareMediaVariable(--_ctm-dn-rd-on-sw-ae) prepareMediaVariable(--_ctm-dn-rd-on-sw-br) prepareMediaVariable(--_ctm-dn-rd-on-sw-sd) prepareMediaVariable(--_ctm-dn-rd-on-sw-cr);
+                box-shadow: prepareMediaVariable(--_ctm-dn-rd-on-sw-ae)
+                  prepareMediaVariable(--_ctm-dn-rd-on-sw-br)
+                  prepareMediaVariable(--_ctm-dn-rd-on-sw-sd)
+                  prepareMediaVariable(--_ctm-dn-rd-on-sw-cr);
               }
 
               .quotes_amount {
@@ -267,10 +278,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 border-color: prepareMediaVariable(--_ctm-dn-qe-id-br-cr);
                 border-style: prepareMediaVariable(--_ctm-dn-qe-id-br-se);
                 border-radius: prepareMediaVariable(--_ctm-dn-qe-id-br-rs);
-                box-shadow: prepareMediaVariable(--_ctm-dn-qe-id-sw-ae) prepareMediaVariable(--_ctm-dn-qe-id-sw-br) prepareMediaVariable(--_ctm-dn-qe-id-sw-sd) prepareMediaVariable(--_ctm-dn-qe-id-sw-cr);
+                box-shadow: prepareMediaVariable(--_ctm-dn-qe-id-sw-ae)
+                  prepareMediaVariable(--_ctm-dn-qe-id-sw-br)
+                  prepareMediaVariable(--_ctm-dn-qe-id-sw-sd)
+                  prepareMediaVariable(--_ctm-dn-qe-id-sw-cr);
               }
             }
-
             .quotes_action {
               display: flex;
               align-items: center;
@@ -307,8 +320,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           display: grid;
           grid-template-rows: 100%;
 
-          grid-template-columns: repeat(var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
-              calc(100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))));
+          grid-template-columns: repeat(
+            var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
+            calc(
+              100% /
+                var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
+            )
+          );
 
           grid-auto-flow: column;
           gap: var(--_ctm-mob-lt-sg-bn-is, var(--_ctm-tab-lt-sg-bn-is, var(--_ctm-lt-sg-bn-is)));
@@ -318,13 +336,27 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           }
 
           &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
-            height: calc(100% - calc(var(--_ctm-mob-dn-pn-le-le-ht,
-                    var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))) + 20px));
+            height: calc(
+              100% - calc(
+                  var(
+                      --_ctm-mob-dn-pn-le-le-ht,
+                      var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
+                    ) +
+                    20px
+                )
+            );
           }
 
           &[data-control-type="Bottom"][data-slider-control="Dots"] {
-            height: calc(100% - calc(var(--_ctm-mob-dn-pn-ds-dt-se,
-                    var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))) + 20px));
+            height: calc(
+              100% - calc(
+                  var(
+                      --_ctm-mob-dn-pn-ds-dt-se,
+                      var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
+                    ) +
+                    20px
+                )
+            );
           }
 
           .embla__slide {
@@ -333,10 +365,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           }
         }
       }
-
       &:not([data-display-style="Column"]) {
         .embla__container {
-          grid-auto-columns: calc(100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))));
+          grid-auto-columns: calc(
+            100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
+          );
         }
       }
 
@@ -347,7 +380,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           overflow: unset;
           height: 80%;
           flex-grow: 1;
-
           &:not([data-is-builder-type="true"]) {
             height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
           }
@@ -372,8 +404,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       &[data-display-style="Grid"][data-scroll-direction="Horizontal"] {
         .embla__viewport {
           .embla__container {
-            grid-template-rows: repeat(var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))),
-                calc(100% / var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn)))));
+            grid-template-rows: repeat(
+              var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))),
+              calc(
+                100% /
+                  var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn)))
+              )
+            );
           }
         }
       }
@@ -395,8 +432,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             height: var(--_ctm-height);
             // min-height: var(--_ctm-height);
 
-            grid-template-columns: repeat(var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
-                1fr);
+            grid-template-columns: repeat(
+              var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
+              1fr
+            );
             grid-template-rows: unset;
             grid-auto-flow: row;
           }
@@ -409,7 +448,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         .embla__viewport {
           .embla__container {
             display: flex;
-
             .embla__slide {
               width: unset;
               height: 100%;
@@ -427,25 +465,20 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         width: 100%;
         justify-content: space-between;
         transform: translate(-50%, -50%);
-
         //   padding-left: 20px;
         &[data-control-type="Side"] {
-
           .left-button,
           .right-button {
             background-color: transparent;
           }
         }
-
         &[data-background-shape="Round"] {
-
           .left-button,
           .right-button {
             background-color: #f2f5f5;
             box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
           }
         }
-
         &[data-control-type="Bottom-Overflow"] {
           transform: translateX(-50%);
           width: 100%;
@@ -454,7 +487,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           top: unset;
           bottom: 6px;
         }
-
         &[data-control-type="Bottom"] {
           transform: unset;
           position: static;
@@ -463,7 +495,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           gap: 12px;
           margin-top: 10px;
         }
-
         &[data-control-type="Top"] {
           top: 0px;
           position: absolute;
@@ -474,7 +505,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           gap: 12px;
           margin-top: 10px;
         }
-
         .left-button {
           padding: 10px;
           border-radius: 50%;
@@ -487,7 +517,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           cursor: pointer;
           outline: none;
           margin-left: 12px;
-
           &:disabled {
             & svg {
               path {
@@ -496,7 +525,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             }
           }
         }
-
         .right-button {
           border-radius: 50%;
           border: none;
@@ -519,7 +547,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             }
           }
         }
-
         .icon {
           display: flex;
 
@@ -539,14 +566,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           width: calc(100% - 120px);
           margin-inline: auto;
         }
-
         .left-button {
           position: absolute;
           left: 0;
           top: 50%;
           transform: translateY(-50%);
         }
-
         .right-button {
           position: absolute;
 
@@ -559,11 +584,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       &[data-thumbnail-placement="top"] {
         flex-direction: column-reverse;
       }
-
       &[data-thumbnail-placement="bottom"] {
         flex-direction: column;
       }
-
       &[data-thumbnail-placement="left"] {
         flex-direction: row-reverse;
 
@@ -577,10 +600,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           }
         }
       }
-
       &[data-thumbnail-placement="right"] {
         flex-direction: row;
-
         .embla__thumbs {
           width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
 
@@ -592,7 +613,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           }
         }
       }
-
       .embla__dots {
         display: flex;
         flex-wrap: wrap;
@@ -608,13 +628,14 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           transform: translateX(-50%);
           width: 75%;
         }
-
         .embla__dot {
           -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
           -webkit-appearance: none;
           appearance: none;
-          background-color: var(--_ctm-mob-dn-pn-ds-or-dt-cr,
-              var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr)));
+          background-color: var(
+            --_ctm-mob-dn-pn-ds-or-dt-cr,
+            var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
+          );
 
           touch-action: manipulation;
           display: inline-flex;
@@ -625,56 +646,75 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           margin: 0;
           // width: 0.6rem;
           // height: 0.6rem;
-          width: var(--_ctm-mob-dn-pn-ds-dt-se,
-              var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)));
-          height: var(--_ctm-mob-dn-pn-ds-dt-se,
-              var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)));
+          width: var(
+            --_ctm-mob-dn-pn-ds-dt-se,
+            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
+          );
+          height: var(
+            --_ctm-mob-dn-pn-ds-dt-se,
+            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
+          );
 
           display: flex;
           align-items: center;
           justify-content: center;
           border-radius: 50%;
         }
-
         .embla__dot:after {
           // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
-          width: var(--_ctm-mob-dn-pn-ds-dt-se,
-              var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)));
-          height: var(--_ctm-mob-dn-pn-ds-dt-se,
-              var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)));
+          width: var(
+            --_ctm-mob-dn-pn-ds-dt-se,
+            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
+          );
+          height: var(
+            --_ctm-mob-dn-pn-ds-dt-se,
+            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
+          );
 
           border-radius: 50%;
           display: flex;
           align-items: center;
           content: "";
         }
-
         .embla__dot--selected:after {
           box-shadow: inset 0 0 0 1px var(--text-body);
-          background-color: var(--_ctm-mob-dn-pn-ds-ct-dt-cr,
-              var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr)));
+          background-color: var(
+            --_ctm-mob-dn-pn-ds-ct-dt-cr,
+            var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
+          );
         }
-
         &[data-slider-control="Pagination Line"] {
           .embla__dot {
-            width: var(--_ctm-mob-dn-pn-le-le-wh,
-                var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh)));
-            height: var(--_ctm-mob-dn-pn-le-le-ht,
-                var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht)));
-            background-color: var(--_ctm-mob-dn-pn-le-or-le-cr,
-                var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr)));
+            width: var(
+              --_ctm-mob-dn-pn-le-le-wh,
+              var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
+            );
+            height: var(
+              --_ctm-mob-dn-pn-le-le-ht,
+              var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
+            );
+            background-color: var(
+              --_ctm-mob-dn-pn-le-or-le-cr,
+              var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
+            );
             border-radius: 6px;
           }
 
           .embla__dot--selected:after {
             box-shadow: inset 0 0 0 1px var(--text-body);
             border-radius: 6px;
-            width: var(--_ctm-mob-dn-pn-le-le-wh,
-                var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh)));
-            height: var(--_ctm-mob-dn-pn-le-le-ht,
-                var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht)));
-            background-color: var(--_ctm-mob-dn-pn-le-ct-le-cr,
-                var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr)));
+            width: var(
+              --_ctm-mob-dn-pn-le-le-wh,
+              var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
+            );
+            height: var(
+              --_ctm-mob-dn-pn-le-le-ht,
+              var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
+            );
+            background-color: var(
+              --_ctm-mob-dn-pn-le-ct-le-cr,
+              var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
+            );
           }
         }
       }
@@ -699,7 +739,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
 
           overflow: hidden;
         }
-
         .embla__thumbs__container {
           display: flex;
           flex-direction: row;
@@ -724,4 +763,4 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       }
     }
   }
-}
+}

package/dist/repeater-embla-controls.scss

@@ -3,26 +3,22 @@
 @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);
@@ -30,14 +26,11 @@
       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))
@@ -60,11 +53,10 @@
 }
 
 @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;
@@ -73,16 +65,13 @@
         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))
@@ -92,14 +81,12 @@
       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) {
@@ -112,13 +99,16 @@
           }
         }
       }
-
       &:disabled {
         opacity: 0.45;
         cursor: auto;
       }
 
-      &>svg {
+      // Custom (Sirv-hosted) arrow icons are fetched at runtime and land inside a
+      // `.icon` span instead of directly on the button, so they need the same sizing
+      // and stroke as the inlined built-in chevrons.
+      & > svg,
+      & > .icon > svg {
         width: calc(var(--_sf-ic-sz-nn) * 0.5);
         height: calc(var(--_sf-ic-sz-nn) * 0.5);
         display: flex;
@@ -131,7 +121,6 @@
           stroke: var(--_sf-sl-ct-aw-in-cl, #667085);
         }
       }
-
       display: flex;
       justify-content: center;
       align-items: center;
@@ -141,7 +130,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;
@@ -150,7 +139,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;
@@ -167,38 +156,36 @@
     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);
           border-radius: var(--_sf-dt-bt-at, 50%);
-          background: var(--_sf-nv-pg-bg, #fff);
+          // Inactive dot fill. `--_sf-dt-ie-bg` is the per-element hook (the layouter
+          // sets it from its Pagination Dots section); unset everywhere else, which
+          // leaves the original default.
+          background: var(--_sf-nv-pg-bg, var(--_sf-dt-ie-bg, #fff));
 
           &: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));
-          background: var(--_sf-nv-pg-bg, var(--_dt-in-active-color));
+          background: var(--_sf-nv-pg-bg, var(--_sf-dt-ie-bg, var(--_dt-in-active-color)));
 
           &: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;
             }
@@ -206,11 +193,13 @@
         }
 
         &.embla__dot--selected {
-          --_sf-nv-pg-bg: var(--_sf-sl-ct-ic-dt-at-cl, #162578);
+          // Selected dot fill. `--_sf-dt-ae-bg` is the per-element hook; without it the
+          // dot keeps following Control Active Color as before.
+          --_sf-nv-pg-bg: var(--_sf-dt-ae-bg, var(--_sf-sl-ct-ic-dt-at-cl, #162578));
           --_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);
@@ -219,4 +208,4 @@
       }
     }
   }
-}
+}