@sc-360-v2/storefront-cms-library 0.5.73 → 0.5.74

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 (135) hide show
  1. package/dist/add-existing-form.scss +5 -13
  2. package/dist/add-order.scss +236 -126
  3. package/dist/add-products-tab-details.scss +2097 -1048
  4. package/dist/add-products-tab.scss +1204 -666
  5. package/dist/allocation-header-quota-details.scss +407 -189
  6. package/dist/allocationDetails.scss +2143 -1661
  7. package/dist/allocations-quota-details.scss +323 -159
  8. package/dist/allocations.scss +793 -475
  9. package/dist/amount-estimator.scss +743 -405
  10. package/dist/badge.scss +18 -43
  11. package/dist/brand-basic-elements.scss +124 -76
  12. package/dist/brand.scss +55 -28
  13. package/dist/breadcrumbs.scss +718 -356
  14. package/dist/builder.js +1 -1
  15. package/dist/builderLite.js +1 -1
  16. package/dist/bulk-variant-picker.scss +2027 -1128
  17. package/dist/bundle.scss +1477 -841
  18. package/dist/bundleDetails.scss +5072 -3774
  19. package/dist/button.scss +103 -79
  20. package/dist/buy-for-tab-container.scss +106 -77
  21. package/dist/buyForHeaders.scss +2976 -1722
  22. package/dist/cart-details.scss +1012 -481
  23. package/dist/cart-summary.scss +1149 -557
  24. package/dist/cart-wrapper.scss +79 -37
  25. package/dist/cart.scss +225 -117
  26. package/dist/cartAttributes.scss +735 -416
  27. package/dist/category-groups-element.scss +108 -127
  28. package/dist/category-groups-product-grid.scss +147 -120
  29. package/dist/category-groups-product-image.scss +1457 -1162
  30. package/dist/category-groups-product-options.scss +680 -613
  31. package/dist/category-groups-product-price.scss +3244 -1966
  32. package/dist/category-groups-quota-details.scss +464 -210
  33. package/dist/category.scss +50 -26
  34. package/dist/checkout.scss +16 -24
  35. package/dist/confirm-modal.scss +2 -22
  36. package/dist/container.scss +54 -32
  37. package/dist/countdown.scss +443 -255
  38. package/dist/coupon.scss +710 -351
  39. package/dist/default-dropdown.scss +1 -12
  40. package/dist/embroider-template-1-v2.scss +172 -123
  41. package/dist/embroider-template-1.scss +104 -68
  42. package/dist/embroidery.scss +31 -30
  43. package/dist/employee-bulk-order.scss +142 -418
  44. package/dist/faq.scss +408 -228
  45. package/dist/filter-results.scss +265 -125
  46. package/dist/filters.scss +1797 -900
  47. package/dist/gallery-slider-temp.scss +750 -432
  48. package/dist/global-styles.scss +7 -23
  49. package/dist/grid.scss +33 -25
  50. package/dist/hotspot.scss +115 -68
  51. package/dist/image-temp.scss +20 -21
  52. package/dist/item-stock.scss +16 -9
  53. package/dist/kitDetails.scss +4301 -2721
  54. package/dist/kits.scss +19 -24
  55. package/dist/language-selector.scss +361 -211
  56. package/dist/last-x-orders.scss +174 -95
  57. package/dist/layouter-item.scss +103 -75
  58. package/dist/layouter-pro-item.scss +95 -89
  59. package/dist/layouter-pro.scss +92 -87
  60. package/dist/layouter.scss +445 -383
  61. package/dist/light-box-v2.scss +104 -89
  62. package/dist/login.scss +566 -287
  63. package/dist/map.scss +368 -221
  64. package/dist/marchandiserSets.scss +104 -95
  65. package/dist/mega-menu-container.scss +109 -96
  66. package/dist/mega-menu.scss +731 -624
  67. package/dist/menu-item.scss +2 -2
  68. package/dist/menu-v2.scss +619 -507
  69. package/dist/multi-select-dropdown.scss +3 -27
  70. package/dist/my-templates.scss +9 -38
  71. package/dist/option-bar.scss +375 -215
  72. package/dist/option-families.scss +252 -0
  73. package/dist/order-status.scss +1117 -646
  74. package/dist/overflow-module.scss +7 -6
  75. package/dist/past-orders.scss +149 -118
  76. package/dist/payment-methods.scss +30 -46
  77. package/dist/pickup-locations.scss +1118 -558
  78. package/dist/position-module.scss +17 -20
  79. package/dist/prefix-list.scss +10 -21
  80. package/dist/product-actions.scss +2316 -1610
  81. package/dist/product-basic-elements.scss +169 -108
  82. package/dist/product-highlights.scss +152 -107
  83. package/dist/product-image-bundles.scss +642 -337
  84. package/dist/product-inventory.scss +1357 -673
  85. package/dist/product-labels.scss +105 -84
  86. package/dist/product-options.scss +1274 -1117
  87. package/dist/product-price.scss +2561 -1283
  88. package/dist/product-promotions.scss +2830 -1388
  89. package/dist/product-sizechart.scss +905 -516
  90. package/dist/product.scss +61 -28
  91. package/dist/productDetails.scss +39 -19
  92. package/dist/profile.scss +447 -207
  93. package/dist/quantity-selector.scss +550 -313
  94. package/dist/quick-inventory-check.scss +174 -95
  95. package/dist/quick-links.scss +133 -55
  96. package/dist/quick-order-pad.scss +271 -218
  97. package/dist/quota-details.scss +282 -152
  98. package/dist/quotes.scss +122 -89
  99. package/dist/repeater-embla-controls.scss +15 -35
  100. package/dist/repeater-grid-toggle.scss +166 -156
  101. package/dist/repeater-item.scss +64 -41
  102. package/dist/repeater.scss +814 -671
  103. package/dist/request-for-quotes.scss +16 -66
  104. package/dist/responsive-behaviour.scss +1 -3
  105. package/dist/rfqs.scss +181 -118
  106. package/dist/scroll.scss +172 -93
  107. package/dist/search.scss +326 -179
  108. package/dist/section.scss +51 -27
  109. package/dist/shipping-payments.scss +58 -198
  110. package/dist/simple-list.scss +164 -74
  111. package/dist/social.scss +145 -80
  112. package/dist/sort.scss +19 -11
  113. package/dist/stack.scss +34 -23
  114. package/dist/static-global.scss +26 -44
  115. package/dist/stockStatus.scss +19 -11
  116. package/dist/store-locations.scss +1105 -577
  117. package/dist/tab-container.scss +108 -81
  118. package/dist/table-common.scss +408 -217
  119. package/dist/table.scss +502 -271
  120. package/dist/text-temp.scss +7 -8
  121. package/dist/theme-classes.scss +13 -17
  122. package/dist/types/builder/enums/data-connectors.d.ts +3 -1
  123. package/dist/types/builder/enums/index.d.ts +3 -1
  124. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  125. package/dist/types/builder/tools/element-edit/optionFamilies.d.ts +20 -0
  126. package/dist/types/website/constants/data-connector-souces.d.ts +40 -8
  127. package/dist/types/website/constants/data-connectors.d.ts +12 -1
  128. package/dist/types/website/helper/ssr-functions.d.ts +8 -0
  129. package/dist/uom-selector.scss +949 -489
  130. package/dist/user-elements.scss +837 -529
  131. package/dist/variant-picker.scss +2555 -1281
  132. package/dist/volume-pricing.scss +1037 -541
  133. package/dist/website.js +1 -1
  134. package/dist/widget.scss +1 -0
  135. package/package.json +1 -1
@@ -7,28 +7,36 @@ $overflowSelector: ".flex__overflow";
7
7
  [data-div-type="element"] {
8
8
  &[data-element-type="gallerySlider"] {
9
9
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
10
- width: var(--_sf-el-wh-st-mx,
11
- calc(1% * var(--_ctm-mob-ele-nw-wh-vl,
12
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))))));
13
-
10
+ width: var(
11
+ --_sf-el-wh-st-mx,
12
+ calc(
13
+ 1% *
14
+ var(
15
+ --_ctm-mob-ele-nw-wh-vl,
16
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
17
+ )
18
+ )
19
+ );
14
20
  // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
15
21
  &:not(:has([data-display-style="Grid"][data-scroll-direction="Vertical"])) {
16
22
  height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
17
23
  }
18
-
19
24
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
20
25
 
21
- --_aspect-ratio: calc(1 * (var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht, var(--_tst-lt-ht)))) / var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh, var(--_tst-lt-wh))))));
22
-
26
+ --_aspect-ratio: calc(
27
+ 1 *
28
+ (
29
+ var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht, var(--_tst-lt-ht)))) /
30
+ var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh, var(--_tst-lt-wh))))
31
+ )
32
+ );
23
33
  &[data-view-state="full"] {
24
-
25
34
  // aspect-ratio: 1/0.01;
26
- &>.wrapper {
27
- &>div {
35
+ & > .wrapper {
36
+ & > div {
28
37
  height: 100%;
29
38
  }
30
39
  }
31
-
32
40
  img {
33
41
  height: 100%;
34
42
  object-fit: cover;
@@ -38,8 +46,7 @@ $overflowSelector: ".flex__overflow";
38
46
  .arrow-navigation {
39
47
  pointer-events: none;
40
48
  }
41
-
42
- .arrow-navigation>button {
49
+ .arrow-navigation > button {
43
50
  pointer-events: all;
44
51
  }
45
52
 
@@ -52,11 +59,10 @@ $overflowSelector: ".flex__overflow";
52
59
  // cursor: auto;
53
60
  // }
54
61
 
55
- &>.wrapper {
62
+ & > .wrapper {
56
63
  width: 100%;
57
64
  height: 100%;
58
65
  }
59
-
60
66
  &[data-show-shadow="false"] {
61
67
  --_show-shadow: none;
62
68
  }
@@ -67,8 +73,10 @@ $overflowSelector: ".flex__overflow";
67
73
  --text-body: rgb(54, 49, 61);
68
74
 
69
75
  position: relative;
70
- background-color: var(--_ctm-mob-dn-gy-wt-se-bd-cr,
71
- var(--_ctm-tab-dn-gy-wt-se-bd-cr, var(--_ctm-dn-gy-wt-se-bd-cr)));
76
+ background-color: var(
77
+ --_ctm-mob-dn-gy-wt-se-bd-cr,
78
+ var(--_ctm-tab-dn-gy-wt-se-bd-cr, var(--_ctm-dn-gy-wt-se-bd-cr))
79
+ );
72
80
 
73
81
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
74
82
 
@@ -77,30 +85,53 @@ $overflowSelector: ".flex__overflow";
77
85
 
78
86
  --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
79
87
 
80
- gap: var(--_ctm-mob-dn-gy-wt-lt-gy-tt-ad-im-sg,
81
- var(--_ctm-tab-dn-gy-wt-lt-gy-tt-ad-im-sg, var(--_ctm-dn-gy-wt-lt-gy-tt-ad-im-sg)));
88
+ gap: var(
89
+ --_ctm-mob-dn-gy-wt-lt-gy-tt-ad-im-sg,
90
+ var(--_ctm-tab-dn-gy-wt-lt-gy-tt-ad-im-sg, var(--_ctm-dn-gy-wt-lt-gy-tt-ad-im-sg))
91
+ );
82
92
 
83
93
  width: 100%;
84
94
  height: 100%;
85
95
 
86
- border-color: var(--_ctm-mob-dn-gy-wt-se-br-cr,
87
- var(--_ctm-tab-dn-gy-wt-se-br-cr, var(--_ctm-dn-gy-wt-se-br-cr)));
88
-
89
- border-style: var(--_ctm-mob-dn-gy-wt-se-br-se,
90
- var(--_ctm-tab-dn-gy-wt-se-br-se, var(--_ctm-dn-gy-wt-se-br-se)));
91
-
92
- border-width: var(--_ctm-mob-dn-gy-wt-se-br-wh,
93
- var(--_ctm-tab-dn-gy-wt-se-br-wh, var(--_ctm-dn-gy-wt-se-br-wh)));
94
-
95
- border-radius: var(--_ctm-mob-dn-gy-wt-se-br-rs,
96
- var(--_ctm-tab-dn-gy-wt-se-br-rs, var(--_ctm-dn-gy-wt-se-br-rs)));
97
-
98
- box-shadow: var(--_show-shadow,
99
- var(--_ctm-mob-dn-gy-wt-se-sw-ae,
100
- var(--_ctm-tab-dn-gy-wt-se-sw-ae, var(--_ctm-dn-gy-wt-se-sw-ae))) var(--_ctm-mob-dn-gy-wt-se-sw-br,
101
- var(--_ctm-tab-dn-gy-wt-se-sw-br, var(--_ctm-dn-gy-wt-se-sw-br))) var(--_ctm-mob-dn-gy-wt-se-sw-sd,
102
- var(--_ctm-tab-dn-gy-wt-se-sw-sd, var(--_ctm-dn-gy-wt-se-sw-sd))) var(--_ctm-mob-dn-gy-wt-se-sw-cr,
103
- var(--_ctm-tab-dn-gy-wt-se-sw-cr, var(--_ctm-dn-gy-wt-se-sw-cr))));
96
+ border-color: var(
97
+ --_ctm-mob-dn-gy-wt-se-br-cr,
98
+ var(--_ctm-tab-dn-gy-wt-se-br-cr, var(--_ctm-dn-gy-wt-se-br-cr))
99
+ );
100
+
101
+ border-style: var(
102
+ --_ctm-mob-dn-gy-wt-se-br-se,
103
+ var(--_ctm-tab-dn-gy-wt-se-br-se, var(--_ctm-dn-gy-wt-se-br-se))
104
+ );
105
+
106
+ border-width: var(
107
+ --_ctm-mob-dn-gy-wt-se-br-wh,
108
+ var(--_ctm-tab-dn-gy-wt-se-br-wh, var(--_ctm-dn-gy-wt-se-br-wh))
109
+ );
110
+
111
+ border-radius: var(
112
+ --_ctm-mob-dn-gy-wt-se-br-rs,
113
+ var(--_ctm-tab-dn-gy-wt-se-br-rs, var(--_ctm-dn-gy-wt-se-br-rs))
114
+ );
115
+
116
+ box-shadow: var(
117
+ --_show-shadow,
118
+ var(
119
+ --_ctm-mob-dn-gy-wt-se-sw-ae,
120
+ var(--_ctm-tab-dn-gy-wt-se-sw-ae, var(--_ctm-dn-gy-wt-se-sw-ae))
121
+ )
122
+ var(
123
+ --_ctm-mob-dn-gy-wt-se-sw-br,
124
+ var(--_ctm-tab-dn-gy-wt-se-sw-br, var(--_ctm-dn-gy-wt-se-sw-br))
125
+ )
126
+ var(
127
+ --_ctm-mob-dn-gy-wt-se-sw-sd,
128
+ var(--_ctm-tab-dn-gy-wt-se-sw-sd, var(--_ctm-dn-gy-wt-se-sw-sd))
129
+ )
130
+ var(
131
+ --_ctm-mob-dn-gy-wt-se-sw-cr,
132
+ var(--_ctm-tab-dn-gy-wt-se-sw-cr, var(--_ctm-dn-gy-wt-se-sw-cr))
133
+ )
134
+ );
104
135
 
105
136
  .gallery-header {
106
137
  // text-align: var(--_ctm-dn-gy-lt-an, var(--_tst-dn-gy-lt-an));
@@ -108,17 +139,25 @@ $overflowSelector: ".flex__overflow";
108
139
  display: flex;
109
140
  flex-direction: column;
110
141
 
111
- gap: var(--_ctm-mob-dn-gy-wt-tt-cr-lt-te-ad-dn-sg,
112
- var(--_ctm-tab-dn-gy-wt-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-gy-wt-tt-cr-lt-te-ad-dn-sg)));
142
+ gap: var(
143
+ --_ctm-mob-dn-gy-wt-tt-cr-lt-te-ad-dn-sg,
144
+ var(--_ctm-tab-dn-gy-wt-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-gy-wt-tt-cr-lt-te-ad-dn-sg))
145
+ );
113
146
 
114
- padding-block: var(--_ctm-mob-dn-gy-wt-tt-cr-lt-tt-vl-pg,
115
- var(--_ctm-tab-dn-gy-wt-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-gy-wt-tt-cr-lt-tt-vl-pg)));
147
+ padding-block: var(
148
+ --_ctm-mob-dn-gy-wt-tt-cr-lt-tt-vl-pg,
149
+ var(--_ctm-tab-dn-gy-wt-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-gy-wt-tt-cr-lt-tt-vl-pg))
150
+ );
116
151
 
117
- padding-inline: var(--_ctm-mob-dn-gy-wt-tt-cr-lt-tt-hl-pg,
118
- var(--_ctm-tab-dn-gy-wt-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-gy-wt-tt-cr-lt-tt-hl-pg)));
152
+ padding-inline: var(
153
+ --_ctm-mob-dn-gy-wt-tt-cr-lt-tt-hl-pg,
154
+ var(--_ctm-tab-dn-gy-wt-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-gy-wt-tt-cr-lt-tt-hl-pg))
155
+ );
119
156
 
120
- background-color: var(--_ctm-mob-dn-gy-wt-tt-cr-dn-bd-cr,
121
- var(--_ctm-tab-dn-gy-wt-tt-cr-dn-bd-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-bd-cr)));
157
+ background-color: var(
158
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-bd-cr,
159
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-bd-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-bd-cr))
160
+ );
122
161
 
123
162
  // Text Container Width. 100% is the previous behaviour, so an unset width
124
163
  // still spans the widget.
@@ -127,50 +166,95 @@ $overflowSelector: ".flex__overflow";
127
166
  min-width: 0;
128
167
  flex: 0 0 auto;
129
168
 
130
- border-color: var(--_ctm-mob-dn-gy-wt-tt-cr-dn-br-cr,
131
- var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-br-cr)));
132
-
133
- border-style: var(--_ctm-mob-dn-gy-wt-tt-cr-dn-br-se,
134
- var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-se, var(--_ctm-dn-gy-wt-tt-cr-dn-br-se)));
135
-
136
- border-width: var(--_ctm-mob-dn-gy-wt-tt-cr-dn-br-wh,
137
- var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-wh, var(--_ctm-dn-gy-wt-tt-cr-dn-br-wh)));
138
-
139
- border-radius: var(--_ctm-mob-dn-gy-wt-tt-cr-dn-br-rs,
140
- var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-rs, var(--_ctm-dn-gy-wt-tt-cr-dn-br-rs)));
141
-
142
- box-shadow: var(--_show-shadow,
143
- var(--_ctm-mob-dn-gy-wt-tt-cr-dn-sw-ae,
144
- var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-ae, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-ae))) var(--_ctm-mob-dn-gy-wt-tt-cr-dn-sw-br,
145
- var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-br, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-br))) var(--_ctm-mob-dn-gy-wt-tt-cr-dn-sw-sd,
146
- var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-sd, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-sd))) var(--_ctm-mob-dn-gy-wt-tt-cr-dn-sw-cr,
147
- var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-cr))));
169
+ border-color: var(
170
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-br-cr,
171
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-br-cr))
172
+ );
173
+
174
+ border-style: var(
175
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-br-se,
176
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-se, var(--_ctm-dn-gy-wt-tt-cr-dn-br-se))
177
+ );
178
+
179
+ border-width: var(
180
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-br-wh,
181
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-wh, var(--_ctm-dn-gy-wt-tt-cr-dn-br-wh))
182
+ );
183
+
184
+ border-radius: var(
185
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-br-rs,
186
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-rs, var(--_ctm-dn-gy-wt-tt-cr-dn-br-rs))
187
+ );
188
+
189
+ box-shadow: var(
190
+ --_show-shadow,
191
+ var(
192
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-sw-ae,
193
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-ae, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-ae))
194
+ )
195
+ var(
196
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-sw-br,
197
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-br, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-br))
198
+ )
199
+ var(
200
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-sw-sd,
201
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-sd, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-sd))
202
+ )
203
+ var(
204
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-sw-cr,
205
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-cr))
206
+ )
207
+ );
148
208
 
149
209
  & h3 {
150
- color: var(--_ctm-mob-dn-gy-wt-se-cr,
151
- var(--_ctm-tab-dn-gy-wt-se-cr, var(--_ctm-dn-gy-wt-se-cr)));
152
- font-family: var(--_ctm-mob-dn-gy-wt-se-ft-fy,
153
- var(--_ctm-tab-dn-gy-wt-se-ft-fy, var(--_ctm-dn-gy-wt-se-ft-fy)));
154
- font-size: var(--_ctm-mob-dn-gy-wt-se-ft-se,
155
- var(--_ctm-tab-dn-gy-wt-se-ft-se, var(--_ctm-dn-gy-wt-se-ft-se)));
156
- font-weight: var(--_ctm-mob-dn-gy-wt-se-ft-wt,
157
- var(--_ctm-tab-dn-gy-wt-se-ft-wt, var(--_ctm-dn-gy-wt-se-ft-wt)));
158
- font-style: var(--_ctm-mob-dn-gy-wt-se-ft-se-ic,
159
- var(--_ctm-tab-dn-gy-wt-se-ft-se-ic, var(--_ctm-dn-gy-wt-se-ft-se-ic)));
160
- text-align: var(--_ctm-mob-dn-gy-wt-se-tt-an,
161
- var(--_ctm-tab-dn-gy-wt-se-tt-an, var(--_ctm-dn-gy-wt-se-tt-an)));
162
- letter-spacing: var(--_ctm-mob-dn-gy-wt-se-lr-sg,
163
- var(--_ctm-tab-dn-gy-wt-se-lr-sg, var(--_ctm-dn-gy-wt-se-lr-sg)));
164
- line-height: var(--_ctm-mob-dn-gy-wt-se-le-ht,
165
- var(--_ctm-tab-dn-gy-wt-se-le-ht, var(--_ctm-dn-gy-wt-se-le-ht)));
166
- text-decoration: var(--_ctm-mob-dn-gy-wt-se-ue,
167
- var(--_ctm-tab-dn-gy-wt-se-ue, var(--_ctm-dn-gy-wt-se-ue)));
168
- text-transform: var(--_ctm-mob-dn-gy-wt-se-tt-tm,
169
- var(--_ctm-tab-dn-gy-wt-se-tt-tm, var(--_ctm-dn-gy-wt-se-tt-tm, none)));
170
- word-wrap: var(--_ctm-mob-dn-gy-wt-se-wd-wp,
171
- var(--_ctm-tab-dn-gy-wt-se-wd-wp, var(--_ctm-dn-gy-wt-se-wd-wp, normal)));
172
- word-break: var(--_ctm-mob-dn-gy-wt-se-wd-bk,
173
- var(--_ctm-tab-dn-gy-wt-se-wd-bk, var(--_ctm-dn-gy-wt-se-wd-bk, normal)));
210
+ color: var(
211
+ --_ctm-mob-dn-gy-wt-se-cr,
212
+ var(--_ctm-tab-dn-gy-wt-se-cr, var(--_ctm-dn-gy-wt-se-cr))
213
+ );
214
+ font-family: var(
215
+ --_ctm-mob-dn-gy-wt-se-ft-fy,
216
+ var(--_ctm-tab-dn-gy-wt-se-ft-fy, var(--_ctm-dn-gy-wt-se-ft-fy))
217
+ );
218
+ font-size: var(
219
+ --_ctm-mob-dn-gy-wt-se-ft-se,
220
+ var(--_ctm-tab-dn-gy-wt-se-ft-se, var(--_ctm-dn-gy-wt-se-ft-se))
221
+ );
222
+ font-weight: var(
223
+ --_ctm-mob-dn-gy-wt-se-ft-wt,
224
+ var(--_ctm-tab-dn-gy-wt-se-ft-wt, var(--_ctm-dn-gy-wt-se-ft-wt))
225
+ );
226
+ font-style: var(
227
+ --_ctm-mob-dn-gy-wt-se-ft-se-ic,
228
+ var(--_ctm-tab-dn-gy-wt-se-ft-se-ic, var(--_ctm-dn-gy-wt-se-ft-se-ic))
229
+ );
230
+ text-align: var(
231
+ --_ctm-mob-dn-gy-wt-se-tt-an,
232
+ var(--_ctm-tab-dn-gy-wt-se-tt-an, var(--_ctm-dn-gy-wt-se-tt-an))
233
+ );
234
+ letter-spacing: var(
235
+ --_ctm-mob-dn-gy-wt-se-lr-sg,
236
+ var(--_ctm-tab-dn-gy-wt-se-lr-sg, var(--_ctm-dn-gy-wt-se-lr-sg))
237
+ );
238
+ line-height: var(
239
+ --_ctm-mob-dn-gy-wt-se-le-ht,
240
+ var(--_ctm-tab-dn-gy-wt-se-le-ht, var(--_ctm-dn-gy-wt-se-le-ht))
241
+ );
242
+ text-decoration: var(
243
+ --_ctm-mob-dn-gy-wt-se-ue,
244
+ var(--_ctm-tab-dn-gy-wt-se-ue, var(--_ctm-dn-gy-wt-se-ue))
245
+ );
246
+ text-transform: var(
247
+ --_ctm-mob-dn-gy-wt-se-tt-tm,
248
+ var(--_ctm-tab-dn-gy-wt-se-tt-tm, var(--_ctm-dn-gy-wt-se-tt-tm, none))
249
+ );
250
+ word-wrap: var(
251
+ --_ctm-mob-dn-gy-wt-se-wd-wp,
252
+ var(--_ctm-tab-dn-gy-wt-se-wd-wp, var(--_ctm-dn-gy-wt-se-wd-wp, normal))
253
+ );
254
+ word-break: var(
255
+ --_ctm-mob-dn-gy-wt-se-wd-bk,
256
+ var(--_ctm-tab-dn-gy-wt-se-wd-bk, var(--_ctm-dn-gy-wt-se-wd-bk, normal))
257
+ );
174
258
 
175
259
  // Text Overflow toggle in the typography panel; the line count rides in on
176
260
  // --_sf-line-clamp from the element.
@@ -180,30 +264,54 @@ $overflowSelector: ".flex__overflow";
180
264
  }
181
265
 
182
266
  & p {
183
- color: var(--_ctm-mob-dn-gy-wt-se-cr-dc,
184
- var(--_ctm-tab-dn-gy-wt-se-cr-dc, var(--_ctm-dn-gy-wt-se-cr-dc)));
185
- font-family: var(--_ctm-mob-dn-gy-wt-se-ft-fy-dc,
186
- var(--_ctm-tab-dn-gy-wt-se-ft-fy-dc, var(--_ctm-dn-gy-wt-se-ft-fy-dc)));
187
- font-size: var(--_ctm-mob-dn-gy-wt-se-ft-se-dc,
188
- var(--_ctm-tab-dn-gy-wt-se-ft-se-dc, var(--_ctm-dn-gy-wt-se-ft-se-dc)));
189
- font-weight: var(--_ctm-mob-dn-gy-wt-se-ft-wt-dc,
190
- var(--_ctm-tab-dn-gy-wt-se-ft-wt-dc, var(--_ctm-dn-gy-wt-se-ft-wt-dc)));
191
- font-style: var(--_ctm-mob-dn-gy-wt-se-ft-se-ic-dc,
192
- var(--_ctm-tab-dn-gy-wt-se-ft-se-ic-dc, var(--_ctm-dn-gy-wt-se-ft-se-ic-dc)));
193
- text-align: var(--_ctm-mob-dn-gy-wt-se-tt-an-dc,
194
- var(--_ctm-tab-dn-gy-wt-se-tt-an-dc, var(--_ctm-dn-gy-wt-se-tt-an-dc)));
195
- letter-spacing: var(--_ctm-mob-dn-gy-wt-se-lr-sg-dc,
196
- var(--_ctm-tab-dn-gy-wt-se-lr-sg-dc, var(--_ctm-dn-gy-wt-se-lr-sg-dc)));
197
- line-height: var(--_ctm-mob-dn-gy-wt-se-le-ht-dc,
198
- var(--_ctm-tab-dn-gy-wt-se-le-ht-dc, var(--_ctm-dn-gy-wt-se-le-ht-dc)));
199
- text-decoration: var(--_ctm-mob-dn-gy-wt-se-ue-dc,
200
- var(--_ctm-tab-dn-gy-wt-se-ue-dc, var(--_ctm-dn-gy-wt-se-ue-dc)));
201
- text-transform: var(--_ctm-mob-dn-gy-wt-se-tt-tm-dc,
202
- var(--_ctm-tab-dn-gy-wt-se-tt-tm-dc, var(--_ctm-dn-gy-wt-se-tt-tm-dc, none)));
203
- word-wrap: var(--_ctm-mob-dn-gy-wt-se-wd-wp-dc,
204
- var(--_ctm-tab-dn-gy-wt-se-wd-wp-dc, var(--_ctm-dn-gy-wt-se-wd-wp-dc, normal)));
205
- word-break: var(--_ctm-mob-dn-gy-wt-se-wd-bk-dc,
206
- var(--_ctm-tab-dn-gy-wt-se-wd-bk-dc, var(--_ctm-dn-gy-wt-se-wd-bk-dc, normal)));
267
+ color: var(
268
+ --_ctm-mob-dn-gy-wt-se-cr-dc,
269
+ var(--_ctm-tab-dn-gy-wt-se-cr-dc, var(--_ctm-dn-gy-wt-se-cr-dc))
270
+ );
271
+ font-family: var(
272
+ --_ctm-mob-dn-gy-wt-se-ft-fy-dc,
273
+ var(--_ctm-tab-dn-gy-wt-se-ft-fy-dc, var(--_ctm-dn-gy-wt-se-ft-fy-dc))
274
+ );
275
+ font-size: var(
276
+ --_ctm-mob-dn-gy-wt-se-ft-se-dc,
277
+ var(--_ctm-tab-dn-gy-wt-se-ft-se-dc, var(--_ctm-dn-gy-wt-se-ft-se-dc))
278
+ );
279
+ font-weight: var(
280
+ --_ctm-mob-dn-gy-wt-se-ft-wt-dc,
281
+ var(--_ctm-tab-dn-gy-wt-se-ft-wt-dc, var(--_ctm-dn-gy-wt-se-ft-wt-dc))
282
+ );
283
+ font-style: var(
284
+ --_ctm-mob-dn-gy-wt-se-ft-se-ic-dc,
285
+ var(--_ctm-tab-dn-gy-wt-se-ft-se-ic-dc, var(--_ctm-dn-gy-wt-se-ft-se-ic-dc))
286
+ );
287
+ text-align: var(
288
+ --_ctm-mob-dn-gy-wt-se-tt-an-dc,
289
+ var(--_ctm-tab-dn-gy-wt-se-tt-an-dc, var(--_ctm-dn-gy-wt-se-tt-an-dc))
290
+ );
291
+ letter-spacing: var(
292
+ --_ctm-mob-dn-gy-wt-se-lr-sg-dc,
293
+ var(--_ctm-tab-dn-gy-wt-se-lr-sg-dc, var(--_ctm-dn-gy-wt-se-lr-sg-dc))
294
+ );
295
+ line-height: var(
296
+ --_ctm-mob-dn-gy-wt-se-le-ht-dc,
297
+ var(--_ctm-tab-dn-gy-wt-se-le-ht-dc, var(--_ctm-dn-gy-wt-se-le-ht-dc))
298
+ );
299
+ text-decoration: var(
300
+ --_ctm-mob-dn-gy-wt-se-ue-dc,
301
+ var(--_ctm-tab-dn-gy-wt-se-ue-dc, var(--_ctm-dn-gy-wt-se-ue-dc))
302
+ );
303
+ text-transform: var(
304
+ --_ctm-mob-dn-gy-wt-se-tt-tm-dc,
305
+ var(--_ctm-tab-dn-gy-wt-se-tt-tm-dc, var(--_ctm-dn-gy-wt-se-tt-tm-dc, none))
306
+ );
307
+ word-wrap: var(
308
+ --_ctm-mob-dn-gy-wt-se-wd-wp-dc,
309
+ var(--_ctm-tab-dn-gy-wt-se-wd-wp-dc, var(--_ctm-dn-gy-wt-se-wd-wp-dc, normal))
310
+ );
311
+ word-break: var(
312
+ --_ctm-mob-dn-gy-wt-se-wd-bk-dc,
313
+ var(--_ctm-tab-dn-gy-wt-se-wd-bk-dc, var(--_ctm-dn-gy-wt-se-wd-bk-dc, normal))
314
+ );
207
315
 
208
316
  &#{$overflowSelector} {
209
317
  @include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
@@ -221,13 +329,11 @@ $overflowSelector: ".flex__overflow";
221
329
  flex-direction: column;
222
330
  }
223
331
  }
224
-
225
332
  &[data-text-position="bottom"] {
226
333
  .gallery-slider-element {
227
334
  flex-direction: column-reverse;
228
335
  }
229
336
  }
230
-
231
337
  // Gallery Text and Item Alignment places the text container horizontally when
232
338
  // it is stacked above/below the gallery — only visible once its width is under
233
339
  // 100%. Left/right positions use [data-widget-alignment] for the cross axis.
@@ -235,11 +341,9 @@ $overflowSelector: ".flex__overflow";
235
341
  &[data-text-alignment="left"] .gallery-header {
236
342
  margin-right: auto;
237
343
  }
238
-
239
344
  &[data-text-alignment="center"] .gallery-header {
240
345
  margin-inline: auto;
241
346
  }
242
-
243
347
  &[data-text-alignment="right"] .gallery-header {
244
348
  margin-left: auto;
245
349
  }
@@ -249,10 +353,9 @@ $overflowSelector: ".flex__overflow";
249
353
  .gallery-slider-element {
250
354
  flex-direction: row;
251
355
  }
252
-
253
356
  // Child combinator: as a plain descendant this also matched the per-item captions
254
357
  // inside the slides, so the widget's text position resized those too.
255
- .gallery-slider-element>.gallery-header {
358
+ .gallery-slider-element > .gallery-header {
256
359
  // Beside the slider, Text Container Width is a ceiling rather than a fixed width
257
360
  // (what the schema comment describes). It is always emitted as 100%, so used as
258
361
  // `width` it made the header's flex basis the whole row: no free space for the
@@ -263,60 +366,49 @@ $overflowSelector: ".flex__overflow";
263
366
  flex-shrink: 1;
264
367
  height: 100%;
265
368
  }
266
-
267
369
  // The slider takes whatever the caption leaves.
268
- .gallery-slider-element>.embla {
370
+ .gallery-slider-element > .embla {
269
371
  flex: 1 1 0;
270
372
  min-width: 0;
271
373
  }
272
-
273
374
  &[data-widget-alignment="top"] {
274
375
  .gallery-slider-element {
275
376
  align-items: flex-start;
276
377
  }
277
-
278
378
  .gallery-header {
279
379
  justify-content: flex-start;
280
380
  }
281
381
  }
282
-
283
382
  &[data-widget-alignment="center"] {
284
383
  .gallery-slider-element {
285
384
  align-items: center;
286
385
  }
287
-
288
386
  .gallery-header {
289
387
  justify-content: center;
290
388
  }
291
389
  }
292
-
293
390
  &[data-widget-alignment="bottom"] {
294
391
  .gallery-slider-element {
295
392
  align-items: flex-end;
296
393
  }
297
-
298
394
  .gallery-header {
299
395
  justify-content: flex-end;
300
396
  }
301
397
  }
302
398
  }
303
-
304
399
  &[data-text-position="right"] {
305
-
306
400
  // Same pair as the "left" block above — see the comments there.
307
- .gallery-slider-element>.gallery-header {
401
+ .gallery-slider-element > .gallery-header {
308
402
  width: fit-content;
309
403
  max-width: prepareMediaVariable(--_ctm-dn-gy-wt-lt-tt-cr-wh, 100%);
310
404
  min-width: 0;
311
405
  flex-shrink: 1;
312
406
  height: 100%;
313
407
  }
314
-
315
- .gallery-slider-element>.embla {
408
+ .gallery-slider-element > .embla {
316
409
  flex: 1 1 0;
317
410
  min-width: 0;
318
411
  }
319
-
320
412
  .gallery-slider-element {
321
413
  flex-direction: row-reverse;
322
414
  }
@@ -325,33 +417,27 @@ $overflowSelector: ".flex__overflow";
325
417
  .gallery-slider-element {
326
418
  align-items: flex-start;
327
419
  }
328
-
329
420
  .gallery-header {
330
421
  justify-content: flex-start;
331
422
  }
332
423
  }
333
-
334
424
  &[data-widget-alignment="center"] {
335
425
  .gallery-slider-element {
336
426
  align-items: center;
337
427
  }
338
-
339
428
  .gallery-header {
340
429
  justify-content: center;
341
430
  }
342
431
  }
343
-
344
432
  &[data-widget-alignment="bottom"] {
345
433
  .gallery-slider-element {
346
434
  align-items: flex-end;
347
435
  }
348
-
349
436
  .gallery-header {
350
437
  justify-content: flex-end;
351
438
  }
352
439
  }
353
440
  }
354
-
355
441
  .embla {
356
442
  width: 100%;
357
443
  height: 100%;
@@ -375,25 +461,51 @@ $overflowSelector: ".flex__overflow";
375
461
  display: grid;
376
462
  grid-template-rows: 100%;
377
463
 
378
- grid-template-columns: repeat(var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
379
- calc(100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))));
464
+ grid-template-columns: repeat(
465
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
466
+ calc(
467
+ 100% /
468
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
469
+ )
470
+ );
380
471
 
381
472
  grid-auto-flow: column;
382
473
  gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
383
474
 
384
475
  &[data-control-type="Bottom"][data-slider-control="Arrows"] {
385
- height: calc(100% - calc(var(--_ctm-mob-dn-pn-as-aw-se,
386
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) + 10px));
476
+ height: calc(
477
+ 100% - calc(
478
+ var(
479
+ --_ctm-mob-dn-pn-as-aw-se,
480
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
481
+ ) +
482
+ 10px
483
+ )
484
+ );
387
485
  }
388
486
 
389
487
  &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
390
- height: calc(100% - calc(var(--_ctm-mob-dn-pn-le-le-ht,
391
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))) + 20px));
488
+ height: calc(
489
+ 100% - calc(
490
+ var(
491
+ --_ctm-mob-dn-pn-le-le-ht,
492
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
493
+ ) +
494
+ 20px
495
+ )
496
+ );
392
497
  }
393
498
 
394
499
  &[data-control-type="Bottom"][data-slider-control="Dots"] {
395
- height: calc(100% - calc(var(--_ctm-mob-dn-pn-ds-dt-se,
396
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))) + 20px));
500
+ height: calc(
501
+ 100% - calc(
502
+ var(
503
+ --_ctm-mob-dn-pn-ds-dt-se,
504
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
505
+ ) +
506
+ 20px
507
+ )
508
+ );
397
509
  }
398
510
 
399
511
  .embla__slide {
@@ -405,10 +517,11 @@ $overflowSelector: ".flex__overflow";
405
517
  }
406
518
  }
407
519
  }
408
-
409
520
  &:not([data-display-style="Column"]) {
410
521
  .embla__container {
411
- 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))));
522
+ grid-auto-columns: calc(
523
+ 100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
524
+ );
412
525
  }
413
526
  }
414
527
 
@@ -419,7 +532,6 @@ $overflowSelector: ".flex__overflow";
419
532
  overflow: unset;
420
533
  height: 80%;
421
534
  flex-grow: 1;
422
-
423
535
  &:not([data-is-builder-type="true"]) {
424
536
  height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
425
537
  }
@@ -444,8 +556,13 @@ $overflowSelector: ".flex__overflow";
444
556
  &[data-display-style="Grid"][data-scroll-direction="Horizontal"] {
445
557
  .embla__viewport {
446
558
  .embla__container {
447
- grid-template-rows: repeat(var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))),
448
- calc(100% / var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn)))));
559
+ grid-template-rows: repeat(
560
+ var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))),
561
+ calc(
562
+ 100% /
563
+ var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn)))
564
+ )
565
+ );
449
566
  }
450
567
  }
451
568
  }
@@ -470,7 +587,6 @@ $overflowSelector: ".flex__overflow";
470
587
  grid-template-columns: repeat(1, 1fr);
471
588
  grid-template-rows: unset;
472
589
  grid-auto-flow: row;
473
-
474
590
  .embla__slide {
475
591
  aspect-ratio: 7 / 2;
476
592
  }
@@ -484,7 +600,6 @@ $overflowSelector: ".flex__overflow";
484
600
  .embla__viewport {
485
601
  .embla__container {
486
602
  display: flex;
487
-
488
603
  .embla__slide {
489
604
  width: unset;
490
605
  height: 100%;
@@ -493,7 +608,6 @@ $overflowSelector: ".flex__overflow";
493
608
  }
494
609
  }
495
610
  }
496
-
497
611
  &[data-display-style="Masonry"] {
498
612
  // overflow: unset;
499
613
 
@@ -510,8 +624,10 @@ $overflowSelector: ".flex__overflow";
510
624
  overflow: unset;
511
625
  display: block;
512
626
 
513
- column-count: var(--_ctm-mob-lt-is-pr-rw,
514
- var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw)));
627
+ column-count: var(
628
+ --_ctm-mob-lt-is-pr-rw,
629
+ var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))
630
+ );
515
631
  gap: unset;
516
632
 
517
633
  column-gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
@@ -519,8 +635,10 @@ $overflowSelector: ".flex__overflow";
519
635
  height: auto;
520
636
 
521
637
  .embla__slide {
522
- margin-bottom: var(--_ctm-mob-lt-im-gp,
523
- var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
638
+ margin-bottom: var(
639
+ --_ctm-mob-lt-im-gp,
640
+ var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp))
641
+ );
524
642
  height: unset;
525
643
 
526
644
  .gallery__slide {
@@ -549,7 +667,6 @@ $overflowSelector: ".flex__overflow";
549
667
  top: unset;
550
668
  bottom: 6px;
551
669
  }
552
-
553
670
  &[data-control-type="Bottom"] {
554
671
  transform: unset;
555
672
  position: static;
@@ -559,7 +676,6 @@ $overflowSelector: ".flex__overflow";
559
676
  margin-top: 10px;
560
677
  }
561
678
  }
562
-
563
679
  :is(.left-button, .right-button) {
564
680
  // background: prepareMediaVariable(--_ctm-dn-pn-as-bd-cr);
565
681
  @include BgColorLighter(var(--_ctm-dn-pn-as-bd-cr), 10%);
@@ -568,15 +684,18 @@ $overflowSelector: ".flex__overflow";
568
684
  @include BgColorLighter(var(--_ctm-dn-pn-as-bd-cr), 20%);
569
685
  }
570
686
  }
571
-
572
687
  .left-button {
573
688
  padding: 10px;
574
689
  border-radius: 50%;
575
690
  border: none;
576
- width: var(--_ctm-mob-dn-pn-as-aw-se,
577
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
578
- height: var(--_ctm-mob-dn-pn-as-aw-se,
579
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
691
+ width: var(
692
+ --_ctm-mob-dn-pn-as-aw-se,
693
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
694
+ );
695
+ height: var(
696
+ --_ctm-mob-dn-pn-as-aw-se,
697
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
698
+ );
580
699
 
581
700
  display: flex;
582
701
  align-items: center;
@@ -584,7 +703,6 @@ $overflowSelector: ".flex__overflow";
584
703
  cursor: pointer;
585
704
  outline: none;
586
705
  margin-left: 12px;
587
-
588
706
  &:disabled {
589
707
  & svg {
590
708
  path {
@@ -593,14 +711,17 @@ $overflowSelector: ".flex__overflow";
593
711
  }
594
712
  }
595
713
  }
596
-
597
714
  .right-button {
598
715
  border-radius: 50%;
599
716
  border: none;
600
- width: var(--_ctm-mob-dn-pn-as-aw-se,
601
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
602
- height: var(--_ctm-mob-dn-pn-as-aw-se,
603
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
717
+ width: var(
718
+ --_ctm-mob-dn-pn-as-aw-se,
719
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
720
+ );
721
+ height: var(
722
+ --_ctm-mob-dn-pn-as-aw-se,
723
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
724
+ );
604
725
 
605
726
  display: flex;
606
727
  align-items: center;
@@ -618,50 +739,54 @@ $overflowSelector: ".flex__overflow";
618
739
  }
619
740
  }
620
741
  }
621
-
622
742
  .icon {
623
743
  display: flex;
624
744
 
625
745
  svg {
626
- width: calc(var(--_ctm-mob-dn-pn-as-aw-se,
627
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) * 0.5);
628
- height: calc(var(--_ctm-mob-dn-pn-as-aw-se,
629
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) * 0.5);
746
+ width: calc(
747
+ var(
748
+ --_ctm-mob-dn-pn-as-aw-se,
749
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
750
+ ) *
751
+ 0.5
752
+ );
753
+ height: calc(
754
+ var(
755
+ --_ctm-mob-dn-pn-as-aw-se,
756
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
757
+ ) *
758
+ 0.5
759
+ );
630
760
 
631
761
  path {
632
- stroke: var(--_ctm-mob-dn-pn-as-aw-cr,
633
- var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr)));
762
+ stroke: var(
763
+ --_ctm-mob-dn-pn-as-aw-cr,
764
+ var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
765
+ );
634
766
  }
635
767
  }
636
768
  }
637
769
 
638
770
  &[data-control-type="Side"] {
639
-
640
771
  .left-button,
641
772
  .right-button {
642
773
  // background-color: transparent;
643
774
  }
644
775
  }
645
-
646
776
  &[data-background-shape="Round"] {
647
-
648
777
  .left-button,
649
778
  .right-button {
650
779
  // background-color: #f2f5f5;
651
780
  // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
652
781
  }
653
782
  }
654
-
655
783
  &[data-background-shape="None"] {
656
-
657
784
  .left-button,
658
785
  .right-button {
659
786
  border-radius: 0;
660
787
  }
661
788
  }
662
-
663
789
  &[data-background-shape="Square"] {
664
-
665
790
  .left-button,
666
791
  .right-button {
667
792
  border-radius: 4px;
@@ -673,14 +798,12 @@ $overflowSelector: ".flex__overflow";
673
798
  width: calc(100% - 120px);
674
799
  margin-inline: auto;
675
800
  }
676
-
677
801
  .left-button {
678
802
  position: absolute;
679
803
  left: 0;
680
804
  top: 50%;
681
805
  transform: translateY(-50%);
682
806
  }
683
-
684
807
  .right-button {
685
808
  position: absolute;
686
809
 
@@ -701,11 +824,9 @@ $overflowSelector: ".flex__overflow";
701
824
  &[data-thumbnail-placement="top"] {
702
825
  flex-direction: column-reverse;
703
826
  }
704
-
705
827
  &[data-thumbnail-placement="bottom"] {
706
828
  flex-direction: column;
707
829
  }
708
-
709
830
  &[data-thumbnail-placement="left"] {
710
831
  flex-direction: row-reverse;
711
832
 
@@ -714,8 +835,10 @@ $overflowSelector: ".flex__overflow";
714
835
  height: 100%;
715
836
  flex-direction: column;
716
837
  margin-top: 0;
717
- margin-right: var(--_ctm-mob-lt-sr-ad-tl-gp,
718
- var(--_ctm-tab-lt-sr-ad-tl-gp, var(--_ctm-lt-sr-ad-tl-gp)));
838
+ margin-right: var(
839
+ --_ctm-mob-lt-sr-ad-tl-gp,
840
+ var(--_ctm-tab-lt-sr-ad-tl-gp, var(--_ctm-lt-sr-ad-tl-gp))
841
+ );
719
842
 
720
843
  & .embla__thumbs__container {
721
844
  flex-direction: column;
@@ -735,17 +858,17 @@ $overflowSelector: ".flex__overflow";
735
858
  }
736
859
  }
737
860
  }
738
-
739
861
  &[data-thumbnail-placement="right"] {
740
862
  flex-direction: row;
741
-
742
863
  .embla__thumbs {
743
864
  width: var(--_ctm-mob-lt-tl-wh, var(--_ctm-tab-lt-tl-wh, var(--_ctm-lt-tl-wh)));
744
865
  height: 100%;
745
866
  flex-direction: column;
746
867
  margin-top: 0;
747
- margin-left: var(--_ctm-mob-lt-sr-ad-tl-gp,
748
- var(--_ctm-tab-lt-sr-ad-tl-gp, var(--_ctm-lt-sr-ad-tl-gp)));
868
+ margin-left: var(
869
+ --_ctm-mob-lt-sr-ad-tl-gp,
870
+ var(--_ctm-tab-lt-sr-ad-tl-gp, var(--_ctm-lt-sr-ad-tl-gp))
871
+ );
749
872
 
750
873
  & .embla__thumbs__container {
751
874
  flex-direction: column;
@@ -765,7 +888,6 @@ $overflowSelector: ".flex__overflow";
765
888
  }
766
889
  }
767
890
  }
768
-
769
891
  .embla__dots {
770
892
  display: flex;
771
893
  flex-wrap: wrap;
@@ -782,7 +904,6 @@ $overflowSelector: ".flex__overflow";
782
904
  transform: translateX(-50%);
783
905
  width: 75%;
784
906
  }
785
-
786
907
  // Pagination Dots (design > Pagination Dots). Border and shadow go on the
787
908
  // ::after overlay — that pseudo-element is the visible dot, the button behind it
788
909
  // is only the hit area. There is deliberately no radius control: dots stay
@@ -790,25 +911,37 @@ $overflowSelector: ".flex__overflow";
790
911
  &[data-dots-show-border="false"] {
791
912
  --_show-pn-ds-border: none;
792
913
  }
793
-
794
914
  // A transparent shadow rather than `none`, so the selected dot can list this
795
915
  // next to its inset ring without the whole declaration going invalid.
796
916
  &[data-dots-show-shadow="false"] {
797
917
  --_show-pn-ds-shadow: 0 0 0 0 transparent;
798
918
  }
799
919
 
800
- $pnDsShadow: var(--_show-pn-ds-shadow,
801
- var(--_ctm-mob-dn-pn-ds-sw-ae, var(--_ctm-tab-dn-pn-ds-sw-ae, var(--_ctm-dn-pn-ds-sw-ae))) var(--_ctm-mob-dn-pn-ds-sw-br,
802
- var(--_ctm-tab-dn-pn-ds-sw-br, var(--_ctm-dn-pn-ds-sw-br))) var(--_ctm-mob-dn-pn-ds-sw-sd,
803
- var(--_ctm-tab-dn-pn-ds-sw-sd, var(--_ctm-dn-pn-ds-sw-sd))) var(--_ctm-mob-dn-pn-ds-sw-cr,
804
- var(--_ctm-tab-dn-pn-ds-sw-cr, var(--_ctm-dn-pn-ds-sw-cr))));
920
+ $pnDsShadow: var(
921
+ --_show-pn-ds-shadow,
922
+ var(--_ctm-mob-dn-pn-ds-sw-ae, var(--_ctm-tab-dn-pn-ds-sw-ae, var(--_ctm-dn-pn-ds-sw-ae)))
923
+ var(
924
+ --_ctm-mob-dn-pn-ds-sw-br,
925
+ var(--_ctm-tab-dn-pn-ds-sw-br, var(--_ctm-dn-pn-ds-sw-br))
926
+ )
927
+ var(
928
+ --_ctm-mob-dn-pn-ds-sw-sd,
929
+ var(--_ctm-tab-dn-pn-ds-sw-sd, var(--_ctm-dn-pn-ds-sw-sd))
930
+ )
931
+ var(
932
+ --_ctm-mob-dn-pn-ds-sw-cr,
933
+ var(--_ctm-tab-dn-pn-ds-sw-cr, var(--_ctm-dn-pn-ds-sw-cr))
934
+ )
935
+ );
805
936
 
806
937
  .embla__dot {
807
938
  -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
808
939
  -webkit-appearance: none;
809
940
  appearance: none;
810
- background-color: var(--_ctm-mob-dn-pn-ds-or-dt-cr,
811
- var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr)));
941
+ background-color: var(
942
+ --_ctm-mob-dn-pn-ds-or-dt-cr,
943
+ var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
944
+ );
812
945
 
813
946
  touch-action: manipulation;
814
947
  display: inline-flex;
@@ -819,36 +952,55 @@ $overflowSelector: ".flex__overflow";
819
952
  margin: 0;
820
953
  // width: 0.6rem;
821
954
  // height: 0.6rem;
822
- width: var(--_ctm-mob-dn-pn-ds-dt-se,
823
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)));
824
- height: var(--_ctm-mob-dn-pn-ds-dt-se,
825
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)));
955
+ width: var(
956
+ --_ctm-mob-dn-pn-ds-dt-se,
957
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
958
+ );
959
+ height: var(
960
+ --_ctm-mob-dn-pn-ds-dt-se,
961
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
962
+ );
826
963
 
827
964
  display: flex;
828
965
  align-items: center;
829
966
  justify-content: center;
830
967
  border-radius: 50%;
831
968
  }
832
-
833
969
  .embla__dot:after {
834
970
  // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
835
- width: var(--_ctm-mob-dn-pn-ds-dt-se,
836
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)));
837
- height: var(--_ctm-mob-dn-pn-ds-dt-se,
838
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)));
971
+ width: var(
972
+ --_ctm-mob-dn-pn-ds-dt-se,
973
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
974
+ );
975
+ height: var(
976
+ --_ctm-mob-dn-pn-ds-dt-se,
977
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
978
+ );
839
979
 
840
980
  // The overlay is sized to the button, so the border has to grow inwards or the
841
981
  // dot would render larger than its configured Dot Size.
842
982
  box-sizing: border-box;
843
- border-color: var(--_show-pn-ds-border,
844
- var(--_ctm-mob-dn-pn-ds-br-cr,
845
- var(--_ctm-tab-dn-pn-ds-br-cr, var(--_ctm-dn-pn-ds-br-cr))));
846
- border-style: var(--_show-pn-ds-border,
847
- var(--_ctm-mob-dn-pn-ds-br-se,
848
- var(--_ctm-tab-dn-pn-ds-br-se, var(--_ctm-dn-pn-ds-br-se))));
849
- border-width: var(--_show-pn-ds-border,
850
- var(--_ctm-mob-dn-pn-ds-br-wh,
851
- var(--_ctm-tab-dn-pn-ds-br-wh, var(--_ctm-dn-pn-ds-br-wh))));
983
+ border-color: var(
984
+ --_show-pn-ds-border,
985
+ var(
986
+ --_ctm-mob-dn-pn-ds-br-cr,
987
+ var(--_ctm-tab-dn-pn-ds-br-cr, var(--_ctm-dn-pn-ds-br-cr))
988
+ )
989
+ );
990
+ border-style: var(
991
+ --_show-pn-ds-border,
992
+ var(
993
+ --_ctm-mob-dn-pn-ds-br-se,
994
+ var(--_ctm-tab-dn-pn-ds-br-se, var(--_ctm-dn-pn-ds-br-se))
995
+ )
996
+ );
997
+ border-width: var(
998
+ --_show-pn-ds-border,
999
+ var(
1000
+ --_ctm-mob-dn-pn-ds-br-wh,
1001
+ var(--_ctm-tab-dn-pn-ds-br-wh, var(--_ctm-dn-pn-ds-br-wh))
1002
+ )
1003
+ );
852
1004
  box-shadow: $pnDsShadow;
853
1005
 
854
1006
  border-radius: 50%;
@@ -856,15 +1008,15 @@ $overflowSelector: ".flex__overflow";
856
1008
  align-items: center;
857
1009
  content: "";
858
1010
  }
859
-
860
1011
  .embla__dot--selected:after {
861
1012
  // Keeps the existing 1px ring on the active dot and still honours a configured
862
1013
  // shadow — this rule would otherwise shadow the one above it entirely.
863
1014
  box-shadow: $pnDsShadow;
864
- background-color: var(--_ctm-mob-dn-pn-ds-ct-dt-cr,
865
- var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr)));
1015
+ background-color: var(
1016
+ --_ctm-mob-dn-pn-ds-ct-dt-cr,
1017
+ var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
1018
+ );
866
1019
  }
867
-
868
1020
  // Pagination Line (design > Pagination Line). Border, border radius and shadow
869
1021
  // sit on the line itself. The two toggles arrive as data attributes from the
870
1022
  // element; `none` short-circuits the whole var chain the way Item Style does.
@@ -874,40 +1026,72 @@ $overflowSelector: ".flex__overflow";
874
1026
  &[data-line-show-border="false"] {
875
1027
  --_show-pn-le-border: none;
876
1028
  }
877
-
878
1029
  &[data-line-show-shadow="false"] {
879
1030
  --_show-pn-le-shadow: none;
880
1031
  }
881
1032
 
882
1033
  .embla__dot {
883
- width: var(--_ctm-mob-dn-pn-le-le-wh,
884
- var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh)));
885
- height: var(--_ctm-mob-dn-pn-le-le-ht,
886
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht)));
1034
+ width: var(
1035
+ --_ctm-mob-dn-pn-le-le-wh,
1036
+ var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
1037
+ );
1038
+ height: var(
1039
+ --_ctm-mob-dn-pn-le-le-ht,
1040
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
1041
+ );
887
1042
  // Draw the border inside the configured Line Width / Height rather than
888
1043
  // adding to it, so the track stays the size set in the panel.
889
1044
  box-sizing: border-box;
890
- background-color: var(--_ctm-mob-dn-pn-le-or-le-cr,
891
- var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr)));
892
-
893
- border-color: var(--_show-pn-le-border,
894
- var(--_ctm-mob-dn-pn-le-br-cr,
895
- var(--_ctm-tab-dn-pn-le-br-cr, var(--_ctm-dn-pn-le-br-cr))));
896
- border-style: var(--_show-pn-le-border,
897
- var(--_ctm-mob-dn-pn-le-br-se,
898
- var(--_ctm-tab-dn-pn-le-br-se, var(--_ctm-dn-pn-le-br-se))));
899
- border-width: var(--_show-pn-le-border,
900
- var(--_ctm-mob-dn-pn-le-br-wh,
901
- var(--_ctm-tab-dn-pn-le-br-wh, var(--_ctm-dn-pn-le-br-wh))));
902
- border-radius: var(--_ctm-mob-dn-pn-le-br-rs,
903
- var(--_ctm-tab-dn-pn-le-br-rs, var(--_ctm-dn-pn-le-br-rs, 6px)));
904
-
905
- box-shadow: var(--_show-pn-le-shadow,
906
- var(--_ctm-mob-dn-pn-le-sw-ae,
907
- var(--_ctm-tab-dn-pn-le-sw-ae, var(--_ctm-dn-pn-le-sw-ae))) var(--_ctm-mob-dn-pn-le-sw-br,
908
- var(--_ctm-tab-dn-pn-le-sw-br, var(--_ctm-dn-pn-le-sw-br))) var(--_ctm-mob-dn-pn-le-sw-sd,
909
- var(--_ctm-tab-dn-pn-le-sw-sd, var(--_ctm-dn-pn-le-sw-sd))) var(--_ctm-mob-dn-pn-le-sw-cr,
910
- var(--_ctm-tab-dn-pn-le-sw-cr, var(--_ctm-dn-pn-le-sw-cr))));
1045
+ background-color: var(
1046
+ --_ctm-mob-dn-pn-le-or-le-cr,
1047
+ var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
1048
+ );
1049
+
1050
+ border-color: var(
1051
+ --_show-pn-le-border,
1052
+ var(
1053
+ --_ctm-mob-dn-pn-le-br-cr,
1054
+ var(--_ctm-tab-dn-pn-le-br-cr, var(--_ctm-dn-pn-le-br-cr))
1055
+ )
1056
+ );
1057
+ border-style: var(
1058
+ --_show-pn-le-border,
1059
+ var(
1060
+ --_ctm-mob-dn-pn-le-br-se,
1061
+ var(--_ctm-tab-dn-pn-le-br-se, var(--_ctm-dn-pn-le-br-se))
1062
+ )
1063
+ );
1064
+ border-width: var(
1065
+ --_show-pn-le-border,
1066
+ var(
1067
+ --_ctm-mob-dn-pn-le-br-wh,
1068
+ var(--_ctm-tab-dn-pn-le-br-wh, var(--_ctm-dn-pn-le-br-wh))
1069
+ )
1070
+ );
1071
+ border-radius: var(
1072
+ --_ctm-mob-dn-pn-le-br-rs,
1073
+ var(--_ctm-tab-dn-pn-le-br-rs, var(--_ctm-dn-pn-le-br-rs, 6px))
1074
+ );
1075
+
1076
+ box-shadow: var(
1077
+ --_show-pn-le-shadow,
1078
+ var(
1079
+ --_ctm-mob-dn-pn-le-sw-ae,
1080
+ var(--_ctm-tab-dn-pn-le-sw-ae, var(--_ctm-dn-pn-le-sw-ae))
1081
+ )
1082
+ var(
1083
+ --_ctm-mob-dn-pn-le-sw-br,
1084
+ var(--_ctm-tab-dn-pn-le-sw-br, var(--_ctm-dn-pn-le-sw-br))
1085
+ )
1086
+ var(
1087
+ --_ctm-mob-dn-pn-le-sw-sd,
1088
+ var(--_ctm-tab-dn-pn-le-sw-sd, var(--_ctm-dn-pn-le-sw-sd))
1089
+ )
1090
+ var(
1091
+ --_ctm-mob-dn-pn-le-sw-cr,
1092
+ var(--_ctm-tab-dn-pn-le-sw-cr, var(--_ctm-dn-pn-le-sw-cr))
1093
+ )
1094
+ );
911
1095
  }
912
1096
 
913
1097
  // The Pagination Dots rules above style `.embla__dot:after` unscoped, so the
@@ -924,8 +1108,10 @@ $overflowSelector: ".flex__overflow";
924
1108
  }
925
1109
 
926
1110
  .embla__dot--selected:after {
927
- background-color: var(--_ctm-mob-dn-pn-le-ct-le-cr,
928
- var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr)));
1111
+ background-color: var(
1112
+ --_ctm-mob-dn-pn-le-ct-le-cr,
1113
+ var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
1114
+ );
929
1115
  }
930
1116
  }
931
1117
  }
@@ -933,8 +1119,10 @@ $overflowSelector: ".flex__overflow";
933
1119
  .embla__thumbs {
934
1120
  width: 100%;
935
1121
  height: var(--_ctm-mob-lt-tl-ht, var(--_ctm-tab-lt-tl-ht, var(--_ctm-lt-tl-ht)));
936
- margin-top: var(--_ctm-mob-lt-sr-ad-tl-gp,
937
- var(--_ctm-tab-lt-sr-ad-tl-gp, var(--_ctm-lt-sr-ad-tl-gp)));
1122
+ margin-top: var(
1123
+ --_ctm-mob-lt-sr-ad-tl-gp,
1124
+ var(--_ctm-tab-lt-sr-ad-tl-gp, var(--_ctm-lt-sr-ad-tl-gp))
1125
+ );
938
1126
 
939
1127
  position: relative;
940
1128
  display: flex;
@@ -957,23 +1145,37 @@ $overflowSelector: ".flex__overflow";
957
1145
  background-color: transparent;
958
1146
  z-index: 1;
959
1147
 
960
- width: var(--_ctm-mob-dn-tl-as-aw-se,
961
- var(--_ctm-tab-dn-tl-as-aw-se, var(--_ctm-dn-tl-as-aw-se, 30px)));
962
- height: var(--_ctm-mob-dn-tl-as-aw-se,
963
- var(--_ctm-tab-dn-tl-as-aw-se, var(--_ctm-dn-tl-as-aw-se, 30px)));
1148
+ width: var(
1149
+ --_ctm-mob-dn-tl-as-aw-se,
1150
+ var(--_ctm-tab-dn-tl-as-aw-se, var(--_ctm-dn-tl-as-aw-se, 30px))
1151
+ );
1152
+ height: var(
1153
+ --_ctm-mob-dn-tl-as-aw-se,
1154
+ var(--_ctm-tab-dn-tl-as-aw-se, var(--_ctm-dn-tl-as-aw-se, 30px))
1155
+ );
964
1156
 
965
1157
  span {
966
1158
  display: flex;
967
-
968
1159
  svg {
969
- width: calc(var(--_ctm-mob-dn-tl-as-aw-se,
970
- var(--_ctm-tab-dn-tl-as-aw-se, var(--_ctm-dn-tl-as-aw-se, 30px))) * 0.5);
971
- height: calc(var(--_ctm-mob-dn-tl-as-aw-se,
972
- var(--_ctm-tab-dn-tl-as-aw-se, var(--_ctm-dn-tl-as-aw-se, 30px))) * 0.5);
973
-
1160
+ width: calc(
1161
+ var(
1162
+ --_ctm-mob-dn-tl-as-aw-se,
1163
+ var(--_ctm-tab-dn-tl-as-aw-se, var(--_ctm-dn-tl-as-aw-se, 30px))
1164
+ ) *
1165
+ 0.5
1166
+ );
1167
+ height: calc(
1168
+ var(
1169
+ --_ctm-mob-dn-tl-as-aw-se,
1170
+ var(--_ctm-tab-dn-tl-as-aw-se, var(--_ctm-dn-tl-as-aw-se, 30px))
1171
+ ) *
1172
+ 0.5
1173
+ );
974
1174
  path {
975
- stroke: var(--_ctm-mob-dn-tl-as-aw-cr,
976
- var(--_ctm-tab-dn-tl-as-aw-cr, var(--_ctm-dn-tl-as-aw-cr)));
1175
+ stroke: var(
1176
+ --_ctm-mob-dn-tl-as-aw-cr,
1177
+ var(--_ctm-tab-dn-tl-as-aw-cr, var(--_ctm-dn-tl-as-aw-cr))
1178
+ );
977
1179
  }
978
1180
  }
979
1181
  }
@@ -985,27 +1187,21 @@ $overflowSelector: ".flex__overflow";
985
1187
  }
986
1188
 
987
1189
  &[data-background-shape="Round"] {
988
-
989
1190
  .thumb-prev-button,
990
1191
  .thumb-next-button {
991
1192
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
992
-
993
1193
  &:not(:disabled):hover {
994
1194
  @include BgColorLighter(var(--_ctm-dn-tl-as-bd-cr), 5%);
995
1195
  }
996
1196
  }
997
1197
  }
998
-
999
1198
  &[data-background-shape="None"] {
1000
-
1001
1199
  .thumb-prev-button,
1002
1200
  .thumb-next-button {
1003
1201
  border-radius: 0;
1004
1202
  }
1005
1203
  }
1006
-
1007
1204
  &[data-background-shape="Square"] {
1008
-
1009
1205
  .thumb-prev-button,
1010
1206
  .thumb-next-button {
1011
1207
  border-radius: 4px;
@@ -1023,7 +1219,6 @@ $overflowSelector: ".flex__overflow";
1023
1219
 
1024
1220
  overflow: hidden;
1025
1221
  }
1026
-
1027
1222
  .embla__thumbs__container {
1028
1223
  display: flex;
1029
1224
  flex-direction: row;
@@ -1043,63 +1238,109 @@ $overflowSelector: ".flex__overflow";
1043
1238
 
1044
1239
  // thumbnailStyle - hoverState
1045
1240
  &:hover {
1046
- --_sf-hr-bd-cr: var(--_ctm-mob-dn-tl-se-hr-se-bd-cr,
1047
- var(--_ctm-tab-dn-tl-se-hr-se-bd-cr, var(--_ctm-dn-tl-se-hr-se-bd-cr)));
1048
- --_sf-hr-br-cr: var(--_ctm-mob-dn-tl-se-hr-se-br-cr,
1049
- var(--_ctm-tab-dn-tl-se-hr-se-br-cr, var(--_ctm-dn-tl-se-hr-se-br-cr)));
1050
- --_sf-hr-br-se: var(--_ctm-mob-dn-tl-se-hr-se-br-se,
1051
- var(--_ctm-tab-dn-tl-se-hr-se-br-se, var(--_ctm-dn-tl-se-hr-se-br-se)));
1052
- --_sf-hr-br-wh: var(--_ctm-mob-dn-tl-se-hr-se-br-wh,
1053
- var(--_ctm-tab-dn-tl-se-hr-se-br-wh, var(--_ctm-dn-tl-se-hr-se-br-wh)));
1054
- --_sf-hr-br-rs: var(--_ctm-mob-dn-tl-se-hr-se-br-rs,
1055
- var(--_ctm-tab-dn-tl-se-hr-se-br-rs, var(--_ctm-dn-tl-se-hr-se-br-rs)));
1056
- --_sf-hr-sw-ae: var(--_ctm-mob-dn-tl-se-hr-se-sw-ae,
1057
- var(--_ctm-tab-dn-tl-se-hr-se-sw-ae, var(--_ctm-dn-tl-se-hr-se-sw-ae)));
1058
- --_sf-hr-sw-br: var(--_ctm-mob-dn-tl-se-hr-se-sw-br,
1059
- var(--_ctm-tab-dn-tl-se-hr-se-sw-br, var(--_ctm-dn-tl-se-hr-se-sw-br)));
1060
- --_sf-hr-sw-sd: var(--_ctm-mob-dn-tl-se-hr-se-sw-sd,
1061
- var(--_ctm-tab-dn-tl-se-hr-se-sw-sd, var(--_ctm-dn-tl-se-hr-se-sw-sd)));
1062
- --_sf-hr-sw-cr: var(--_ctm-mob-dn-tl-se-hr-se-sw-cr,
1063
- var(--_ctm-tab-dn-tl-se-hr-se-sw-cr, var(--_ctm-dn-tl-se-hr-se-sw-cr)));
1241
+ --_sf-hr-bd-cr: var(
1242
+ --_ctm-mob-dn-tl-se-hr-se-bd-cr,
1243
+ var(--_ctm-tab-dn-tl-se-hr-se-bd-cr, var(--_ctm-dn-tl-se-hr-se-bd-cr))
1244
+ );
1245
+ --_sf-hr-br-cr: var(
1246
+ --_ctm-mob-dn-tl-se-hr-se-br-cr,
1247
+ var(--_ctm-tab-dn-tl-se-hr-se-br-cr, var(--_ctm-dn-tl-se-hr-se-br-cr))
1248
+ );
1249
+ --_sf-hr-br-se: var(
1250
+ --_ctm-mob-dn-tl-se-hr-se-br-se,
1251
+ var(--_ctm-tab-dn-tl-se-hr-se-br-se, var(--_ctm-dn-tl-se-hr-se-br-se))
1252
+ );
1253
+ --_sf-hr-br-wh: var(
1254
+ --_ctm-mob-dn-tl-se-hr-se-br-wh,
1255
+ var(--_ctm-tab-dn-tl-se-hr-se-br-wh, var(--_ctm-dn-tl-se-hr-se-br-wh))
1256
+ );
1257
+ --_sf-hr-br-rs: var(
1258
+ --_ctm-mob-dn-tl-se-hr-se-br-rs,
1259
+ var(--_ctm-tab-dn-tl-se-hr-se-br-rs, var(--_ctm-dn-tl-se-hr-se-br-rs))
1260
+ );
1261
+ --_sf-hr-sw-ae: var(
1262
+ --_ctm-mob-dn-tl-se-hr-se-sw-ae,
1263
+ var(--_ctm-tab-dn-tl-se-hr-se-sw-ae, var(--_ctm-dn-tl-se-hr-se-sw-ae))
1264
+ );
1265
+ --_sf-hr-sw-br: var(
1266
+ --_ctm-mob-dn-tl-se-hr-se-sw-br,
1267
+ var(--_ctm-tab-dn-tl-se-hr-se-sw-br, var(--_ctm-dn-tl-se-hr-se-sw-br))
1268
+ );
1269
+ --_sf-hr-sw-sd: var(
1270
+ --_ctm-mob-dn-tl-se-hr-se-sw-sd,
1271
+ var(--_ctm-tab-dn-tl-se-hr-se-sw-sd, var(--_ctm-dn-tl-se-hr-se-sw-sd))
1272
+ );
1273
+ --_sf-hr-sw-cr: var(
1274
+ --_ctm-mob-dn-tl-se-hr-se-sw-cr,
1275
+ var(--_ctm-tab-dn-tl-se-hr-se-sw-cr, var(--_ctm-dn-tl-se-hr-se-sw-cr))
1276
+ );
1064
1277
  }
1065
1278
 
1066
1279
  // thumbnailStyle - defaultState
1067
- background-color: var(--_sf-hr-bd-cr,
1068
- prepareMediaVariable(--_ctm-dn-tl-se-dt-se-bd-cr));
1280
+ background-color: var(
1281
+ --_sf-hr-bd-cr,
1282
+ prepareMediaVariable(--_ctm-dn-tl-se-dt-se-bd-cr)
1283
+ );
1069
1284
  border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-cr));
1070
1285
  border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-se));
1071
1286
  border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-wh));
1072
1287
  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-rs));
1073
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-cr));
1288
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-ae))
1289
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-br))
1290
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-sd))
1291
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-cr));
1074
1292
 
1075
1293
  // thumbnailStyle - selectedState
1076
1294
  &[data-selected="true"] {
1077
- --_sf-sd-bd-cr: var(--_ctm-mob-dn-tl-se-sd-se-bd-cr,
1078
- var(--_ctm-tab-dn-tl-se-sd-se-bd-cr, var(--_ctm-dn-tl-se-sd-se-bd-cr)));
1079
- --_sf-sd-br-cr: var(--_ctm-mob-dn-tl-se-sd-se-br-cr,
1080
- var(--_ctm-tab-dn-tl-se-sd-se-br-cr, var(--_ctm-dn-tl-se-sd-se-br-cr)));
1081
- --_sf-sd-br-se: var(--_ctm-mob-dn-tl-se-sd-se-br-se,
1082
- var(--_ctm-tab-dn-tl-se-sd-se-br-se, var(--_ctm-dn-tl-se-sd-se-br-se)));
1083
- --_sf-sd-br-wh: var(--_ctm-mob-dn-tl-se-sd-se-br-wh,
1084
- var(--_ctm-tab-dn-tl-se-sd-se-br-wh, var(--_ctm-dn-tl-se-sd-se-br-wh)));
1085
- --_sf-sd-br-rs: var(--_ctm-mob-dn-tl-se-sd-se-br-rs,
1086
- var(--_ctm-tab-dn-tl-se-sd-se-br-rs, var(--_ctm-dn-tl-se-sd-se-br-rs)));
1087
- --_sf-sd-sw-ae: var(--_ctm-mob-dn-tl-se-sd-se-sw-ae,
1088
- var(--_ctm-tab-dn-tl-se-sd-se-sw-ae, var(--_ctm-dn-tl-se-sd-se-sw-ae)));
1089
- --_sf-sd-sw-br: var(--_ctm-mob-dn-tl-se-sd-se-sw-br,
1090
- var(--_ctm-tab-dn-tl-se-sd-se-sw-br, var(--_ctm-dn-tl-se-sd-se-sw-br)));
1091
- --_sf-sd-sw-sd: var(--_ctm-mob-dn-tl-se-sd-se-sw-sd,
1092
- var(--_ctm-tab-dn-tl-se-sd-se-sw-sd, var(--_ctm-dn-tl-se-sd-se-sw-sd)));
1093
- --_sf-sd-sw-cr: var(--_ctm-mob-dn-tl-se-sd-se-sw-cr,
1094
- var(--_ctm-tab-dn-tl-se-sd-se-sw-cr, var(--_ctm-dn-tl-se-sd-se-sw-cr)));
1095
-
1096
- background-color: var(--_sf-sd-bd-cr,
1097
- prepareMediaVariable(--_ctm-dn-tl-se-dt-se-bd-cr));
1295
+ --_sf-sd-bd-cr: var(
1296
+ --_ctm-mob-dn-tl-se-sd-se-bd-cr,
1297
+ var(--_ctm-tab-dn-tl-se-sd-se-bd-cr, var(--_ctm-dn-tl-se-sd-se-bd-cr))
1298
+ );
1299
+ --_sf-sd-br-cr: var(
1300
+ --_ctm-mob-dn-tl-se-sd-se-br-cr,
1301
+ var(--_ctm-tab-dn-tl-se-sd-se-br-cr, var(--_ctm-dn-tl-se-sd-se-br-cr))
1302
+ );
1303
+ --_sf-sd-br-se: var(
1304
+ --_ctm-mob-dn-tl-se-sd-se-br-se,
1305
+ var(--_ctm-tab-dn-tl-se-sd-se-br-se, var(--_ctm-dn-tl-se-sd-se-br-se))
1306
+ );
1307
+ --_sf-sd-br-wh: var(
1308
+ --_ctm-mob-dn-tl-se-sd-se-br-wh,
1309
+ var(--_ctm-tab-dn-tl-se-sd-se-br-wh, var(--_ctm-dn-tl-se-sd-se-br-wh))
1310
+ );
1311
+ --_sf-sd-br-rs: var(
1312
+ --_ctm-mob-dn-tl-se-sd-se-br-rs,
1313
+ var(--_ctm-tab-dn-tl-se-sd-se-br-rs, var(--_ctm-dn-tl-se-sd-se-br-rs))
1314
+ );
1315
+ --_sf-sd-sw-ae: var(
1316
+ --_ctm-mob-dn-tl-se-sd-se-sw-ae,
1317
+ var(--_ctm-tab-dn-tl-se-sd-se-sw-ae, var(--_ctm-dn-tl-se-sd-se-sw-ae))
1318
+ );
1319
+ --_sf-sd-sw-br: var(
1320
+ --_ctm-mob-dn-tl-se-sd-se-sw-br,
1321
+ var(--_ctm-tab-dn-tl-se-sd-se-sw-br, var(--_ctm-dn-tl-se-sd-se-sw-br))
1322
+ );
1323
+ --_sf-sd-sw-sd: var(
1324
+ --_ctm-mob-dn-tl-se-sd-se-sw-sd,
1325
+ var(--_ctm-tab-dn-tl-se-sd-se-sw-sd, var(--_ctm-dn-tl-se-sd-se-sw-sd))
1326
+ );
1327
+ --_sf-sd-sw-cr: var(
1328
+ --_ctm-mob-dn-tl-se-sd-se-sw-cr,
1329
+ var(--_ctm-tab-dn-tl-se-sd-se-sw-cr, var(--_ctm-dn-tl-se-sd-se-sw-cr))
1330
+ );
1331
+
1332
+ background-color: var(
1333
+ --_sf-sd-bd-cr,
1334
+ prepareMediaVariable(--_ctm-dn-tl-se-dt-se-bd-cr)
1335
+ );
1098
1336
  border-color: var(--_sf-sd-br-cr, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-cr));
1099
1337
  border-style: var(--_sf-sd-br-se, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-se));
1100
1338
  border-width: var(--_sf-sd-br-wh, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-wh));
1101
1339
  border-radius: var(--_sf-sd-br-rs, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-rs));
1102
- box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-ae)) var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-br)) var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-sd)) var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-cr));
1340
+ box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-ae))
1341
+ var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-br))
1342
+ var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-sd))
1343
+ var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-cr));
1103
1344
  }
1104
1345
 
1105
1346
  & img {
@@ -1126,26 +1367,43 @@ $overflowSelector: ".flex__overflow";
1126
1367
  min-width: 0;
1127
1368
  // flex-direction: column;
1128
1369
 
1129
- background-color: var(--_ctm-mob-dn-im-se-bd-cr,
1130
- var(--_ctm-tab-dn-im-se-bd-cr, var(--_ctm-dn-im-se-bd-cr)));
1131
-
1132
- border-color: var(--_ctm-mob-dn-im-se-br-cr,
1133
- var(--_ctm-tab-dn-im-se-br-cr, var(--_ctm-dn-im-se-br-cr)));
1134
-
1135
- border-style: var(--_ctm-mob-dn-im-se-br-se,
1136
- var(--_ctm-tab-dn-im-se-br-se, var(--_ctm-dn-im-se-br-se)));
1137
-
1138
- border-width: var(--_ctm-mob-dn-im-se-br-wh,
1139
- var(--_ctm-tab-dn-im-se-br-wh, var(--_ctm-dn-im-se-br-wh)));
1140
-
1141
- border-radius: var(--_ctm-mob-dn-im-se-br-rs,
1142
- var(--_ctm-tab-dn-im-se-br-rs, var(--_ctm-dn-im-se-br-rs)));
1143
-
1144
- box-shadow: var(--_show-shadow,
1145
- var(--_ctm-mob-dn-im-se-sw-ae, var(--_ctm-tab-dn-im-se-sw-ae, var(--_ctm-dn-im-se-sw-ae))) var(--_ctm-mob-dn-im-se-sw-br, var(--_ctm-tab-dn-im-se-sw-br, var(--_ctm-dn-im-se-sw-br))) var(--_ctm-mob-dn-im-se-sw-sd, var(--_ctm-tab-dn-im-se-sw-sd, var(--_ctm-dn-im-se-sw-sd))) var(--_ctm-mob-dn-im-se-sw-cr, var(--_ctm-tab-dn-im-se-sw-cr, var(--_ctm-dn-im-se-sw-cr))));
1146
-
1147
- gap: var(--_ctm-mob-dn-im-lt-gy-tt-ad-im-sg,
1148
- var(--_ctm-tab-dn-im-lt-gy-tt-ad-im-sg, var(--_ctm-dn-im-lt-gy-tt-ad-im-sg)));
1370
+ background-color: var(
1371
+ --_ctm-mob-dn-im-se-bd-cr,
1372
+ var(--_ctm-tab-dn-im-se-bd-cr, var(--_ctm-dn-im-se-bd-cr))
1373
+ );
1374
+
1375
+ border-color: var(
1376
+ --_ctm-mob-dn-im-se-br-cr,
1377
+ var(--_ctm-tab-dn-im-se-br-cr, var(--_ctm-dn-im-se-br-cr))
1378
+ );
1379
+
1380
+ border-style: var(
1381
+ --_ctm-mob-dn-im-se-br-se,
1382
+ var(--_ctm-tab-dn-im-se-br-se, var(--_ctm-dn-im-se-br-se))
1383
+ );
1384
+
1385
+ border-width: var(
1386
+ --_ctm-mob-dn-im-se-br-wh,
1387
+ var(--_ctm-tab-dn-im-se-br-wh, var(--_ctm-dn-im-se-br-wh))
1388
+ );
1389
+
1390
+ border-radius: var(
1391
+ --_ctm-mob-dn-im-se-br-rs,
1392
+ var(--_ctm-tab-dn-im-se-br-rs, var(--_ctm-dn-im-se-br-rs))
1393
+ );
1394
+
1395
+ box-shadow: var(
1396
+ --_show-shadow,
1397
+ var(--_ctm-mob-dn-im-se-sw-ae, var(--_ctm-tab-dn-im-se-sw-ae, var(--_ctm-dn-im-se-sw-ae)))
1398
+ var(--_ctm-mob-dn-im-se-sw-br, var(--_ctm-tab-dn-im-se-sw-br, var(--_ctm-dn-im-se-sw-br)))
1399
+ var(--_ctm-mob-dn-im-se-sw-sd, var(--_ctm-tab-dn-im-se-sw-sd, var(--_ctm-dn-im-se-sw-sd)))
1400
+ var(--_ctm-mob-dn-im-se-sw-cr, var(--_ctm-tab-dn-im-se-sw-cr, var(--_ctm-dn-im-se-sw-cr)))
1401
+ );
1402
+
1403
+ gap: var(
1404
+ --_ctm-mob-dn-im-lt-gy-tt-ad-im-sg,
1405
+ var(--_ctm-tab-dn-im-lt-gy-tt-ad-im-sg, var(--_ctm-dn-im-lt-gy-tt-ad-im-sg))
1406
+ );
1149
1407
 
1150
1408
  // Clip the image to the item's border radius; without this the img's
1151
1409
  // square corners paint over the rounded container.
@@ -1157,17 +1415,25 @@ $overflowSelector: ".flex__overflow";
1157
1415
  display: flex;
1158
1416
  flex-direction: column;
1159
1417
 
1160
- gap: var(--_ctm-mob-dn-im-tt-cr-lt-te-ad-dn-sg,
1161
- var(--_ctm-tab-dn-im-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-im-tt-cr-lt-te-ad-dn-sg)));
1418
+ gap: var(
1419
+ --_ctm-mob-dn-im-tt-cr-lt-te-ad-dn-sg,
1420
+ var(--_ctm-tab-dn-im-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-im-tt-cr-lt-te-ad-dn-sg))
1421
+ );
1162
1422
 
1163
- padding-block: var(--_ctm-mob-dn-im-tt-cr-lt-tt-vl-pg,
1164
- var(--_ctm-tab-dn-im-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-im-tt-cr-lt-tt-vl-pg)));
1423
+ padding-block: var(
1424
+ --_ctm-mob-dn-im-tt-cr-lt-tt-vl-pg,
1425
+ var(--_ctm-tab-dn-im-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-im-tt-cr-lt-tt-vl-pg))
1426
+ );
1165
1427
 
1166
- padding-inline: var(--_ctm-mob-dn-im-tt-cr-lt-tt-hl-pg,
1167
- var(--_ctm-tab-dn-im-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-im-tt-cr-lt-tt-hl-pg)));
1428
+ padding-inline: var(
1429
+ --_ctm-mob-dn-im-tt-cr-lt-tt-hl-pg,
1430
+ var(--_ctm-tab-dn-im-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-im-tt-cr-lt-tt-hl-pg))
1431
+ );
1168
1432
 
1169
- background-color: var(--_ctm-mob-dn-im-tt-cr-dn-bd-cr,
1170
- var(--_ctm-tab-dn-im-tt-cr-dn-bd-cr, var(--_ctm-dn-im-tt-cr-dn-bd-cr)));
1433
+ background-color: var(
1434
+ --_ctm-mob-dn-im-tt-cr-dn-bd-cr,
1435
+ var(--_ctm-tab-dn-im-tt-cr-dn-bd-cr, var(--_ctm-dn-im-tt-cr-dn-bd-cr))
1436
+ );
1171
1437
 
1172
1438
  width: 100%;
1173
1439
  // Shrink to the slide, and never below the height the wrapped caption needs —
@@ -1175,111 +1441,176 @@ $overflowSelector: ".flex__overflow";
1175
1441
  min-width: 0;
1176
1442
  flex: 0 0 auto;
1177
1443
 
1178
- border-color: var(--_ctm-mob-dn-im-tt-cr-dn-br-cr,
1179
- var(--_ctm-tab-dn-im-tt-cr-dn-br-cr, var(--_ctm-dn-im-tt-cr-dn-br-cr)));
1180
-
1181
- border-style: var(--_ctm-mob-dn-im-tt-cr-dn-br-se,
1182
- var(--_ctm-tab-dn-im-tt-cr-dn-br-se, var(--_ctm-dn-im-tt-cr-dn-br-se)));
1183
-
1184
- border-width: var(--_ctm-mob-dn-im-tt-cr-dn-br-wh,
1185
- var(--_ctm-tab-dn-im-tt-cr-dn-br-wh, var(--_ctm-dn-im-tt-cr-dn-br-wh)));
1186
-
1187
- border-radius: var(--_ctm-mob-dn-im-tt-cr-dn-br-rs,
1188
- var(--_ctm-tab-dn-im-tt-cr-dn-br-rs, var(--_ctm-dn-im-tt-cr-dn-br-rs)));
1189
-
1190
- box-shadow: var(--_show-shadow,
1191
- var(--_ctm-mob-dn-im-tt-cr-dn-sw-ae,
1192
- var(--_ctm-tab-dn-im-tt-cr-dn-sw-ae, var(--_ctm-dn-im-tt-cr-dn-sw-ae))) var(--_ctm-mob-dn-im-tt-cr-dn-sw-br,
1193
- var(--_ctm-tab-dn-im-tt-cr-dn-sw-br, var(--_ctm-dn-im-tt-cr-dn-sw-br))) var(--_ctm-mob-dn-im-tt-cr-dn-sw-sd,
1194
- var(--_ctm-tab-dn-im-tt-cr-dn-sw-sd, var(--_ctm-dn-im-tt-cr-dn-sw-sd))) var(--_ctm-mob-dn-im-tt-cr-dn-sw-cr,
1195
- var(--_ctm-tab-dn-im-tt-cr-dn-sw-cr, var(--_ctm-dn-im-tt-cr-dn-sw-cr))));
1444
+ border-color: var(
1445
+ --_ctm-mob-dn-im-tt-cr-dn-br-cr,
1446
+ var(--_ctm-tab-dn-im-tt-cr-dn-br-cr, var(--_ctm-dn-im-tt-cr-dn-br-cr))
1447
+ );
1448
+
1449
+ border-style: var(
1450
+ --_ctm-mob-dn-im-tt-cr-dn-br-se,
1451
+ var(--_ctm-tab-dn-im-tt-cr-dn-br-se, var(--_ctm-dn-im-tt-cr-dn-br-se))
1452
+ );
1453
+
1454
+ border-width: var(
1455
+ --_ctm-mob-dn-im-tt-cr-dn-br-wh,
1456
+ var(--_ctm-tab-dn-im-tt-cr-dn-br-wh, var(--_ctm-dn-im-tt-cr-dn-br-wh))
1457
+ );
1458
+
1459
+ border-radius: var(
1460
+ --_ctm-mob-dn-im-tt-cr-dn-br-rs,
1461
+ var(--_ctm-tab-dn-im-tt-cr-dn-br-rs, var(--_ctm-dn-im-tt-cr-dn-br-rs))
1462
+ );
1463
+
1464
+ box-shadow: var(
1465
+ --_show-shadow,
1466
+ var(
1467
+ --_ctm-mob-dn-im-tt-cr-dn-sw-ae,
1468
+ var(--_ctm-tab-dn-im-tt-cr-dn-sw-ae, var(--_ctm-dn-im-tt-cr-dn-sw-ae))
1469
+ )
1470
+ var(
1471
+ --_ctm-mob-dn-im-tt-cr-dn-sw-br,
1472
+ var(--_ctm-tab-dn-im-tt-cr-dn-sw-br, var(--_ctm-dn-im-tt-cr-dn-sw-br))
1473
+ )
1474
+ var(
1475
+ --_ctm-mob-dn-im-tt-cr-dn-sw-sd,
1476
+ var(--_ctm-tab-dn-im-tt-cr-dn-sw-sd, var(--_ctm-dn-im-tt-cr-dn-sw-sd))
1477
+ )
1478
+ var(
1479
+ --_ctm-mob-dn-im-tt-cr-dn-sw-cr,
1480
+ var(--_ctm-tab-dn-im-tt-cr-dn-sw-cr, var(--_ctm-dn-im-tt-cr-dn-sw-cr))
1481
+ )
1482
+ );
1196
1483
 
1197
1484
  & h3 {
1198
1485
  color: var(--_ctm-mob-dn-im-se-cr, var(--_ctm-tab-dn-im-se-cr, var(--_ctm-dn-im-se-cr)));
1199
1486
 
1200
- font-family: var(--_ctm-mob-dn-im-se-ft-fy,
1201
- var(--_ctm-tab-dn-im-se-ft-fy, var(--_ctm-dn-im-se-ft-fy)));
1202
- text-transform: var(--_ctm-mob-dn-im-se-tt-tm,
1203
- var(--_ctm-tab-dn-im-se-tt-tm, var(--_ctm-dn-im-se-tt-tm)));
1204
- word-wrap: var(--_ctm-mob-dn-im-se-wd-wp,
1205
- var(--_ctm-tab-dn-im-se-wd-wp, var(--_ctm-dn-im-se-wd-wp)));
1206
- word-break: var(--_ctm-mob-dn-im-se-wd-bk,
1207
- var(--_ctm-tab-dn-im-se-wd-bk, var(--_ctm-dn-im-se-wd-bk)));
1487
+ font-family: var(
1488
+ --_ctm-mob-dn-im-se-ft-fy,
1489
+ var(--_ctm-tab-dn-im-se-ft-fy, var(--_ctm-dn-im-se-ft-fy))
1490
+ );
1491
+ text-transform: var(
1492
+ --_ctm-mob-dn-im-se-tt-tm,
1493
+ var(--_ctm-tab-dn-im-se-tt-tm, var(--_ctm-dn-im-se-tt-tm))
1494
+ );
1495
+ word-wrap: var(
1496
+ --_ctm-mob-dn-im-se-wd-wp,
1497
+ var(--_ctm-tab-dn-im-se-wd-wp, var(--_ctm-dn-im-se-wd-wp))
1498
+ );
1499
+ word-break: var(
1500
+ --_ctm-mob-dn-im-se-wd-bk,
1501
+ var(--_ctm-tab-dn-im-se-wd-bk, var(--_ctm-dn-im-se-wd-bk))
1502
+ );
1208
1503
 
1209
1504
  &#{$overflowSelector} {
1210
1505
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1211
1506
  }
1212
1507
 
1213
- font-size: var(--_ctm-mob-dn-im-se-ft-se,
1214
- var(--_ctm-tab-dn-im-se-ft-se, var(--_ctm-dn-im-se-ft-se)));
1508
+ font-size: var(
1509
+ --_ctm-mob-dn-im-se-ft-se,
1510
+ var(--_ctm-tab-dn-im-se-ft-se, var(--_ctm-dn-im-se-ft-se))
1511
+ );
1215
1512
 
1216
- font-weight: var(--_ctm-mob-dn-im-se-ft-wt,
1217
- var(--_ctm-tab-dn-im-se-ft-wt, var(--_ctm-dn-im-se-ft-wt)));
1513
+ font-weight: var(
1514
+ --_ctm-mob-dn-im-se-ft-wt,
1515
+ var(--_ctm-tab-dn-im-se-ft-wt, var(--_ctm-dn-im-se-ft-wt))
1516
+ );
1218
1517
 
1219
- font-style: var(--_ctm-mob-dn-im-se-ft-se-ic,
1220
- var(--_ctm-tab-dn-im-se-ft-se-ic, var(--_ctm-dn-im-se-ft-se-ic)));
1518
+ font-style: var(
1519
+ --_ctm-mob-dn-im-se-ft-se-ic,
1520
+ var(--_ctm-tab-dn-im-se-ft-se-ic, var(--_ctm-dn-im-se-ft-se-ic))
1521
+ );
1221
1522
 
1222
- text-align: var(--_ctm-mob-dn-im-se-tt-an,
1223
- var(--_ctm-tab-dn-im-se-tt-an, var(--_ctm-dn-im-se-tt-an)));
1523
+ text-align: var(
1524
+ --_ctm-mob-dn-im-se-tt-an,
1525
+ var(--_ctm-tab-dn-im-se-tt-an, var(--_ctm-dn-im-se-tt-an))
1526
+ );
1224
1527
 
1225
- letter-spacing: var(--_ctm-mob-dn-im-se-lr-sg,
1226
- var(--_ctm-tab-dn-im-se-lr-sg, var(--_ctm-dn-im-se-lr-sg)));
1528
+ letter-spacing: var(
1529
+ --_ctm-mob-dn-im-se-lr-sg,
1530
+ var(--_ctm-tab-dn-im-se-lr-sg, var(--_ctm-dn-im-se-lr-sg))
1531
+ );
1227
1532
 
1228
- line-height: var(--_ctm-mob-dn-im-se-le-ht,
1229
- var(--_ctm-tab-dn-im-se-le-ht, var(--_ctm-dn-im-se-le-ht)));
1533
+ line-height: var(
1534
+ --_ctm-mob-dn-im-se-le-ht,
1535
+ var(--_ctm-tab-dn-im-se-le-ht, var(--_ctm-dn-im-se-le-ht))
1536
+ );
1230
1537
 
1231
- text-decoration: var(--_ctm-mob-dn-im-se-ue,
1232
- var(--_ctm-tab-dn-im-se-ue, var(--_ctm-dn-im-se-ue)));
1538
+ text-decoration: var(
1539
+ --_ctm-mob-dn-im-se-ue,
1540
+ var(--_ctm-tab-dn-im-se-ue, var(--_ctm-dn-im-se-ue))
1541
+ );
1233
1542
  }
1234
1543
 
1235
1544
  & p {
1236
- color: var(--_ctm-mob-dn-im-se-cr-dc,
1237
- var(--_ctm-tab-dn-im-se-cr-dc, var(--_ctm-dn-im-se-cr-dc)));
1238
-
1239
- font-family: var(--_ctm-mob-dn-im-se-ft-fy-dc,
1240
- var(--_ctm-tab-dn-im-se-ft-fy-dc, var(--_ctm-dn-im-se-ft-fy-dc)));
1241
- text-transform: var(--_ctm-mob-dn-im-se-tt-tm-dc,
1242
- var(--_ctm-tab-dn-im-se-tt-tm-dc, var(--_ctm-dn-im-se-tt-tm-dc)));
1243
- word-wrap: var(--_ctm-mob-dn-im-se-wd-wp-dc,
1244
- var(--_ctm-tab-dn-im-se-wd-wp-dc, var(--_ctm-dn-im-se-wd-wp-dc)));
1245
- word-break: var(--_ctm-mob-dn-im-se-wd-bk-dc,
1246
- var(--_ctm-tab-dn-im-se-wd-bk-dc, var(--_ctm-dn-im-se-wd-bk-dc)));
1545
+ color: var(
1546
+ --_ctm-mob-dn-im-se-cr-dc,
1547
+ var(--_ctm-tab-dn-im-se-cr-dc, var(--_ctm-dn-im-se-cr-dc))
1548
+ );
1549
+
1550
+ font-family: var(
1551
+ --_ctm-mob-dn-im-se-ft-fy-dc,
1552
+ var(--_ctm-tab-dn-im-se-ft-fy-dc, var(--_ctm-dn-im-se-ft-fy-dc))
1553
+ );
1554
+ text-transform: var(
1555
+ --_ctm-mob-dn-im-se-tt-tm-dc,
1556
+ var(--_ctm-tab-dn-im-se-tt-tm-dc, var(--_ctm-dn-im-se-tt-tm-dc))
1557
+ );
1558
+ word-wrap: var(
1559
+ --_ctm-mob-dn-im-se-wd-wp-dc,
1560
+ var(--_ctm-tab-dn-im-se-wd-wp-dc, var(--_ctm-dn-im-se-wd-wp-dc))
1561
+ );
1562
+ word-break: var(
1563
+ --_ctm-mob-dn-im-se-wd-bk-dc,
1564
+ var(--_ctm-tab-dn-im-se-wd-bk-dc, var(--_ctm-dn-im-se-wd-bk-dc))
1565
+ );
1247
1566
 
1248
1567
  &#{$overflowSelector} {
1249
1568
  @include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
1250
1569
  }
1251
1570
 
1252
- font-size: var(--_ctm-mob-dn-im-se-ft-se-dc,
1253
- var(--_ctm-tab-dn-im-se-ft-se-dc, var(--_ctm-dn-im-se-ft-se-dc)));
1571
+ font-size: var(
1572
+ --_ctm-mob-dn-im-se-ft-se-dc,
1573
+ var(--_ctm-tab-dn-im-se-ft-se-dc, var(--_ctm-dn-im-se-ft-se-dc))
1574
+ );
1254
1575
 
1255
- font-weight: var(--_ctm-mob-dn-im-se-ft-wt-dc,
1256
- var(--_ctm-tab-dn-im-se-ft-wt-dc, var(--_ctm-dn-im-se-ft-wt-dc)));
1576
+ font-weight: var(
1577
+ --_ctm-mob-dn-im-se-ft-wt-dc,
1578
+ var(--_ctm-tab-dn-im-se-ft-wt-dc, var(--_ctm-dn-im-se-ft-wt-dc))
1579
+ );
1257
1580
 
1258
- font-style: var(--_ctm-mob-dn-im-se-ft-se-ic-dc,
1259
- var(--_ctm-tab-dn-im-se-ft-se-ic-dc, var(--_ctm-dn-im-se-ft-se-ic-dc)));
1581
+ font-style: var(
1582
+ --_ctm-mob-dn-im-se-ft-se-ic-dc,
1583
+ var(--_ctm-tab-dn-im-se-ft-se-ic-dc, var(--_ctm-dn-im-se-ft-se-ic-dc))
1584
+ );
1260
1585
 
1261
- text-align: var(--_ctm-mob-dn-im-se-tt-an-dc,
1262
- var(--_ctm-tab-dn-im-se-tt-an-dc, var(--_ctm-dn-im-se-tt-an-dc)));
1586
+ text-align: var(
1587
+ --_ctm-mob-dn-im-se-tt-an-dc,
1588
+ var(--_ctm-tab-dn-im-se-tt-an-dc, var(--_ctm-dn-im-se-tt-an-dc))
1589
+ );
1263
1590
 
1264
- letter-spacing: var(--_ctm-mob-dn-im-se-lr-sg-dc,
1265
- var(--_ctm-tab-dn-im-se-lr-sg-dc, var(--_ctm-dn-im-se-lr-sg-dc)));
1591
+ letter-spacing: var(
1592
+ --_ctm-mob-dn-im-se-lr-sg-dc,
1593
+ var(--_ctm-tab-dn-im-se-lr-sg-dc, var(--_ctm-dn-im-se-lr-sg-dc))
1594
+ );
1266
1595
 
1267
- line-height: var(--_ctm-mob-dn-im-se-le-ht-dc,
1268
- var(--_ctm-tab-dn-im-se-le-ht-dc, var(--_ctm-dn-im-se-le-ht-dc)));
1596
+ line-height: var(
1597
+ --_ctm-mob-dn-im-se-le-ht-dc,
1598
+ var(--_ctm-tab-dn-im-se-le-ht-dc, var(--_ctm-dn-im-se-le-ht-dc))
1599
+ );
1269
1600
 
1270
- text-decoration: var(--_ctm-mob-dn-im-se-ue-dc,
1271
- var(--_ctm-tab-dn-im-se-ue-dc, var(--_ctm-dn-im-se-ue-dc)));
1601
+ text-decoration: var(
1602
+ --_ctm-mob-dn-im-se-ue-dc,
1603
+ var(--_ctm-tab-dn-im-se-ue-dc, var(--_ctm-dn-im-se-ue-dc))
1604
+ );
1272
1605
  }
1273
1606
 
1274
1607
  // h3 {
1275
1608
  // margin-bottom: var(--_mb-4);
1276
1609
  // }
1277
1610
  }
1278
-
1279
- >img {
1611
+ > img {
1280
1612
  object-fit: cover;
1281
1613
  }
1282
-
1283
1614
  &[data-text-position="On Image"] {
1284
1615
  .gallery-header {
1285
1616
  width: 100%;
@@ -1296,7 +1627,6 @@ $overflowSelector: ".flex__overflow";
1296
1627
  justify-content: flex-start;
1297
1628
  }
1298
1629
  }
1299
-
1300
1630
  &[data-widget-alignment="center"] {
1301
1631
  // align-items: center;
1302
1632
 
@@ -1306,9 +1636,7 @@ $overflowSelector: ".flex__overflow";
1306
1636
  justify-content: center;
1307
1637
  }
1308
1638
  }
1309
-
1310
1639
  &[data-widget-alignment="bottom"] {
1311
-
1312
1640
  // align-items: flex-end;
1313
1641
  .gallery-header {
1314
1642
  bottom: 0;
@@ -1325,7 +1653,6 @@ $overflowSelector: ".flex__overflow";
1325
1653
  &[data-text-position="bottom"] {
1326
1654
  flex-direction: column-reverse;
1327
1655
  }
1328
-
1329
1656
  &[data-text-position="left"] {
1330
1657
  flex-direction: row;
1331
1658
 
@@ -1346,11 +1673,10 @@ $overflowSelector: ".flex__overflow";
1346
1673
 
1347
1674
  // The image takes whatever the caption leaves. Scoped to the row directions —
1348
1675
  // in top/bottom the main axis is vertical and a flex-basis here would break it.
1349
- >img {
1676
+ > img {
1350
1677
  flex: 1 1 0;
1351
1678
  min-width: 0;
1352
1679
  }
1353
-
1354
1680
  &[data-widget-alignment="top"] {
1355
1681
  align-items: flex-start;
1356
1682
 
@@ -1358,7 +1684,6 @@ $overflowSelector: ".flex__overflow";
1358
1684
  justify-content: flex-start;
1359
1685
  }
1360
1686
  }
1361
-
1362
1687
  &[data-widget-alignment="center"] {
1363
1688
  align-items: center;
1364
1689
 
@@ -1366,7 +1691,6 @@ $overflowSelector: ".flex__overflow";
1366
1691
  justify-content: center;
1367
1692
  }
1368
1693
  }
1369
-
1370
1694
  &[data-widget-alignment="bottom"] {
1371
1695
  align-items: flex-end;
1372
1696
 
@@ -1375,10 +1699,8 @@ $overflowSelector: ".flex__overflow";
1375
1699
  }
1376
1700
  }
1377
1701
  }
1378
-
1379
1702
  &[data-text-position="right"] {
1380
1703
  flex-direction: row-reverse;
1381
-
1382
1704
  .gallery-header {
1383
1705
  // The item's own Text Container Width, not the widget's. This read
1384
1706
  // --_ctm-dn-gy-wt-lt-tt-cr-wh, which is always emitted as 100%; combined with
@@ -1396,7 +1718,7 @@ $overflowSelector: ".flex__overflow";
1396
1718
 
1397
1719
  // The image takes whatever the caption leaves. Scoped to the row directions —
1398
1720
  // in top/bottom the main axis is vertical and a flex-basis here would break it.
1399
- >img {
1721
+ > img {
1400
1722
  flex: 1 1 0;
1401
1723
  min-width: 0;
1402
1724
  }
@@ -1408,7 +1730,6 @@ $overflowSelector: ".flex__overflow";
1408
1730
  justify-content: flex-start;
1409
1731
  }
1410
1732
  }
1411
-
1412
1733
  &[data-widget-alignment="center"] {
1413
1734
  align-items: center;
1414
1735
 
@@ -1416,7 +1737,6 @@ $overflowSelector: ".flex__overflow";
1416
1737
  justify-content: center;
1417
1738
  }
1418
1739
  }
1419
-
1420
1740
  &[data-widget-alignment="bottom"] {
1421
1741
  align-items: flex-end;
1422
1742
 
@@ -1425,8 +1745,7 @@ $overflowSelector: ".flex__overflow";
1425
1745
  }
1426
1746
  }
1427
1747
  }
1428
-
1429
- &>img {
1748
+ & > img {
1430
1749
  width: 100%;
1431
1750
  height: 100%;
1432
1751
  // object-fit: cover;
@@ -1446,8 +1765,7 @@ $overflowSelector: ".flex__overflow";
1446
1765
  display: flex;
1447
1766
  justify-content: center;
1448
1767
  margin-block: 12px;
1449
-
1450
- &>button {
1768
+ & > button {
1451
1769
  padding-inline: 24px;
1452
1770
  border: 1px solid gray;
1453
1771
  padding-block: 12px;
@@ -1455,4 +1773,4 @@ $overflowSelector: ".flex__overflow";
1455
1773
  }
1456
1774
  }
1457
1775
  }
1458
- }
1776
+ }