@sc-360-v2/storefront-cms-library 0.4.47 → 0.4.50

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 (185) hide show
  1. package/dist/add-existing-form.scss +66 -66
  2. package/dist/add-order.scss +377 -377
  3. package/dist/add-products-tab copy.scss +1132 -1132
  4. package/dist/add-products-tab-details.scss +3818 -0
  5. package/dist/add-products-tab.scss +968 -3031
  6. package/dist/allocationDetails.scss +2247 -2247
  7. package/dist/allocations.scss +1603 -1604
  8. package/dist/amount-estimator.scss +1083 -1083
  9. package/dist/animation-control.scss +23 -23
  10. package/dist/badge.scss +388 -388
  11. package/dist/brand-basic-elements.scss +292 -292
  12. package/dist/brand.scss +93 -93
  13. package/dist/breadcrumbs.scss +802 -802
  14. package/dist/builder.js +1 -1
  15. package/dist/bulk-order-pad.scss +677 -677
  16. package/dist/bulk-variant-picker copy.scss +1121 -1121
  17. package/dist/bulk-variant-picker.scss +3294 -3092
  18. package/dist/bundle copy.scss +2805 -2805
  19. package/dist/bundle.scss +2383 -2383
  20. package/dist/bundleDetails copy.scss +1431 -1431
  21. package/dist/bundleDetails.scss +3320 -3285
  22. package/dist/button copy.scss +271 -271
  23. package/dist/button.scss +292 -292
  24. package/dist/buy-for-tab-container.scss +90 -90
  25. package/dist/buy-for-tab.scss +3 -4
  26. package/dist/buy-for-tabs-container-item.scss +80 -80
  27. package/dist/buyForHeaders.scss +6718 -6718
  28. package/dist/buyForPopup.scss +70 -52
  29. package/dist/cart-details.scss +3207 -2386
  30. package/dist/cart-products-sidebar.scss +211 -211
  31. package/dist/cart-summary.scss +2728 -2728
  32. package/dist/cart-wrapper.scss +127 -127
  33. package/dist/cart.scss +269 -269
  34. package/dist/cartAttributes.scss +935 -903
  35. package/dist/cartDropdownOverlay.scss +514 -231
  36. package/dist/cartGrouping.scss +89 -89
  37. package/dist/category-groups-element.scss +138 -138
  38. package/dist/category.scss +73 -73
  39. package/dist/categoryDetails.scss +61 -61
  40. package/dist/categoryWidget.scss +34 -34
  41. package/dist/checkbox-radio.scss +124 -124
  42. package/dist/checkout.scss +6460 -6569
  43. package/dist/code-temp.scss +58 -58
  44. package/dist/colorpicker_v2.scss +52 -52
  45. package/dist/common-element.scss +35 -35
  46. package/dist/confirm-modal.scss +351 -351
  47. package/dist/confirmationModal.scss +139 -139
  48. package/dist/contact-us.scss +105 -105
  49. package/dist/container.scss +114 -114
  50. package/dist/countdown.scss +751 -751
  51. package/dist/coupon.scss +1254 -1254
  52. package/dist/custom-fonts.scss +100 -100
  53. package/dist/customization-tree.scss +160 -160
  54. package/dist/default-dropdown.scss +240 -240
  55. package/dist/dropdownTemplate.scss +98 -46
  56. package/dist/editCartItem.scss +111 -111
  57. package/dist/embed-temp.scss +72 -72
  58. package/dist/embroider-preview-element.scss +94 -94
  59. package/dist/embroider-template-1-v2.scss +937 -937
  60. package/dist/embroider-template-1.scss +482 -482
  61. package/dist/embroidery.scss +213 -213
  62. package/dist/employee-bulk-order.scss +4057 -4057
  63. package/dist/emtpy-templates.scss +165 -165
  64. package/dist/faq.scss +564 -564
  65. package/dist/fb-dropdown.scss +125 -125
  66. package/dist/filter-results.scss +323 -323
  67. package/dist/filters.scss +2418 -2418
  68. package/dist/flex-text-editor.scss +271 -271
  69. package/dist/form-preview.scss +290 -290
  70. package/dist/form-zindex-module.scss +24 -24
  71. package/dist/gallery-slider-temp.scss +1234 -1234
  72. package/dist/global-styles.scss +86 -86
  73. package/dist/grid.scss +119 -119
  74. package/dist/hotspot.scss +397 -397
  75. package/dist/icon-library.scss +74 -74
  76. package/dist/icon-list.scss +268 -268
  77. package/dist/image-for-product.scss +21 -21
  78. package/dist/image-temp.scss +168 -168
  79. package/dist/item-stock.scss +87 -87
  80. package/dist/language-selector.scss +528 -558
  81. package/dist/layouter-item.scss +89 -89
  82. package/dist/layouter-pro-item.scss +80 -80
  83. package/dist/layouter-pro.scss +88 -88
  84. package/dist/layouter.scss +294 -294
  85. package/dist/light-box-v2.scss +105 -105
  86. package/dist/lightbox.scss +78 -78
  87. package/dist/line.scss +166 -166
  88. package/dist/loader.scss +37 -37
  89. package/dist/login.scss +1473 -1473
  90. package/dist/map.scss +962 -962
  91. package/dist/marchandiserSets.scss +60 -60
  92. package/dist/mega-menu-container.scss +99 -99
  93. package/dist/mega-menu.scss +838 -838
  94. package/dist/menu-item.scss +19 -19
  95. package/dist/menu-v2.scss +730 -730
  96. package/dist/menu.scss +162 -162
  97. package/dist/modal.scss +2267 -2267
  98. package/dist/multi-select-dropdown.scss +282 -279
  99. package/dist/my-templates.scss +463 -463
  100. package/dist/my-wishlist.scss +17 -17
  101. package/dist/option-bar.scss +845 -845
  102. package/dist/order-processing.scss +61 -61
  103. package/dist/order-status.scss +1856 -1856
  104. package/dist/overflow-module.scss +63 -63
  105. package/dist/past-orders.scss +975 -975
  106. package/dist/payment-methods.scss +289 -289
  107. package/dist/pickup-locations.scss +1167 -1167
  108. package/dist/position-module.scss +95 -95
  109. package/dist/prefix-list.scss +86 -86
  110. package/dist/product-actions copy.scss +2765 -2765
  111. package/dist/product-actions.scss +2286 -2286
  112. package/dist/product-basic-elements.scss +770 -770
  113. package/dist/product-customizations.scss +149 -149
  114. package/dist/product-highlights copy.scss +217 -217
  115. package/dist/product-highlights.scss +311 -311
  116. package/dist/product-image copy.scss +787 -787
  117. package/dist/product-image-bundles.scss +1512 -0
  118. package/dist/product-image.scss +1 -1
  119. package/dist/product-inventory.scss +1378 -1378
  120. package/dist/product-options.scss +1144 -1144
  121. package/dist/product-price.scss +2598 -2598
  122. package/dist/product-promotions.scss +2759 -2759
  123. package/dist/product-sizechart.scss +1826 -1826
  124. package/dist/product.scss +97 -97
  125. package/dist/productDetails.scss +70 -70
  126. package/dist/profile.scss +4 -3
  127. package/dist/quantity-selector.scss +3 -2
  128. package/dist/quick-links.scss +552 -552
  129. package/dist/quick-order-pad.scss +237 -237
  130. package/dist/quota-details.scss +263 -263
  131. package/dist/quotes.scss +737 -737
  132. package/dist/repeater copy.scss +635 -635
  133. package/dist/repeater-embla-controls.scss +6 -3
  134. package/dist/repeater-grid-toggle.scss +58 -58
  135. package/dist/repeater-item.scss +90 -90
  136. package/dist/repeater.scss +915 -915
  137. package/dist/request-for-quotes.scss +746 -746
  138. package/dist/responsive-behaviour.scss +29 -29
  139. package/dist/rfqs.scss +736 -736
  140. package/dist/scroll.scss +222 -222
  141. package/dist/search-results-heading.scss +279 -279
  142. package/dist/search.scss +296 -296
  143. package/dist/section.scss +209 -209
  144. package/dist/shareCartSideBar.scss +254 -254
  145. package/dist/shipping-estimator.scss +41 -41
  146. package/dist/shipping-payments.scss +2467 -2467
  147. package/dist/simple-list.scss +259 -259
  148. package/dist/skeleton.scss +74 -74
  149. package/dist/social.scss +276 -276
  150. package/dist/sort.scss +89 -89
  151. package/dist/spotlight.scss +1663 -1663
  152. package/dist/stack.scss +129 -129
  153. package/dist/static-global.scss +198 -0
  154. package/dist/static-text.scss +52 -52
  155. package/dist/stockStatus.scss +64 -64
  156. package/dist/store-locations.scss +1398 -1398
  157. package/dist/sub-category.scss +74 -74
  158. package/dist/submit-quote.scss +275 -275
  159. package/dist/tab-container-item.scss +80 -80
  160. package/dist/tab-container.scss +89 -89
  161. package/dist/tab-v2.scss +583 -583
  162. package/dist/table-common.scss +506 -506
  163. package/dist/table.scss +685 -685
  164. package/dist/tabs.scss +395 -395
  165. package/dist/text-temp-v2.scss +139 -139
  166. package/dist/text-temp.scss +109 -109
  167. package/dist/theme-classes.scss +296 -296
  168. package/dist/toaster.scss +350 -350
  169. package/dist/toggle-button.scss +32 -32
  170. package/dist/transform-properties-module.scss +20 -20
  171. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +1945 -381
  172. package/dist/types/builder/tools/element-edit/bulkVariantPicker.d.ts +1 -1
  173. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +9 -0
  174. package/dist/types/builder/tools/element-edit/cartAttributes.d.ts +66 -0
  175. package/dist/uom-selector.scss +1169 -1169
  176. package/dist/user-elements copy.scss +1437 -1437
  177. package/dist/user-elements.scss +2471 -2471
  178. package/dist/variant-picker.scss +2384 -2384
  179. package/dist/video.scss +476 -476
  180. package/dist/volume-pricing copy 2.scss +1468 -1468
  181. package/dist/volume-pricing copy.scss +1077 -1077
  182. package/dist/volume-pricing.scss +1175 -1175
  183. package/dist/widget.scss +148 -148
  184. package/dist/wishlist-overlay.scss +48 -48
  185. package/package.json +1 -1
package/dist/allocations.scss CHANGED
@@ -1,1604 +1,1603 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- @use "./functions.scss" as *;
4
-
5
- $resizerId: "[data-cms-tool='cms-element-resizer']";
6
- $resizeActive: '[data-cms-element-resizer="true"]';
7
- [data-div-type="element"] {
8
- &[data-element-type="allocations"] {
9
- width: var(
10
- --_sf-el-wh-st-mx,
11
- calc(
12
- 1% *
13
- var(
14
- --_ctm-mob-ele-nw-wh-vl,
15
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
16
- )
17
- )
18
- );
19
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
20
-
21
- & > div {
22
- &.wrapper {
23
- width: 100%;
24
- // min-width: 400px;
25
- // max-width: 700px;
26
- width: 100%;
27
- height: prepareMediaVariable(--_ctm-lt-ht);
28
- }
29
- }
30
-
31
- .loading__container {
32
- width: 100%;
33
- height: 25vh;
34
- display: flex;
35
- align-items: center;
36
- justify-content: center;
37
- }
38
-
39
- .allocations__element {
40
- background-color: var(
41
- --_ctm-mob-dn-wt-se-bd-cr,
42
- var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
43
- );
44
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
45
- display: flex;
46
- flex-direction: column;
47
- --_sf-gp: var(
48
- --_ctm-mob-lt-im-sg,
49
- var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
50
- );
51
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
52
- row-gap: var(--_sf-gp);
53
- width: 100%;
54
- // height: 100%;
55
- border-color: var(
56
- --_ctm-mob-dn-wt-se-br-cr,
57
- var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
58
- );
59
- border-style: var(
60
- --_ctm-mob-dn-wt-se-br-se,
61
- var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
62
- );
63
- border-width: var(
64
- --_ctm-mob-dn-wt-se-br-wh,
65
- var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
66
- );
67
- border-radius: var(
68
- --_ctm-mob-dn-wt-se-br-rs,
69
- var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
70
- );
71
- box-shadow: var(
72
- --_show-shadow,
73
- var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
74
- var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
75
- var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
76
- var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
77
- );
78
-
79
- &[data-divider-show="true"] {
80
- --_sf-dvdr: var(
81
- --_ctm-mob-dn-dr-dr-wh,
82
- var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh, 1px))
83
- )
84
- var(--_ctm-mob-dn-dr-br-se, var(--_ctm-tab-dn-dr-br-se, var(--_ctm-dn-dr-br-se, solid)))
85
- var(--_ctm-dn-dr-br-cr, var(--_tst-dn-dr-bd-cr));
86
- --_sf-dvdr-gap: var(--_sf-gp);
87
- }
88
- &[data-icon-position="Left"] {
89
- --_sf-fd: row-reverse;
90
- --_sf-jc: flex-end;
91
- }
92
- &[data-show-icon="false"] {
93
- --_sf-show-icon-ff: none;
94
- }
95
- &[data-divider-show="true"] {
96
- // .accordion-item:not(:last-child) {
97
- // border-bottom: var(
98
- // --_ctm-mob-dn-dr-dr-wh,
99
- // var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh))
100
- // )
101
- // var(--_ctm-mob-dn-dr-br-se, var(--_ctm-tab-dn-dr-br-se, var(--_ctm-dn-dr-br-se)))
102
- // var(--_ctm-mob-dn-dr-br-cr, var(--_ctm-tab-dn-dr-br-cr, var(--_ctm-dn-dr-br-cr)));
103
- // }
104
- }
105
-
106
- .load__more__button__container {
107
- display: flex;
108
- width: 100%;
109
- margin-top: 10px;
110
- &:hover {
111
- --_sf-hr-bn-at: var(
112
- --_ctm-mob-dn-ld-me-bn-hr-se-bn-at,
113
- var(--_ctm-tab-dn-ld-me-bn-hr-se-bn-at, var(--_ctm-dn-ld-me-bn-hr-se-bn-at))
114
- );
115
- }
116
-
117
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-bn-at));
118
- }
119
-
120
- .btn__with__text[data-btn-name="redeemButton"] {
121
- &[data-show-shadow="false"] {
122
- --_show-shadow: none;
123
- }
124
- &[data-icon-position="left"] {
125
- --_sf-fd-bn: row;
126
- }
127
- &[data-icon-position="right"] {
128
- --_sf-fd-bn: row-reverse;
129
- }
130
- &[data-icon-position="center"] {
131
- --_sf-fd-bn: row;
132
- }
133
-
134
- &:hover {
135
- --_sf-hr-bd-cr: var(
136
- --_ctm-mob-dn-rm-bn-hr-se-bd-cr,
137
- var(--_ctm-tab-dn-rm-bn-hr-se-bd-cr, var(--_ctm-dn-rm-bn-hr-se-bd-cr))
138
- );
139
- --_sf-hr-br-cr: var(
140
- --_ctm-mob-dn-rm-bn-hr-se-br-cr,
141
- var(--_ctm-tab-dn-rm-bn-hr-se-br-cr, var(--_ctm-dn-rm-bn-hr-se-br-cr))
142
- );
143
- --_sf-hr-br-se: var(
144
- --_ctm-mob-dn-rm-bn-hr-se-br-se,
145
- var(--_ctm-tab-dn-rm-bn-hr-se-br-se, var(--_ctm-dn-rm-bn-hr-se-br-se))
146
- );
147
- --_sf-hr-br-wh: var(
148
- --_ctm-mob-dn-rm-bn-hr-se-br-wh,
149
- var(--_ctm-tab-dn-rm-bn-hr-se-br-wh, var(--_ctm-dn-rm-bn-hr-se-br-wh))
150
- );
151
- --_sf-hr-br-rs: var(
152
- --_ctm-mob-dn-rm-bn-hr-se-br-rs,
153
- var(--_ctm-tab-dn-rm-bn-hr-se-br-rs, var(--_ctm-dn-rm-bn-hr-se-br-rs))
154
- );
155
- --_sf-hr-at: var(
156
- --_ctm-mob-dn-rm-bn-hr-se-at,
157
- var(--_ctm-tab-dn-rm-bn-hr-se-at, var(--_ctm-dn-rm-bn-hr-se-at))
158
- );
159
- --_sf-hr-gp: var(
160
- --_ctm-mob-dn-rm-bn-hr-se-gp,
161
- var(--_ctm-tab-dn-rm-bn-hr-se-gp, var(--_ctm-dn-rm-bn-hr-se-gp))
162
- );
163
-
164
- // for shadow
165
- --_sf-hr-sw-ae: var(
166
- --_ctm-mob-dn-rm-bn-hr-se-sw-ae,
167
- var(--_ctm-tab-dn-rm-bn-hr-se-sw-ae, var(--_ctm-dn-rm-bn-hr-se-sw-ae))
168
- );
169
- --_sf-hr-sw-br: var(
170
- --_ctm-mob-dn-rm-bn-hr-se-sw-br,
171
- var(--_ctm-tab-dn-rm-bn-hr-se-sw-br, var(--_ctm-dn-rm-bn-hr-se-sw-br))
172
- );
173
- --_sf-hr-sw-hr: var(
174
- --_ctm-mob-dn-rm-bn-hr-se-sw-hr,
175
- var(--_ctm-tab-dn-rm-bn-hr-se-sw-hr, var(--_ctm-dn-rm-bn-hr-se-sw-hr))
176
- );
177
- --_sf-hr-sw-cr: var(
178
- --_ctm-mob-dn-rm-bn-hr-se-sw-cr,
179
- var(--_ctm-tab-dn-rm-bn-hr-se-sw-cr, var(--_ctm-dn-rm-bn-hr-se-sw-cr))
180
- );
181
-
182
- // for font
183
-
184
- --_sf-hr-cr: var(
185
- --_ctm-mob-dn-rm-bn-hr-se-cr,
186
- var(--_ctm-tab-dn-rm-bn-hr-se-cr, var(--_ctm-dn-rm-bn-hr-se-cr))
187
- );
188
- --_sf-hr-ft-fy: var(
189
- --_ctm-mob-dn-rm-bn-hr-se-ft-fy,
190
- var(--_ctm-tab-dn-rm-bn-hr-se-ft-fy, var(--_ctm-dn-rm-bn-hr-se-ft-fy))
191
- );
192
- --_sf-hr-ft-se: var(
193
- --_ctm-mob-dn-rm-bn-hr-se-ft-se,
194
- var(--_ctm-tab-dn-rm-bn-hr-se-ft-se, var(--_ctm-dn-rm-bn-hr-se-ft-se))
195
- );
196
- --_sf-hr-ft-wt: var(
197
- --_ctm-mob-dn-rm-bn-hr-se-ft-wt,
198
- var(--_ctm-tab-dn-rm-bn-hr-se-ft-wt, var(--_ctm-dn-rm-bn-hr-se-ft-wt))
199
- );
200
- --_sf-hr-ft-se-ic: var(
201
- --_ctm-mob-dn-rm-bn-hr-se-ft-se-ic,
202
- var(--_ctm-tab-dn-rm-bn-hr-se-ft-se-ic, var(--_ctm-dn-rm-bn-hr-se-ft-se-ic))
203
- );
204
- --_sf-hr-tt-an: var(
205
- --_ctm-mob-dn-rm-bn-hr-se-tt-an,
206
- var(--_ctm-tab-dn-rm-bn-hr-se-tt-an, var(--_ctm-dn-rm-bn-hr-se-tt-an))
207
- );
208
- --_sf-hr-lr-sg: var(
209
- --_ctm-mob-dn-rm-bn-hr-se-lr-sg,
210
- var(--_ctm-tab-dn-rm-bn-hr-se-lr-sg, var(--_ctm-dn-rm-bn-hr-se-lr-sg))
211
- );
212
- --_sf-hr-le-ht: var(
213
- --_ctm-mob-dn-rm-bn-hr-se-le-ht,
214
- var(--_ctm-tab-dn-rm-bn-hr-se-le-ht, var(--_ctm-dn-rm-bn-hr-se-le-ht))
215
- );
216
-
217
- --_sf-hr-in-se: var(
218
- --_ctm-mob-dn-rm-bn-hr-se-in-se,
219
- var(--_ctm-tab-dn-rm-bn-hr-se-in-se, var(--_ctm-dn-rm-bn-hr-se-in-se))
220
- );
221
- --_sf-hr-in-se: var(
222
- --_ctm-mob-dn-rm-bn-hr-se-in-se,
223
- var(--_ctm-tab-dn-rm-bn-hr-se-in-se, var(--_ctm-dn-rm-bn-hr-se-in-se))
224
- );
225
- --_sf-hr-in-c1: var(
226
- --_ctm-mob-dn-rm-bn-hr-se-in-c1,
227
- var(--_ctm-tab-dn-rm-bn-hr-se-in-c1, var(--_ctm-dn-rm-bn-hr-se-in-c1))
228
- );
229
- --_sf-hr-ue: var(
230
- --_ctm-mob-dn-rm-bn-hr-se-ue,
231
- var(--_ctm-tab-dn-rm-bn-hr-se-ue, var(--_ctm-dn-rm-bn-hr-se-ue))
232
- );
233
-
234
- // for pading and width
235
- --_sf-hr-pg: var(
236
- --_ctm-mob-dn-rm-bn-hr-pg,
237
- var(--_ctm-tab-dn-rm-bn-hr-pg, var(--_ctm-dn-rm-bn-hr-pg))
238
- );
239
- --_sf-hr-wh: var(
240
- --_ctm-mob-dn-rm-bn-hr-wh,
241
- var(--_ctm-tab-dn-rm-bn-hr-wh, var(--_ctm-dn-rm-bn-hr-wh))
242
- );
243
-
244
- &[data-hover-show-shadow="false"] {
245
- --_hover-show-shadow: none;
246
- }
247
- &[data-hover-show-icon="false"] {
248
- --_hover-show-icon: none;
249
- }
250
- }
251
- background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-bd-cr));
252
-
253
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-pg));
254
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-wh));
255
- display: flex;
256
- flex-direction: var(--_sf-fd-bn);
257
- align-items: center;
258
-
259
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-at));
260
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-gp));
261
-
262
- border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-br-rs));
263
-
264
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-ae))
265
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-br))
266
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-sd))
267
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-cr));
268
-
269
- &[data-show-border="true"] {
270
- border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-br-cr));
271
-
272
- border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-br-se));
273
-
274
- border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-br-wh));
275
- }
276
-
277
- .txt {
278
- display: flex;
279
-
280
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-cr));
281
-
282
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-ft-fy));
283
-
284
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-ft-se));
285
-
286
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-ft-wt));
287
-
288
- font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-ft-se-ic));
289
-
290
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-tt-an));
291
-
292
- letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-lr-sg));
293
-
294
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-le-ht));
295
-
296
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
297
- }
298
-
299
- .icon {
300
- display: var(--_hover-show-icon, var(--_show-icon, flex));
301
- svg {
302
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-in-se));
303
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-in-se));
304
-
305
- path {
306
- stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-in-c1));
307
- }
308
- }
309
- }
310
- [data-element-style="Text"] {
311
- display: inline-block;
312
- width: 100%;
313
- }
314
-
315
- .icon--hover {
316
- // position: absolute;
317
- // inset: 0;
318
- // opacity: 0;
319
- display: none;
320
- transition: opacity 0.2s ease;
321
- }
322
-
323
- &:hover .icon--hover {
324
- // opacity: 1;
325
- display: flex;
326
- }
327
-
328
- &:hover .icon--default {
329
- // opacity: 0;
330
- display: none;
331
- }
332
- }
333
- .btn__with__text[data-btn-name="loadMore"] {
334
- &[data-show-shadow="false"] {
335
- --_show-shadow: none;
336
- }
337
- &[data-icon-position="left"] {
338
- --_sf-fd-bn: row;
339
- }
340
- &[data-icon-position="right"] {
341
- --_sf-fd-bn: row-reverse;
342
- }
343
- &[data-icon-position="center"] {
344
- --_sf-fd-bn: row;
345
- }
346
-
347
- &:hover {
348
- --_sf-hr-bd-cr: var(
349
- --_ctm-mob-dn-ld-me-bn-hr-se-bd-cr,
350
- var(--_ctm-tab-dn-ld-me-bn-hr-se-bd-cr, var(--_ctm-dn-ld-me-bn-hr-se-bd-cr))
351
- );
352
- --_sf-hr-br-cr: var(
353
- --_ctm-mob-dn-ld-me-bn-hr-se-br-cr,
354
- var(--_ctm-tab-dn-ld-me-bn-hr-se-br-cr, var(--_ctm-dn-ld-me-bn-hr-se-br-cr))
355
- );
356
- --_sf-hr-br-se: var(
357
- --_ctm-mob-dn-ld-me-bn-hr-se-br-se,
358
- var(--_ctm-tab-dn-ld-me-bn-hr-se-br-se, var(--_ctm-dn-ld-me-bn-hr-se-br-se))
359
- );
360
- --_sf-hr-br-wh: var(
361
- --_ctm-mob-dn-ld-me-bn-hr-se-br-wh,
362
- var(--_ctm-tab-dn-ld-me-bn-hr-se-br-wh, var(--_ctm-dn-ld-me-bn-hr-se-br-wh))
363
- );
364
- --_sf-hr-br-rs: var(
365
- --_ctm-mob-dn-ld-me-bn-hr-se-br-rs,
366
- var(--_ctm-tab-dn-ld-me-bn-hr-se-br-rs, var(--_ctm-dn-ld-me-bn-hr-se-br-rs))
367
- );
368
- --_sf-hr-at: var(
369
- --_ctm-mob-dn-ld-me-bn-hr-se-at,
370
- var(--_ctm-tab-dn-ld-me-bn-hr-se-at, var(--_ctm-dn-ld-me-bn-hr-se-at))
371
- );
372
- --_sf-hr-gp: var(
373
- --_ctm-mob-dn-ld-me-bn-hr-se-gp,
374
- var(--_ctm-tab-dn-ld-me-bn-hr-se-gp, var(--_ctm-dn-ld-me-bn-hr-se-gp))
375
- );
376
-
377
- // for shadow
378
- --_sf-hr-sw-ae: var(
379
- --_ctm-mob-dn-ld-me-bn-hr-se-sw-ae,
380
- var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-ae, var(--_ctm-dn-ld-me-bn-hr-se-sw-ae))
381
- );
382
- --_sf-hr-sw-br: var(
383
- --_ctm-mob-dn-ld-me-bn-hr-se-sw-br,
384
- var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-br, var(--_ctm-dn-ld-me-bn-hr-se-sw-br))
385
- );
386
- --_sf-hr-sw-hr: var(
387
- --_ctm-mob-dn-ld-me-bn-hr-se-sw-hr,
388
- var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-hr, var(--_ctm-dn-ld-me-bn-hr-se-sw-hr))
389
- );
390
- --_sf-hr-sw-cr: var(
391
- --_ctm-mob-dn-ld-me-bn-hr-se-sw-cr,
392
- var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-cr, var(--_ctm-dn-ld-me-bn-hr-se-sw-cr))
393
- );
394
-
395
- // for font
396
-
397
- --_sf-hr-cr: var(
398
- --_ctm-mob-dn-ld-me-bn-hr-se-cr,
399
- var(--_ctm-tab-dn-ld-me-bn-hr-se-cr, var(--_ctm-dn-ld-me-bn-hr-se-cr))
400
- );
401
- --_sf-hr-ft-fy: var(
402
- --_ctm-mob-dn-ld-me-bn-hr-se-ft-fy,
403
- var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-fy, var(--_ctm-dn-ld-me-bn-hr-se-ft-fy))
404
- );
405
- --_sf-hr-ft-se: var(
406
- --_ctm-mob-dn-ld-me-bn-hr-se-ft-se,
407
- var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-se, var(--_ctm-dn-ld-me-bn-hr-se-ft-se))
408
- );
409
- --_sf-hr-ft-wt: var(
410
- --_ctm-mob-dn-ld-me-bn-hr-se-ft-wt,
411
- var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-wt, var(--_ctm-dn-ld-me-bn-hr-se-ft-wt))
412
- );
413
- --_sf-hr-ft-se-ic: var(
414
- --_ctm-mob-dn-ld-me-bn-hr-se-ft-se-ic,
415
- var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-se-ic, var(--_ctm-dn-ld-me-bn-hr-se-ft-se-ic))
416
- );
417
- --_sf-hr-tt-an: var(
418
- --_ctm-mob-dn-ld-me-bn-hr-se-tt-an,
419
- var(--_ctm-tab-dn-ld-me-bn-hr-se-tt-an, var(--_ctm-dn-ld-me-bn-hr-se-tt-an))
420
- );
421
- --_sf-hr-lr-sg: var(
422
- --_ctm-mob-dn-ld-me-bn-hr-se-lr-sg,
423
- var(--_ctm-tab-dn-ld-me-bn-hr-se-lr-sg, var(--_ctm-dn-ld-me-bn-hr-se-lr-sg))
424
- );
425
- --_sf-hr-le-ht: var(
426
- --_ctm-mob-dn-ld-me-bn-hr-se-le-ht,
427
- var(--_ctm-tab-dn-ld-me-bn-hr-se-le-ht, var(--_ctm-dn-ld-me-bn-hr-se-le-ht))
428
- );
429
-
430
- --_sf-hr-in-se: var(
431
- --_ctm-mob-dn-ld-me-bn-hr-se-in-se,
432
- var(--_ctm-tab-dn-ld-me-bn-hr-se-in-se, var(--_ctm-dn-ld-me-bn-hr-se-in-se))
433
- );
434
- --_sf-hr-in-se: var(
435
- --_ctm-mob-dn-ld-me-bn-hr-se-in-se,
436
- var(--_ctm-tab-dn-ld-me-bn-hr-se-in-se, var(--_ctm-dn-ld-me-bn-hr-se-in-se))
437
- );
438
- --_sf-hr-in-c1: var(
439
- --_ctm-mob-dn-ld-me-bn-hr-se-in-c1,
440
- var(--_ctm-tab-dn-ld-me-bn-hr-se-in-c1, var(--_ctm-dn-ld-me-bn-hr-se-in-c1))
441
- );
442
- --_sf-hr-ue: var(
443
- --_ctm-mob-dn-ld-me-bn-hr-se-ue,
444
- var(--_ctm-tab-dn-ld-me-bn-hr-se-ue, var(--_ctm-dn-ld-me-bn-hr-se-ue))
445
- );
446
-
447
- // for pading and width
448
- --_sf-hr-pg: var(
449
- --_ctm-mob-dn-ld-me-bn-hr-pg,
450
- var(--_ctm-tab-dn-ld-me-bn-hr-pg, var(--_ctm-dn-ld-me-bn-hr-pg))
451
- );
452
- --_sf-hr-wh: var(
453
- --_ctm-mob-dn-ld-me-bn-hr-wh,
454
- var(--_ctm-tab-dn-ld-me-bn-hr-wh, var(--_ctm-dn-ld-me-bn-hr-wh))
455
- );
456
-
457
- &[data-hover-show-shadow="false"] {
458
- --_hover-show-shadow: none;
459
- }
460
- &[data-hover-show-icon="false"] {
461
- --_hover-show-icon: none;
462
- }
463
- }
464
- background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-bd-cr));
465
-
466
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-pg));
467
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-wh));
468
- display: flex;
469
- flex-direction: var(--_sf-fd-bn);
470
- align-items: center;
471
-
472
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-at));
473
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-gp));
474
-
475
- border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-rs));
476
-
477
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-ae))
478
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-br))
479
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-sd))
480
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-cr));
481
-
482
- &[data-show-border="true"] {
483
- border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-cr));
484
-
485
- border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-se));
486
-
487
- border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-wh));
488
- }
489
-
490
- .txt {
491
- display: flex;
492
-
493
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-cr));
494
-
495
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-fy));
496
-
497
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-se));
498
-
499
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-wt));
500
-
501
- font-style: var(
502
- --_sf-hr-ft-se-ic,
503
- prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-se-ic)
504
- );
505
-
506
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-tt-an));
507
-
508
- letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-lr-sg));
509
-
510
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-le-ht));
511
-
512
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
513
- }
514
-
515
- .icon {
516
- display: var(--_hover-show-icon, var(--_show-icon, flex));
517
- svg {
518
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-se));
519
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-se));
520
-
521
- path {
522
- stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-c1));
523
- }
524
- }
525
- }
526
- [data-element-style="Text"] {
527
- display: inline-block;
528
- width: 100%;
529
- }
530
-
531
- .icon--hover {
532
- // position: absolute;
533
- // inset: 0;
534
- // opacity: 0;
535
- display: none;
536
- transition: opacity 0.2s ease;
537
- }
538
-
539
- &:hover .icon--hover {
540
- // opacity: 1;
541
- display: flex;
542
- }
543
-
544
- &:hover .icon--default {
545
- // opacity: 0;
546
- display: none;
547
- }
548
- }
549
- }
550
-
551
- .allocations_table_wrapper {
552
- display: flex;
553
- flex-direction: column;
554
- align-self: stretch;
555
- align-items: center;
556
- overflow-x: auto;
557
- width: 100%;
558
- .table__common_parent {
559
- // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
560
- width: 100%;
561
-
562
- // aspect-ratio: 1 / var(--_sf-aspect-ratio);
563
- // --_aspect-ratio: calc(
564
- // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
565
- // );
566
-
567
- .pagination:hover {
568
- --_sf-bd-cr: var(--_ctm-dn-pn-hr-se-bd-cr, var(--_tst-dn-pn-hr-se-bd-cr));
569
- }
570
-
571
- .pagination .active:hover {
572
- cursor: pointer;
573
- --_sf-hr-fc: var(--_ctm-dn-pn-hr-se-cr, var(--_tst-dn-pn-hr-se-cr));
574
- --_sf-hr-ff: var(--_ctm-dn-pn-hr-se-ft-fy, var(--_tst-dn-pn-hr-se-ft-fy));
575
- --_sf-hr-fs: var(--_ctm-dn-pn-hr-se-ft-se, var(--_tst-dn-pn-hr-se-ft-se));
576
- --_sf-hr-td: var(--_ctm-dn-pn-hr-se-tt-ue, var(--_tst-dn-hr-tt-ue));
577
- --_sf-hr-fw: var(--_ctm-dn-pn-hr-se-ft-wt, var(--_tst-dn-pn-hr-se-ft-wt));
578
- --_sf-hr-ft: var(--_ctm-dn-pn-hr-se-ft-se-ic, var(--_tst-dn-pn-hr-se-ft-se-ic));
579
- --_sf-hr-ta: var(--_ctm-dn-pn-hr-se-tt-an, var(--_tst-dn-pn-hr-se-tt-an));
580
- --_sf-hr-ls: var(--_ctm-dn-pn-hr-se-lr-sg, var(--_tst-dn-pn-hr-se-lr-sg));
581
- --_sf-hr-lh: var(--_ctm-dn-pn-hr-se-le-ht, var(--_tst-dn-pn-hr-se-le-ht));
582
- }
583
- &[data-widget-shadow="false"] {
584
- .table__wrapper {
585
- --_show-shadow: none;
586
- }
587
- }
588
- &[data-widget-border="true"] {
589
- .table__wrapper {
590
- border-color: var(
591
- --_ctm-mob-dn-te-wt-br-cr,
592
- var(--_ctm-tab-dn-te-wt-br-cr, var(--_ctm-dn-te-wt-br-cr))
593
- );
594
- border-style: var(
595
- --_ctm-mob-dn-te-wt-br-se,
596
- var(--_ctm-tab-dn-te-wt-br-se, var(--_ctm-dn-te-wt-br-se))
597
- );
598
- border-width: var(
599
- --_ctm-mob-dn-te-wt-br-wh,
600
- var(--_ctm-tab-dn-te-wt-br-wh, var(--_ctm-dn-te-wt-br-wh))
601
- );
602
- }
603
- }
604
- &[data-table-shadow="false"] {
605
- .table__container {
606
- --_show-table-shadow: none;
607
- }
608
- }
609
- &[data-table-border="true"] {
610
- .table__container {
611
- border-color: var(
612
- --_ctm-mob-dn-te-br-cr,
613
- var(--_ctm-tab-dn-te-br-cr, var(--_ctm-dn-te-br-cr))
614
- );
615
- border-style: var(
616
- --_ctm-mob-dn-te-br-se,
617
- var(--_ctm-tab-dn-te-br-se, var(--_ctm-dn-te-br-se))
618
- );
619
- border-width: var(
620
- --_ctm-mob-dn-te-br-wh,
621
- var(--_ctm-tab-dn-te-br-wh, var(--_ctm-dn-te-br-wh))
622
- );
623
- }
624
- }
625
-
626
- &[data-header-divider="true"] {
627
- thead tr th {
628
- border-bottom: 1px solid
629
- var(
630
- --_ctm-mob-dn-rw-ad-hr-ds-hr-dr,
631
- var(--_ctm-tab-dn-rw-ad-hr-ds-hr-dr, var(--_ctm-dn-rw-ad-hr-ds-hr-dr))
632
- );
633
- }
634
- }
635
- &[data-row-divider="true"] {
636
- tbody tr {
637
- border-bottom: 1px solid
638
- var(
639
- --_ctm-mob-dn-rw-ad-hr-ds-rw-dr,
640
- var(--_ctm-tab-dn-rw-ad-hr-ds-rw-dr, var(--_ctm-dn-rw-ad-hr-ds-rw-dr))
641
- );
642
- }
643
- }
644
- &[data-column-divider="true"] {
645
- tbody tr td,
646
- thead tr th {
647
- border-right: 1px solid
648
- var(
649
- --_ctm-mob-dn-rw-ad-hr-ds-cn-dr,
650
- var(--_ctm-tab-dn-rw-ad-hr-ds-cn-dr, var(--_ctm-dn-rw-ad-hr-ds-cn-dr))
651
- );
652
- }
653
-
654
- tbody tr td:last-child,
655
- thead tr th:last-child {
656
- border-right: none;
657
- }
658
- }
659
- &[data-show-more-rows="onScroll"] {
660
- .table__container {
661
- overflow-y: scroll;
662
- height: var(
663
- --_ctm-mob-lt-te-ht,
664
- var(--_ctm-tab-lt-te-ht, var(--_ctm-lt-te-ht))
665
- ) !important;
666
-
667
- &::-webkit-scrollbar {
668
- width: var(
669
- --_ctm-mob-dn-sl-br-sl-br-wh,
670
- var(--_ctm-tab-dn-sl-br-sl-br-wh, var(--_ctm-dn-sl-br-sl-br-wh))
671
- );
672
- }
673
-
674
- &::-webkit-scrollbar-track {
675
- background-color: var(--_base-white);
676
- }
677
-
678
- &::-webkit-scrollbar-thumb {
679
- background-color: var(
680
- --_ctm-mob-dn-sl-br-sl-br-cr,
681
- var(--_ctm-tab-dn-sl-br-sl-br-cr, var(--_ctm-dn-sl-br-sl-br-cr))
682
- );
683
- }
684
-
685
- // // Scrollbar thumb when hovered
686
- // &::-webkit-scrollbar-thumb:hover {
687
- // background-color: #555; // Darker color when hovering over the thumb
688
- // }
689
-
690
- // // For Firefox, using scrollbar-width and scrollbar-color
691
- // scrollbar-width: thin; // Thin scrollbar
692
- // scrollbar-color: #888 #f1f1f1; // Thumb and track colors
693
- }
694
- }
695
-
696
- &[data-alternative-row-colors="true"] {
697
- tbody .tbody__row__divider:nth-child(odd) {
698
- background-color: #f76b6b;
699
- }
700
- }
701
-
702
- .table__wrapper {
703
- flex: 1 1 auto;
704
- min-width: 0;
705
- overflow-x: auto;
706
- padding: var(
707
- --_ctm-mob-lt-pg,
708
- var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg, var(--_tst-lt-pg)))
709
- );
710
-
711
- background-color: var(
712
- --_ctm-mob-dn-te-wt-bd-cr,
713
- var(--_ctm-tab-dn-te-wt-bd-cr, var(--_ctm-dn-te-wt-bd-cr, var(--_tst-dn-te-wt-bd-cr)))
714
- );
715
-
716
- border-radius: var(
717
- --_ctm-mob-dn-te-wt-br-rs,
718
- var(--_ctm-tab-dn-te-wt-br-rs, var(--_ctm-dn-te-wt-br-rs, var(--_tst-dn-te-wt-br-rs)))
719
- );
720
-
721
- box-shadow: var(
722
- --_show-shadow,
723
- var(
724
- --_ctm-mob-dn-te-wt-sw-ae,
725
- var(--_ctm-tab-dn-te-wt-sw-ae, var(--_ctm-dn-te-wt-sw-ae))
726
- )
727
- var(
728
- --_ctm-mob-dn-te-wt-sw-br,
729
- var(--_ctm-tab-dn-te-wt-sw-br, var(--_ctm-dn-te-wt-sw-br))
730
- )
731
- var(
732
- --_ctm-mob-dn-te-wt-sw-sd,
733
- var(--_ctm-tab-dn-te-wt-sw-sd, var(--_ctm-dn-te-wt-sw-sd))
734
- )
735
- var(
736
- --_ctm-mob-dn-te-wt-sw-cr,
737
- var(--_ctm-tab-dn-te-wt-sw-cr, var(--_ctm-dn-te-wt-sw-cr))
738
- )
739
- );
740
-
741
- width: 100%;
742
-
743
- .table__container {
744
- background-color: var(
745
- --_ctm-mob-dn-te-bd-cr,
746
- var(--_ctm-tab-dn-te-bd-cr, var(--_ctm-dn-te-bd-cr))
747
- );
748
-
749
- border-radius: var(
750
- --_ctm-mob-dn-te-br-rs,
751
- var(--_ctm-tab-dn-te-br-rs, var(--_ctm-dn-te-br-rs))
752
- );
753
-
754
- box-shadow: var(
755
- --_show-table-shadow,
756
- var(--_ctm-mob-dn-te-sw-ae, var(--_ctm-tab-dn-te-sw-ae, var(--_ctm-dn-te-sw-ae)))
757
- var(--_ctm-mob-dn-te-sw-br, var(--_ctm-tab-dn-te-sw-br, var(--_ctm-dn-te-sw-br)))
758
- var(--_ctm-mob-dn-te-sw-sd, var(--_ctm-tab-dn-te-sw-sd, var(--_ctm-dn-te-sw-sd)))
759
- var(--_ctm-mob-dn-te-sw-cr, var(--_ctm-tab-dn-te-sw-cr, var(--_ctm-dn-te-sw-cr)))
760
- );
761
- }
762
-
763
- h3 {
764
- text-align: center;
765
- width: 100%;
766
- margin-bottom: 10px;
767
- }
768
- table {
769
- border-collapse: collapse;
770
- // border: none;
771
- width: 100%;
772
- // height: 100%;
773
- text-align: var(--_ctm-mob-lt-ct-at, var(--_ctm-tab-lt-ct-at, var(--_ctm-lt-ct-at)));
774
- width: max-content;
775
- min-width: 100%;
776
- table-layout: auto;
777
- th,
778
- td {
779
- border: none;
780
- }
781
- thead {
782
- background-color: var(
783
- --_ctm-mob-dn-te-hr-bd-cr,
784
- var(--_ctm-tab-dn-te-hr-bd-cr, var(--_ctm-dn-te-hr-bd-cr))
785
- );
786
-
787
- .thead__row__divider {
788
- height: var(--_ctm-mob-lt-hr-ht, var(--_ctm-tab-lt-hr-ht, var(--_ctm-lt-hr-ht)));
789
-
790
- .th__col__divider {
791
- padding: var(
792
- --_ctm-mob-lt-hr-cl-pg,
793
- var(--_ctm-tab-lt-hr-cl-pg, var(--_ctm-lt-hr-cl-pg))
794
- );
795
-
796
- color: var(
797
- --_ctm-mob-dn-hr-tt-cr,
798
- var(--_ctm-tab-dn-hr-tt-cr, var(--_ctm-dn-hr-tt-cr))
799
- );
800
-
801
- font-family: var(
802
- --_ctm-mob-dn-hr-tt-ft-fy,
803
- var(--_ctm-tab-dn-hr-tt-ft-fy, var(--_ctm-dn-hr-tt-ft-fy))
804
- );
805
-
806
- font-size: var(
807
- --_ctm-mob-dn-hr-tt-ft-se,
808
- var(--_ctm-tab-dn-hr-tt-ft-se, var(--_ctm-dn-hr-tt-ft-se))
809
- );
810
-
811
- font-weight: var(
812
- --_ctm-mob-dn-hr-tt-ft-wt,
813
- var(--_ctm-tab-dn-hr-tt-ft-wt, var(--_ctm-dn-hr-tt-ft-wt))
814
- );
815
-
816
- text-decoration: var(
817
- --_ctm-mob-dn-hr-tt-ue,
818
- var(--_ctm-tab-dn-hr-tt-ue, var(--_ctm-dn-hr-tt-ue))
819
- );
820
-
821
- font-style: var(
822
- --_ctm-mob-dn-hr-tt-ft-se-ic,
823
- var(--_ctm-tab-dn-hr-tt-ft-se-ic, var(--_ctm-dn-hr-tt-ft-se-ic))
824
- );
825
-
826
- text-align: var(
827
- --_ctm-mob-dn-hr-tt-tt-an,
828
- var(--_ctm-tab-dn-hr-tt-tt-an, var(--_ctm-dn-hr-tt-tt-an))
829
- );
830
-
831
- letter-spacing: var(
832
- --_ctm-mob-dn-hr-tt-lr-sg,
833
- var(--_ctm-tab-dn-hr-tt-lr-sg, var(--_ctm-dn-hr-tt-lr-sg))
834
- );
835
-
836
- line-height: var(
837
- --_ctm-mob-dn-hr-tt-le-ht,
838
- var(--_ctm-tab-dn-hr-tt-le-ht, var(--_ctm-dn-hr-tt-le-ht))
839
- );
840
- }
841
- }
842
- }
843
- tbody {
844
- .tbody__row__divider {
845
- background-color: var(
846
- --_ctm-mob-dn-te-rw-bd-cr,
847
- var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr))
848
- );
849
-
850
- height: var(--_ctm-mob-lt-rw-ht, var(--_ctm-tab-lt-rw-ht, var(--_ctm-lt-rw-ht)));
851
-
852
- .td__col__divider {
853
- padding: var(
854
- --_ctm-mob-lt-rw-cl-pg,
855
- var(--_ctm-tab-lt-rw-cl-pg, var(--_ctm-lt-rw-cl-pg))
856
- );
857
-
858
- color: var(
859
- --_sf-hr-fc,
860
- var(
861
- --_ctm-mob-dn-rw-tt-cr,
862
- var(--_ctm-tab-dn-rw-tt-cr, var(--_ctm-dn-rw-tt-cr))
863
- )
864
- );
865
-
866
- font-family: var(
867
- --_sf-hr-ff,
868
- var(
869
- --_ctm-mob-dn-rw-tt-ft-fy,
870
- var(--_ctm-tab-dn-rw-tt-ft-fy, var(--_ctm-dn-rw-tt-ft-fy))
871
- )
872
- );
873
-
874
- font-size: var(
875
- --_sf-hr-fs,
876
- var(
877
- --_ctm-mob-dn-rw-tt-ft-se,
878
- var(--_ctm-tab-dn-rw-tt-ft-se, var(--_ctm-dn-rw-tt-ft-se))
879
- )
880
- );
881
-
882
- text-decoration: var(
883
- --_ctm-mob-dn-rw-tt-ue,
884
- var(--_ctm-tab-dn-rw-tt-ue, var(--_ctm-dn-rw-tt-ue))
885
- );
886
-
887
- font-weight: var(
888
- --_sf-hr-fw,
889
- var(
890
- --_ctm-mob-dn-rw-tt-ft-wt,
891
- var(--_ctm-tab-dn-rw-tt-ft-wt, var(--_ctm-dn-rw-tt-ft-wt))
892
- )
893
- );
894
-
895
- font-style: var(
896
- --_sf-hr-ft,
897
- var(
898
- --_ctm-mob-dn-rw-tt-ft-se-ic,
899
- var(--_ctm-tab-dn-rw-tt-ft-se-ic, var(--_ctm-dn-rw-tt-ft-se-ic))
900
- )
901
- );
902
-
903
- text-align: var(
904
- --_sf-hr-ta,
905
- var(
906
- --_ctm-mob-dn-rw-tt-tt-an,
907
- var(--_ctm-tab-dn-rw-tt-tt-an, var(--_ctm-dn-rw-tt-tt-an))
908
- )
909
- );
910
-
911
- letter-spacing: var(
912
- --_sf-hr-ls,
913
- var(
914
- --_ctm-mob-dn-rw-tt-lr-sg,
915
- var(--_ctm-tab-dn-rw-tt-lr-sg, var(--_ctm-dn-rw-tt-lr-sg))
916
- )
917
- );
918
-
919
- line-height: var(
920
- --_sf-hr-lh,
921
- var(
922
- --_ctm-mob-dn-rw-tt-le-ht,
923
- var(--_ctm-tab-dn-rw-tt-le-ht, var(--_ctm-dn-rw-tt-le-ht))
924
- )
925
- );
926
- }
927
- }
928
- }
929
- }
930
-
931
- .pagination {
932
- display: var(--_d-flex);
933
- align-items: var(--_align-center);
934
- justify-content: var(
935
- --_ctm-mob-lt-pn-at,
936
- var(--_ctm-tab-lt-pn-at, var(--_ctm-lt-pn-at))
937
- );
938
- margin-top: 10px;
939
- background-color: var(
940
- --_sf-bd-cr,
941
- var(
942
- --_ctm-mob-dn-pn-dt-se-bd-cr,
943
- var(--_ctm-tab-dn-pn-dt-se-bd-cr, var(--_ctm-dn-pn-dt-se-bd-cr))
944
- )
945
- );
946
- &.pagination__center {
947
- justify-content: var(justify-center);
948
- }
949
-
950
- button {
951
- svg {
952
- width: var(--_width-18);
953
- height: var(--_height-18);
954
- path {
955
- stroke: var(--_gray-500);
956
- // stroke: var(--_ctm-dn-pn-in-c1, var(--_tst-dn-pn-in-c1));
957
- }
958
- }
959
- }
960
- span {
961
- float: left;
962
- padding: var(--_pd-8) var(--_pd-16);
963
- text-decoration: none;
964
- span {
965
- // color: var(--_sf-hr-fc, var(--_ctm-dn-pn-bn-cr, var(--_tst-dn-pn-bn-cr)));
966
- // font-size: var(--_sf-hr-fs, var(--_ctm-dn-pn-ft-se, var(--_tst-dn-pn-ft-se)));
967
- // font-family: var(--_sf-hr-ff, var(--_ctm-dn-pn-ft-fy, var(--_tst-dn-pn-ft-fy))),
968
-
969
- // font-weight: var(--_sf-hr-fw, var(--_ctm-dn-pn-ft-wt, var(--_tst-dn-pn-ft-wt)));
970
- // font-style: var(--_sf-hr-ft, var(--_ctm-dn-pn-ft-se-ic, var(--_tst-dn-pn-ft-se-ic)));
971
- // text-align: var(--_sf-hr-ta, var(--_ctm-dn-pn-tt-an, var(--_tst-dn-pn-tt-an)));
972
- // letter-spacing: var(--_sf-hr-ls, var(--_ctm-dn-pn-lr-sg, var(--_tst-dn-pn-lr-sg)));
973
- // line-height: var(--_sf-hr-lh, var(--_ctm-dn-pn-le-ht, var(--_tst-dn-pn-le-ht)));
974
- }
975
- &.active:hover {
976
- &hover {
977
- --_sf-hr-fc: var(--_ctm-dn-pn-hr-se-cr, var(--_tst-dn-pn-hr-se-cr));
978
- --_sf-hr-ff: var(--_ctm-dn-pn-hr-se-ft-fy, var(--_tst-dn-pn-hr-se-ft-fy));
979
- --_sf-hr-fs: var(--_ctm-dn-pn-hr-se-ft-se, var(--_tst-dn-pn-hr-se-ft-se));
980
- --_sf-hr-fw: var(--_ctm-dn-pn-hr-se-ft-wt, var(--_tst-dn-pn-hr-se-ft-wt));
981
- --_sf-hr-ft: var(--_ctm-dn-pn-hr-se-ft-se-ic, var(--_tst-dn-pn-hr-se-ft-se-ic));
982
- --_sf-hr-ta: var(--_ctm-dn-pn-hr-se-tt-an, var(--_tst-dn-pn-hr-se-tt-an));
983
- --_sf-hr-ls: var(--_ctm-dn-pn-hr-se-lr-sg, var(--_tst-dn-pn-hr-se-lr-sg));
984
- --_sf-hr-lh: var(--_ctm-dn-pn-hr-se-le-ht, var(--_tst-dn-pn-hr-se-le-ht));
985
- }
986
- }
987
- &.active {
988
- color: var(
989
- --_sf-hr-fc,
990
- var(
991
- --_ctm-mob-dn-pn-dt-se-cr,
992
- var(--_ctm-tab-dn-pn-dt-se-cr, var(--_ctm-dn-pn-dt-se-cr))
993
- )
994
- );
995
-
996
- font-family: var(
997
- --_sf-hr-ff,
998
- var(
999
- --_ctm-mob-dn-pn-dt-se-ft-fy,
1000
- var(--_ctm-tab-dn-pn-dt-se-ft-fy, var(--_ctm-dn-pn-dt-se-ft-fy))
1001
- )
1002
- );
1003
-
1004
- font-size: var(
1005
- --_sf-hr-fs,
1006
- var(
1007
- --_ctm-mob-dn-pn-dt-se-ft-se,
1008
- var(--_ctm-tab-dn-pn-dt-se-ft-se, var(--_ctm-dn-pn-dt-se-ft-se))
1009
- )
1010
- );
1011
-
1012
- text-decoration: var(
1013
- --_sf-hr-td,
1014
- var(
1015
- --_ctm-mob-dn-pn-dt-se-ue,
1016
- var(--_ctm-tab-dn-pn-dt-se-ue, var(--_ctm-dn-pn-dt-se-ue))
1017
- )
1018
- );
1019
-
1020
- font-weight: var(
1021
- --_sf-hr-fw,
1022
- var(
1023
- --_ctm-mob-dn-pn-dt-se-ft-wt,
1024
- var(--_ctm-tab-dn-pn-dt-se-ft-wt, var(--_ctm-dn-pn-dt-se-ft-wt))
1025
- )
1026
- );
1027
-
1028
- font-style: var(
1029
- --_sf-hr-ft,
1030
- var(
1031
- --_ctm-mob-dn-pn-dt-se-ft-se-ic,
1032
- var(--_ctm-tab-dn-pn-dt-se-ft-se-ic, var(--_ctm-dn-pn-dt-se-ft-se-ic))
1033
- )
1034
- );
1035
-
1036
- text-align: var(
1037
- --_sf-hr-ta,
1038
- var(
1039
- --_ctm-mob-dn-pn-dt-se-tt-an,
1040
- var(--_ctm-tab-dn-pn-dt-se-tt-an, var(--_ctm-dn-pn-dt-se-tt-an))
1041
- )
1042
- );
1043
-
1044
- letter-spacing: var(
1045
- --_sf-hr-ls,
1046
- var(
1047
- --_ctm-mob-dn-pn-dt-se-lr-sg,
1048
- var(--_ctm-tab-dn-pn-dt-se-lr-sg, var(--_ctm-dn-pn-dt-se-lr-sg))
1049
- )
1050
- );
1051
-
1052
- line-height: var(
1053
- --_sf-hr-lh,
1054
- var(
1055
- --_ctm-mob-dn-pn-dt-se-le-ht,
1056
- var(--_ctm-tab-dn-pn-dt-se-le-ht, var(--_ctm-dn-pn-dt-se-le-ht))
1057
- )
1058
- );
1059
- }
1060
- }
1061
- .pagination__arrows {
1062
- color: var(
1063
- --_sf-hr-fc,
1064
- var(--_ctm-mob-dn-pn-in-c1, var(--_ctm-tab-dn-pn-in-c1, var(--_ctm-dn-pn-in-c1)))
1065
- );
1066
-
1067
- font-size: var(
1068
- --_sf-hr-fs,
1069
- var(--_ctm-mob-dn-pn-in-se, var(--_ctm-tab-dn-pn-in-se, var(--_ctm-dn-pn-in-se)))
1070
- );
1071
- }
1072
- }
1073
- }
1074
- }
1075
-
1076
- .no__data__found {
1077
- color: var(--_gray-600);
1078
- font-size: 14px;
1079
- font-weight: 600;
1080
- line-height: 20px;
1081
- padding: 16px 24px;
1082
- text-align: center;
1083
- }
1084
-
1085
- .note_wrapper {
1086
- display: flex;
1087
- width: 100%;
1088
- padding: 0px 16px;
1089
- flex-direction: column;
1090
- justify-content: center;
1091
- align-items: center;
1092
- gap: 8px;
1093
-
1094
- min-height: 76px;
1095
-
1096
- .note {
1097
- color: var(--_gray-600);
1098
- font-weight: 400;
1099
- line-height: 24px;
1100
- }
1101
-
1102
- .redeem_now_wrapper {
1103
- display: flex;
1104
- justify-content: center;
1105
- align-items: center;
1106
- gap: 24px;
1107
-
1108
- .redeem_now_btn {
1109
- display: flex;
1110
- justify-content: center;
1111
- align-items: center;
1112
- gap: 8px;
1113
- color: var(--_primary-400);
1114
- font-size: 14px;
1115
- font-weight: 600;
1116
- line-height: 20px;
1117
-
1118
- &[data-has-link="true"] {
1119
- cursor: pointer;
1120
- }
1121
-
1122
- &:hover {
1123
- color: #53389e;
1124
- }
1125
-
1126
- &:focus {
1127
- color: #162578;
1128
- }
1129
-
1130
- &:disabled {
1131
- color: #d0d5dd;
1132
- }
1133
- }
1134
- }
1135
- }
1136
- }
1137
-
1138
- .slider_wrapper {
1139
- display: flex;
1140
- height: 60px;
1141
- align-items: flex-start;
1142
- gap: 0px;
1143
- white-space: nowrap;
1144
- width: 100%;
1145
- flex-direction: column;
1146
- height: auto;
1147
- .slider_header_wrapper {
1148
- display: flex;
1149
- align-items: center;
1150
- gap: 12px;
1151
- justify-content: space-between;
1152
- width: 100%;
1153
- .slider_header_wrapper_left {
1154
- display: flex;
1155
- align-items: center;
1156
- gap: 12px;
1157
- .slider_heading {
1158
- height: auto;
1159
- }
1160
-
1161
- .slider_heading {
1162
- color: #475467;
1163
- text-align: center;
1164
- font-size: 14px;
1165
- height: 60px;
1166
- font-weight: 600;
1167
- line-height: 20px;
1168
- align-items: center;
1169
- display: flex;
1170
- }
1171
- }
1172
- .redeem_now_wrapper {
1173
- .redeem_now_btn {
1174
- display: flex;
1175
- justify-content: center;
1176
- align-items: center;
1177
- gap: 8px;
1178
- color: var(--_primary-400);
1179
- font-size: 14px;
1180
- font-weight: 600;
1181
- line-height: 20px;
1182
-
1183
- &:hover {
1184
- color: #53389e;
1185
- }
1186
-
1187
- &:focus {
1188
- color: #162578;
1189
- }
1190
-
1191
- &:disabled {
1192
- color: #d0d5dd;
1193
- }
1194
- }
1195
- }
1196
- }
1197
-
1198
- .allocations_slider_slide_wrapper {
1199
- display: flex;
1200
- align-items: center;
1201
- gap: 12px;
1202
- height: 60px;
1203
- width: fit-content;
1204
- margin-right: var(--_ctm-lt-sg-bn-is);
1205
-
1206
- .allocations_left_info_wrapper {
1207
- display: flex;
1208
- flex-direction: column;
1209
- align-items: flex-start;
1210
-
1211
- .product_name {
1212
- color: #101828;
1213
- white-space: nowrap;
1214
- font-size: 14px;
1215
- font-weight: 700;
1216
- line-height: 20px;
1217
- }
1218
-
1219
- .expiry_date {
1220
- color: #70707b;
1221
- font-size: 11px;
1222
- font-weight: 400;
1223
- line-height: 18px;
1224
- white-space: nowrap;
1225
- }
1226
- }
1227
-
1228
- .allocations_right_info_wrapper {
1229
- display: flex;
1230
- width: 48px;
1231
- height: 36px;
1232
- justify-content: center;
1233
- align-items: center;
1234
- gap: 10px;
1235
-
1236
- .product_quantity {
1237
- color: #475467;
1238
- white-space: nowrap;
1239
- font-size: 20px;
1240
- font-weight: 600;
1241
- line-height: 30px;
1242
- }
1243
- }
1244
- }
1245
- }
1246
- .est__dropdown__main {
1247
- position: relative;
1248
- min-width: 150px;
1249
-
1250
- label {
1251
- font-size: 14px;
1252
- color: var(--_gray-700);
1253
- margin-bottom: 8px;
1254
- display: block;
1255
- }
1256
-
1257
- .est__dropdown {
1258
- position: relative;
1259
- .est__dropdown__button {
1260
- display: flex;
1261
- align-items: center;
1262
- width: 100%;
1263
- border: 1px solid var(--_gray-200);
1264
- border-radius: 6px;
1265
-
1266
- .value__selected {
1267
- width: 100%;
1268
- border: none;
1269
- background-color: transparent;
1270
- }
1271
- }
1272
-
1273
- &.open .list {
1274
- display: flex;
1275
- padding: 4px;
1276
- }
1277
-
1278
- .list {
1279
- display: none;
1280
- flex-direction: column;
1281
- border: 1px solid var(--_gray-200);
1282
- border-radius: 6px;
1283
- position: absolute;
1284
- top: 100%;
1285
- left: 0;
1286
- width: 100%;
1287
- background-color: #fff;
1288
- border-radius: 4px;
1289
- z-index: var(--_higher-zIndex);
1290
- max-height: 200px;
1291
- overflow-y: auto;
1292
-
1293
- &.top {
1294
- bottom: 100%;
1295
- top: auto;
1296
- }
1297
-
1298
- .list__option {
1299
- padding: 12px;
1300
- cursor: pointer;
1301
- text-align: left;
1302
- &.selected {
1303
- background-color: var(--_primary-25);
1304
- color: var(--_primary-400);
1305
- }
1306
- &:hover {
1307
- background-color: var(--_primary-25);
1308
- color: var(--_primary-400);
1309
- }
1310
- }
1311
- }
1312
- }
1313
- }
1314
- .embla {
1315
- width: 100%;
1316
- height: 100%;
1317
- position: relative;
1318
- display: flex;
1319
- flex-direction: column;
1320
-
1321
- // overflow: hidden;
1322
-
1323
- .embla__viewport {
1324
- width: 100%;
1325
- height: 100%;
1326
- position: relative;
1327
- display: flex;
1328
- flex-direction: column;
1329
-
1330
- overflow: hidden;
1331
-
1332
- .embla__container {
1333
- width: 100%;
1334
- height: 100%;
1335
- display: flex;
1336
- grid-template-rows: 100%;
1337
- // grid-template-columns: 100%;
1338
- // grid-template-columns: repeat(
1339
- // var(--_ctm-lt-is-pr-se),
1340
- // calc(100% / var(--_ctm-lt-is-pr-se))
1341
- // );
1342
- // grid-auto-flow: column;
1343
- gap: var(--_ctm-lt-sh-im-sg);
1344
-
1345
- &[data-control-type="Bottom"][data-slider-control="Arrows"] {
1346
- height: calc(100% - calc(var(--_ctm-dn-pn-as-aw-se) + 8px));
1347
- }
1348
- &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
1349
- height: calc(100% - calc(var(--_ctm-dn-pn-le-le-ht) + 20px));
1350
- }
1351
- &[data-control-type="Bottom"][data-slider-control="Dots"] {
1352
- height: calc(100% - calc(var(--_ctm-dn-pn-ds-dt-se) + 20px));
1353
- }
1354
-
1355
- .embla__slide {
1356
- // width: 100%;
1357
- height: 100%;
1358
- }
1359
- }
1360
- }
1361
-
1362
- .arrow-navigation {
1363
- display: flex;
1364
- position: absolute;
1365
- top: 50%;
1366
- left: 50%;
1367
- width: 100%;
1368
- justify-content: space-between;
1369
- transform: translate(-50%, -50%);
1370
- // padding-left: 20px;
1371
- &[data-control-type="Side"] {
1372
- .left-button,
1373
- .right-button {
1374
- background-color: transparent;
1375
- }
1376
- }
1377
- &[data-background-shape="Round"] {
1378
- .left-button,
1379
- .right-button {
1380
- background-color: #f2f5f5;
1381
- box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
1382
- }
1383
- }
1384
- &[data-control-type="Bottom-Overflow"] {
1385
- transform: translateX(-50%);
1386
- width: 100%;
1387
- justify-content: center;
1388
- gap: 12px;
1389
- top: unset;
1390
- bottom: 6px;
1391
- }
1392
- &[data-control-type="Bottom"] {
1393
- transform: unset;
1394
- position: static;
1395
- width: 100%;
1396
- justify-content: center;
1397
- gap: 12px;
1398
- margin-top: 10px;
1399
- }
1400
- .left-button {
1401
- padding: 10px;
1402
- border-radius: 50%;
1403
- border: none;
1404
- width: var(--_ctm-dn-pn-as-aw-se);
1405
- height: var(--_ctm-dn-pn-as-aw-se);
1406
- display: flex;
1407
- align-items: center;
1408
- justify-content: center;
1409
- cursor: pointer;
1410
- outline: none;
1411
- margin-left: 12px;
1412
- &:disabled {
1413
- & svg {
1414
- path {
1415
- stroke: rgb(192, 192, 192);
1416
- }
1417
- }
1418
- }
1419
- }
1420
- .right-button {
1421
- border-radius: 50%;
1422
- border: none;
1423
- width: var(--_ctm-dn-pn-as-aw-se);
1424
- height: var(--_ctm-dn-pn-as-aw-se);
1425
- display: flex;
1426
- align-items: center;
1427
- justify-content: center;
1428
- cursor: pointer;
1429
- outline: none;
1430
- margin-right: 12px;
1431
- padding: 10px;
1432
-
1433
- &:disabled {
1434
- & svg {
1435
- path {
1436
- stroke: rgb(192, 192, 192);
1437
- }
1438
- }
1439
- }
1440
- }
1441
- .icon {
1442
- display: flex;
1443
- svg {
1444
- width: calc(var(--_ctm-dn-pn-as-aw-se) * 0.5);
1445
- height: calc(var(--_ctm-dn-pn-as-aw-se) * 0.5);
1446
- path {
1447
- stroke: var(--_ctm-dn-pn-as-aw-cr, var(--_tst-dn-pn-as-aw-cr));
1448
- }
1449
- }
1450
- }
1451
- }
1452
-
1453
- &[data-thumbnail-placement="top"] {
1454
- flex-direction: column-reverse;
1455
- }
1456
- &[data-thumbnail-placement="bottom"] {
1457
- flex-direction: column;
1458
- }
1459
- &[data-thumbnail-placement="left"] {
1460
- flex-direction: row-reverse;
1461
-
1462
- .embla__thumbs {
1463
- width: var(--_ctm-lt-tl-se);
1464
- height: 100%;
1465
-
1466
- & .embla__thumbs__container {
1467
- flex-direction: column;
1468
- height: 100%;
1469
- }
1470
- }
1471
- }
1472
- &[data-thumbnail-placement="right"] {
1473
- flex-direction: row;
1474
- .embla__thumbs {
1475
- width: var(--_ctm-lt-tl-se);
1476
- height: 100%;
1477
-
1478
- & .embla__thumbs__container {
1479
- flex-direction: column;
1480
- height: 100%;
1481
- }
1482
- }
1483
- }
1484
- &[data-control-type="Side"] {
1485
- display: flex;
1486
- align-self: center;
1487
- gap: 16px;
1488
- flex-direction: row;
1489
- .left-button:disabled,
1490
- .right-button:disabled {
1491
- display: none;
1492
- }
1493
- }
1494
- .embla__dots {
1495
- display: flex;
1496
- flex-wrap: wrap;
1497
- justify-content: center;
1498
- align-items: center;
1499
- margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
1500
- gap: 6px;
1501
- margin-top: 16px;
1502
-
1503
- &[data-control-type="Bottom-Overflow"] {
1504
- position: absolute;
1505
- bottom: 10px;
1506
- left: 50%;
1507
- transform: translateX(-50%);
1508
- width: 75%;
1509
- }
1510
- .embla__dot {
1511
- -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
1512
- -webkit-appearance: none;
1513
- appearance: none;
1514
- background-color: var(--_ctm-dn-pn-ds-or-dt-cr, var(--_tst-dn-pn-ds-or-dt-cr));
1515
- touch-action: manipulation;
1516
- display: inline-flex;
1517
- text-decoration: none;
1518
- cursor: pointer;
1519
- border: 0;
1520
- padding: 0;
1521
- margin: 0;
1522
- // width: 0.6rem;
1523
- // height: 0.6rem;
1524
- width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
1525
- height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
1526
- display: flex;
1527
- align-items: center;
1528
- justify-content: center;
1529
- border-radius: 50%;
1530
- }
1531
- .embla__dot:after {
1532
- // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
1533
- width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
1534
- height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
1535
- border-radius: 50%;
1536
- display: flex;
1537
- align-items: center;
1538
- content: "";
1539
- }
1540
- .embla__dot--selected:after {
1541
- box-shadow: inset 0 0 0 1px var(--text-body);
1542
- background-color: var(--_ctm-dn-pn-ds-ct-dt-cr, var(--_tst-dn-pn-ds-ct-dt-cr));
1543
- }
1544
- &[data-slider-control="Pagination Line"] {
1545
- .embla__dot {
1546
- width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
1547
- height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
1548
- background-color: var(--_ctm-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr));
1549
-
1550
- border-radius: 6px;
1551
- }
1552
- .embla__dot--selected:after {
1553
- box-shadow: inset 0 0 0 1px var(--text-body);
1554
- border-radius: 6px;
1555
- width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
1556
- height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
1557
- // background-color: #fff;
1558
- background-color: var(--_ctm-dn-pn-le-ct-le-cr, var(--_tst-dn-pn-le-ct-le-cr));
1559
- }
1560
- }
1561
- }
1562
-
1563
- .embla__thumbs {
1564
- width: 100%;
1565
- height: var(--_ctm-lt-tl-se);
1566
- position: relative;
1567
- display: grid;
1568
- grid-template-columns: 1fr;
1569
- overflow: hidden;
1570
- // margin: 10px;
1571
- padding: 10px;
1572
-
1573
- .embla__thumbs__viewport {
1574
- width: 100%;
1575
- height: 100%;
1576
- position: relative;
1577
- display: flex;
1578
- flex-direction: column;
1579
-
1580
- overflow: hidden;
1581
- }
1582
- .embla__thumbs__container {
1583
- display: flex;
1584
- flex-direction: row;
1585
- margin-left: calc(var(--thumbs-slide-spacing) * -1);
1586
- gap: var(--_ctm-lt-tl-sg);
1587
- width: 100%;
1588
- // justify-content: center;
1589
- // height: 200px;
1590
-
1591
- .embla__thumbs__slide {
1592
- min-width: var(--_ctm-lt-tl-se);
1593
- max-width: var(--_ctm-lt-tl-se);
1594
- height: var(--_ctm-lt-tl-se);
1595
- & img {
1596
- width: 100%;
1597
- height: 100%;
1598
- }
1599
- }
1600
- }
1601
- }
1602
- }
1603
- }
1604
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+
5
+ $resizerId: "[data-cms-tool='cms-element-resizer']";
6
+ $resizeActive: '[data-cms-element-resizer="true"]';
7
+ [data-div-type="element"] {
8
+ &[data-element-type="allocations"] {
9
+ width: var(
10
+ --_sf-el-wh-st-mx,
11
+ calc(
12
+ 1% *
13
+ var(
14
+ --_ctm-mob-ele-nw-wh-vl,
15
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
16
+ )
17
+ )
18
+ );
19
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
20
+
21
+ & > div {
22
+ &.wrapper {
23
+ width: 100%;
24
+ // min-width: 400px;
25
+ // max-width: 700px;
26
+ width: 100%;
27
+ height: prepareMediaVariable(--_ctm-lt-ht);
28
+ }
29
+ }
30
+
31
+ .loading__container {
32
+ width: 100%;
33
+ height: 25vh;
34
+ display: flex;
35
+ align-items: center;
36
+ justify-content: center;
37
+ }
38
+
39
+ .allocations__element {
40
+ background-color: var(
41
+ --_ctm-mob-dn-wt-se-bd-cr,
42
+ var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
43
+ );
44
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
45
+ display: flex;
46
+ flex-direction: column;
47
+ --_sf-gp: var(
48
+ --_ctm-mob-lt-im-sg,
49
+ var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
50
+ );
51
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
52
+ row-gap: var(--_sf-gp);
53
+ width: 100%;
54
+ // height: 100%;
55
+ border-color: var(
56
+ --_ctm-mob-dn-wt-se-br-cr,
57
+ var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
58
+ );
59
+ border-style: var(
60
+ --_ctm-mob-dn-wt-se-br-se,
61
+ var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
62
+ );
63
+ border-width: var(
64
+ --_ctm-mob-dn-wt-se-br-wh,
65
+ var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
66
+ );
67
+ border-radius: var(
68
+ --_ctm-mob-dn-wt-se-br-rs,
69
+ var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
70
+ );
71
+ box-shadow: var(
72
+ --_show-shadow,
73
+ var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
74
+ var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
75
+ var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
76
+ var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
77
+ );
78
+
79
+ &[data-divider-show="true"] {
80
+ --_sf-dvdr: var(
81
+ --_ctm-mob-dn-dr-dr-wh,
82
+ var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh, 1px))
83
+ )
84
+ var(--_ctm-mob-dn-dr-br-se, var(--_ctm-tab-dn-dr-br-se, var(--_ctm-dn-dr-br-se, solid)))
85
+ var(--_ctm-dn-dr-br-cr, var(--_tst-dn-dr-bd-cr));
86
+ --_sf-dvdr-gap: var(--_sf-gp);
87
+ }
88
+ &[data-icon-position="Left"] {
89
+ --_sf-fd: row-reverse;
90
+ --_sf-jc: flex-end;
91
+ }
92
+ &[data-show-icon="false"] {
93
+ --_sf-show-icon-ff: none;
94
+ }
95
+ &[data-divider-show="true"] {
96
+ // .accordion-item:not(:last-child) {
97
+ // border-bottom: var(
98
+ // --_ctm-mob-dn-dr-dr-wh,
99
+ // var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh))
100
+ // )
101
+ // var(--_ctm-mob-dn-dr-br-se, var(--_ctm-tab-dn-dr-br-se, var(--_ctm-dn-dr-br-se)))
102
+ // var(--_ctm-mob-dn-dr-br-cr, var(--_ctm-tab-dn-dr-br-cr, var(--_ctm-dn-dr-br-cr)));
103
+ // }
104
+ }
105
+
106
+ .load__more__button__container {
107
+ display: flex;
108
+ width: 100%;
109
+ margin-top: 10px;
110
+ &:hover {
111
+ --_sf-hr-bn-at: var(
112
+ --_ctm-mob-dn-ld-me-bn-hr-se-bn-at,
113
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-bn-at, var(--_ctm-dn-ld-me-bn-hr-se-bn-at))
114
+ );
115
+ }
116
+
117
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-bn-at));
118
+ }
119
+
120
+ .btn__with__text[data-btn-name="redeemButton"] {
121
+ &[data-show-shadow="false"] {
122
+ --_show-shadow: none;
123
+ }
124
+ &[data-icon-position="left"] {
125
+ --_sf-fd-bn: row;
126
+ }
127
+ &[data-icon-position="right"] {
128
+ --_sf-fd-bn: row-reverse;
129
+ }
130
+ &[data-icon-position="center"] {
131
+ --_sf-fd-bn: row;
132
+ }
133
+
134
+ &:hover {
135
+ --_sf-hr-bd-cr: var(
136
+ --_ctm-mob-dn-rm-bn-hr-se-bd-cr,
137
+ var(--_ctm-tab-dn-rm-bn-hr-se-bd-cr, var(--_ctm-dn-rm-bn-hr-se-bd-cr))
138
+ );
139
+ --_sf-hr-br-cr: var(
140
+ --_ctm-mob-dn-rm-bn-hr-se-br-cr,
141
+ var(--_ctm-tab-dn-rm-bn-hr-se-br-cr, var(--_ctm-dn-rm-bn-hr-se-br-cr))
142
+ );
143
+ --_sf-hr-br-se: var(
144
+ --_ctm-mob-dn-rm-bn-hr-se-br-se,
145
+ var(--_ctm-tab-dn-rm-bn-hr-se-br-se, var(--_ctm-dn-rm-bn-hr-se-br-se))
146
+ );
147
+ --_sf-hr-br-wh: var(
148
+ --_ctm-mob-dn-rm-bn-hr-se-br-wh,
149
+ var(--_ctm-tab-dn-rm-bn-hr-se-br-wh, var(--_ctm-dn-rm-bn-hr-se-br-wh))
150
+ );
151
+ --_sf-hr-br-rs: var(
152
+ --_ctm-mob-dn-rm-bn-hr-se-br-rs,
153
+ var(--_ctm-tab-dn-rm-bn-hr-se-br-rs, var(--_ctm-dn-rm-bn-hr-se-br-rs))
154
+ );
155
+ --_sf-hr-at: var(
156
+ --_ctm-mob-dn-rm-bn-hr-se-at,
157
+ var(--_ctm-tab-dn-rm-bn-hr-se-at, var(--_ctm-dn-rm-bn-hr-se-at))
158
+ );
159
+ --_sf-hr-gp: var(
160
+ --_ctm-mob-dn-rm-bn-hr-se-gp,
161
+ var(--_ctm-tab-dn-rm-bn-hr-se-gp, var(--_ctm-dn-rm-bn-hr-se-gp))
162
+ );
163
+
164
+ // for shadow
165
+ --_sf-hr-sw-ae: var(
166
+ --_ctm-mob-dn-rm-bn-hr-se-sw-ae,
167
+ var(--_ctm-tab-dn-rm-bn-hr-se-sw-ae, var(--_ctm-dn-rm-bn-hr-se-sw-ae))
168
+ );
169
+ --_sf-hr-sw-br: var(
170
+ --_ctm-mob-dn-rm-bn-hr-se-sw-br,
171
+ var(--_ctm-tab-dn-rm-bn-hr-se-sw-br, var(--_ctm-dn-rm-bn-hr-se-sw-br))
172
+ );
173
+ --_sf-hr-sw-hr: var(
174
+ --_ctm-mob-dn-rm-bn-hr-se-sw-hr,
175
+ var(--_ctm-tab-dn-rm-bn-hr-se-sw-hr, var(--_ctm-dn-rm-bn-hr-se-sw-hr))
176
+ );
177
+ --_sf-hr-sw-cr: var(
178
+ --_ctm-mob-dn-rm-bn-hr-se-sw-cr,
179
+ var(--_ctm-tab-dn-rm-bn-hr-se-sw-cr, var(--_ctm-dn-rm-bn-hr-se-sw-cr))
180
+ );
181
+
182
+ // for font
183
+
184
+ --_sf-hr-cr: var(
185
+ --_ctm-mob-dn-rm-bn-hr-se-cr,
186
+ var(--_ctm-tab-dn-rm-bn-hr-se-cr, var(--_ctm-dn-rm-bn-hr-se-cr))
187
+ );
188
+ --_sf-hr-ft-fy: var(
189
+ --_ctm-mob-dn-rm-bn-hr-se-ft-fy,
190
+ var(--_ctm-tab-dn-rm-bn-hr-se-ft-fy, var(--_ctm-dn-rm-bn-hr-se-ft-fy))
191
+ );
192
+ --_sf-hr-ft-se: var(
193
+ --_ctm-mob-dn-rm-bn-hr-se-ft-se,
194
+ var(--_ctm-tab-dn-rm-bn-hr-se-ft-se, var(--_ctm-dn-rm-bn-hr-se-ft-se))
195
+ );
196
+ --_sf-hr-ft-wt: var(
197
+ --_ctm-mob-dn-rm-bn-hr-se-ft-wt,
198
+ var(--_ctm-tab-dn-rm-bn-hr-se-ft-wt, var(--_ctm-dn-rm-bn-hr-se-ft-wt))
199
+ );
200
+ --_sf-hr-ft-se-ic: var(
201
+ --_ctm-mob-dn-rm-bn-hr-se-ft-se-ic,
202
+ var(--_ctm-tab-dn-rm-bn-hr-se-ft-se-ic, var(--_ctm-dn-rm-bn-hr-se-ft-se-ic))
203
+ );
204
+ --_sf-hr-tt-an: var(
205
+ --_ctm-mob-dn-rm-bn-hr-se-tt-an,
206
+ var(--_ctm-tab-dn-rm-bn-hr-se-tt-an, var(--_ctm-dn-rm-bn-hr-se-tt-an))
207
+ );
208
+ --_sf-hr-lr-sg: var(
209
+ --_ctm-mob-dn-rm-bn-hr-se-lr-sg,
210
+ var(--_ctm-tab-dn-rm-bn-hr-se-lr-sg, var(--_ctm-dn-rm-bn-hr-se-lr-sg))
211
+ );
212
+ --_sf-hr-le-ht: var(
213
+ --_ctm-mob-dn-rm-bn-hr-se-le-ht,
214
+ var(--_ctm-tab-dn-rm-bn-hr-se-le-ht, var(--_ctm-dn-rm-bn-hr-se-le-ht))
215
+ );
216
+
217
+ --_sf-hr-in-se: var(
218
+ --_ctm-mob-dn-rm-bn-hr-se-in-se,
219
+ var(--_ctm-tab-dn-rm-bn-hr-se-in-se, var(--_ctm-dn-rm-bn-hr-se-in-se))
220
+ );
221
+ --_sf-hr-in-se: var(
222
+ --_ctm-mob-dn-rm-bn-hr-se-in-se,
223
+ var(--_ctm-tab-dn-rm-bn-hr-se-in-se, var(--_ctm-dn-rm-bn-hr-se-in-se))
224
+ );
225
+ --_sf-hr-in-c1: var(
226
+ --_ctm-mob-dn-rm-bn-hr-se-in-c1,
227
+ var(--_ctm-tab-dn-rm-bn-hr-se-in-c1, var(--_ctm-dn-rm-bn-hr-se-in-c1))
228
+ );
229
+ --_sf-hr-ue: var(
230
+ --_ctm-mob-dn-rm-bn-hr-se-ue,
231
+ var(--_ctm-tab-dn-rm-bn-hr-se-ue, var(--_ctm-dn-rm-bn-hr-se-ue))
232
+ );
233
+
234
+ // for pading and width
235
+ --_sf-hr-pg: var(
236
+ --_ctm-mob-dn-rm-bn-hr-pg,
237
+ var(--_ctm-tab-dn-rm-bn-hr-pg, var(--_ctm-dn-rm-bn-hr-pg))
238
+ );
239
+ --_sf-hr-wh: var(
240
+ --_ctm-mob-dn-rm-bn-hr-wh,
241
+ var(--_ctm-tab-dn-rm-bn-hr-wh, var(--_ctm-dn-rm-bn-hr-wh))
242
+ );
243
+
244
+ &[data-hover-show-shadow="false"] {
245
+ --_hover-show-shadow: none;
246
+ }
247
+ &[data-hover-show-icon="false"] {
248
+ --_hover-show-icon: none;
249
+ }
250
+ }
251
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-bd-cr));
252
+
253
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-pg));
254
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-wh));
255
+ display: flex;
256
+ flex-direction: var(--_sf-fd-bn);
257
+ align-items: center;
258
+
259
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-at));
260
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-gp));
261
+
262
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-br-rs));
263
+
264
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-ae))
265
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-br))
266
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-sd))
267
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-cr));
268
+
269
+ &[data-show-border="true"] {
270
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-br-cr));
271
+
272
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-br-se));
273
+
274
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-br-wh));
275
+ }
276
+
277
+ .txt {
278
+ display: flex;
279
+
280
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-cr));
281
+
282
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-ft-fy));
283
+
284
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-ft-se));
285
+
286
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-ft-wt));
287
+
288
+ font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-ft-se-ic));
289
+
290
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-tt-an));
291
+
292
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-lr-sg));
293
+
294
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-le-ht));
295
+
296
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
297
+ }
298
+
299
+ .icon {
300
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
301
+ svg {
302
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-in-se));
303
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-in-se));
304
+
305
+ path {
306
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-in-c1));
307
+ }
308
+ }
309
+ }
310
+ [data-element-style="Text"] {
311
+ display: inline-block;
312
+ width: 100%;
313
+ }
314
+
315
+ .icon--hover {
316
+ // position: absolute;
317
+ // inset: 0;
318
+ // opacity: 0;
319
+ display: none;
320
+ transition: opacity 0.2s ease;
321
+ }
322
+
323
+ &:hover .icon--hover {
324
+ // opacity: 1;
325
+ display: flex;
326
+ }
327
+
328
+ &:hover .icon--default {
329
+ // opacity: 0;
330
+ display: none;
331
+ }
332
+ }
333
+ }
334
+
335
+ .allocations_table_wrapper {
336
+ display: flex;
337
+ flex-direction: column;
338
+ align-self: stretch;
339
+ align-items: center;
340
+ overflow-x: auto;
341
+ width: 100%;
342
+ .table__common_parent {
343
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
344
+ width: 100%;
345
+
346
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
347
+ // --_aspect-ratio: calc(
348
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
349
+ // );
350
+
351
+ .pagination:hover {
352
+ --_sf-bd-cr: var(--_ctm-dn-pn-hr-se-bd-cr, var(--_tst-dn-pn-hr-se-bd-cr));
353
+ }
354
+
355
+ .pagination .active:hover {
356
+ cursor: pointer;
357
+ --_sf-hr-fc: var(--_ctm-dn-pn-hr-se-cr, var(--_tst-dn-pn-hr-se-cr));
358
+ --_sf-hr-ff: var(--_ctm-dn-pn-hr-se-ft-fy, var(--_tst-dn-pn-hr-se-ft-fy));
359
+ --_sf-hr-fs: var(--_ctm-dn-pn-hr-se-ft-se, var(--_tst-dn-pn-hr-se-ft-se));
360
+ --_sf-hr-td: var(--_ctm-dn-pn-hr-se-tt-ue, var(--_tst-dn-hr-tt-ue));
361
+ --_sf-hr-fw: var(--_ctm-dn-pn-hr-se-ft-wt, var(--_tst-dn-pn-hr-se-ft-wt));
362
+ --_sf-hr-ft: var(--_ctm-dn-pn-hr-se-ft-se-ic, var(--_tst-dn-pn-hr-se-ft-se-ic));
363
+ --_sf-hr-ta: var(--_ctm-dn-pn-hr-se-tt-an, var(--_tst-dn-pn-hr-se-tt-an));
364
+ --_sf-hr-ls: var(--_ctm-dn-pn-hr-se-lr-sg, var(--_tst-dn-pn-hr-se-lr-sg));
365
+ --_sf-hr-lh: var(--_ctm-dn-pn-hr-se-le-ht, var(--_tst-dn-pn-hr-se-le-ht));
366
+ }
367
+ &[data-widget-shadow="false"] {
368
+ .table__wrapper {
369
+ --_show-shadow: none;
370
+ }
371
+ }
372
+ &[data-widget-border="true"] {
373
+ .table__wrapper {
374
+ border-color: var(
375
+ --_ctm-mob-dn-te-wt-br-cr,
376
+ var(--_ctm-tab-dn-te-wt-br-cr, var(--_ctm-dn-te-wt-br-cr))
377
+ );
378
+ border-style: var(
379
+ --_ctm-mob-dn-te-wt-br-se,
380
+ var(--_ctm-tab-dn-te-wt-br-se, var(--_ctm-dn-te-wt-br-se))
381
+ );
382
+ border-width: var(
383
+ --_ctm-mob-dn-te-wt-br-wh,
384
+ var(--_ctm-tab-dn-te-wt-br-wh, var(--_ctm-dn-te-wt-br-wh))
385
+ );
386
+ }
387
+ }
388
+ &[data-table-shadow="false"] {
389
+ .table__container {
390
+ --_show-table-shadow: none;
391
+ }
392
+ }
393
+ &[data-table-border="true"] {
394
+ .table__container {
395
+ border-color: var(
396
+ --_ctm-mob-dn-te-br-cr,
397
+ var(--_ctm-tab-dn-te-br-cr, var(--_ctm-dn-te-br-cr))
398
+ );
399
+ border-style: var(
400
+ --_ctm-mob-dn-te-br-se,
401
+ var(--_ctm-tab-dn-te-br-se, var(--_ctm-dn-te-br-se))
402
+ );
403
+ border-width: var(
404
+ --_ctm-mob-dn-te-br-wh,
405
+ var(--_ctm-tab-dn-te-br-wh, var(--_ctm-dn-te-br-wh))
406
+ );
407
+ }
408
+ }
409
+
410
+ &[data-header-divider="true"] {
411
+ thead tr th {
412
+ border-bottom: 1px solid
413
+ var(
414
+ --_ctm-mob-dn-rw-ad-hr-ds-hr-dr,
415
+ var(--_ctm-tab-dn-rw-ad-hr-ds-hr-dr, var(--_ctm-dn-rw-ad-hr-ds-hr-dr))
416
+ );
417
+ }
418
+ }
419
+ &[data-row-divider="true"] {
420
+ tbody tr {
421
+ border-bottom: 1px solid
422
+ var(
423
+ --_ctm-mob-dn-rw-ad-hr-ds-rw-dr,
424
+ var(--_ctm-tab-dn-rw-ad-hr-ds-rw-dr, var(--_ctm-dn-rw-ad-hr-ds-rw-dr))
425
+ );
426
+ }
427
+ }
428
+ &[data-column-divider="true"] {
429
+ tbody tr td,
430
+ thead tr th {
431
+ border-right: 1px solid
432
+ var(
433
+ --_ctm-mob-dn-rw-ad-hr-ds-cn-dr,
434
+ var(--_ctm-tab-dn-rw-ad-hr-ds-cn-dr, var(--_ctm-dn-rw-ad-hr-ds-cn-dr))
435
+ );
436
+ }
437
+
438
+ tbody tr td:last-child,
439
+ thead tr th:last-child {
440
+ border-right: none;
441
+ }
442
+ }
443
+ &[data-show-more-rows="onScroll"] {
444
+ .table__container {
445
+ overflow-y: scroll;
446
+ height: var(
447
+ --_ctm-mob-lt-te-ht,
448
+ var(--_ctm-tab-lt-te-ht, var(--_ctm-lt-te-ht))
449
+ ) !important;
450
+
451
+ &::-webkit-scrollbar {
452
+ width: var(
453
+ --_ctm-mob-dn-sl-br-sl-br-wh,
454
+ var(--_ctm-tab-dn-sl-br-sl-br-wh, var(--_ctm-dn-sl-br-sl-br-wh))
455
+ );
456
+ }
457
+
458
+ &::-webkit-scrollbar-track {
459
+ background-color: var(--_base-white);
460
+ }
461
+
462
+ &::-webkit-scrollbar-thumb {
463
+ background-color: var(
464
+ --_ctm-mob-dn-sl-br-sl-br-cr,
465
+ var(--_ctm-tab-dn-sl-br-sl-br-cr, var(--_ctm-dn-sl-br-sl-br-cr))
466
+ );
467
+ }
468
+
469
+ // // Scrollbar thumb when hovered
470
+ // &::-webkit-scrollbar-thumb:hover {
471
+ // background-color: #555; // Darker color when hovering over the thumb
472
+ // }
473
+
474
+ // // For Firefox, using scrollbar-width and scrollbar-color
475
+ // scrollbar-width: thin; // Thin scrollbar
476
+ // scrollbar-color: #888 #f1f1f1; // Thumb and track colors
477
+ }
478
+ }
479
+
480
+ &[data-alternative-row-colors="true"] {
481
+ tbody .tbody__row__divider:nth-child(odd) {
482
+ background-color: prepareMediaVariable(--_ctm-dn-rw-ae-cr-bd-cr);
483
+ }
484
+ }
485
+ .table__wrapper {
486
+ flex: 1 1 auto;
487
+ min-width: 0;
488
+ overflow-x: auto;
489
+ padding: var(
490
+ --_ctm-mob-lt-pg,
491
+ var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg, var(--_tst-lt-pg)))
492
+ );
493
+
494
+ background-color: var(
495
+ --_ctm-mob-dn-te-wt-bd-cr,
496
+ var(--_ctm-tab-dn-te-wt-bd-cr, var(--_ctm-dn-te-wt-bd-cr, var(--_tst-dn-te-wt-bd-cr)))
497
+ );
498
+
499
+ border-radius: var(
500
+ --_ctm-mob-dn-te-wt-br-rs,
501
+ var(--_ctm-tab-dn-te-wt-br-rs, var(--_ctm-dn-te-wt-br-rs, var(--_tst-dn-te-wt-br-rs)))
502
+ );
503
+
504
+ box-shadow: var(
505
+ --_show-shadow,
506
+ var(
507
+ --_ctm-mob-dn-te-wt-sw-ae,
508
+ var(--_ctm-tab-dn-te-wt-sw-ae, var(--_ctm-dn-te-wt-sw-ae))
509
+ )
510
+ var(
511
+ --_ctm-mob-dn-te-wt-sw-br,
512
+ var(--_ctm-tab-dn-te-wt-sw-br, var(--_ctm-dn-te-wt-sw-br))
513
+ )
514
+ var(
515
+ --_ctm-mob-dn-te-wt-sw-sd,
516
+ var(--_ctm-tab-dn-te-wt-sw-sd, var(--_ctm-dn-te-wt-sw-sd))
517
+ )
518
+ var(
519
+ --_ctm-mob-dn-te-wt-sw-cr,
520
+ var(--_ctm-tab-dn-te-wt-sw-cr, var(--_ctm-dn-te-wt-sw-cr))
521
+ )
522
+ );
523
+
524
+ width: 100%;
525
+
526
+ .table__container {
527
+ background-color: var(
528
+ --_ctm-mob-dn-te-bd-cr,
529
+ var(--_ctm-tab-dn-te-bd-cr, var(--_ctm-dn-te-bd-cr))
530
+ );
531
+
532
+ border-radius: var(
533
+ --_ctm-mob-dn-te-br-rs,
534
+ var(--_ctm-tab-dn-te-br-rs, var(--_ctm-dn-te-br-rs))
535
+ );
536
+
537
+ box-shadow: var(
538
+ --_show-table-shadow,
539
+ var(--_ctm-mob-dn-te-sw-ae, var(--_ctm-tab-dn-te-sw-ae, var(--_ctm-dn-te-sw-ae)))
540
+ var(--_ctm-mob-dn-te-sw-br, var(--_ctm-tab-dn-te-sw-br, var(--_ctm-dn-te-sw-br)))
541
+ var(--_ctm-mob-dn-te-sw-sd, var(--_ctm-tab-dn-te-sw-sd, var(--_ctm-dn-te-sw-sd)))
542
+ var(--_ctm-mob-dn-te-sw-cr, var(--_ctm-tab-dn-te-sw-cr, var(--_ctm-dn-te-sw-cr)))
543
+ );
544
+ }
545
+
546
+ h3 {
547
+ text-align: center;
548
+ width: 100%;
549
+ margin-bottom: 10px;
550
+ }
551
+ table {
552
+ border-collapse: collapse;
553
+ // border: none;
554
+ width: 100%;
555
+ // height: 100%;
556
+ text-align: var(--_ctm-mob-lt-ct-at, var(--_ctm-tab-lt-ct-at, var(--_ctm-lt-ct-at)));
557
+ width: max-content;
558
+ min-width: 100%;
559
+ table-layout: auto;
560
+ th,
561
+ td {
562
+ border: none;
563
+ }
564
+ thead {
565
+ background-color: var(
566
+ --_ctm-mob-dn-te-hr-bd-cr,
567
+ var(--_ctm-tab-dn-te-hr-bd-cr, var(--_ctm-dn-te-hr-bd-cr))
568
+ );
569
+
570
+ .thead__row__divider {
571
+ height: var(--_ctm-mob-lt-hr-ht, var(--_ctm-tab-lt-hr-ht, var(--_ctm-lt-hr-ht)));
572
+
573
+ .th__col__divider {
574
+ padding: var(
575
+ --_ctm-mob-lt-hr-cl-pg,
576
+ var(--_ctm-tab-lt-hr-cl-pg, var(--_ctm-lt-hr-cl-pg))
577
+ );
578
+
579
+ color: var(
580
+ --_ctm-mob-dn-hr-tt-cr,
581
+ var(--_ctm-tab-dn-hr-tt-cr, var(--_ctm-dn-hr-tt-cr))
582
+ );
583
+
584
+ font-family: var(
585
+ --_ctm-mob-dn-hr-tt-ft-fy,
586
+ var(--_ctm-tab-dn-hr-tt-ft-fy, var(--_ctm-dn-hr-tt-ft-fy))
587
+ );
588
+
589
+ font-size: var(
590
+ --_ctm-mob-dn-hr-tt-ft-se,
591
+ var(--_ctm-tab-dn-hr-tt-ft-se, var(--_ctm-dn-hr-tt-ft-se))
592
+ );
593
+
594
+ font-weight: var(
595
+ --_ctm-mob-dn-hr-tt-ft-wt,
596
+ var(--_ctm-tab-dn-hr-tt-ft-wt, var(--_ctm-dn-hr-tt-ft-wt))
597
+ );
598
+
599
+ text-decoration: var(
600
+ --_ctm-mob-dn-hr-tt-ue,
601
+ var(--_ctm-tab-dn-hr-tt-ue, var(--_ctm-dn-hr-tt-ue))
602
+ );
603
+
604
+ font-style: var(
605
+ --_ctm-mob-dn-hr-tt-ft-se-ic,
606
+ var(--_ctm-tab-dn-hr-tt-ft-se-ic, var(--_ctm-dn-hr-tt-ft-se-ic))
607
+ );
608
+
609
+ text-align: var(
610
+ --_ctm-mob-dn-hr-tt-tt-an,
611
+ var(--_ctm-tab-dn-hr-tt-tt-an, var(--_ctm-dn-hr-tt-tt-an))
612
+ );
613
+
614
+ letter-spacing: var(
615
+ --_ctm-mob-dn-hr-tt-lr-sg,
616
+ var(--_ctm-tab-dn-hr-tt-lr-sg, var(--_ctm-dn-hr-tt-lr-sg))
617
+ );
618
+
619
+ line-height: var(
620
+ --_ctm-mob-dn-hr-tt-le-ht,
621
+ var(--_ctm-tab-dn-hr-tt-le-ht, var(--_ctm-dn-hr-tt-le-ht))
622
+ );
623
+ }
624
+ }
625
+ }
626
+ tbody {
627
+ .tbody__row__divider {
628
+ background-color: var(
629
+ --_ctm-mob-dn-te-rw-bd-cr,
630
+ var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr))
631
+ );
632
+
633
+ height: var(--_ctm-mob-lt-rw-ht, var(--_ctm-tab-lt-rw-ht, var(--_ctm-lt-rw-ht)));
634
+
635
+ .td__col__divider {
636
+ padding: var(
637
+ --_ctm-mob-lt-rw-cl-pg,
638
+ var(--_ctm-tab-lt-rw-cl-pg, var(--_ctm-lt-rw-cl-pg))
639
+ );
640
+
641
+ color: var(
642
+ --_sf-hr-fc,
643
+ var(
644
+ --_ctm-mob-dn-rw-tt-cr,
645
+ var(--_ctm-tab-dn-rw-tt-cr, var(--_ctm-dn-rw-tt-cr))
646
+ )
647
+ );
648
+
649
+ font-family: var(
650
+ --_sf-hr-ff,
651
+ var(
652
+ --_ctm-mob-dn-rw-tt-ft-fy,
653
+ var(--_ctm-tab-dn-rw-tt-ft-fy, var(--_ctm-dn-rw-tt-ft-fy))
654
+ )
655
+ );
656
+
657
+ font-size: var(
658
+ --_sf-hr-fs,
659
+ var(
660
+ --_ctm-mob-dn-rw-tt-ft-se,
661
+ var(--_ctm-tab-dn-rw-tt-ft-se, var(--_ctm-dn-rw-tt-ft-se))
662
+ )
663
+ );
664
+
665
+ text-decoration: var(
666
+ --_ctm-mob-dn-rw-tt-ue,
667
+ var(--_ctm-tab-dn-rw-tt-ue, var(--_ctm-dn-rw-tt-ue))
668
+ );
669
+
670
+ font-weight: var(
671
+ --_sf-hr-fw,
672
+ var(
673
+ --_ctm-mob-dn-rw-tt-ft-wt,
674
+ var(--_ctm-tab-dn-rw-tt-ft-wt, var(--_ctm-dn-rw-tt-ft-wt))
675
+ )
676
+ );
677
+
678
+ font-style: var(
679
+ --_sf-hr-ft,
680
+ var(
681
+ --_ctm-mob-dn-rw-tt-ft-se-ic,
682
+ var(--_ctm-tab-dn-rw-tt-ft-se-ic, var(--_ctm-dn-rw-tt-ft-se-ic))
683
+ )
684
+ );
685
+
686
+ text-align: var(
687
+ --_sf-hr-ta,
688
+ var(
689
+ --_ctm-mob-dn-rw-tt-tt-an,
690
+ var(--_ctm-tab-dn-rw-tt-tt-an, var(--_ctm-dn-rw-tt-tt-an))
691
+ )
692
+ );
693
+
694
+ letter-spacing: var(
695
+ --_sf-hr-ls,
696
+ var(
697
+ --_ctm-mob-dn-rw-tt-lr-sg,
698
+ var(--_ctm-tab-dn-rw-tt-lr-sg, var(--_ctm-dn-rw-tt-lr-sg))
699
+ )
700
+ );
701
+
702
+ line-height: var(
703
+ --_sf-hr-lh,
704
+ var(
705
+ --_ctm-mob-dn-rw-tt-le-ht,
706
+ var(--_ctm-tab-dn-rw-tt-le-ht, var(--_ctm-dn-rw-tt-le-ht))
707
+ )
708
+ );
709
+ }
710
+ }
711
+ }
712
+ }
713
+
714
+ .pagination {
715
+ display: var(--_d-flex);
716
+ align-items: var(--_align-center);
717
+ justify-content: var(
718
+ --_ctm-mob-lt-pn-at,
719
+ var(--_ctm-tab-lt-pn-at, var(--_ctm-lt-pn-at))
720
+ );
721
+ margin-top: 10px;
722
+ background-color: var(
723
+ --_sf-bd-cr,
724
+ var(
725
+ --_ctm-mob-dn-pn-dt-se-bd-cr,
726
+ var(--_ctm-tab-dn-pn-dt-se-bd-cr, var(--_ctm-dn-pn-dt-se-bd-cr))
727
+ )
728
+ );
729
+ &.pagination__center {
730
+ justify-content: var(justify-center);
731
+ }
732
+
733
+ button {
734
+ svg {
735
+ width: var(--_width-18);
736
+ height: var(--_height-18);
737
+ path {
738
+ stroke: var(--_gray-500);
739
+ // stroke: var(--_ctm-dn-pn-in-c1, var(--_tst-dn-pn-in-c1));
740
+ }
741
+ }
742
+ }
743
+ span {
744
+ float: left;
745
+ padding: var(--_pd-8) var(--_pd-16);
746
+ text-decoration: none;
747
+ span {
748
+ // color: var(--_sf-hr-fc, var(--_ctm-dn-pn-bn-cr, var(--_tst-dn-pn-bn-cr)));
749
+ // font-size: var(--_sf-hr-fs, var(--_ctm-dn-pn-ft-se, var(--_tst-dn-pn-ft-se)));
750
+ // font-family: var(--_sf-hr-ff, var(--_ctm-dn-pn-ft-fy, var(--_tst-dn-pn-ft-fy))),
751
+
752
+ // font-weight: var(--_sf-hr-fw, var(--_ctm-dn-pn-ft-wt, var(--_tst-dn-pn-ft-wt)));
753
+ // font-style: var(--_sf-hr-ft, var(--_ctm-dn-pn-ft-se-ic, var(--_tst-dn-pn-ft-se-ic)));
754
+ // text-align: var(--_sf-hr-ta, var(--_ctm-dn-pn-tt-an, var(--_tst-dn-pn-tt-an)));
755
+ // letter-spacing: var(--_sf-hr-ls, var(--_ctm-dn-pn-lr-sg, var(--_tst-dn-pn-lr-sg)));
756
+ // line-height: var(--_sf-hr-lh, var(--_ctm-dn-pn-le-ht, var(--_tst-dn-pn-le-ht)));
757
+ }
758
+ &.active:hover {
759
+ &hover {
760
+ --_sf-hr-fc: var(--_ctm-dn-pn-hr-se-cr, var(--_tst-dn-pn-hr-se-cr));
761
+ --_sf-hr-ff: var(--_ctm-dn-pn-hr-se-ft-fy, var(--_tst-dn-pn-hr-se-ft-fy));
762
+ --_sf-hr-fs: var(--_ctm-dn-pn-hr-se-ft-se, var(--_tst-dn-pn-hr-se-ft-se));
763
+ --_sf-hr-fw: var(--_ctm-dn-pn-hr-se-ft-wt, var(--_tst-dn-pn-hr-se-ft-wt));
764
+ --_sf-hr-ft: var(--_ctm-dn-pn-hr-se-ft-se-ic, var(--_tst-dn-pn-hr-se-ft-se-ic));
765
+ --_sf-hr-ta: var(--_ctm-dn-pn-hr-se-tt-an, var(--_tst-dn-pn-hr-se-tt-an));
766
+ --_sf-hr-ls: var(--_ctm-dn-pn-hr-se-lr-sg, var(--_tst-dn-pn-hr-se-lr-sg));
767
+ --_sf-hr-lh: var(--_ctm-dn-pn-hr-se-le-ht, var(--_tst-dn-pn-hr-se-le-ht));
768
+ }
769
+ }
770
+ &.active {
771
+ color: var(
772
+ --_sf-hr-fc,
773
+ var(
774
+ --_ctm-mob-dn-pn-dt-se-cr,
775
+ var(--_ctm-tab-dn-pn-dt-se-cr, var(--_ctm-dn-pn-dt-se-cr))
776
+ )
777
+ );
778
+
779
+ font-family: var(
780
+ --_sf-hr-ff,
781
+ var(
782
+ --_ctm-mob-dn-pn-dt-se-ft-fy,
783
+ var(--_ctm-tab-dn-pn-dt-se-ft-fy, var(--_ctm-dn-pn-dt-se-ft-fy))
784
+ )
785
+ );
786
+
787
+ font-size: var(
788
+ --_sf-hr-fs,
789
+ var(
790
+ --_ctm-mob-dn-pn-dt-se-ft-se,
791
+ var(--_ctm-tab-dn-pn-dt-se-ft-se, var(--_ctm-dn-pn-dt-se-ft-se))
792
+ )
793
+ );
794
+
795
+ text-decoration: var(
796
+ --_sf-hr-td,
797
+ var(
798
+ --_ctm-mob-dn-pn-dt-se-ue,
799
+ var(--_ctm-tab-dn-pn-dt-se-ue, var(--_ctm-dn-pn-dt-se-ue))
800
+ )
801
+ );
802
+
803
+ font-weight: var(
804
+ --_sf-hr-fw,
805
+ var(
806
+ --_ctm-mob-dn-pn-dt-se-ft-wt,
807
+ var(--_ctm-tab-dn-pn-dt-se-ft-wt, var(--_ctm-dn-pn-dt-se-ft-wt))
808
+ )
809
+ );
810
+
811
+ font-style: var(
812
+ --_sf-hr-ft,
813
+ var(
814
+ --_ctm-mob-dn-pn-dt-se-ft-se-ic,
815
+ var(--_ctm-tab-dn-pn-dt-se-ft-se-ic, var(--_ctm-dn-pn-dt-se-ft-se-ic))
816
+ )
817
+ );
818
+
819
+ text-align: var(
820
+ --_sf-hr-ta,
821
+ var(
822
+ --_ctm-mob-dn-pn-dt-se-tt-an,
823
+ var(--_ctm-tab-dn-pn-dt-se-tt-an, var(--_ctm-dn-pn-dt-se-tt-an))
824
+ )
825
+ );
826
+
827
+ letter-spacing: var(
828
+ --_sf-hr-ls,
829
+ var(
830
+ --_ctm-mob-dn-pn-dt-se-lr-sg,
831
+ var(--_ctm-tab-dn-pn-dt-se-lr-sg, var(--_ctm-dn-pn-dt-se-lr-sg))
832
+ )
833
+ );
834
+
835
+ line-height: var(
836
+ --_sf-hr-lh,
837
+ var(
838
+ --_ctm-mob-dn-pn-dt-se-le-ht,
839
+ var(--_ctm-tab-dn-pn-dt-se-le-ht, var(--_ctm-dn-pn-dt-se-le-ht))
840
+ )
841
+ );
842
+ }
843
+ }
844
+ .pagination__arrows {
845
+ color: var(
846
+ --_sf-hr-fc,
847
+ var(--_ctm-mob-dn-pn-in-c1, var(--_ctm-tab-dn-pn-in-c1, var(--_ctm-dn-pn-in-c1)))
848
+ );
849
+
850
+ font-size: var(
851
+ --_sf-hr-fs,
852
+ var(--_ctm-mob-dn-pn-in-se, var(--_ctm-tab-dn-pn-in-se, var(--_ctm-dn-pn-in-se)))
853
+ );
854
+ }
855
+ }
856
+ }
857
+ }
858
+
859
+ .no__data__found {
860
+ color: var(--_gray-600);
861
+ font-size: 14px;
862
+ font-weight: 600;
863
+ line-height: 20px;
864
+ padding: 16px 24px;
865
+ text-align: center;
866
+ }
867
+
868
+ .note_wrapper {
869
+ display: flex;
870
+ width: 100%;
871
+ padding: 0px 16px;
872
+ flex-direction: column;
873
+ justify-content: center;
874
+ align-items: center;
875
+ gap: 8px;
876
+
877
+ min-height: 76px;
878
+
879
+ .note {
880
+ color: var(--_gray-600);
881
+ font-weight: 400;
882
+ line-height: 24px;
883
+ }
884
+
885
+ .redeem_now_wrapper {
886
+ display: flex;
887
+ justify-content: center;
888
+ align-items: center;
889
+ gap: 24px;
890
+
891
+ .redeem_now_btn {
892
+ display: flex;
893
+ justify-content: center;
894
+ align-items: center;
895
+ gap: 8px;
896
+ color: var(--_primary-400);
897
+ font-size: 14px;
898
+ font-weight: 600;
899
+ line-height: 20px;
900
+
901
+ &[data-has-link="true"] {
902
+ cursor: pointer;
903
+ }
904
+
905
+ &:hover {
906
+ color: #53389e;
907
+ }
908
+
909
+ &:focus {
910
+ color: #162578;
911
+ }
912
+
913
+ &:disabled {
914
+ color: #d0d5dd;
915
+ }
916
+ }
917
+ }
918
+ }
919
+ .btn__with__text[data-btn-name="loadMore"] {
920
+ &[data-show-shadow="false"] {
921
+ --_show-shadow: none;
922
+ }
923
+ &[data-icon-position="left"] {
924
+ --_sf-fd-bn: row;
925
+ }
926
+ &[data-icon-position="right"] {
927
+ --_sf-fd-bn: row-reverse;
928
+ }
929
+ &[data-icon-position="center"] {
930
+ --_sf-fd-bn: row;
931
+ }
932
+
933
+ &:hover {
934
+ --_sf-hr-bd-cr: var(
935
+ --_ctm-mob-dn-ld-me-bn-hr-se-bd-cr,
936
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-bd-cr, var(--_ctm-dn-ld-me-bn-hr-se-bd-cr))
937
+ );
938
+ --_sf-hr-br-cr: var(
939
+ --_ctm-mob-dn-ld-me-bn-hr-se-br-cr,
940
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-br-cr, var(--_ctm-dn-ld-me-bn-hr-se-br-cr))
941
+ );
942
+ --_sf-hr-br-se: var(
943
+ --_ctm-mob-dn-ld-me-bn-hr-se-br-se,
944
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-br-se, var(--_ctm-dn-ld-me-bn-hr-se-br-se))
945
+ );
946
+ --_sf-hr-br-wh: var(
947
+ --_ctm-mob-dn-ld-me-bn-hr-se-br-wh,
948
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-br-wh, var(--_ctm-dn-ld-me-bn-hr-se-br-wh))
949
+ );
950
+ --_sf-hr-br-rs: var(
951
+ --_ctm-mob-dn-ld-me-bn-hr-se-br-rs,
952
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-br-rs, var(--_ctm-dn-ld-me-bn-hr-se-br-rs))
953
+ );
954
+ --_sf-hr-at: var(
955
+ --_ctm-mob-dn-ld-me-bn-hr-se-at,
956
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-at, var(--_ctm-dn-ld-me-bn-hr-se-at))
957
+ );
958
+ --_sf-hr-gp: var(
959
+ --_ctm-mob-dn-ld-me-bn-hr-se-gp,
960
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-gp, var(--_ctm-dn-ld-me-bn-hr-se-gp))
961
+ );
962
+
963
+ // for shadow
964
+ --_sf-hr-sw-ae: var(
965
+ --_ctm-mob-dn-ld-me-bn-hr-se-sw-ae,
966
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-ae, var(--_ctm-dn-ld-me-bn-hr-se-sw-ae))
967
+ );
968
+ --_sf-hr-sw-br: var(
969
+ --_ctm-mob-dn-ld-me-bn-hr-se-sw-br,
970
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-br, var(--_ctm-dn-ld-me-bn-hr-se-sw-br))
971
+ );
972
+ --_sf-hr-sw-hr: var(
973
+ --_ctm-mob-dn-ld-me-bn-hr-se-sw-hr,
974
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-hr, var(--_ctm-dn-ld-me-bn-hr-se-sw-hr))
975
+ );
976
+ --_sf-hr-sw-cr: var(
977
+ --_ctm-mob-dn-ld-me-bn-hr-se-sw-cr,
978
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-cr, var(--_ctm-dn-ld-me-bn-hr-se-sw-cr))
979
+ );
980
+
981
+ // for font
982
+
983
+ --_sf-hr-cr: var(
984
+ --_ctm-mob-dn-ld-me-bn-hr-se-cr,
985
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-cr, var(--_ctm-dn-ld-me-bn-hr-se-cr))
986
+ );
987
+ --_sf-hr-ft-fy: var(
988
+ --_ctm-mob-dn-ld-me-bn-hr-se-ft-fy,
989
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-fy, var(--_ctm-dn-ld-me-bn-hr-se-ft-fy))
990
+ );
991
+ --_sf-hr-ft-se: var(
992
+ --_ctm-mob-dn-ld-me-bn-hr-se-ft-se,
993
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-se, var(--_ctm-dn-ld-me-bn-hr-se-ft-se))
994
+ );
995
+ --_sf-hr-ft-wt: var(
996
+ --_ctm-mob-dn-ld-me-bn-hr-se-ft-wt,
997
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-wt, var(--_ctm-dn-ld-me-bn-hr-se-ft-wt))
998
+ );
999
+ --_sf-hr-ft-se-ic: var(
1000
+ --_ctm-mob-dn-ld-me-bn-hr-se-ft-se-ic,
1001
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-se-ic, var(--_ctm-dn-ld-me-bn-hr-se-ft-se-ic))
1002
+ );
1003
+ --_sf-hr-tt-an: var(
1004
+ --_ctm-mob-dn-ld-me-bn-hr-se-tt-an,
1005
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-tt-an, var(--_ctm-dn-ld-me-bn-hr-se-tt-an))
1006
+ );
1007
+ --_sf-hr-lr-sg: var(
1008
+ --_ctm-mob-dn-ld-me-bn-hr-se-lr-sg,
1009
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-lr-sg, var(--_ctm-dn-ld-me-bn-hr-se-lr-sg))
1010
+ );
1011
+ --_sf-hr-le-ht: var(
1012
+ --_ctm-mob-dn-ld-me-bn-hr-se-le-ht,
1013
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-le-ht, var(--_ctm-dn-ld-me-bn-hr-se-le-ht))
1014
+ );
1015
+
1016
+ --_sf-hr-in-se: var(
1017
+ --_ctm-mob-dn-ld-me-bn-hr-se-in-se,
1018
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-in-se, var(--_ctm-dn-ld-me-bn-hr-se-in-se))
1019
+ );
1020
+ --_sf-hr-in-se: var(
1021
+ --_ctm-mob-dn-ld-me-bn-hr-se-in-se,
1022
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-in-se, var(--_ctm-dn-ld-me-bn-hr-se-in-se))
1023
+ );
1024
+ --_sf-hr-in-c1: var(
1025
+ --_ctm-mob-dn-ld-me-bn-hr-se-in-c1,
1026
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-in-c1, var(--_ctm-dn-ld-me-bn-hr-se-in-c1))
1027
+ );
1028
+ --_sf-hr-ue: var(
1029
+ --_ctm-mob-dn-ld-me-bn-hr-se-ue,
1030
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ue, var(--_ctm-dn-ld-me-bn-hr-se-ue))
1031
+ );
1032
+
1033
+ // for pading and width
1034
+ --_sf-hr-pg: var(
1035
+ --_ctm-mob-dn-ld-me-bn-hr-pg,
1036
+ var(--_ctm-tab-dn-ld-me-bn-hr-pg, var(--_ctm-dn-ld-me-bn-hr-pg))
1037
+ );
1038
+ --_sf-hr-wh: var(
1039
+ --_ctm-mob-dn-ld-me-bn-hr-wh,
1040
+ var(--_ctm-tab-dn-ld-me-bn-hr-wh, var(--_ctm-dn-ld-me-bn-hr-wh))
1041
+ );
1042
+
1043
+ &[data-hover-show-shadow="false"] {
1044
+ --_hover-show-shadow: none;
1045
+ }
1046
+ &[data-hover-show-icon="false"] {
1047
+ --_hover-show-icon: none;
1048
+ }
1049
+ }
1050
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-bd-cr));
1051
+
1052
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-pg));
1053
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-wh));
1054
+ display: flex;
1055
+ flex-direction: var(--_sf-fd-bn);
1056
+ align-items: center;
1057
+
1058
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-at));
1059
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-gp));
1060
+
1061
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-rs));
1062
+
1063
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-ae))
1064
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-br))
1065
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-sd))
1066
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-cr));
1067
+
1068
+ &[data-show-border="true"] {
1069
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-cr));
1070
+
1071
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-se));
1072
+
1073
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-wh));
1074
+ }
1075
+
1076
+ .txt {
1077
+ display: flex;
1078
+
1079
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-cr));
1080
+
1081
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-fy));
1082
+
1083
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-se));
1084
+
1085
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-wt));
1086
+
1087
+ font-style: var(
1088
+ --_sf-hr-ft-se-ic,
1089
+ prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-se-ic)
1090
+ );
1091
+
1092
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-tt-an));
1093
+
1094
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-lr-sg));
1095
+
1096
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-le-ht));
1097
+
1098
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1099
+ }
1100
+
1101
+ .icon {
1102
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
1103
+ svg {
1104
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-se));
1105
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-se));
1106
+
1107
+ path {
1108
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-c1));
1109
+ }
1110
+ }
1111
+ }
1112
+ [data-element-style="Text"] {
1113
+ display: inline-block;
1114
+ width: 100%;
1115
+ }
1116
+
1117
+ .icon--hover {
1118
+ // position: absolute;
1119
+ // inset: 0;
1120
+ // opacity: 0;
1121
+ display: none;
1122
+ transition: opacity 0.2s ease;
1123
+ }
1124
+
1125
+ &:hover .icon--hover {
1126
+ // opacity: 1;
1127
+ display: flex;
1128
+ }
1129
+
1130
+ &:hover .icon--default {
1131
+ // opacity: 0;
1132
+ display: none;
1133
+ }
1134
+ }
1135
+ }
1136
+
1137
+ .slider_wrapper {
1138
+ display: flex;
1139
+ height: 60px;
1140
+ align-items: flex-start;
1141
+ gap: 0px;
1142
+ white-space: nowrap;
1143
+ width: 100%;
1144
+ flex-direction: column;
1145
+ height: auto;
1146
+ .slider_header_wrapper {
1147
+ display: flex;
1148
+ align-items: center;
1149
+ gap: 12px;
1150
+ justify-content: space-between;
1151
+ width: 100%;
1152
+ .slider_header_wrapper_left {
1153
+ display: flex;
1154
+ align-items: center;
1155
+ gap: 12px;
1156
+ .slider_heading {
1157
+ height: auto;
1158
+ }
1159
+
1160
+ .slider_heading {
1161
+ color: #475467;
1162
+ text-align: center;
1163
+ font-size: 14px;
1164
+ height: 60px;
1165
+ font-weight: 600;
1166
+ line-height: 20px;
1167
+ align-items: center;
1168
+ display: flex;
1169
+ }
1170
+ }
1171
+ .redeem_now_wrapper {
1172
+ .redeem_now_btn {
1173
+ display: flex;
1174
+ justify-content: center;
1175
+ align-items: center;
1176
+ gap: 8px;
1177
+ color: var(--_primary-400);
1178
+ font-size: 14px;
1179
+ font-weight: 600;
1180
+ line-height: 20px;
1181
+
1182
+ &:hover {
1183
+ color: #53389e;
1184
+ }
1185
+
1186
+ &:focus {
1187
+ color: #162578;
1188
+ }
1189
+
1190
+ &:disabled {
1191
+ color: #d0d5dd;
1192
+ }
1193
+ }
1194
+ }
1195
+ }
1196
+
1197
+ .allocations_slider_slide_wrapper {
1198
+ display: flex;
1199
+ align-items: center;
1200
+ gap: 12px;
1201
+ height: 60px;
1202
+ width: fit-content;
1203
+ margin-right: var(--_ctm-lt-sg-bn-is);
1204
+
1205
+ .allocations_left_info_wrapper {
1206
+ display: flex;
1207
+ flex-direction: column;
1208
+ align-items: flex-start;
1209
+
1210
+ .product_name {
1211
+ color: #101828;
1212
+ white-space: nowrap;
1213
+ font-size: 14px;
1214
+ font-weight: 700;
1215
+ line-height: 20px;
1216
+ }
1217
+
1218
+ .expiry_date {
1219
+ color: #70707b;
1220
+ font-size: 11px;
1221
+ font-weight: 400;
1222
+ line-height: 18px;
1223
+ white-space: nowrap;
1224
+ }
1225
+ }
1226
+
1227
+ .allocations_right_info_wrapper {
1228
+ display: flex;
1229
+ width: 48px;
1230
+ height: 36px;
1231
+ justify-content: center;
1232
+ align-items: center;
1233
+ gap: 10px;
1234
+
1235
+ .product_quantity {
1236
+ color: #475467;
1237
+ white-space: nowrap;
1238
+ font-size: 20px;
1239
+ font-weight: 600;
1240
+ line-height: 30px;
1241
+ }
1242
+ }
1243
+ }
1244
+ }
1245
+ .est__dropdown__main {
1246
+ position: relative;
1247
+ min-width: 150px;
1248
+
1249
+ label {
1250
+ font-size: 14px;
1251
+ color: var(--_gray-700);
1252
+ margin-bottom: 8px;
1253
+ display: block;
1254
+ }
1255
+
1256
+ .est__dropdown {
1257
+ position: relative;
1258
+ .est__dropdown__button {
1259
+ display: flex;
1260
+ align-items: center;
1261
+ width: 100%;
1262
+ border: 1px solid var(--_gray-200);
1263
+ border-radius: 6px;
1264
+
1265
+ .value__selected {
1266
+ width: 100%;
1267
+ border: none;
1268
+ background-color: transparent;
1269
+ }
1270
+ }
1271
+
1272
+ &.open .list {
1273
+ display: flex;
1274
+ padding: 4px;
1275
+ }
1276
+
1277
+ .list {
1278
+ display: none;
1279
+ flex-direction: column;
1280
+ border: 1px solid var(--_gray-200);
1281
+ border-radius: 6px;
1282
+ position: absolute;
1283
+ top: 100%;
1284
+ left: 0;
1285
+ width: 100%;
1286
+ background-color: #fff;
1287
+ border-radius: 4px;
1288
+ z-index: var(--_higher-zIndex);
1289
+ max-height: 200px;
1290
+ overflow-y: auto;
1291
+
1292
+ &.top {
1293
+ bottom: 100%;
1294
+ top: auto;
1295
+ }
1296
+
1297
+ .list__option {
1298
+ padding: 12px;
1299
+ cursor: pointer;
1300
+ text-align: left;
1301
+ &.selected {
1302
+ background-color: var(--_primary-25);
1303
+ color: var(--_primary-400);
1304
+ }
1305
+ &:hover {
1306
+ background-color: var(--_primary-25);
1307
+ color: var(--_primary-400);
1308
+ }
1309
+ }
1310
+ }
1311
+ }
1312
+ }
1313
+ .embla {
1314
+ width: 100%;
1315
+ height: 100%;
1316
+ position: relative;
1317
+ display: flex;
1318
+ flex-direction: column;
1319
+
1320
+ // overflow: hidden;
1321
+
1322
+ .embla__viewport {
1323
+ width: 100%;
1324
+ height: 100%;
1325
+ position: relative;
1326
+ display: flex;
1327
+ flex-direction: column;
1328
+
1329
+ overflow: hidden;
1330
+
1331
+ .embla__container {
1332
+ width: 100%;
1333
+ height: 100%;
1334
+ display: flex;
1335
+ grid-template-rows: 100%;
1336
+ // grid-template-columns: 100%;
1337
+ // grid-template-columns: repeat(
1338
+ // var(--_ctm-lt-is-pr-se),
1339
+ // calc(100% / var(--_ctm-lt-is-pr-se))
1340
+ // );
1341
+ // grid-auto-flow: column;
1342
+ gap: var(--_ctm-lt-sh-im-sg);
1343
+
1344
+ &[data-control-type="Bottom"][data-slider-control="Arrows"] {
1345
+ height: calc(100% - calc(var(--_ctm-dn-pn-as-aw-se) + 8px));
1346
+ }
1347
+ &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
1348
+ height: calc(100% - calc(var(--_ctm-dn-pn-le-le-ht) + 20px));
1349
+ }
1350
+ &[data-control-type="Bottom"][data-slider-control="Dots"] {
1351
+ height: calc(100% - calc(var(--_ctm-dn-pn-ds-dt-se) + 20px));
1352
+ }
1353
+
1354
+ .embla__slide {
1355
+ // width: 100%;
1356
+ height: 100%;
1357
+ }
1358
+ }
1359
+ }
1360
+
1361
+ .arrow-navigation {
1362
+ display: flex;
1363
+ position: absolute;
1364
+ top: 50%;
1365
+ left: 50%;
1366
+ width: 100%;
1367
+ justify-content: space-between;
1368
+ transform: translate(-50%, -50%);
1369
+ // padding-left: 20px;
1370
+ &[data-control-type="Side"] {
1371
+ .left-button,
1372
+ .right-button {
1373
+ background-color: transparent;
1374
+ }
1375
+ }
1376
+ &[data-background-shape="Round"] {
1377
+ .left-button,
1378
+ .right-button {
1379
+ background-color: #f2f5f5;
1380
+ box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
1381
+ }
1382
+ }
1383
+ &[data-control-type="Bottom-Overflow"] {
1384
+ transform: translateX(-50%);
1385
+ width: 100%;
1386
+ justify-content: center;
1387
+ gap: 12px;
1388
+ top: unset;
1389
+ bottom: 6px;
1390
+ }
1391
+ &[data-control-type="Bottom"] {
1392
+ transform: unset;
1393
+ position: static;
1394
+ width: 100%;
1395
+ justify-content: center;
1396
+ gap: 12px;
1397
+ margin-top: 10px;
1398
+ }
1399
+ .left-button {
1400
+ padding: 10px;
1401
+ border-radius: 50%;
1402
+ border: none;
1403
+ width: var(--_ctm-dn-pn-as-aw-se);
1404
+ height: var(--_ctm-dn-pn-as-aw-se);
1405
+ display: flex;
1406
+ align-items: center;
1407
+ justify-content: center;
1408
+ cursor: pointer;
1409
+ outline: none;
1410
+ margin-left: 12px;
1411
+ &:disabled {
1412
+ & svg {
1413
+ path {
1414
+ stroke: rgb(192, 192, 192);
1415
+ }
1416
+ }
1417
+ }
1418
+ }
1419
+ .right-button {
1420
+ border-radius: 50%;
1421
+ border: none;
1422
+ width: var(--_ctm-dn-pn-as-aw-se);
1423
+ height: var(--_ctm-dn-pn-as-aw-se);
1424
+ display: flex;
1425
+ align-items: center;
1426
+ justify-content: center;
1427
+ cursor: pointer;
1428
+ outline: none;
1429
+ margin-right: 12px;
1430
+ padding: 10px;
1431
+
1432
+ &:disabled {
1433
+ & svg {
1434
+ path {
1435
+ stroke: rgb(192, 192, 192);
1436
+ }
1437
+ }
1438
+ }
1439
+ }
1440
+ .icon {
1441
+ display: flex;
1442
+ svg {
1443
+ width: calc(var(--_ctm-dn-pn-as-aw-se) * 0.5);
1444
+ height: calc(var(--_ctm-dn-pn-as-aw-se) * 0.5);
1445
+ path {
1446
+ stroke: var(--_ctm-dn-pn-as-aw-cr, var(--_tst-dn-pn-as-aw-cr));
1447
+ }
1448
+ }
1449
+ }
1450
+ }
1451
+
1452
+ &[data-thumbnail-placement="top"] {
1453
+ flex-direction: column-reverse;
1454
+ }
1455
+ &[data-thumbnail-placement="bottom"] {
1456
+ flex-direction: column;
1457
+ }
1458
+ &[data-thumbnail-placement="left"] {
1459
+ flex-direction: row-reverse;
1460
+
1461
+ .embla__thumbs {
1462
+ width: var(--_ctm-lt-tl-se);
1463
+ height: 100%;
1464
+
1465
+ & .embla__thumbs__container {
1466
+ flex-direction: column;
1467
+ height: 100%;
1468
+ }
1469
+ }
1470
+ }
1471
+ &[data-thumbnail-placement="right"] {
1472
+ flex-direction: row;
1473
+ .embla__thumbs {
1474
+ width: var(--_ctm-lt-tl-se);
1475
+ height: 100%;
1476
+
1477
+ & .embla__thumbs__container {
1478
+ flex-direction: column;
1479
+ height: 100%;
1480
+ }
1481
+ }
1482
+ }
1483
+ &[data-control-type="Side"] {
1484
+ display: flex;
1485
+ align-self: center;
1486
+ gap: 16px;
1487
+ flex-direction: row;
1488
+ .left-button:disabled,
1489
+ .right-button:disabled {
1490
+ display: none;
1491
+ }
1492
+ }
1493
+ .embla__dots {
1494
+ display: flex;
1495
+ flex-wrap: wrap;
1496
+ justify-content: center;
1497
+ align-items: center;
1498
+ margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
1499
+ gap: 6px;
1500
+ margin-top: 16px;
1501
+
1502
+ &[data-control-type="Bottom-Overflow"] {
1503
+ position: absolute;
1504
+ bottom: 10px;
1505
+ left: 50%;
1506
+ transform: translateX(-50%);
1507
+ width: 75%;
1508
+ }
1509
+ .embla__dot {
1510
+ -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
1511
+ -webkit-appearance: none;
1512
+ appearance: none;
1513
+ background-color: var(--_ctm-dn-pn-ds-or-dt-cr, var(--_tst-dn-pn-ds-or-dt-cr));
1514
+ touch-action: manipulation;
1515
+ display: inline-flex;
1516
+ text-decoration: none;
1517
+ cursor: pointer;
1518
+ border: 0;
1519
+ padding: 0;
1520
+ margin: 0;
1521
+ // width: 0.6rem;
1522
+ // height: 0.6rem;
1523
+ width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
1524
+ height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
1525
+ display: flex;
1526
+ align-items: center;
1527
+ justify-content: center;
1528
+ border-radius: 50%;
1529
+ }
1530
+ .embla__dot:after {
1531
+ // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
1532
+ width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
1533
+ height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
1534
+ border-radius: 50%;
1535
+ display: flex;
1536
+ align-items: center;
1537
+ content: "";
1538
+ }
1539
+ .embla__dot--selected:after {
1540
+ box-shadow: inset 0 0 0 1px var(--text-body);
1541
+ background-color: var(--_ctm-dn-pn-ds-ct-dt-cr, var(--_tst-dn-pn-ds-ct-dt-cr));
1542
+ }
1543
+ &[data-slider-control="Pagination Line"] {
1544
+ .embla__dot {
1545
+ width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
1546
+ height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
1547
+ background-color: var(--_ctm-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr));
1548
+
1549
+ border-radius: 6px;
1550
+ }
1551
+ .embla__dot--selected:after {
1552
+ box-shadow: inset 0 0 0 1px var(--text-body);
1553
+ border-radius: 6px;
1554
+ width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
1555
+ height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
1556
+ // background-color: #fff;
1557
+ background-color: var(--_ctm-dn-pn-le-ct-le-cr, var(--_tst-dn-pn-le-ct-le-cr));
1558
+ }
1559
+ }
1560
+ }
1561
+
1562
+ .embla__thumbs {
1563
+ width: 100%;
1564
+ height: var(--_ctm-lt-tl-se);
1565
+ position: relative;
1566
+ display: grid;
1567
+ grid-template-columns: 1fr;
1568
+ overflow: hidden;
1569
+ // margin: 10px;
1570
+ padding: 10px;
1571
+
1572
+ .embla__thumbs__viewport {
1573
+ width: 100%;
1574
+ height: 100%;
1575
+ position: relative;
1576
+ display: flex;
1577
+ flex-direction: column;
1578
+
1579
+ overflow: hidden;
1580
+ }
1581
+ .embla__thumbs__container {
1582
+ display: flex;
1583
+ flex-direction: row;
1584
+ margin-left: calc(var(--thumbs-slide-spacing) * -1);
1585
+ gap: var(--_ctm-lt-tl-sg);
1586
+ width: 100%;
1587
+ // justify-content: center;
1588
+ // height: 200px;
1589
+
1590
+ .embla__thumbs__slide {
1591
+ min-width: var(--_ctm-lt-tl-se);
1592
+ max-width: var(--_ctm-lt-tl-se);
1593
+ height: var(--_ctm-lt-tl-se);
1594
+ & img {
1595
+ width: 100%;
1596
+ height: 100%;
1597
+ }
1598
+ }
1599
+ }
1600
+ }
1601
+ }
1602
+ }
1603
+ }