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

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 (211) hide show
  1. package/dist/add-existing-form.scss +13 -5
  2. package/dist/add-order.scss +141 -210
  3. package/dist/add-products-tab-details.scss +1121 -1920
  4. package/dist/add-products-tab-uom-details.scss +105 -0
  5. package/dist/add-products-tab.scss +682 -994
  6. package/dist/allocation-header-quota-details.scss +198 -327
  7. package/dist/allocationDetails.scss +1645 -2022
  8. package/dist/allocations-quota-details.scss +168 -261
  9. package/dist/allocations.scss +504 -715
  10. package/dist/amount-estimator.scss +414 -648
  11. package/dist/animation-control.scss +23 -23
  12. package/dist/badge.scss +55 -18
  13. package/dist/brand-basic-elements.scss +93 -124
  14. package/dist/brand.scss +28 -55
  15. package/dist/breadcrumbs.scss +372 -718
  16. package/dist/builder.js +1 -1
  17. package/dist/bulk-variant-picker.scss +1161 -1816
  18. package/dist/bundle copy.scss +235 -0
  19. package/dist/bundle.scss +2142 -2584
  20. package/dist/bundleDetails.scss +3808 -4802
  21. package/dist/button copy.scss +28 -0
  22. package/dist/button.scss +89 -102
  23. package/dist/buy-for-tab-container.scss +77 -106
  24. package/dist/buy-for-tab.scss +54 -0
  25. package/dist/buy-for-tabs-container-item.scss +80 -80
  26. package/dist/buyForHeaders.scss +1823 -2457
  27. package/dist/cart-details.scss +514 -718
  28. package/dist/cart-products-sidebar.scss +211 -211
  29. package/dist/cart-summary.scss +611 -1015
  30. package/dist/cart-wrapper.scss +85 -127
  31. package/dist/cart.scss +119 -211
  32. package/dist/cartAttributes.scss +377 -539
  33. package/dist/cartDropdownOverlay.scss +21 -0
  34. package/dist/cartGrouping.scss +89 -89
  35. package/dist/category-groups-element.scss +130 -96
  36. package/dist/category-groups-product-grid.scss +40 -79
  37. package/dist/category-groups-product-image.scss +457 -1306
  38. package/dist/category-groups-product-options.scss +224 -606
  39. package/dist/category-groups-product-price.scss +1366 -4199
  40. package/dist/category-groups-quota-details.scss +217 -382
  41. package/dist/category.scss +26 -50
  42. package/dist/categoryDetails.scss +61 -61
  43. package/dist/categoryWidget.scss +34 -34
  44. package/dist/checkbox-radio.scss +124 -124
  45. package/dist/checkout.scss +1915 -3309
  46. package/dist/common-element.scss +35 -35
  47. package/dist/confirm-modal.scss +22 -2
  48. package/dist/confirmationModal.scss +139 -139
  49. package/dist/container.scss +32 -54
  50. package/dist/countdown.scss +264 -371
  51. package/dist/coupon.scss +379 -600
  52. package/dist/custom-fonts.scss +100 -100
  53. package/dist/default-dropdown.scss +12 -1
  54. package/dist/embroider-preview-element.scss +94 -94
  55. package/dist/embroider-template-1-v2.scss +157 -172
  56. package/dist/embroider-template-1.scss +465 -482
  57. package/dist/embroidery.scss +37 -31
  58. package/dist/employee-bulk-order.scss +418 -142
  59. package/dist/emtpy-templates.scss +165 -165
  60. package/dist/faq.scss +239 -395
  61. package/dist/filter-results.scss +221 -323
  62. package/dist/filters.scss +843 -1406
  63. package/dist/flex-text-editor.scss +271 -271
  64. package/dist/functions.scss +36 -0
  65. package/dist/gallery-slider-temp.scss +428 -727
  66. package/dist/global-styles.scss +45 -6
  67. package/dist/grid.scss +25 -33
  68. package/dist/hotspot.scss +75 -115
  69. package/dist/icon-list.scss +33 -59
  70. package/dist/image-for-product.scss +21 -21
  71. package/dist/image-temp.scss +21 -20
  72. package/dist/item-stock.scss +15 -16
  73. package/dist/kitDetails.scss +2786 -4008
  74. package/dist/kits.scss +28 -19
  75. package/dist/language-selector.scss +241 -375
  76. package/dist/last-x-orders.scss +101 -163
  77. package/dist/layouter-item.scss +75 -103
  78. package/dist/layouter-pro-item.scss +89 -95
  79. package/dist/layouter-pro.scss +87 -92
  80. package/dist/layouter.scss +67 -117
  81. package/dist/light-box-v2.scss +89 -104
  82. package/dist/lightbox.scss +78 -78
  83. package/dist/line.scss +29 -70
  84. package/dist/loader.scss +37 -37
  85. package/dist/login.scss +316 -489
  86. package/dist/map.scss +233 -336
  87. package/dist/marchandiserSets.scss +95 -104
  88. package/dist/mega-menu-container.scss +96 -109
  89. package/dist/mega-menu.scss +627 -670
  90. package/dist/menu-item.scss +19 -19
  91. package/dist/menu-v2.scss +538 -528
  92. package/dist/menu.scss +12 -0
  93. package/dist/multi-select-dropdown.scss +27 -3
  94. package/dist/my-templates.scss +41 -9
  95. package/dist/myTemplates.scss +3 -0
  96. package/dist/option-bar.scss +229 -351
  97. package/dist/order-processing.scss +61 -61
  98. package/dist/order-status.scss +666 -1096
  99. package/dist/overflow-module.scss +62 -63
  100. package/dist/past-orders.scss +168 -149
  101. package/dist/payment-methods.scss +323 -289
  102. package/dist/pickup-locations.scss +568 -941
  103. package/dist/position-module.scss +98 -95
  104. package/dist/prefix-list.scss +97 -86
  105. package/dist/product-actions.scss +1262 -1620
  106. package/dist/product-basic-elements.scss +116 -169
  107. package/dist/product-customizations.scss +155 -149
  108. package/dist/product-highlights.scss +116 -145
  109. package/dist/product-image-allocation.scss +38 -0
  110. package/dist/product-image-bundles.scss +359 -638
  111. package/dist/product-image.scss +341 -676
  112. package/dist/product-inventory.scss +673 -1117
  113. package/dist/product-labels.scss +94 -101
  114. package/dist/product-options.scss +298 -438
  115. package/dist/product-price.scss +1325 -2182
  116. package/dist/product-promotions.scss +1388 -2374
  117. package/dist/product-sizechart.scss +523 -821
  118. package/dist/product.scss +28 -61
  119. package/dist/productDetails.scss +19 -38
  120. package/dist/profile.scss +242 -406
  121. package/dist/quantity-selector.scss +327 -502
  122. package/dist/quick-inventory-check.scss +101 -163
  123. package/dist/quick-links.scss +72 -133
  124. package/dist/quick-order-pad.scss +224 -206
  125. package/dist/quota-details.scss +163 -297
  126. package/dist/quotes.scss +727 -737
  127. package/dist/repeater copy.scss +24 -0
  128. package/dist/repeater-embla-controls.scss +34 -14
  129. package/dist/repeater-grid-toggle.scss +156 -166
  130. package/dist/repeater-item.scss +41 -64
  131. package/dist/repeater.scss +579 -669
  132. package/dist/request-for-quotes.scss +66 -16
  133. package/dist/responsive-behaviour.scss +31 -29
  134. package/dist/rfqs.scss +147 -181
  135. package/dist/scroll.scss +93 -167
  136. package/dist/search-results-heading.scss +36 -0
  137. package/dist/search.scss +186 -290
  138. package/dist/section.scss +27 -51
  139. package/dist/shareCartSideBar.scss +254 -254
  140. package/dist/shipping-estimator.scss +41 -41
  141. package/dist/shipping-payments.scss +246 -58
  142. package/dist/simple-list.scss +65 -123
  143. package/dist/social.scss +78 -131
  144. package/dist/sort.scss +89 -89
  145. package/dist/spotlight.scss +48 -0
  146. package/dist/stack.scss +23 -34
  147. package/dist/static-global.scss +44 -26
  148. package/dist/static-text.scss +52 -52
  149. package/dist/stockStatus.scss +14 -19
  150. package/dist/store-locations.scss +595 -933
  151. package/dist/sub-category.scss +74 -74
  152. package/dist/submit-quote.scss +275 -275
  153. package/dist/tab-container-item.scss +80 -80
  154. package/dist/tab-container.scss +81 -108
  155. package/dist/tab-v2.scss +277 -580
  156. package/dist/table-common.scss +218 -331
  157. package/dist/table.scss +273 -434
  158. package/dist/tabs.scss +440 -395
  159. package/dist/text-temp-v2.scss +12 -23
  160. package/dist/text-temp.scss +110 -109
  161. package/dist/theme-classes.scss +66 -13
  162. package/dist/toaster.scss +392 -350
  163. package/dist/toggle-button.scss +32 -32
  164. package/dist/transform-properties-module.scss +20 -20
  165. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +108 -0
  166. package/dist/types/builder/tools/element-edit/breadcrumbs.d.ts +6 -0
  167. package/dist/types/builder/tools/element-edit/bundle.d.ts +22 -0
  168. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +64 -0
  169. package/dist/types/builder/tools/element-edit/buttonInstance.d.ts +10 -0
  170. package/dist/types/builder/tools/element-edit/buyForWithTab.d.ts +84 -0
  171. package/dist/types/builder/tools/element-edit/cart.d.ts +6 -0
  172. package/dist/types/builder/tools/element-edit/cartAttributes.d.ts +60 -0
  173. package/dist/types/builder/tools/element-edit/cartDetails.d.ts +16 -0
  174. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +202 -0
  175. package/dist/types/builder/tools/element-edit/categoryGroups.d.ts +158 -0
  176. package/dist/types/builder/tools/element-edit/checkout.d.ts +172 -0
  177. package/dist/types/builder/tools/element-edit/common.d.ts +2 -0
  178. package/dist/types/builder/tools/element-edit/countdown.d.ts +44 -0
  179. package/dist/types/builder/tools/element-edit/coupon.d.ts +28 -0
  180. package/dist/types/builder/tools/element-edit/embroidery.d.ts +37 -0
  181. package/dist/types/builder/tools/element-edit/filterResults.d.ts +4 -0
  182. package/dist/types/builder/tools/element-edit/icon-list.d.ts +11 -0
  183. package/dist/types/builder/tools/element-edit/itemStock.d.ts +2 -0
  184. package/dist/types/builder/tools/element-edit/kitDetails.d.ts +66 -0
  185. package/dist/types/builder/tools/element-edit/kits.d.ts +4 -0
  186. package/dist/types/builder/tools/element-edit/map.d.ts +5 -1
  187. package/dist/types/builder/tools/element-edit/marchandiserSets.d.ts +2 -0
  188. package/dist/types/builder/tools/element-edit/orderStatus.d.ts +17 -0
  189. package/dist/types/builder/tools/element-edit/paymentMethods.d.ts +6 -0
  190. package/dist/types/builder/tools/element-edit/productCustomizations.d.ts +14 -0
  191. package/dist/types/builder/tools/element-edit/quickLinks.d.ts +26 -0
  192. package/dist/types/builder/tools/element-edit/scroll.d.ts +2 -11
  193. package/dist/types/builder/tools/element-edit/search.d.ts +1 -0
  194. package/dist/types/builder/tools/element-edit/searchResultsHeading.d.ts +6 -0
  195. package/dist/types/builder/tools/element-edit/shipping-payments.d.ts +72 -0
  196. package/dist/types/builder/tools/element-edit/shippingEstimator.d.ts +4 -0
  197. package/dist/types/builder/tools/element-edit/social.d.ts +2 -0
  198. package/dist/types/builder/tools/element-edit/spotlight.d.ts +2 -0
  199. package/dist/types/builder/tools/element-edit/table.d.ts +10 -0
  200. package/dist/types/builder/tools/element-edit/tabs.d.ts +6 -0
  201. package/dist/types/builder/tools/element-edit/typographyInstance.d.ts +110 -0
  202. package/dist/types/builder/tools/element-edit/userElements.d.ts +50 -11
  203. package/dist/types/builder/tools/element-edit/variantPicker.d.ts +4 -0
  204. package/dist/types/builder/tools/element-edit/video.d.ts +22 -0
  205. package/dist/uom-selector.scss +499 -841
  206. package/dist/user-elements.scss +653 -774
  207. package/dist/variant-picker.scss +1298 -2358
  208. package/dist/video.scss +147 -325
  209. package/dist/volume-pricing.scss +545 -849
  210. package/dist/wishlist-overlay.scss +48 -48
  211. package/package.json +131 -131
package/dist/allocations.scss CHANGED
@@ -4,21 +4,15 @@
4
4
 
5
5
  $resizerId: "[data-cms-tool='cms-element-resizer']";
6
6
  $resizeActive: '[data-cms-element-resizer="true"]';
7
+
7
8
  [data-div-type="element"] {
8
9
  &[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
- );
10
+ width: var(--_sf-el-wh-st-mx,
11
+ calc(1% * var(--_ctm-mob-ele-nw-wh-vl,
12
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))))));
19
13
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
20
14
 
21
- & > div {
15
+ &>div {
22
16
  &.wrapper {
23
17
  width: 100%;
24
18
  // min-width: 400px;
@@ -37,61 +31,43 @@ $resizeActive: '[data-cms-element-resizer="true"]';
37
31
  }
38
32
 
39
33
  .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
- );
34
+ background-color: var(--_ctm-mob-dn-wt-se-bd-cr,
35
+ var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr)));
44
36
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
45
37
  display: flex;
46
38
  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
- );
39
+ --_sf-gp: var(--_ctm-mob-lt-im-sg,
40
+ var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px)));
51
41
  --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
52
42
  row-gap: var(--_sf-gp);
53
43
  width: 100%;
54
44
  // 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
- );
45
+ border-color: var(--_ctm-mob-dn-wt-se-br-cr,
46
+ var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr)));
47
+ border-style: var(--_ctm-mob-dn-wt-se-br-se,
48
+ var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se)));
49
+ border-width: var(--_ctm-mob-dn-wt-se-br-wh,
50
+ var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh)));
51
+ border-radius: var(--_ctm-mob-dn-wt-se-br-rs,
52
+ var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs)));
53
+ box-shadow: var(--_show-shadow,
54
+ var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae))) var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br))) var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd))) var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr))));
78
55
 
79
56
  &[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));
57
+ --_sf-dvdr: var(--_ctm-mob-dn-dr-dr-wh,
58
+ var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh, 1px))) var(--_ctm-mob-dn-dr-br-se, var(--_ctm-tab-dn-dr-br-se, var(--_ctm-dn-dr-br-se, solid))) var(--_ctm-dn-dr-br-cr, var(--_tst-dn-dr-bd-cr));
86
59
  --_sf-dvdr-gap: var(--_sf-gp);
87
60
  }
61
+
88
62
  &[data-icon-position="Left"] {
89
63
  --_sf-fd: row-reverse;
90
64
  --_sf-jc: flex-end;
91
65
  }
66
+
92
67
  &[data-show-icon="false"] {
93
68
  --_sf-show-icon-ff: none;
94
69
  }
70
+
95
71
  &[data-divider-show="true"] {
96
72
  // .accordion-item:not(:last-child) {
97
73
  // border-bottom: var(
@@ -107,11 +83,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
107
83
  display: flex;
108
84
  width: 100%;
109
85
  margin-top: 10px;
86
+
110
87
  &: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
- );
88
+ --_sf-hr-bn-at: var(--_ctm-mob-dn-ld-me-bn-hr-se-bn-at,
89
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-bn-at, var(--_ctm-dn-ld-me-bn-hr-se-bn-at)));
115
90
  }
116
91
 
117
92
  justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-bn-at));
@@ -121,133 +96,94 @@ $resizeActive: '[data-cms-element-resizer="true"]';
121
96
  &[data-show-shadow="false"] {
122
97
  --_show-shadow: none;
123
98
  }
99
+
124
100
  &[data-icon-position="left"] {
125
101
  --_sf-fd-bn: row;
126
102
  }
103
+
127
104
  &[data-icon-position="right"] {
128
105
  --_sf-fd-bn: row-reverse;
129
106
  }
107
+
130
108
  &[data-icon-position="center"] {
131
109
  --_sf-fd-bn: row;
132
110
  }
133
111
 
134
112
  &: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
- );
113
+ --_sf-hr-bd-cr: var(--_ctm-mob-dn-rm-bn-hr-se-bd-cr,
114
+ var(--_ctm-tab-dn-rm-bn-hr-se-bd-cr, var(--_ctm-dn-rm-bn-hr-se-bd-cr)));
115
+ --_sf-hr-br-cr: var(--_ctm-mob-dn-rm-bn-hr-se-br-cr,
116
+ var(--_ctm-tab-dn-rm-bn-hr-se-br-cr, var(--_ctm-dn-rm-bn-hr-se-br-cr)));
117
+ --_sf-hr-br-se: var(--_ctm-mob-dn-rm-bn-hr-se-br-se,
118
+ var(--_ctm-tab-dn-rm-bn-hr-se-br-se, var(--_ctm-dn-rm-bn-hr-se-br-se)));
119
+ --_sf-hr-br-wh: var(--_ctm-mob-dn-rm-bn-hr-se-br-wh,
120
+ var(--_ctm-tab-dn-rm-bn-hr-se-br-wh, var(--_ctm-dn-rm-bn-hr-se-br-wh)));
121
+ --_sf-hr-br-rs: var(--_ctm-mob-dn-rm-bn-hr-se-br-rs,
122
+ var(--_ctm-tab-dn-rm-bn-hr-se-br-rs, var(--_ctm-dn-rm-bn-hr-se-br-rs)));
123
+ --_sf-hr-at: var(--_ctm-mob-dn-rm-bn-hr-se-at,
124
+ var(--_ctm-tab-dn-rm-bn-hr-se-at, var(--_ctm-dn-rm-bn-hr-se-at)));
125
+ --_sf-hr-gp: var(--_ctm-mob-dn-rm-bn-hr-se-gp,
126
+ var(--_ctm-tab-dn-rm-bn-hr-se-gp, var(--_ctm-dn-rm-bn-hr-se-gp)));
163
127
 
164
128
  // 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
- );
129
+ --_sf-hr-sw-ae: var(--_ctm-mob-dn-rm-bn-hr-se-sw-ae,
130
+ var(--_ctm-tab-dn-rm-bn-hr-se-sw-ae, var(--_ctm-dn-rm-bn-hr-se-sw-ae)));
131
+ --_sf-hr-sw-br: var(--_ctm-mob-dn-rm-bn-hr-se-sw-br,
132
+ var(--_ctm-tab-dn-rm-bn-hr-se-sw-br, var(--_ctm-dn-rm-bn-hr-se-sw-br)));
133
+ --_sf-hr-sw-hr: var(--_ctm-mob-dn-rm-bn-hr-se-sw-hr,
134
+ var(--_ctm-tab-dn-rm-bn-hr-se-sw-hr, var(--_ctm-dn-rm-bn-hr-se-sw-hr)));
135
+ --_sf-hr-sw-cr: var(--_ctm-mob-dn-rm-bn-hr-se-sw-cr,
136
+ var(--_ctm-tab-dn-rm-bn-hr-se-sw-cr, var(--_ctm-dn-rm-bn-hr-se-sw-cr)));
181
137
 
182
138
  // for font
183
139
 
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
- );
140
+ --_sf-hr-cr: var(--_ctm-mob-dn-rm-bn-hr-se-cr,
141
+ var(--_ctm-tab-dn-rm-bn-hr-se-cr, var(--_ctm-dn-rm-bn-hr-se-cr)));
142
+ --_sf-hr-ft-fy: var(--_ctm-mob-dn-rm-bn-hr-se-ft-fy,
143
+ var(--_ctm-tab-dn-rm-bn-hr-se-ft-fy, var(--_ctm-dn-rm-bn-hr-se-ft-fy)));
144
+ --_sf-hr-tt-tm: var(--_ctm-mob-dn-rm-bn-hr-se-tt-tm,
145
+ var(--_ctm-tab-dn-rm-bn-hr-se-tt-tm, var(--_ctm-dn-rm-bn-hr-se-tt-tm)));
146
+ --_sf-hr-wd-wp: var(--_ctm-mob-dn-rm-bn-hr-se-wd-wp,
147
+ var(--_ctm-tab-dn-rm-bn-hr-se-wd-wp, var(--_ctm-dn-rm-bn-hr-se-wd-wp)));
148
+ --_sf-hr-wd-bk: var(--_ctm-mob-dn-rm-bn-hr-se-wd-bk,
149
+ var(--_ctm-tab-dn-rm-bn-hr-se-wd-bk, var(--_ctm-dn-rm-bn-hr-se-wd-bk)));
150
+ --_sf-hr-ft-se: var(--_ctm-mob-dn-rm-bn-hr-se-ft-se,
151
+ var(--_ctm-tab-dn-rm-bn-hr-se-ft-se, var(--_ctm-dn-rm-bn-hr-se-ft-se)));
152
+ --_sf-hr-ft-wt: var(--_ctm-mob-dn-rm-bn-hr-se-ft-wt,
153
+ var(--_ctm-tab-dn-rm-bn-hr-se-ft-wt, var(--_ctm-dn-rm-bn-hr-se-ft-wt)));
154
+ --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-rm-bn-hr-se-ft-se-ic,
155
+ var(--_ctm-tab-dn-rm-bn-hr-se-ft-se-ic, var(--_ctm-dn-rm-bn-hr-se-ft-se-ic)));
156
+ --_sf-hr-tt-an: var(--_ctm-mob-dn-rm-bn-hr-se-tt-an,
157
+ var(--_ctm-tab-dn-rm-bn-hr-se-tt-an, var(--_ctm-dn-rm-bn-hr-se-tt-an)));
158
+ --_sf-hr-lr-sg: var(--_ctm-mob-dn-rm-bn-hr-se-lr-sg,
159
+ var(--_ctm-tab-dn-rm-bn-hr-se-lr-sg, var(--_ctm-dn-rm-bn-hr-se-lr-sg)));
160
+ --_sf-hr-le-ht: var(--_ctm-mob-dn-rm-bn-hr-se-le-ht,
161
+ var(--_ctm-tab-dn-rm-bn-hr-se-le-ht, var(--_ctm-dn-rm-bn-hr-se-le-ht)));
162
+
163
+ --_sf-hr-in-se: var(--_ctm-mob-dn-rm-bn-hr-se-in-se,
164
+ var(--_ctm-tab-dn-rm-bn-hr-se-in-se, var(--_ctm-dn-rm-bn-hr-se-in-se)));
165
+ --_sf-hr-in-se: var(--_ctm-mob-dn-rm-bn-hr-se-in-se,
166
+ var(--_ctm-tab-dn-rm-bn-hr-se-in-se, var(--_ctm-dn-rm-bn-hr-se-in-se)));
167
+ --_sf-hr-in-c1: var(--_ctm-mob-dn-rm-bn-hr-se-in-c1,
168
+ var(--_ctm-tab-dn-rm-bn-hr-se-in-c1, var(--_ctm-dn-rm-bn-hr-se-in-c1)));
169
+ --_sf-hr-ue: var(--_ctm-mob-dn-rm-bn-hr-se-ue,
170
+ var(--_ctm-tab-dn-rm-bn-hr-se-ue, var(--_ctm-dn-rm-bn-hr-se-ue)));
233
171
 
234
172
  // 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
- );
173
+ --_sf-hr-pg: var(--_ctm-mob-dn-rm-bn-hr-pg,
174
+ var(--_ctm-tab-dn-rm-bn-hr-pg, var(--_ctm-dn-rm-bn-hr-pg)));
175
+ --_sf-hr-wh: var(--_ctm-mob-dn-rm-bn-hr-wh,
176
+ var(--_ctm-tab-dn-rm-bn-hr-wh, var(--_ctm-dn-rm-bn-hr-wh)));
243
177
 
244
178
  &[data-hover-show-shadow="false"] {
245
179
  --_hover-show-shadow: none;
246
180
  }
181
+
247
182
  &[data-hover-show-icon="false"] {
248
183
  --_hover-show-icon: none;
249
184
  }
250
185
  }
186
+
251
187
  background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-bd-cr));
252
188
 
253
189
  padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-pg));
@@ -261,10 +197,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
261
197
 
262
198
  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-br-rs));
263
199
 
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));
200
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-cr));
268
201
 
269
202
  &[data-show-border="true"] {
270
203
  border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-br-cr));
@@ -280,6 +213,14 @@ $resizeActive: '[data-cms-element-resizer="true"]';
280
213
  color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-cr));
281
214
 
282
215
  font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-ft-fy));
216
+ text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-tt-tm));
217
+ word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-wd-wp));
218
+ word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-wd-bk));
219
+
220
+ &.flex__overflow {
221
+ white-space: normal;
222
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
223
+ }
283
224
 
284
225
  font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-ft-se));
285
226
 
@@ -298,6 +239,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
298
239
 
299
240
  .icon {
300
241
  display: var(--_hover-show-icon, var(--_show-icon, flex));
242
+
301
243
  svg {
302
244
  width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-in-se));
303
245
  height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-in-se));
@@ -309,6 +251,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
309
251
  }
310
252
  }
311
253
  }
254
+
312
255
  [data-element-style="Text"] {
313
256
  display: inline-block;
314
257
  width: 100%;
@@ -340,19 +283,23 @@ $resizeActive: '[data-cms-element-resizer="true"]';
340
283
  align-self: stretch;
341
284
  align-items: center;
342
285
  width: 100%;
286
+
343
287
  .table__wrapper,
344
288
  .table__container {
345
289
  // overflow: visible !important;
346
290
  overflow-x: auto;
347
291
  scrollbar-width: none;
348
292
  }
293
+
349
294
  thead th {
350
295
  overflow: visible;
351
296
  position: relative;
352
297
  }
298
+
353
299
  .est__dropdown__main {
354
300
  z-index: var(--_higher-zIndex, 10);
355
301
  }
302
+
356
303
  .table__common_parent {
357
304
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
358
305
  width: 100%;
@@ -370,6 +317,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
370
317
  cursor: pointer;
371
318
  --_sf-hr-fc: var(--_ctm-dn-pn-hr-se-cr, var(--_tst-dn-pn-hr-se-cr));
372
319
  --_sf-hr-ff: var(--_ctm-dn-pn-hr-se-ft-fy, var(--_tst-dn-pn-hr-se-ft-fy));
320
+ --_sf-hr-tt-tm: var(--_ctm-dn-pn-hr-se-tt-tm, var(--_tst-dn-pn-hr-se-tt-tm));
321
+ --_sf-hr-wd-wp: var(--_ctm-dn-pn-hr-se-wd-wp, var(--_tst-dn-pn-hr-se-wd-wp));
322
+ --_sf-hr-wd-bk: var(--_ctm-dn-pn-hr-se-wd-bk, var(--_tst-dn-pn-hr-se-wd-bk));
373
323
  --_sf-hr-fs: var(--_ctm-dn-pn-hr-se-ft-se, var(--_tst-dn-pn-hr-se-ft-se));
374
324
  --_sf-hr-td: var(--_ctm-dn-pn-hr-se-tt-ue, var(--_tst-dn-hr-tt-ue));
375
325
  --_sf-hr-fw: var(--_ctm-dn-pn-hr-se-ft-wt, var(--_tst-dn-pn-hr-se-ft-wt));
@@ -378,75 +328,61 @@ $resizeActive: '[data-cms-element-resizer="true"]';
378
328
  --_sf-hr-ls: var(--_ctm-dn-pn-hr-se-lr-sg, var(--_tst-dn-pn-hr-se-lr-sg));
379
329
  --_sf-hr-lh: var(--_ctm-dn-pn-hr-se-le-ht, var(--_tst-dn-pn-hr-se-le-ht));
380
330
  }
331
+
381
332
  &[data-widget-shadow="false"] {
382
333
  .table__wrapper {
383
334
  --_show-shadow: none;
384
335
  }
385
336
  }
337
+
386
338
  &[data-widget-border="true"] {
387
339
  .table__wrapper {
388
- border-color: var(
389
- --_ctm-mob-dn-te-wt-br-cr,
390
- var(--_ctm-tab-dn-te-wt-br-cr, var(--_ctm-dn-te-wt-br-cr))
391
- );
392
- border-style: var(
393
- --_ctm-mob-dn-te-wt-br-se,
394
- var(--_ctm-tab-dn-te-wt-br-se, var(--_ctm-dn-te-wt-br-se))
395
- );
396
- border-width: var(
397
- --_ctm-mob-dn-te-wt-br-wh,
398
- var(--_ctm-tab-dn-te-wt-br-wh, var(--_ctm-dn-te-wt-br-wh))
399
- );
340
+ border-color: var(--_ctm-mob-dn-te-wt-br-cr,
341
+ var(--_ctm-tab-dn-te-wt-br-cr, var(--_ctm-dn-te-wt-br-cr)));
342
+ border-style: var(--_ctm-mob-dn-te-wt-br-se,
343
+ var(--_ctm-tab-dn-te-wt-br-se, var(--_ctm-dn-te-wt-br-se)));
344
+ border-width: var(--_ctm-mob-dn-te-wt-br-wh,
345
+ var(--_ctm-tab-dn-te-wt-br-wh, var(--_ctm-dn-te-wt-br-wh)));
400
346
  }
401
347
  }
348
+
402
349
  &[data-table-shadow="false"] {
403
350
  .table__container {
404
351
  --_show-table-shadow: none;
405
352
  }
406
353
  }
354
+
407
355
  &[data-table-border="true"] {
408
356
  .table__container {
409
- border-color: var(
410
- --_ctm-mob-dn-te-br-cr,
411
- var(--_ctm-tab-dn-te-br-cr, var(--_ctm-dn-te-br-cr))
412
- );
413
- border-style: var(
414
- --_ctm-mob-dn-te-br-se,
415
- var(--_ctm-tab-dn-te-br-se, var(--_ctm-dn-te-br-se))
416
- );
417
- border-width: var(
418
- --_ctm-mob-dn-te-br-wh,
419
- var(--_ctm-tab-dn-te-br-wh, var(--_ctm-dn-te-br-wh))
420
- );
357
+ border-color: var(--_ctm-mob-dn-te-br-cr,
358
+ var(--_ctm-tab-dn-te-br-cr, var(--_ctm-dn-te-br-cr)));
359
+ border-style: var(--_ctm-mob-dn-te-br-se,
360
+ var(--_ctm-tab-dn-te-br-se, var(--_ctm-dn-te-br-se)));
361
+ border-width: var(--_ctm-mob-dn-te-br-wh,
362
+ var(--_ctm-tab-dn-te-br-wh, var(--_ctm-dn-te-br-wh)));
421
363
  }
422
364
  }
423
365
 
424
366
  &[data-header-divider="true"] {
425
367
  thead tr th {
426
- border-bottom: 1px solid
427
- var(
428
- --_ctm-mob-dn-rw-ad-hr-ds-hr-dr,
429
- var(--_ctm-tab-dn-rw-ad-hr-ds-hr-dr, var(--_ctm-dn-rw-ad-hr-ds-hr-dr))
430
- );
368
+ border-bottom: 1px solid var(--_ctm-mob-dn-rw-ad-hr-ds-hr-dr,
369
+ var(--_ctm-tab-dn-rw-ad-hr-ds-hr-dr, var(--_ctm-dn-rw-ad-hr-ds-hr-dr)));
431
370
  }
432
371
  }
372
+
433
373
  &[data-row-divider="true"] {
434
374
  tbody tr {
435
- border-bottom: 1px solid
436
- var(
437
- --_ctm-mob-dn-rw-ad-hr-ds-rw-dr,
438
- var(--_ctm-tab-dn-rw-ad-hr-ds-rw-dr, var(--_ctm-dn-rw-ad-hr-ds-rw-dr))
439
- );
375
+ border-bottom: 1px solid var(--_ctm-mob-dn-rw-ad-hr-ds-rw-dr,
376
+ var(--_ctm-tab-dn-rw-ad-hr-ds-rw-dr, var(--_ctm-dn-rw-ad-hr-ds-rw-dr)));
440
377
  }
441
378
  }
379
+
442
380
  &[data-column-divider="true"] {
381
+
443
382
  tbody tr td,
444
383
  thead tr th {
445
- border-right: 1px solid
446
- var(
447
- --_ctm-mob-dn-rw-ad-hr-ds-cn-dr,
448
- var(--_ctm-tab-dn-rw-ad-hr-ds-cn-dr, var(--_ctm-dn-rw-ad-hr-ds-cn-dr))
449
- );
384
+ border-right: 1px solid var(--_ctm-mob-dn-rw-ad-hr-ds-cn-dr,
385
+ var(--_ctm-tab-dn-rw-ad-hr-ds-cn-dr, var(--_ctm-dn-rw-ad-hr-ds-cn-dr)));
450
386
  }
451
387
 
452
388
  tbody tr td:last-child,
@@ -454,19 +390,16 @@ $resizeActive: '[data-cms-element-resizer="true"]';
454
390
  border-right: none;
455
391
  }
456
392
  }
393
+
457
394
  &[data-show-more-rows="onScroll"] {
458
395
  .table__container {
459
396
  overflow-y: scroll;
460
- height: var(
461
- --_ctm-mob-lt-te-ht,
462
- var(--_ctm-tab-lt-te-ht, var(--_ctm-lt-te-ht))
463
- ) !important;
397
+ height: var(--_ctm-mob-lt-te-ht,
398
+ var(--_ctm-tab-lt-te-ht, var(--_ctm-lt-te-ht))) !important;
464
399
 
465
400
  &::-webkit-scrollbar {
466
- width: var(
467
- --_ctm-mob-dn-sl-br-sl-br-wh,
468
- var(--_ctm-tab-dn-sl-br-sl-br-wh, var(--_ctm-dn-sl-br-sl-br-wh))
469
- );
401
+ width: var(--_ctm-mob-dn-sl-br-sl-br-wh,
402
+ var(--_ctm-tab-dn-sl-br-sl-br-wh, var(--_ctm-dn-sl-br-sl-br-wh)));
470
403
  }
471
404
 
472
405
  &::-webkit-scrollbar-track {
@@ -474,10 +407,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
474
407
  }
475
408
 
476
409
  &::-webkit-scrollbar-thumb {
477
- background-color: var(
478
- --_ctm-mob-dn-sl-br-sl-br-cr,
479
- var(--_ctm-tab-dn-sl-br-sl-br-cr, var(--_ctm-dn-sl-br-sl-br-cr))
480
- );
410
+ background-color: var(--_ctm-mob-dn-sl-br-sl-br-cr,
411
+ var(--_ctm-tab-dn-sl-br-sl-br-cr, var(--_ctm-dn-sl-br-sl-br-cr)));
481
412
  }
482
413
 
483
414
  // // Scrollbar thumb when hovered
@@ -496,65 +427,38 @@ $resizeActive: '[data-cms-element-resizer="true"]';
496
427
  background-color: prepareMediaVariable(--_ctm-dn-rw-ae-cr-bd-cr);
497
428
  }
498
429
  }
430
+
499
431
  .table__wrapper {
500
432
  flex: 1 1 auto;
501
433
  min-width: 0;
502
434
  overflow-x: auto;
503
- padding: var(
504
- --_ctm-mob-lt-pg,
505
- var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg, var(--_tst-lt-pg)))
506
- );
507
-
508
- background-color: var(
509
- --_ctm-mob-dn-te-wt-bd-cr,
510
- var(--_ctm-tab-dn-te-wt-bd-cr, var(--_ctm-dn-te-wt-bd-cr, var(--_tst-dn-te-wt-bd-cr)))
511
- );
512
-
513
- border-radius: var(
514
- --_ctm-mob-dn-te-wt-br-rs,
515
- var(--_ctm-tab-dn-te-wt-br-rs, var(--_ctm-dn-te-wt-br-rs, var(--_tst-dn-te-wt-br-rs)))
516
- );
517
-
518
- box-shadow: var(
519
- --_show-shadow,
520
- var(
521
- --_ctm-mob-dn-te-wt-sw-ae,
522
- var(--_ctm-tab-dn-te-wt-sw-ae, var(--_ctm-dn-te-wt-sw-ae))
523
- )
524
- var(
525
- --_ctm-mob-dn-te-wt-sw-br,
526
- var(--_ctm-tab-dn-te-wt-sw-br, var(--_ctm-dn-te-wt-sw-br))
527
- )
528
- var(
529
- --_ctm-mob-dn-te-wt-sw-sd,
530
- var(--_ctm-tab-dn-te-wt-sw-sd, var(--_ctm-dn-te-wt-sw-sd))
531
- )
532
- var(
533
- --_ctm-mob-dn-te-wt-sw-cr,
534
- var(--_ctm-tab-dn-te-wt-sw-cr, var(--_ctm-dn-te-wt-sw-cr))
535
- )
536
- );
435
+ padding: var(--_ctm-mob-lt-pg,
436
+ var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg, var(--_tst-lt-pg))));
437
+
438
+ background-color: var(--_ctm-mob-dn-te-wt-bd-cr,
439
+ var(--_ctm-tab-dn-te-wt-bd-cr, var(--_ctm-dn-te-wt-bd-cr, var(--_tst-dn-te-wt-bd-cr))));
440
+
441
+ border-radius: var(--_ctm-mob-dn-te-wt-br-rs,
442
+ var(--_ctm-tab-dn-te-wt-br-rs, var(--_ctm-dn-te-wt-br-rs, var(--_tst-dn-te-wt-br-rs))));
443
+
444
+ box-shadow: var(--_show-shadow,
445
+ var(--_ctm-mob-dn-te-wt-sw-ae,
446
+ var(--_ctm-tab-dn-te-wt-sw-ae, var(--_ctm-dn-te-wt-sw-ae))) var(--_ctm-mob-dn-te-wt-sw-br,
447
+ var(--_ctm-tab-dn-te-wt-sw-br, var(--_ctm-dn-te-wt-sw-br))) var(--_ctm-mob-dn-te-wt-sw-sd,
448
+ var(--_ctm-tab-dn-te-wt-sw-sd, var(--_ctm-dn-te-wt-sw-sd))) var(--_ctm-mob-dn-te-wt-sw-cr,
449
+ var(--_ctm-tab-dn-te-wt-sw-cr, var(--_ctm-dn-te-wt-sw-cr))));
537
450
 
538
451
  width: 100%;
539
452
 
540
453
  .table__container {
541
- background-color: var(
542
- --_ctm-mob-dn-te-bd-cr,
543
- var(--_ctm-tab-dn-te-bd-cr, var(--_ctm-dn-te-bd-cr))
544
- );
545
-
546
- border-radius: var(
547
- --_ctm-mob-dn-te-br-rs,
548
- var(--_ctm-tab-dn-te-br-rs, var(--_ctm-dn-te-br-rs))
549
- );
550
-
551
- box-shadow: var(
552
- --_show-table-shadow,
553
- var(--_ctm-mob-dn-te-sw-ae, var(--_ctm-tab-dn-te-sw-ae, var(--_ctm-dn-te-sw-ae)))
554
- var(--_ctm-mob-dn-te-sw-br, var(--_ctm-tab-dn-te-sw-br, var(--_ctm-dn-te-sw-br)))
555
- var(--_ctm-mob-dn-te-sw-sd, var(--_ctm-tab-dn-te-sw-sd, var(--_ctm-dn-te-sw-sd)))
556
- var(--_ctm-mob-dn-te-sw-cr, var(--_ctm-tab-dn-te-sw-cr, var(--_ctm-dn-te-sw-cr)))
557
- );
454
+ background-color: var(--_ctm-mob-dn-te-bd-cr,
455
+ var(--_ctm-tab-dn-te-bd-cr, var(--_ctm-dn-te-bd-cr)));
456
+
457
+ border-radius: var(--_ctm-mob-dn-te-br-rs,
458
+ var(--_ctm-tab-dn-te-br-rs, var(--_ctm-dn-te-br-rs)));
459
+
460
+ box-shadow: var(--_show-table-shadow,
461
+ var(--_ctm-mob-dn-te-sw-ae, var(--_ctm-tab-dn-te-sw-ae, var(--_ctm-dn-te-sw-ae))) var(--_ctm-mob-dn-te-sw-br, var(--_ctm-tab-dn-te-sw-br, var(--_ctm-dn-te-sw-br))) var(--_ctm-mob-dn-te-sw-sd, var(--_ctm-tab-dn-te-sw-sd, var(--_ctm-dn-te-sw-sd))) var(--_ctm-mob-dn-te-sw-cr, var(--_ctm-tab-dn-te-sw-cr, var(--_ctm-dn-te-sw-cr))));
558
462
  }
559
463
 
560
464
  h3 {
@@ -562,6 +466,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
562
466
  width: 100%;
563
467
  margin-bottom: 10px;
564
468
  }
469
+
565
470
  table {
566
471
  border-collapse: collapse;
567
472
  // border: none;
@@ -571,69 +476,49 @@ $resizeActive: '[data-cms-element-resizer="true"]';
571
476
  width: max-content;
572
477
  min-width: 100%;
573
478
  table-layout: auto;
479
+
574
480
  th,
575
481
  td {
576
482
  border: none;
577
483
  }
484
+
578
485
  thead {
579
- background-color: var(
580
- --_ctm-mob-dn-te-hr-bd-cr,
581
- var(--_ctm-tab-dn-te-hr-bd-cr, var(--_ctm-dn-te-hr-bd-cr))
582
- );
486
+ background-color: var(--_ctm-mob-dn-te-hr-bd-cr,
487
+ var(--_ctm-tab-dn-te-hr-bd-cr, var(--_ctm-dn-te-hr-bd-cr)));
583
488
 
584
489
  .thead__row__divider {
585
490
  height: var(--_ctm-mob-lt-hr-ht, var(--_ctm-tab-lt-hr-ht, var(--_ctm-lt-hr-ht)));
586
491
 
587
492
  .th__col__divider {
588
- padding: var(
589
- --_ctm-mob-lt-hr-cl-pg,
590
- var(--_ctm-tab-lt-hr-cl-pg, var(--_ctm-lt-hr-cl-pg))
591
- );
592
-
593
- color: var(
594
- --_ctm-mob-dn-hr-tt-cr,
595
- var(--_ctm-tab-dn-hr-tt-cr, var(--_ctm-dn-hr-tt-cr))
596
- );
597
-
598
- font-family: var(
599
- --_ctm-mob-dn-hr-tt-ft-fy,
600
- var(--_ctm-tab-dn-hr-tt-ft-fy, var(--_ctm-dn-hr-tt-ft-fy))
601
- );
602
-
603
- font-size: var(
604
- --_ctm-mob-dn-hr-tt-ft-se,
605
- var(--_ctm-tab-dn-hr-tt-ft-se, var(--_ctm-dn-hr-tt-ft-se))
606
- );
607
-
608
- font-weight: var(
609
- --_ctm-mob-dn-hr-tt-ft-wt,
610
- var(--_ctm-tab-dn-hr-tt-ft-wt, var(--_ctm-dn-hr-tt-ft-wt))
611
- );
612
-
613
- text-decoration: var(
614
- --_ctm-mob-dn-hr-tt-ue,
615
- var(--_ctm-tab-dn-hr-tt-ue, var(--_ctm-dn-hr-tt-ue))
616
- );
617
-
618
- font-style: var(
619
- --_ctm-mob-dn-hr-tt-ft-se-ic,
620
- var(--_ctm-tab-dn-hr-tt-ft-se-ic, var(--_ctm-dn-hr-tt-ft-se-ic))
621
- );
622
-
623
- text-align: var(
624
- --_ctm-mob-dn-hr-tt-tt-an,
625
- var(--_ctm-tab-dn-hr-tt-tt-an, var(--_ctm-dn-hr-tt-tt-an))
626
- );
627
-
628
- letter-spacing: var(
629
- --_ctm-mob-dn-hr-tt-lr-sg,
630
- var(--_ctm-tab-dn-hr-tt-lr-sg, var(--_ctm-dn-hr-tt-lr-sg))
631
- );
632
-
633
- line-height: var(
634
- --_ctm-mob-dn-hr-tt-le-ht,
635
- var(--_ctm-tab-dn-hr-tt-le-ht, var(--_ctm-dn-hr-tt-le-ht))
636
- );
493
+ padding: var(--_ctm-mob-lt-hr-cl-pg,
494
+ var(--_ctm-tab-lt-hr-cl-pg, var(--_ctm-lt-hr-cl-pg)));
495
+
496
+ color: var(--_ctm-mob-dn-hr-tt-cr,
497
+ var(--_ctm-tab-dn-hr-tt-cr, var(--_ctm-dn-hr-tt-cr)));
498
+
499
+ font-family: var(--_ctm-mob-dn-hr-tt-ft-fy,
500
+ var(--_ctm-tab-dn-hr-tt-ft-fy, var(--_ctm-dn-hr-tt-ft-fy)));
501
+
502
+ font-size: var(--_ctm-mob-dn-hr-tt-ft-se,
503
+ var(--_ctm-tab-dn-hr-tt-ft-se, var(--_ctm-dn-hr-tt-ft-se)));
504
+
505
+ font-weight: var(--_ctm-mob-dn-hr-tt-ft-wt,
506
+ var(--_ctm-tab-dn-hr-tt-ft-wt, var(--_ctm-dn-hr-tt-ft-wt)));
507
+
508
+ text-decoration: var(--_ctm-mob-dn-hr-tt-ue,
509
+ var(--_ctm-tab-dn-hr-tt-ue, var(--_ctm-dn-hr-tt-ue)));
510
+
511
+ font-style: var(--_ctm-mob-dn-hr-tt-ft-se-ic,
512
+ var(--_ctm-tab-dn-hr-tt-ft-se-ic, var(--_ctm-dn-hr-tt-ft-se-ic)));
513
+
514
+ text-align: var(--_ctm-mob-dn-hr-tt-tt-an,
515
+ var(--_ctm-tab-dn-hr-tt-tt-an, var(--_ctm-dn-hr-tt-tt-an)));
516
+
517
+ letter-spacing: var(--_ctm-mob-dn-hr-tt-lr-sg,
518
+ var(--_ctm-tab-dn-hr-tt-lr-sg, var(--_ctm-dn-hr-tt-lr-sg)));
519
+
520
+ line-height: var(--_ctm-mob-dn-hr-tt-le-ht,
521
+ var(--_ctm-tab-dn-hr-tt-le-ht, var(--_ctm-dn-hr-tt-le-ht)));
637
522
 
638
523
  // Header Text > Text Transform and the word wrap/break pair that the
639
524
  // typography panel renders alongside it.
@@ -657,8 +542,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
657
542
  }
658
543
  }
659
544
  }
545
+
660
546
  tbody {
661
547
  .tbody__row__divider {
548
+
662
549
  // Set by CommonTable only when the caller passed onRowClick.
663
550
  // The cells carry it too: a <td> establishes its own cursor context,
664
551
  // so the pointer would stop at the row padding otherwise.
@@ -671,105 +558,68 @@ $resizeActive: '[data-cms-element-resizer="true"]';
671
558
  }
672
559
  }
673
560
 
674
- background-color: var(
675
- --_ctm-mob-dn-te-rw-bd-cr,
676
- var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr))
677
- );
561
+ background-color: var(--_ctm-mob-dn-te-rw-bd-cr,
562
+ var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr)));
678
563
 
679
564
  // Table Row > Hover Background. Falls back to the default background
680
565
  // so a row that has no hover colour set does not go transparent.
681
566
  &:hover {
682
- background-color: var(
683
- --_ctm-mob-dn-te-rw-bd-cr-hr,
684
- var(
685
- --_ctm-tab-dn-te-rw-bd-cr-hr,
686
- var(
687
- --_ctm-dn-te-rw-bd-cr-hr,
688
- var(
689
- --_ctm-mob-dn-te-rw-bd-cr,
690
- var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr))
691
- )
692
- )
693
- )
694
- );
567
+ background-color: var(--_ctm-mob-dn-te-rw-bd-cr-hr,
568
+ var(--_ctm-tab-dn-te-rw-bd-cr-hr,
569
+ var(--_ctm-dn-te-rw-bd-cr-hr,
570
+ var(--_ctm-mob-dn-te-rw-bd-cr,
571
+ var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr))))));
695
572
  }
696
573
 
697
574
  height: var(--_ctm-mob-lt-rw-ht, var(--_ctm-tab-lt-rw-ht, var(--_ctm-lt-rw-ht)));
698
575
 
699
576
  .td__col__divider {
700
- padding: var(
701
- --_ctm-mob-lt-rw-cl-pg,
702
- var(--_ctm-tab-lt-rw-cl-pg, var(--_ctm-lt-rw-cl-pg))
703
- );
704
-
705
- color: var(
706
- --_sf-hr-fc,
707
- var(
708
- --_ctm-mob-dn-rw-tt-cr,
709
- var(--_ctm-tab-dn-rw-tt-cr, var(--_ctm-dn-rw-tt-cr))
710
- )
711
- );
712
-
713
- font-family: var(
714
- --_sf-hr-ff,
715
- var(
716
- --_ctm-mob-dn-rw-tt-ft-fy,
717
- var(--_ctm-tab-dn-rw-tt-ft-fy, var(--_ctm-dn-rw-tt-ft-fy))
718
- )
719
- );
720
-
721
- font-size: var(
722
- --_sf-hr-fs,
723
- var(
724
- --_ctm-mob-dn-rw-tt-ft-se,
725
- var(--_ctm-tab-dn-rw-tt-ft-se, var(--_ctm-dn-rw-tt-ft-se))
726
- )
727
- );
728
-
729
- text-decoration: var(
730
- --_ctm-mob-dn-rw-tt-ue,
731
- var(--_ctm-tab-dn-rw-tt-ue, var(--_ctm-dn-rw-tt-ue))
732
- );
733
-
734
- font-weight: var(
735
- --_sf-hr-fw,
736
- var(
737
- --_ctm-mob-dn-rw-tt-ft-wt,
738
- var(--_ctm-tab-dn-rw-tt-ft-wt, var(--_ctm-dn-rw-tt-ft-wt))
739
- )
740
- );
741
-
742
- font-style: var(
743
- --_sf-hr-ft,
744
- var(
745
- --_ctm-mob-dn-rw-tt-ft-se-ic,
746
- var(--_ctm-tab-dn-rw-tt-ft-se-ic, var(--_ctm-dn-rw-tt-ft-se-ic))
747
- )
748
- );
749
-
750
- text-align: var(
751
- --_sf-hr-ta,
752
- var(
753
- --_ctm-mob-dn-rw-tt-tt-an,
754
- var(--_ctm-tab-dn-rw-tt-tt-an, var(--_ctm-dn-rw-tt-tt-an))
755
- )
756
- );
757
-
758
- letter-spacing: var(
759
- --_sf-hr-ls,
760
- var(
761
- --_ctm-mob-dn-rw-tt-lr-sg,
762
- var(--_ctm-tab-dn-rw-tt-lr-sg, var(--_ctm-dn-rw-tt-lr-sg))
763
- )
764
- );
765
-
766
- line-height: var(
767
- --_sf-hr-lh,
768
- var(
769
- --_ctm-mob-dn-rw-tt-le-ht,
770
- var(--_ctm-tab-dn-rw-tt-le-ht, var(--_ctm-dn-rw-tt-le-ht))
771
- )
772
- );
577
+ padding: var(--_ctm-mob-lt-rw-cl-pg,
578
+ var(--_ctm-tab-lt-rw-cl-pg, var(--_ctm-lt-rw-cl-pg)));
579
+
580
+ color: var(--_sf-hr-fc,
581
+ var(--_ctm-mob-dn-rw-tt-cr,
582
+ var(--_ctm-tab-dn-rw-tt-cr, var(--_ctm-dn-rw-tt-cr))));
583
+
584
+ font-family: var(--_sf-hr-ff,
585
+ var(--_ctm-mob-dn-rw-tt-ft-fy,
586
+ var(--_ctm-tab-dn-rw-tt-ft-fy, var(--_ctm-dn-rw-tt-ft-fy))));
587
+ text-transform: var(--_sf-hr-tt-tm,
588
+ var(--_ctm-mob-dn-rw-tt-tt-tm,
589
+ var(--_ctm-tab-dn-rw-tt-tt-tm, var(--_ctm-dn-rw-tt-tt-tm))));
590
+ word-wrap: var(--_sf-hr-wd-wp,
591
+ var(--_ctm-mob-dn-rw-tt-wd-wp,
592
+ var(--_ctm-tab-dn-rw-tt-wd-wp, var(--_ctm-dn-rw-tt-wd-wp))));
593
+ word-break: var(--_sf-hr-wd-bk,
594
+ var(--_ctm-mob-dn-rw-tt-wd-bk,
595
+ var(--_ctm-tab-dn-rw-tt-wd-bk, var(--_ctm-dn-rw-tt-wd-bk))));
596
+
597
+ font-size: var(--_sf-hr-fs,
598
+ var(--_ctm-mob-dn-rw-tt-ft-se,
599
+ var(--_ctm-tab-dn-rw-tt-ft-se, var(--_ctm-dn-rw-tt-ft-se))));
600
+
601
+ text-decoration: var(--_ctm-mob-dn-rw-tt-ue,
602
+ var(--_ctm-tab-dn-rw-tt-ue, var(--_ctm-dn-rw-tt-ue)));
603
+
604
+ font-weight: var(--_sf-hr-fw,
605
+ var(--_ctm-mob-dn-rw-tt-ft-wt,
606
+ var(--_ctm-tab-dn-rw-tt-ft-wt, var(--_ctm-dn-rw-tt-ft-wt))));
607
+
608
+ font-style: var(--_sf-hr-ft,
609
+ var(--_ctm-mob-dn-rw-tt-ft-se-ic,
610
+ var(--_ctm-tab-dn-rw-tt-ft-se-ic, var(--_ctm-dn-rw-tt-ft-se-ic))));
611
+
612
+ text-align: var(--_sf-hr-ta,
613
+ var(--_ctm-mob-dn-rw-tt-tt-an,
614
+ var(--_ctm-tab-dn-rw-tt-tt-an, var(--_ctm-dn-rw-tt-tt-an))));
615
+
616
+ letter-spacing: var(--_sf-hr-ls,
617
+ var(--_ctm-mob-dn-rw-tt-lr-sg,
618
+ var(--_ctm-tab-dn-rw-tt-lr-sg, var(--_ctm-dn-rw-tt-lr-sg))));
619
+
620
+ line-height: var(--_sf-hr-lh,
621
+ var(--_ctm-mob-dn-rw-tt-le-ht,
622
+ var(--_ctm-tab-dn-rw-tt-le-ht, var(--_ctm-dn-rw-tt-le-ht))));
773
623
  }
774
624
  }
775
625
  }
@@ -778,18 +628,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
778
628
  .pagination {
779
629
  display: var(--_d-flex);
780
630
  align-items: var(--_align-center);
781
- justify-content: var(
782
- --_ctm-mob-lt-pn-at,
783
- var(--_ctm-tab-lt-pn-at, var(--_ctm-lt-pn-at))
784
- );
631
+ justify-content: var(--_ctm-mob-lt-pn-at,
632
+ var(--_ctm-tab-lt-pn-at, var(--_ctm-lt-pn-at)));
785
633
  margin-top: 10px;
786
- background-color: var(
787
- --_sf-bd-cr,
788
- var(
789
- --_ctm-mob-dn-pn-dt-se-bd-cr,
790
- var(--_ctm-tab-dn-pn-dt-se-bd-cr, var(--_ctm-dn-pn-dt-se-bd-cr))
791
- )
792
- );
634
+ background-color: var(--_sf-bd-cr,
635
+ var(--_ctm-mob-dn-pn-dt-se-bd-cr,
636
+ var(--_ctm-tab-dn-pn-dt-se-bd-cr, var(--_ctm-dn-pn-dt-se-bd-cr))));
637
+
793
638
  &.pagination__center {
794
639
  justify-content: var(justify-center);
795
640
  }
@@ -800,48 +645,27 @@ $resizeActive: '[data-cms-element-resizer="true"]';
800
645
  border-style: prepareMediaVariable(--_ctm-dn-pn-dt-se-br-se, none);
801
646
  border-width: prepareMediaVariable(--_ctm-dn-pn-dt-se-br-wh, 0);
802
647
  border-radius: prepareMediaVariable(--_ctm-dn-pn-dt-se-br-rs, 0);
803
- box-shadow: var(
804
- --_show-shadow,
805
- prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-ae, 0)
806
- prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-br, 0)
807
- prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-sd, 0)
808
- prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-cr, transparent)
809
- );
648
+ box-shadow: var(--_show-shadow,
649
+ prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-ae, 0) prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-br, 0) prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-sd, 0) prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-cr, transparent));
810
650
 
811
651
  &:hover {
812
- background-color: var(
813
- --_sf-bd-cr,
814
- prepareMediaVariable(
815
- --_ctm-dn-pn-hr-se-bd-cr,
816
- prepareMediaVariable(--_ctm-dn-pn-dt-se-bd-cr)
817
- )
818
- );
819
- border-color: prepareMediaVariable(
820
- --_ctm-dn-pn-hr-se-br-cr,
821
- prepareMediaVariable(--_ctm-dn-pn-dt-se-br-cr)
822
- );
823
- border-style: prepareMediaVariable(
824
- --_ctm-dn-pn-hr-se-br-se,
825
- prepareMediaVariable(--_ctm-dn-pn-dt-se-br-se, none)
826
- );
827
- border-width: prepareMediaVariable(
828
- --_ctm-dn-pn-hr-se-br-wh,
829
- prepareMediaVariable(--_ctm-dn-pn-dt-se-br-wh, 0)
830
- );
831
- border-radius: prepareMediaVariable(
832
- --_ctm-dn-pn-hr-se-br-rs,
833
- prepareMediaVariable(--_ctm-dn-pn-dt-se-br-rs, 0)
834
- );
835
- box-shadow: var(
836
- --_show-shadow,
837
- prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-ae, 0)
838
- prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-br, 0)
839
- prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-sd, 0)
840
- prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-cr, transparent)
841
- );
652
+ background-color: var(--_sf-bd-cr,
653
+ prepareMediaVariable(--_ctm-dn-pn-hr-se-bd-cr,
654
+ prepareMediaVariable(--_ctm-dn-pn-dt-se-bd-cr)));
655
+ border-color: prepareMediaVariable(--_ctm-dn-pn-hr-se-br-cr,
656
+ prepareMediaVariable(--_ctm-dn-pn-dt-se-br-cr));
657
+ border-style: prepareMediaVariable(--_ctm-dn-pn-hr-se-br-se,
658
+ prepareMediaVariable(--_ctm-dn-pn-dt-se-br-se, none));
659
+ border-width: prepareMediaVariable(--_ctm-dn-pn-hr-se-br-wh,
660
+ prepareMediaVariable(--_ctm-dn-pn-dt-se-br-wh, 0));
661
+ border-radius: prepareMediaVariable(--_ctm-dn-pn-hr-se-br-rs,
662
+ prepareMediaVariable(--_ctm-dn-pn-dt-se-br-rs, 0));
663
+ box-shadow: var(--_show-shadow,
664
+ prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-ae, 0) prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-br, 0) prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-sd, 0) prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-cr, transparent));
842
665
  }
843
666
 
844
667
  button {
668
+
845
669
  // Default glyph shows, hover glyph waits. Both are in the DOM so the
846
670
  // swap costs no re-render; when no hover icon is picked the renderer
847
671
  // falls back to the default one, so the pair looks identical.
@@ -870,6 +694,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
870
694
  // pinned to a hardcoded 18px and grey, so neither control did anything.
871
695
  width: prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se, 18px);
872
696
  height: prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se, 18px);
697
+
873
698
  path {
874
699
  stroke: prepareMediaVariable(--_ctm-dn-pn-dt-se-in-c1, var(--_gray-500));
875
700
  // Overrides the stroke-width presentation attribute baked into the icon markup.
@@ -878,26 +703,23 @@ $resizeActive: '[data-cms-element-resizer="true"]';
878
703
  }
879
704
 
880
705
  &:hover svg {
881
- width: prepareMediaVariable(
882
- --_ctm-dn-pn-hr-se-in-se,
883
- prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se, 18px)
884
- );
885
- height: prepareMediaVariable(
886
- --_ctm-dn-pn-hr-se-in-se,
887
- prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se, 18px)
888
- );
706
+ width: prepareMediaVariable(--_ctm-dn-pn-hr-se-in-se,
707
+ prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se, 18px));
708
+ height: prepareMediaVariable(--_ctm-dn-pn-hr-se-in-se,
709
+ prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se, 18px));
710
+
889
711
  path {
890
- stroke: prepareMediaVariable(
891
- --_ctm-dn-pn-hr-se-in-c1,
892
- prepareMediaVariable(--_ctm-dn-pn-dt-se-in-c1, var(--_gray-500))
893
- );
712
+ stroke: prepareMediaVariable(--_ctm-dn-pn-hr-se-in-c1,
713
+ prepareMediaVariable(--_ctm-dn-pn-dt-se-in-c1, var(--_gray-500)));
894
714
  }
895
715
  }
896
716
  }
717
+
897
718
  span {
898
719
  float: left;
899
720
  padding: var(--_pd-8) var(--_pd-16);
900
721
  text-decoration: none;
722
+
901
723
  span {
902
724
  // color: var(--_sf-hr-fc, var(--_ctm-dn-pn-bn-cr, var(--_tst-dn-pn-bn-cr)));
903
725
  // font-size: var(--_sf-hr-fs, var(--_ctm-dn-pn-ft-se, var(--_tst-dn-pn-ft-se)));
@@ -909,10 +731,14 @@ $resizeActive: '[data-cms-element-resizer="true"]';
909
731
  // letter-spacing: var(--_sf-hr-ls, var(--_ctm-dn-pn-lr-sg, var(--_tst-dn-pn-lr-sg)));
910
732
  // line-height: var(--_sf-hr-lh, var(--_ctm-dn-pn-le-ht, var(--_tst-dn-pn-le-ht)));
911
733
  }
734
+
912
735
  &.active:hover {
913
736
  &hover {
914
737
  --_sf-hr-fc: var(--_ctm-dn-pn-hr-se-cr, var(--_tst-dn-pn-hr-se-cr));
915
738
  --_sf-hr-ff: var(--_ctm-dn-pn-hr-se-ft-fy, var(--_tst-dn-pn-hr-se-ft-fy));
739
+ --_sf-hr-tt-tm: var(--_ctm-dn-pn-hr-se-tt-tm, var(--_tst-dn-pn-hr-se-tt-tm));
740
+ --_sf-hr-wd-wp: var(--_ctm-dn-pn-hr-se-wd-wp, var(--_tst-dn-pn-hr-se-wd-wp));
741
+ --_sf-hr-wd-bk: var(--_ctm-dn-pn-hr-se-wd-bk, var(--_tst-dn-pn-hr-se-wd-bk));
916
742
  --_sf-hr-fs: var(--_ctm-dn-pn-hr-se-ft-se, var(--_tst-dn-pn-hr-se-ft-se));
917
743
  --_sf-hr-fw: var(--_ctm-dn-pn-hr-se-ft-wt, var(--_tst-dn-pn-hr-se-ft-wt));
918
744
  --_sf-hr-ft: var(--_ctm-dn-pn-hr-se-ft-se-ic, var(--_tst-dn-pn-hr-se-ft-se-ic));
@@ -921,80 +747,55 @@ $resizeActive: '[data-cms-element-resizer="true"]';
921
747
  --_sf-hr-lh: var(--_ctm-dn-pn-hr-se-le-ht, var(--_tst-dn-pn-hr-se-le-ht));
922
748
  }
923
749
  }
750
+
924
751
  &.active {
925
- color: var(
926
- --_sf-hr-fc,
927
- var(
928
- --_ctm-mob-dn-pn-dt-se-cr,
929
- var(--_ctm-tab-dn-pn-dt-se-cr, var(--_ctm-dn-pn-dt-se-cr))
930
- )
931
- );
932
-
933
- font-family: var(
934
- --_sf-hr-ff,
935
- var(
936
- --_ctm-mob-dn-pn-dt-se-ft-fy,
937
- var(--_ctm-tab-dn-pn-dt-se-ft-fy, var(--_ctm-dn-pn-dt-se-ft-fy))
938
- )
939
- );
940
-
941
- font-size: var(
942
- --_sf-hr-fs,
943
- var(
944
- --_ctm-mob-dn-pn-dt-se-ft-se,
945
- var(--_ctm-tab-dn-pn-dt-se-ft-se, var(--_ctm-dn-pn-dt-se-ft-se))
946
- )
947
- );
948
-
949
- text-decoration: var(
950
- --_sf-hr-td,
951
- var(
952
- --_ctm-mob-dn-pn-dt-se-ue,
953
- var(--_ctm-tab-dn-pn-dt-se-ue, var(--_ctm-dn-pn-dt-se-ue))
954
- )
955
- );
956
-
957
- font-weight: var(
958
- --_sf-hr-fw,
959
- var(
960
- --_ctm-mob-dn-pn-dt-se-ft-wt,
961
- var(--_ctm-tab-dn-pn-dt-se-ft-wt, var(--_ctm-dn-pn-dt-se-ft-wt))
962
- )
963
- );
964
-
965
- font-style: var(
966
- --_sf-hr-ft,
967
- var(
968
- --_ctm-mob-dn-pn-dt-se-ft-se-ic,
969
- var(--_ctm-tab-dn-pn-dt-se-ft-se-ic, var(--_ctm-dn-pn-dt-se-ft-se-ic))
970
- )
971
- );
972
-
973
- text-align: var(
974
- --_sf-hr-ta,
975
- var(
976
- --_ctm-mob-dn-pn-dt-se-tt-an,
977
- var(--_ctm-tab-dn-pn-dt-se-tt-an, var(--_ctm-dn-pn-dt-se-tt-an))
978
- )
979
- );
980
-
981
- letter-spacing: var(
982
- --_sf-hr-ls,
983
- var(
984
- --_ctm-mob-dn-pn-dt-se-lr-sg,
985
- var(--_ctm-tab-dn-pn-dt-se-lr-sg, var(--_ctm-dn-pn-dt-se-lr-sg))
986
- )
987
- );
988
-
989
- line-height: var(
990
- --_sf-hr-lh,
991
- var(
992
- --_ctm-mob-dn-pn-dt-se-le-ht,
993
- var(--_ctm-tab-dn-pn-dt-se-le-ht, var(--_ctm-dn-pn-dt-se-le-ht))
994
- )
995
- );
752
+ color: var(--_sf-hr-fc,
753
+ var(--_ctm-mob-dn-pn-dt-se-cr,
754
+ var(--_ctm-tab-dn-pn-dt-se-cr, var(--_ctm-dn-pn-dt-se-cr))));
755
+
756
+ font-family: var(--_sf-hr-ff,
757
+ var(--_ctm-mob-dn-pn-dt-se-ft-fy,
758
+ var(--_ctm-tab-dn-pn-dt-se-ft-fy, var(--_ctm-dn-pn-dt-se-ft-fy))));
759
+ text-transform: var(--_sf-hr-tt-tm,
760
+ var(--_ctm-mob-dn-pn-dt-se-tt-tm,
761
+ var(--_ctm-tab-dn-pn-dt-se-tt-tm, var(--_ctm-dn-pn-dt-se-tt-tm))));
762
+ word-wrap: var(--_sf-hr-wd-wp,
763
+ var(--_ctm-mob-dn-pn-dt-se-wd-wp,
764
+ var(--_ctm-tab-dn-pn-dt-se-wd-wp, var(--_ctm-dn-pn-dt-se-wd-wp))));
765
+ word-break: var(--_sf-hr-wd-bk,
766
+ var(--_ctm-mob-dn-pn-dt-se-wd-bk,
767
+ var(--_ctm-tab-dn-pn-dt-se-wd-bk, var(--_ctm-dn-pn-dt-se-wd-bk))));
768
+
769
+ font-size: var(--_sf-hr-fs,
770
+ var(--_ctm-mob-dn-pn-dt-se-ft-se,
771
+ var(--_ctm-tab-dn-pn-dt-se-ft-se, var(--_ctm-dn-pn-dt-se-ft-se))));
772
+
773
+ text-decoration: var(--_sf-hr-td,
774
+ var(--_ctm-mob-dn-pn-dt-se-ue,
775
+ var(--_ctm-tab-dn-pn-dt-se-ue, var(--_ctm-dn-pn-dt-se-ue))));
776
+
777
+ font-weight: var(--_sf-hr-fw,
778
+ var(--_ctm-mob-dn-pn-dt-se-ft-wt,
779
+ var(--_ctm-tab-dn-pn-dt-se-ft-wt, var(--_ctm-dn-pn-dt-se-ft-wt))));
780
+
781
+ font-style: var(--_sf-hr-ft,
782
+ var(--_ctm-mob-dn-pn-dt-se-ft-se-ic,
783
+ var(--_ctm-tab-dn-pn-dt-se-ft-se-ic, var(--_ctm-dn-pn-dt-se-ft-se-ic))));
784
+
785
+ text-align: var(--_sf-hr-ta,
786
+ var(--_ctm-mob-dn-pn-dt-se-tt-an,
787
+ var(--_ctm-tab-dn-pn-dt-se-tt-an, var(--_ctm-dn-pn-dt-se-tt-an))));
788
+
789
+ letter-spacing: var(--_sf-hr-ls,
790
+ var(--_ctm-mob-dn-pn-dt-se-lr-sg,
791
+ var(--_ctm-tab-dn-pn-dt-se-lr-sg, var(--_ctm-dn-pn-dt-se-lr-sg))));
792
+
793
+ line-height: var(--_sf-hr-lh,
794
+ var(--_ctm-mob-dn-pn-dt-se-le-ht,
795
+ var(--_ctm-tab-dn-pn-dt-se-le-ht, var(--_ctm-dn-pn-dt-se-le-ht))));
996
796
  }
997
797
  }
798
+
998
799
  // Same wrong path as the svg rule above: the icon variables carry the
999
800
  // section's state segment. Only the "next" button has this class in the
1000
801
  // markup, so the svg rules are what actually style both arrows — these are
@@ -1004,14 +805,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1004
805
  font-size: prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se);
1005
806
 
1006
807
  &:hover {
1007
- color: prepareMediaVariable(
1008
- --_ctm-dn-pn-hr-se-in-c1,
1009
- prepareMediaVariable(--_ctm-dn-pn-dt-se-in-c1)
1010
- );
1011
- font-size: prepareMediaVariable(
1012
- --_ctm-dn-pn-hr-se-in-se,
1013
- prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se)
1014
- );
808
+ color: prepareMediaVariable(--_ctm-dn-pn-hr-se-in-c1,
809
+ prepareMediaVariable(--_ctm-dn-pn-dt-se-in-c1));
810
+ font-size: prepareMediaVariable(--_ctm-dn-pn-hr-se-in-se,
811
+ prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se));
1015
812
  }
1016
813
  }
1017
814
  }
@@ -1043,9 +840,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1043
840
  // font-weight: 400;
1044
841
  // line-height: 24px;
1045
842
  width: 100%;
843
+
1046
844
  &:nth-of-type(1) {
1047
845
  color: prepareMediaVariable(--_ctm-dn-te-cr);
1048
846
  font-family: prepareMediaVariable(--_ctm-dn-te-ft-fy);
847
+ text-transform: prepareMediaVariable(--_ctm-dn-te-tt-tm);
848
+ word-wrap: prepareMediaVariable(--_ctm-dn-te-wd-wp);
849
+ word-break: prepareMediaVariable(--_ctm-dn-te-wd-bk);
1049
850
  font-size: prepareMediaVariable(--_ctm-dn-te-ft-se);
1050
851
  font-weight: prepareMediaVariable(--_ctm-dn-te-ft-wt);
1051
852
  font-style: prepareMediaVariable(--_ctm-dn-te-ft-se-ic);
@@ -1054,9 +855,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1054
855
  line-height: prepareMediaVariable(--_ctm-dn-te-le-ht);
1055
856
  text-decoration: prepareMediaVariable(--_ctm-dn-te-ue);
1056
857
  }
858
+
1057
859
  &:nth-of-type(2) {
1058
860
  color: prepareMediaVariable(--_ctm-dn-dn-cr);
1059
861
  font-family: prepareMediaVariable(--_ctm-dn-dn-ft-fy);
862
+ text-transform: prepareMediaVariable(--_ctm-dn-dn-tt-tm);
863
+ word-wrap: prepareMediaVariable(--_ctm-dn-dn-wd-wp);
864
+ word-break: prepareMediaVariable(--_ctm-dn-dn-wd-bk);
1060
865
  font-size: prepareMediaVariable(--_ctm-dn-dn-ft-se);
1061
866
  font-weight: prepareMediaVariable(--_ctm-dn-dn-ft-wt);
1062
867
  font-style: prepareMediaVariable(--_ctm-dn-dn-ft-se-ic);
@@ -1101,137 +906,99 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1101
906
  }
1102
907
  }
1103
908
  }
909
+
1104
910
  .btn__with__text[data-btn-name="loadMore"] {
1105
911
  &[data-show-shadow="false"] {
1106
912
  --_show-shadow: none;
1107
913
  }
914
+
1108
915
  &[data-icon-position="left"] {
1109
916
  --_sf-fd-bn: row;
1110
917
  }
918
+
1111
919
  &[data-icon-position="right"] {
1112
920
  --_sf-fd-bn: row-reverse;
1113
921
  }
922
+
1114
923
  &[data-icon-position="center"] {
1115
924
  --_sf-fd-bn: row;
1116
925
  }
1117
926
 
1118
927
  &:hover {
1119
- --_sf-hr-bd-cr: var(
1120
- --_ctm-mob-dn-ld-me-bn-hr-se-bd-cr,
1121
- var(--_ctm-tab-dn-ld-me-bn-hr-se-bd-cr, var(--_ctm-dn-ld-me-bn-hr-se-bd-cr))
1122
- );
1123
- --_sf-hr-br-cr: var(
1124
- --_ctm-mob-dn-ld-me-bn-hr-se-br-cr,
1125
- var(--_ctm-tab-dn-ld-me-bn-hr-se-br-cr, var(--_ctm-dn-ld-me-bn-hr-se-br-cr))
1126
- );
1127
- --_sf-hr-br-se: var(
1128
- --_ctm-mob-dn-ld-me-bn-hr-se-br-se,
1129
- var(--_ctm-tab-dn-ld-me-bn-hr-se-br-se, var(--_ctm-dn-ld-me-bn-hr-se-br-se))
1130
- );
1131
- --_sf-hr-br-wh: var(
1132
- --_ctm-mob-dn-ld-me-bn-hr-se-br-wh,
1133
- var(--_ctm-tab-dn-ld-me-bn-hr-se-br-wh, var(--_ctm-dn-ld-me-bn-hr-se-br-wh))
1134
- );
1135
- --_sf-hr-br-rs: var(
1136
- --_ctm-mob-dn-ld-me-bn-hr-se-br-rs,
1137
- var(--_ctm-tab-dn-ld-me-bn-hr-se-br-rs, var(--_ctm-dn-ld-me-bn-hr-se-br-rs))
1138
- );
1139
- --_sf-hr-at: var(
1140
- --_ctm-mob-dn-ld-me-bn-hr-se-at,
1141
- var(--_ctm-tab-dn-ld-me-bn-hr-se-at, var(--_ctm-dn-ld-me-bn-hr-se-at))
1142
- );
1143
- --_sf-hr-gp: var(
1144
- --_ctm-mob-dn-ld-me-bn-hr-se-gp,
1145
- var(--_ctm-tab-dn-ld-me-bn-hr-se-gp, var(--_ctm-dn-ld-me-bn-hr-se-gp))
1146
- );
928
+ --_sf-hr-bd-cr: var(--_ctm-mob-dn-ld-me-bn-hr-se-bd-cr,
929
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-bd-cr, var(--_ctm-dn-ld-me-bn-hr-se-bd-cr)));
930
+ --_sf-hr-br-cr: var(--_ctm-mob-dn-ld-me-bn-hr-se-br-cr,
931
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-br-cr, var(--_ctm-dn-ld-me-bn-hr-se-br-cr)));
932
+ --_sf-hr-br-se: var(--_ctm-mob-dn-ld-me-bn-hr-se-br-se,
933
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-br-se, var(--_ctm-dn-ld-me-bn-hr-se-br-se)));
934
+ --_sf-hr-br-wh: var(--_ctm-mob-dn-ld-me-bn-hr-se-br-wh,
935
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-br-wh, var(--_ctm-dn-ld-me-bn-hr-se-br-wh)));
936
+ --_sf-hr-br-rs: var(--_ctm-mob-dn-ld-me-bn-hr-se-br-rs,
937
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-br-rs, var(--_ctm-dn-ld-me-bn-hr-se-br-rs)));
938
+ --_sf-hr-at: var(--_ctm-mob-dn-ld-me-bn-hr-se-at,
939
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-at, var(--_ctm-dn-ld-me-bn-hr-se-at)));
940
+ --_sf-hr-gp: var(--_ctm-mob-dn-ld-me-bn-hr-se-gp,
941
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-gp, var(--_ctm-dn-ld-me-bn-hr-se-gp)));
1147
942
 
1148
943
  // for shadow
1149
- --_sf-hr-sw-ae: var(
1150
- --_ctm-mob-dn-ld-me-bn-hr-se-sw-ae,
1151
- var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-ae, var(--_ctm-dn-ld-me-bn-hr-se-sw-ae))
1152
- );
1153
- --_sf-hr-sw-br: var(
1154
- --_ctm-mob-dn-ld-me-bn-hr-se-sw-br,
1155
- var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-br, var(--_ctm-dn-ld-me-bn-hr-se-sw-br))
1156
- );
1157
- --_sf-hr-sw-hr: var(
1158
- --_ctm-mob-dn-ld-me-bn-hr-se-sw-hr,
1159
- var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-hr, var(--_ctm-dn-ld-me-bn-hr-se-sw-hr))
1160
- );
1161
- --_sf-hr-sw-cr: var(
1162
- --_ctm-mob-dn-ld-me-bn-hr-se-sw-cr,
1163
- var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-cr, var(--_ctm-dn-ld-me-bn-hr-se-sw-cr))
1164
- );
944
+ --_sf-hr-sw-ae: var(--_ctm-mob-dn-ld-me-bn-hr-se-sw-ae,
945
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-ae, var(--_ctm-dn-ld-me-bn-hr-se-sw-ae)));
946
+ --_sf-hr-sw-br: var(--_ctm-mob-dn-ld-me-bn-hr-se-sw-br,
947
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-br, var(--_ctm-dn-ld-me-bn-hr-se-sw-br)));
948
+ --_sf-hr-sw-hr: var(--_ctm-mob-dn-ld-me-bn-hr-se-sw-hr,
949
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-hr, var(--_ctm-dn-ld-me-bn-hr-se-sw-hr)));
950
+ --_sf-hr-sw-cr: var(--_ctm-mob-dn-ld-me-bn-hr-se-sw-cr,
951
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-cr, var(--_ctm-dn-ld-me-bn-hr-se-sw-cr)));
1165
952
 
1166
953
  // for font
1167
954
 
1168
- --_sf-hr-cr: var(
1169
- --_ctm-mob-dn-ld-me-bn-hr-se-cr,
1170
- var(--_ctm-tab-dn-ld-me-bn-hr-se-cr, var(--_ctm-dn-ld-me-bn-hr-se-cr))
1171
- );
1172
- --_sf-hr-ft-fy: var(
1173
- --_ctm-mob-dn-ld-me-bn-hr-se-ft-fy,
1174
- var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-fy, var(--_ctm-dn-ld-me-bn-hr-se-ft-fy))
1175
- );
1176
- --_sf-hr-ft-se: var(
1177
- --_ctm-mob-dn-ld-me-bn-hr-se-ft-se,
1178
- var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-se, var(--_ctm-dn-ld-me-bn-hr-se-ft-se))
1179
- );
1180
- --_sf-hr-ft-wt: var(
1181
- --_ctm-mob-dn-ld-me-bn-hr-se-ft-wt,
1182
- var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-wt, var(--_ctm-dn-ld-me-bn-hr-se-ft-wt))
1183
- );
1184
- --_sf-hr-ft-se-ic: var(
1185
- --_ctm-mob-dn-ld-me-bn-hr-se-ft-se-ic,
1186
- var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-se-ic, var(--_ctm-dn-ld-me-bn-hr-se-ft-se-ic))
1187
- );
1188
- --_sf-hr-tt-an: var(
1189
- --_ctm-mob-dn-ld-me-bn-hr-se-tt-an,
1190
- var(--_ctm-tab-dn-ld-me-bn-hr-se-tt-an, var(--_ctm-dn-ld-me-bn-hr-se-tt-an))
1191
- );
1192
- --_sf-hr-lr-sg: var(
1193
- --_ctm-mob-dn-ld-me-bn-hr-se-lr-sg,
1194
- var(--_ctm-tab-dn-ld-me-bn-hr-se-lr-sg, var(--_ctm-dn-ld-me-bn-hr-se-lr-sg))
1195
- );
1196
- --_sf-hr-le-ht: var(
1197
- --_ctm-mob-dn-ld-me-bn-hr-se-le-ht,
1198
- var(--_ctm-tab-dn-ld-me-bn-hr-se-le-ht, var(--_ctm-dn-ld-me-bn-hr-se-le-ht))
1199
- );
1200
-
1201
- --_sf-hr-in-se: var(
1202
- --_ctm-mob-dn-ld-me-bn-hr-se-in-se,
1203
- var(--_ctm-tab-dn-ld-me-bn-hr-se-in-se, var(--_ctm-dn-ld-me-bn-hr-se-in-se))
1204
- );
1205
- --_sf-hr-in-se: var(
1206
- --_ctm-mob-dn-ld-me-bn-hr-se-in-se,
1207
- var(--_ctm-tab-dn-ld-me-bn-hr-se-in-se, var(--_ctm-dn-ld-me-bn-hr-se-in-se))
1208
- );
1209
- --_sf-hr-in-c1: var(
1210
- --_ctm-mob-dn-ld-me-bn-hr-se-in-c1,
1211
- var(--_ctm-tab-dn-ld-me-bn-hr-se-in-c1, var(--_ctm-dn-ld-me-bn-hr-se-in-c1))
1212
- );
1213
- --_sf-hr-ue: var(
1214
- --_ctm-mob-dn-ld-me-bn-hr-se-ue,
1215
- var(--_ctm-tab-dn-ld-me-bn-hr-se-ue, var(--_ctm-dn-ld-me-bn-hr-se-ue))
1216
- );
955
+ --_sf-hr-cr: var(--_ctm-mob-dn-ld-me-bn-hr-se-cr,
956
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-cr, var(--_ctm-dn-ld-me-bn-hr-se-cr)));
957
+ --_sf-hr-ft-fy: var(--_ctm-mob-dn-ld-me-bn-hr-se-ft-fy,
958
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-fy, var(--_ctm-dn-ld-me-bn-hr-se-ft-fy)));
959
+ --_sf-hr-tt-tm: var(--_ctm-mob-dn-ld-me-bn-hr-se-tt-tm,
960
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-tt-tm, var(--_ctm-dn-ld-me-bn-hr-se-tt-tm)));
961
+ --_sf-hr-wd-wp: var(--_ctm-mob-dn-ld-me-bn-hr-se-wd-wp,
962
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-wd-wp, var(--_ctm-dn-ld-me-bn-hr-se-wd-wp)));
963
+ --_sf-hr-wd-bk: var(--_ctm-mob-dn-ld-me-bn-hr-se-wd-bk,
964
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-wd-bk, var(--_ctm-dn-ld-me-bn-hr-se-wd-bk)));
965
+ --_sf-hr-ft-se: var(--_ctm-mob-dn-ld-me-bn-hr-se-ft-se,
966
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-se, var(--_ctm-dn-ld-me-bn-hr-se-ft-se)));
967
+ --_sf-hr-ft-wt: var(--_ctm-mob-dn-ld-me-bn-hr-se-ft-wt,
968
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-wt, var(--_ctm-dn-ld-me-bn-hr-se-ft-wt)));
969
+ --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-ld-me-bn-hr-se-ft-se-ic,
970
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-se-ic, var(--_ctm-dn-ld-me-bn-hr-se-ft-se-ic)));
971
+ --_sf-hr-tt-an: var(--_ctm-mob-dn-ld-me-bn-hr-se-tt-an,
972
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-tt-an, var(--_ctm-dn-ld-me-bn-hr-se-tt-an)));
973
+ --_sf-hr-lr-sg: var(--_ctm-mob-dn-ld-me-bn-hr-se-lr-sg,
974
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-lr-sg, var(--_ctm-dn-ld-me-bn-hr-se-lr-sg)));
975
+ --_sf-hr-le-ht: var(--_ctm-mob-dn-ld-me-bn-hr-se-le-ht,
976
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-le-ht, var(--_ctm-dn-ld-me-bn-hr-se-le-ht)));
977
+
978
+ --_sf-hr-in-se: var(--_ctm-mob-dn-ld-me-bn-hr-se-in-se,
979
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-in-se, var(--_ctm-dn-ld-me-bn-hr-se-in-se)));
980
+ --_sf-hr-in-se: var(--_ctm-mob-dn-ld-me-bn-hr-se-in-se,
981
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-in-se, var(--_ctm-dn-ld-me-bn-hr-se-in-se)));
982
+ --_sf-hr-in-c1: var(--_ctm-mob-dn-ld-me-bn-hr-se-in-c1,
983
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-in-c1, var(--_ctm-dn-ld-me-bn-hr-se-in-c1)));
984
+ --_sf-hr-ue: var(--_ctm-mob-dn-ld-me-bn-hr-se-ue,
985
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ue, var(--_ctm-dn-ld-me-bn-hr-se-ue)));
1217
986
 
1218
987
  // for pading and width
1219
- --_sf-hr-pg: var(
1220
- --_ctm-mob-dn-ld-me-bn-hr-pg,
1221
- var(--_ctm-tab-dn-ld-me-bn-hr-pg, var(--_ctm-dn-ld-me-bn-hr-pg))
1222
- );
1223
- --_sf-hr-wh: var(
1224
- --_ctm-mob-dn-ld-me-bn-hr-wh,
1225
- var(--_ctm-tab-dn-ld-me-bn-hr-wh, var(--_ctm-dn-ld-me-bn-hr-wh))
1226
- );
988
+ --_sf-hr-pg: var(--_ctm-mob-dn-ld-me-bn-hr-pg,
989
+ var(--_ctm-tab-dn-ld-me-bn-hr-pg, var(--_ctm-dn-ld-me-bn-hr-pg)));
990
+ --_sf-hr-wh: var(--_ctm-mob-dn-ld-me-bn-hr-wh,
991
+ var(--_ctm-tab-dn-ld-me-bn-hr-wh, var(--_ctm-dn-ld-me-bn-hr-wh)));
1227
992
 
1228
993
  &[data-hover-show-shadow="false"] {
1229
994
  --_hover-show-shadow: none;
1230
995
  }
996
+
1231
997
  &[data-hover-show-icon="false"] {
1232
998
  --_hover-show-icon: none;
1233
999
  }
1234
1000
  }
1001
+
1235
1002
  background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-bd-cr));
1236
1003
 
1237
1004
  padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-pg));
@@ -1245,10 +1012,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1245
1012
 
1246
1013
  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-rs));
1247
1014
 
1248
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-ae))
1249
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-br))
1250
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-sd))
1251
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-cr));
1015
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-cr));
1252
1016
 
1253
1017
  &[data-show-border="true"] {
1254
1018
  border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-cr));
@@ -1264,15 +1028,21 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1264
1028
  color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-cr));
1265
1029
 
1266
1030
  font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-fy));
1031
+ text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-tt-tm));
1032
+ word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-wd-wp));
1033
+ word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-wd-bk));
1034
+
1035
+ &.flex__overflow {
1036
+ white-space: normal;
1037
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1038
+ }
1267
1039
 
1268
1040
  font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-se));
1269
1041
 
1270
1042
  font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-wt));
1271
1043
 
1272
- font-style: var(
1273
- --_sf-hr-ft-se-ic,
1274
- prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-se-ic)
1275
- );
1044
+ font-style: var(--_sf-hr-ft-se-ic,
1045
+ prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-se-ic));
1276
1046
 
1277
1047
  text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-tt-an));
1278
1048
 
@@ -1285,6 +1055,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1285
1055
 
1286
1056
  .icon {
1287
1057
  display: var(--_hover-show-icon, var(--_show-icon, flex));
1058
+
1288
1059
  svg {
1289
1060
  width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-se));
1290
1061
  height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-se));
@@ -1296,6 +1067,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1296
1067
  }
1297
1068
  }
1298
1069
  }
1070
+
1299
1071
  [data-element-style="Text"] {
1300
1072
  display: inline-block;
1301
1073
  width: 100%;
@@ -1330,16 +1102,19 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1330
1102
  width: 100%;
1331
1103
  flex-direction: column;
1332
1104
  height: auto;
1105
+
1333
1106
  .slider_header_wrapper {
1334
1107
  display: flex;
1335
1108
  align-items: center;
1336
1109
  gap: 12px;
1337
1110
  justify-content: space-between;
1338
1111
  width: 100%;
1112
+
1339
1113
  .slider_header_wrapper_left {
1340
1114
  display: flex;
1341
1115
  align-items: center;
1342
1116
  gap: 12px;
1117
+
1343
1118
  // Stands in for the profile dropdown when there is only one
1344
1119
  // profile. Matches the heading beside it so the row reads as one line.
1345
1120
  .allocation_single_profile_name {
@@ -1366,6 +1141,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1366
1141
  display: flex;
1367
1142
  }
1368
1143
  }
1144
+
1369
1145
  .redeem_now_wrapper {
1370
1146
  .redeem_now_btn {
1371
1147
  display: flex;
@@ -1393,6 +1169,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1393
1169
  }
1394
1170
 
1395
1171
  .allocations_slider_slide_wrapper {
1172
+
1396
1173
  // Clicking an allocation selects it and its profile (it replaced the
1397
1174
  // Redeem button), so the whole slide is the hit area.
1398
1175
  &[data-is-clickable="true"] {
@@ -1446,6 +1223,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1446
1223
  }
1447
1224
  }
1448
1225
  }
1226
+
1449
1227
  .est__dropdown__main {
1450
1228
  position: relative;
1451
1229
  min-width: 150px;
@@ -1460,6 +1238,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1460
1238
 
1461
1239
  .est__dropdown {
1462
1240
  position: relative;
1241
+
1463
1242
  .est__dropdown__button {
1464
1243
  display: flex;
1465
1244
  align-items: center;
@@ -1500,7 +1279,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1500
1279
  --_sf-bmm-cr: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-cr)};
1501
1280
  }
1502
1281
 
1503
- & > span {
1282
+ &>span {
1504
1283
  display: var(--_d-flex);
1505
1284
 
1506
1285
  &:nth-of-type(1) {
@@ -1510,17 +1289,16 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1510
1289
  background: transparent;
1511
1290
  color: var(--_sf-bmm-cr, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-cr));
1512
1291
  font-family: var(--_sf-bmm-ft-fy, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-ft-fy));
1292
+ text-transform: var(--_sf-bmm-tt-tm, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-tt-tm));
1293
+ word-wrap: var(--_sf-bmm-wd-wp, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-wd-wp));
1294
+ word-break: var(--_sf-bmm-wd-bk, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-wd-bk));
1513
1295
  font-size: var(--_sf-bmm-ft-se, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-ft-se));
1514
1296
  font-weight: var(--_sf-bmm-ft-wt, (--_ctm-dn-dn-st-dt-se-ft-wt));
1515
- font-style: var(
1516
- --_sf-bmm-ft-se-ic,
1517
- prepareMediaVariable(--_ctm-dn-dn-st-dt-se-ft-se-ic)
1518
- );
1297
+ font-style: var(--_sf-bmm-ft-se-ic,
1298
+ prepareMediaVariable(--_ctm-dn-dn-st-dt-se-ft-se-ic));
1519
1299
  text-align: var(--_sf-bmm-tt-an, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-tt-an));
1520
- letter-spacing: var(
1521
- --_sf-bmm-lr-sg,
1522
- prepareMediaVariable(--_ctm-dn-dn-st-dt-se-lr-sg)
1523
- );
1300
+ letter-spacing: var(--_sf-bmm-lr-sg,
1301
+ prepareMediaVariable(--_ctm-dn-dn-st-dt-se-lr-sg));
1524
1302
  line-height: var(--_sf-bmm-le-ht, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-le-ht));
1525
1303
  text-decoration: var(--_sf-bmm-ue, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-ue));
1526
1304
 
@@ -1582,63 +1360,44 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1582
1360
  // padding: 12px;
1583
1361
  cursor: pointer;
1584
1362
  // text-align: left;
1585
- border-color: var(
1586
- --_sf-bmm-v1-br-clr,
1587
- #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-br-cr)}
1588
- );
1589
- border-width: var(
1590
- --_sf-bmm-v1-br-wh,
1591
- #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-br-wh)}
1592
- );
1593
- border-style: var(
1594
- --_sf-bmm-v1-br-se,
1595
- #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-br-se)}
1596
- );
1597
- border-radius: var(
1598
- --_sf-bmm-v1-br-rs,
1599
- #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-br-rs)}
1600
- );
1601
-
1602
- background: var(
1603
- --_sf-bmm-v1-bd-cr,
1604
- #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-bd-cr)}
1605
- );
1606
-
1607
- padding: var(
1608
- --_sf-bmm-v1-pg,
1609
- #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-pg, 12px)}
1610
- );
1611
-
1612
- font-family: var(
1613
- --_sf-bmm-v1-ft-fy,
1614
- prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-ft-fy)
1615
- );
1363
+ border-color: var(--_sf-bmm-v1-br-clr,
1364
+ #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-br-cr)});
1365
+ border-width: var(--_sf-bmm-v1-br-wh,
1366
+ #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-br-wh)});
1367
+ border-style: var(--_sf-bmm-v1-br-se,
1368
+ #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-br-se)});
1369
+ border-radius: var(--_sf-bmm-v1-br-rs,
1370
+ #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-br-rs)});
1371
+
1372
+ background: var(--_sf-bmm-v1-bd-cr,
1373
+ #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-bd-cr)});
1374
+
1375
+ padding: var(--_sf-bmm-v1-pg,
1376
+ #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-pg, 12px)});
1377
+
1378
+ font-family: var(--_sf-bmm-v1-ft-fy,
1379
+ prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-ft-fy));
1380
+ text-transform: var(--_sf-bmm-v1-tt-tm,
1381
+ prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-tt-tm));
1382
+ word-wrap: var(--_sf-bmm-v1-wd-wp,
1383
+ prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-wd-wp));
1384
+ word-break: var(--_sf-bmm-v1-wd-bk,
1385
+ prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-wd-bk));
1616
1386
  color: var(--_sf-bmm-v1-cr, prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-cr));
1617
- font-size: var(
1618
- --_sf-bmm-v1-ft-se,
1619
- prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-ft-se)
1620
- );
1387
+ font-size: var(--_sf-bmm-v1-ft-se,
1388
+ prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-ft-se));
1621
1389
  font-weight: var(--_sf-bmm-v1-ft-wt, (--_ctm-dn-dn-lt-im-dt-se-ft-wt));
1622
- font-style: var(
1623
- --_sf-bmm-v1-ft-se-ic,
1624
- prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-ft-se-ic)
1625
- );
1626
- text-align: var(
1627
- --_sf-bmm-v1-tt-an,
1628
- prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-tt-an)
1629
- );
1630
- letter-spacing: var(
1631
- --_sf-bmm-v1-lr-sg,
1632
- prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-lr-sg)
1633
- );
1634
- line-height: var(
1635
- --_sf-bmm-v1-le-ht,
1636
- prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-le-ht)
1637
- );
1638
- text-decoration: var(
1639
- --_sf-bmm-v1-ue,
1640
- prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-ue)
1641
- );
1390
+ font-style: var(--_sf-bmm-v1-ft-se-ic,
1391
+ prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-ft-se-ic));
1392
+ text-align: var(--_sf-bmm-v1-tt-an,
1393
+ prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-tt-an));
1394
+ letter-spacing: var(--_sf-bmm-v1-lr-sg,
1395
+ prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-lr-sg));
1396
+ line-height: var(--_sf-bmm-v1-le-ht,
1397
+ prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-le-ht));
1398
+ text-decoration: var(--_sf-bmm-v1-ue,
1399
+ prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-ue));
1400
+
1642
1401
  &.selected {
1643
1402
  // background-color: var(--_primary-25);
1644
1403
  // color: var(--_primary-400);
@@ -1662,6 +1421,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1662
1421
 
1663
1422
  --_sf-bmm-v1-cr: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-sd-se-cr)};
1664
1423
  }
1424
+
1665
1425
  &:hover {
1666
1426
  // background-color: var(--_primary-25);
1667
1427
  // color: var(--_primary-400);
@@ -1691,6 +1451,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1691
1451
  }
1692
1452
  }
1693
1453
  }
1454
+
1694
1455
  .embla {
1695
1456
  width: 100%;
1696
1457
  height: 100%;
@@ -1725,9 +1486,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1725
1486
  &[data-control-type="Bottom"][data-slider-control="Arrows"] {
1726
1487
  height: calc(100% - calc(var(--_ctm-dn-pn-as-aw-se) + 8px));
1727
1488
  }
1489
+
1728
1490
  &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
1729
1491
  height: calc(100% - calc(var(--_ctm-dn-pn-le-le-ht) + 20px));
1730
1492
  }
1493
+
1731
1494
  &[data-control-type="Bottom"][data-slider-control="Dots"] {
1732
1495
  height: calc(100% - calc(var(--_ctm-dn-pn-ds-dt-se) + 20px));
1733
1496
  }
@@ -1747,20 +1510,25 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1747
1510
  width: 100%;
1748
1511
  justify-content: space-between;
1749
1512
  transform: translate(-50%, -50%);
1513
+
1750
1514
  // padding-left: 20px;
1751
1515
  &[data-control-type="Side"] {
1516
+
1752
1517
  .left-button,
1753
1518
  .right-button {
1754
1519
  background-color: transparent;
1755
1520
  }
1756
1521
  }
1522
+
1757
1523
  &[data-background-shape="Round"] {
1524
+
1758
1525
  .left-button,
1759
1526
  .right-button {
1760
1527
  background-color: #f2f5f5;
1761
1528
  box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
1762
1529
  }
1763
1530
  }
1531
+
1764
1532
  &[data-control-type="Bottom-Overflow"] {
1765
1533
  transform: translateX(-50%);
1766
1534
  width: 100%;
@@ -1769,6 +1537,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1769
1537
  top: unset;
1770
1538
  bottom: 6px;
1771
1539
  }
1540
+
1772
1541
  &[data-control-type="Bottom"] {
1773
1542
  transform: unset;
1774
1543
  position: static;
@@ -1777,6 +1546,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1777
1546
  gap: 12px;
1778
1547
  margin-top: 10px;
1779
1548
  }
1549
+
1780
1550
  .left-button {
1781
1551
  padding: 10px;
1782
1552
  border-radius: 50%;
@@ -1789,6 +1559,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1789
1559
  cursor: pointer;
1790
1560
  outline: none;
1791
1561
  margin-left: 12px;
1562
+
1792
1563
  &:disabled {
1793
1564
  & svg {
1794
1565
  path {
@@ -1797,6 +1568,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1797
1568
  }
1798
1569
  }
1799
1570
  }
1571
+
1800
1572
  .right-button {
1801
1573
  border-radius: 50%;
1802
1574
  border: none;
@@ -1818,11 +1590,14 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1818
1590
  }
1819
1591
  }
1820
1592
  }
1593
+
1821
1594
  .icon {
1822
1595
  display: flex;
1596
+
1823
1597
  svg {
1824
1598
  width: calc(var(--_ctm-dn-pn-as-aw-se) * 0.5);
1825
1599
  height: calc(var(--_ctm-dn-pn-as-aw-se) * 0.5);
1600
+
1826
1601
  path {
1827
1602
  stroke: var(--_ctm-dn-pn-as-aw-cr, var(--_tst-dn-pn-as-aw-cr));
1828
1603
  }
@@ -1833,9 +1608,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1833
1608
  &[data-thumbnail-placement="top"] {
1834
1609
  flex-direction: column-reverse;
1835
1610
  }
1611
+
1836
1612
  &[data-thumbnail-placement="bottom"] {
1837
1613
  flex-direction: column;
1838
1614
  }
1615
+
1839
1616
  &[data-thumbnail-placement="left"] {
1840
1617
  flex-direction: row-reverse;
1841
1618
 
@@ -1849,8 +1626,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1849
1626
  }
1850
1627
  }
1851
1628
  }
1629
+
1852
1630
  &[data-thumbnail-placement="right"] {
1853
1631
  flex-direction: row;
1632
+
1854
1633
  .embla__thumbs {
1855
1634
  width: var(--_ctm-lt-tl-se);
1856
1635
  height: 100%;
@@ -1861,16 +1640,19 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1861
1640
  }
1862
1641
  }
1863
1642
  }
1643
+
1864
1644
  &[data-control-type="Side"] {
1865
1645
  display: flex;
1866
1646
  align-self: center;
1867
1647
  gap: 16px;
1868
1648
  flex-direction: row;
1649
+
1869
1650
  .left-button:disabled,
1870
1651
  .right-button:disabled {
1871
1652
  display: none;
1872
1653
  }
1873
1654
  }
1655
+
1874
1656
  .embla__dots {
1875
1657
  display: flex;
1876
1658
  flex-wrap: wrap;
@@ -1887,6 +1669,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1887
1669
  transform: translateX(-50%);
1888
1670
  width: 75%;
1889
1671
  }
1672
+
1890
1673
  .embla__dot {
1891
1674
  -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
1892
1675
  -webkit-appearance: none;
@@ -1908,6 +1691,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1908
1691
  justify-content: center;
1909
1692
  border-radius: 50%;
1910
1693
  }
1694
+
1911
1695
  .embla__dot:after {
1912
1696
  // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
1913
1697
  width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
@@ -1917,10 +1701,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1917
1701
  align-items: center;
1918
1702
  content: "";
1919
1703
  }
1704
+
1920
1705
  .embla__dot--selected:after {
1921
1706
  box-shadow: inset 0 0 0 1px var(--text-body);
1922
1707
  background-color: var(--_ctm-dn-pn-ds-ct-dt-cr, var(--_tst-dn-pn-ds-ct-dt-cr));
1923
1708
  }
1709
+
1924
1710
  &[data-slider-control="Pagination Line"] {
1925
1711
  .embla__dot {
1926
1712
  width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
@@ -1929,6 +1715,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1929
1715
 
1930
1716
  border-radius: 6px;
1931
1717
  }
1718
+
1932
1719
  .embla__dot--selected:after {
1933
1720
  box-shadow: inset 0 0 0 1px var(--text-body);
1934
1721
  border-radius: 6px;
@@ -1959,6 +1746,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1959
1746
 
1960
1747
  overflow: hidden;
1961
1748
  }
1749
+
1962
1750
  .embla__thumbs__container {
1963
1751
  display: flex;
1964
1752
  flex-direction: row;
@@ -1972,6 +1760,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1972
1760
  min-width: var(--_ctm-lt-tl-se);
1973
1761
  max-width: var(--_ctm-lt-tl-se);
1974
1762
  height: var(--_ctm-lt-tl-se);
1763
+
1975
1764
  & img {
1976
1765
  width: 100%;
1977
1766
  height: 100%;
@@ -1981,4 +1770,4 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1981
1770
  }
1982
1771
  }
1983
1772
  }
1984
- }
1773
+ }