@sc-360-v2/storefront-cms-library 0.5.53 → 0.5.55

package/dist/product-image-allocation.scss

@@ -638,6 +638,65 @@
         }
       }
     }
+    // Image > Pagination Arrows: the button's own box. Until now the arrows carried
+    // only a glyph, a size and a colour, so the Border and Radius tabs of that panel
+    // had nothing to write to and the box below was hardcoded. Declared once for both
+    // buttons and placed after them so it wins on source order — each still sets its
+    // own margin and disabled state above.
+    //
+    // Every fallback is the value that was hardcoded here before (10px padding, a
+    // 50% radius, no border), so an arrow nobody has styled looks exactly as it did.
+    .left-button,
+    .right-button {
+      padding: prepareMediaVariable(--_ctm-dn-ie-pn-as-pg, 10px);
+      background-color: prepareMediaVariable(--_ctm-dn-ie-pn-as-bd-cr, transparent);
+      border-color: prepareMediaVariable(--_ctm-dn-ie-pn-as-br-cr, transparent);
+      border-style: prepareMediaVariable(--_ctm-dn-ie-pn-as-br-se, solid);
+      border-width: prepareMediaVariable(--_ctm-dn-ie-pn-as-br-wh, 0);
+      // Falls back to 50%, NOT prepareMediaVariable's `inherit` tail — an arrow with
+      // no configured radius has always been a circle.
+      border-radius: prepareMediaVariable(--_ctm-dn-ie-pn-as-br-rs, 50%);
+      // Shadow is opt-in: these arrows have never cast one, so it only appears once
+      // Show Shadow is switched on.
+      box-shadow: none;
+
+      &[data-show-shadow="true"] {
+        box-shadow: prepareMediaVariable(--_ctm-dn-ie-pn-as-sw-ae, 0 0)
+          prepareMediaVariable(--_ctm-dn-ie-pn-as-sw-br, 0)
+          prepareMediaVariable(--_ctm-dn-ie-pn-as-sw-sd, 0)
+          prepareMediaVariable(--_ctm-dn-ie-pn-as-sw-cr, transparent);
+      }
+
+      &[data-show-border="false"] {
+        border: none;
+      }
+
+      // Arrow Color. Applied to the svg itself and to any descendant that carries a
+      // stroke or a fill, because a library glyph paints with `stroke` on its paths
+      // while an uploaded one may use `fill`, or set either on the root — keying off
+      // `path { stroke }` alone missed all of those. Parts explicitly set to "none"
+      // are left alone so a shape stays unfilled.
+      svg {
+        &[stroke]:not([stroke="none"]),
+        [stroke]:not([stroke="none"]) {
+          stroke: prepareMediaVariable(--_ctm-dn-ie-pn-as-aw-cr, var(--_gray-500));
+        }
+        &[fill]:not([fill="none"]),
+        [fill]:not([fill="none"]) {
+          fill: prepareMediaVariable(--_ctm-dn-ie-pn-as-aw-cr, var(--_gray-500));
+        }
+      }
+
+      // Background Shape overrides the configured radius when it is set to something
+      // definite; "None" leaves the radius alone.
+      &[data-background-shape="Round"] {
+        border-radius: 50%;
+      }
+      &[data-background-shape="Square"] {
+        border-radius: 0;
+      }
+    }
+
     .icon {
       display: flex;
       svg {