@sc-360-v2/storefront-cms-library 0.5.70 → 0.5.71

package/dist/repeater-embla-controls.scss

@@ -1,211 +1,211 @@
-@use "sass:map";
-@use "sass:list";
-@use "./functions.scss" as *;
-
-@mixin CMSRepeaterEmblaControlStyles($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) {
-    &: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);
-      left: var(--_sf-t3-lt-vl-v2, 50%);
-      transform: var(--_sf-t3-tr-bl-v2, translateX(-50%));
-      // z-index: calc(var(--_higher-zIndex, 99999) - 2);
-      z-index: 2;
-      @if ($type != 3) {
-        visibility: var(--_sf-pg-ic-vt, hidden);
-        opacity: var(--_sf-pg-ic-op, 0);
-        transition: all 0.45s ease;
-      } @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))
-        // );
-        // Was `var(-_sf-ic-sz-nn)` — one dash short, so the declaration was dropped and
-        // the type-3 control bar had no reserved height.
-        min-height: var(--_sf-ic-sz-nn);
-        --_sf-t3-lt-vl-v2: var(--_sf-rp-ct-t3-left-vl, 50%);
-        --_sf-t3-bt-bl-v2: var(--_sf-rp-ct-t3-bottom-vl, 20px);
-        --_sf-t3-tr-bl-v2: var(--_sf-rp-ct-t3-transform-vl, translateX(-50%));
-        right: var(--_sf-rp-ct-t3-right-vl, auto);
-        top: var(--_sf-rp-ct-t3-top-vl, auto);
-      }
-
-      display: flex;
-      align-items: center;
-      gap: 12px;
-    }
-  }
-}
-
-@mixin emblaBtnStylesV1($type: 1) {
-  // Navigation
-  button {
-    &.embla__btn {
-      @if ($type == 1) {
-        position: absolute;
-        // z-index: calc(var(--_higher-zIndex, 99999) - 2);
-        z-index: 2;
-        top: var(--_sf-nv-tp-vl, 50%);
-        transform: translateY(-50%);
-        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))
-      // );
-      width: var(--_sf-ic-sz-nn);
-      // --_ctm-rep-lt-dt-se
-      height: var(--_sf-ic-sz-nn);
-      border-radius: var(--_sf-nv-ic-br, 50%);
-
-      @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) {
-        // --_sf-nv-ic-bg: color-mix(in srgb, var(--_sf-sl-ct-ic-dt-at-cl) 10%, transparent);
-        @include BgColorLighter(var(--_sf-sl-ct-ic-dt-at-cl), 10%);
-
-        svg {
-          path {
-            stroke: var(--_sf-sl-ct-ic-dt-at-cl);
-          }
-        }
-      }
-      &:disabled {
-        opacity: 0.45;
-        cursor: auto;
-      }
-
-      // 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;
-        justify-content: center;
-        align-items: center;
-
-        // Overrides the stroke hardcoded in the chevron icon markup. Lower specificity
-        // than the :hover rule above, so hover still wins with the active colour.
-        path {
-          stroke: var(--_sf-sl-ct-aw-in-cl, #667085);
-        }
-      }
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-  }
-}
-
-@mixin emblaDotsStylesV1($type: 1) {
-  :is(.pagination__v1) {
-    @if ($type == 1) {
-      position: absolute;
-      // z-index: calc(var(--_higher-zIndex, 99999) - 2);
-      z-index: 2;
-      left: 50%;
-      transform: translateX(-50%);
-      bottom: var(--_sf-nv-tp-vl, 10px);
-    }
-
-    @if ($type == 3) {
-      --_sf-dt-wh-t3: 16px;
-      --_sf-dt-ht-t3: 2px;
-      // --_sf-dt-br-t3: 100px;
-      --_dt-in-active-color: #d6d6d6;
-      --_sf-dt-gp-vl: 0px;
-
-      &:is(body[data-iframe-body="true"] *) {
-        pointer-events: none !important;
-      }
-    }
-
-    display: flex;
-    align-items: center;
-    gap: var(--_sf-dt-gp-vl, 8px);
-    max-width: 200px;
-
-    & > 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) {
-          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%);
-          // 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) {
-          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(--_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;
-            }
-          }
-        }
-
-        &.embla__dot--selected {
-          // 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) {
-            --_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);
-          }
-        }
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+
+@mixin CMSRepeaterEmblaControlStyles($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) {
+    &: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);
+      left: var(--_sf-t3-lt-vl-v2, 50%);
+      transform: var(--_sf-t3-tr-bl-v2, translateX(-50%));
+      // z-index: calc(var(--_higher-zIndex, 99999) - 2);
+      z-index: 2;
+      @if ($type != 3) {
+        visibility: var(--_sf-pg-ic-vt, hidden);
+        opacity: var(--_sf-pg-ic-op, 0);
+        transition: all 0.45s ease;
+      } @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))
+        // );
+        // Was `var(-_sf-ic-sz-nn)` — one dash short, so the declaration was dropped and
+        // the type-3 control bar had no reserved height.
+        min-height: var(--_sf-ic-sz-nn);
+        --_sf-t3-lt-vl-v2: var(--_sf-rp-ct-t3-left-vl, 50%);
+        --_sf-t3-bt-bl-v2: var(--_sf-rp-ct-t3-bottom-vl, 20px);
+        --_sf-t3-tr-bl-v2: var(--_sf-rp-ct-t3-transform-vl, translateX(-50%));
+        right: var(--_sf-rp-ct-t3-right-vl, auto);
+        top: var(--_sf-rp-ct-t3-top-vl, auto);
+      }
+
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+  }
+}
+
+@mixin emblaBtnStylesV1($type: 1) {
+  // Navigation
+  button {
+    &.embla__btn {
+      @if ($type == 1) {
+        position: absolute;
+        // z-index: calc(var(--_higher-zIndex, 99999) - 2);
+        z-index: 2;
+        top: var(--_sf-nv-tp-vl, 50%);
+        transform: translateY(-50%);
+        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))
+      // );
+      width: var(--_sf-ic-sz-nn);
+      // --_ctm-rep-lt-dt-se
+      height: var(--_sf-ic-sz-nn);
+      border-radius: var(--_sf-nv-ic-br, 50%);
+
+      @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) {
+        // --_sf-nv-ic-bg: color-mix(in srgb, var(--_sf-sl-ct-ic-dt-at-cl) 10%, transparent);
+        @include BgColorLighter(var(--_sf-sl-ct-ic-dt-at-cl), 10%);
+
+        svg {
+          path {
+            stroke: var(--_sf-sl-ct-ic-dt-at-cl);
+          }
+        }
+      }
+      &:disabled {
+        opacity: 0.45;
+        cursor: auto;
+      }
+
+      // 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;
+        justify-content: center;
+        align-items: center;
+
+        // Overrides the stroke hardcoded in the chevron icon markup. Lower specificity
+        // than the :hover rule above, so hover still wins with the active colour.
+        path {
+          stroke: var(--_sf-sl-ct-aw-in-cl, #667085);
+        }
+      }
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
+
+@mixin emblaDotsStylesV1($type: 1) {
+  :is(.pagination__v1) {
+    @if ($type == 1) {
+      position: absolute;
+      // z-index: calc(var(--_higher-zIndex, 99999) - 2);
+      z-index: 2;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: var(--_sf-nv-tp-vl, 10px);
+    }
+
+    @if ($type == 3) {
+      --_sf-dt-wh-t3: 16px;
+      --_sf-dt-ht-t3: 2px;
+      // --_sf-dt-br-t3: 100px;
+      --_dt-in-active-color: #d6d6d6;
+      --_sf-dt-gp-vl: 0px;
+
+      &:is(body[data-iframe-body="true"] *) {
+        pointer-events: none !important;
+      }
+    }
+
+    display: flex;
+    align-items: center;
+    gap: var(--_sf-dt-gp-vl, 8px);
+    max-width: 200px;
+
+    & > 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) {
+          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%);
+          // 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) {
+          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(--_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;
+            }
+          }
+        }
+
+        &.embla__dot--selected {
+          // 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) {
+            --_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);
+          }
+        }
+      }
+    }
+  }
+}