@sc-360-v2/storefront-cms-library 0.5.59 → 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 (201) hide show
  1. package/dist/add-existing-form.scss +13 -5
  2. package/dist/add-order.scss +129 -245
  3. package/dist/add-products-tab-details.scss +1048 -2097
  4. package/dist/add-products-tab.scss +666 -1204
  5. package/dist/allocation-header-quota-details.scss +198 -411
  6. package/dist/allocationDetails.scss +1645 -2126
  7. package/dist/allocations-quota-details.scss +168 -327
  8. package/dist/allocations.scss +476 -797
  9. package/dist/amount-estimator.scss +405 -743
  10. package/dist/animation-control.scss +23 -23
  11. package/dist/badge.scss +43 -18
  12. package/dist/brand-basic-elements.scss +76 -124
  13. package/dist/brand.scss +28 -55
  14. package/dist/breadcrumbs.scss +356 -718
  15. package/dist/builder.js +1 -1
  16. package/dist/bulk-variant-picker.scss +1133 -2034
  17. package/dist/bundle copy.scss +235 -0
  18. package/dist/bundle.scss +843 -1479
  19. package/dist/bundleDetails.scss +3774 -5063
  20. package/dist/button copy.scss +28 -0
  21. package/dist/button.scss +78 -103
  22. package/dist/buy-for-tab-container.scss +77 -106
  23. package/dist/buy-for-tabs-container-item.scss +80 -80
  24. package/dist/buyForHeaders.scss +1725 -2988
  25. package/dist/cart-details.scss +491 -1012
  26. package/dist/cart-products-sidebar.scss +211 -211
  27. package/dist/cart-summary.scss +559 -1152
  28. package/dist/cart-wrapper.scss +85 -127
  29. package/dist/cart.scss +115 -223
  30. package/dist/cartAttributes.scss +367 -647
  31. package/dist/cartGrouping.scss +89 -89
  32. package/dist/category-groups-element.scss +127 -108
  33. package/dist/category-groups-product-grid.scss +40 -79
  34. package/dist/category-groups-product-image.scss +457 -1390
  35. package/dist/category-groups-product-options.scss +224 -693
  36. package/dist/category-groups-product-price.scss +1326 -4859
  37. package/dist/category-groups-quota-details.scss +217 -466
  38. package/dist/category.scss +26 -50
  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 +1858 -4170
  43. package/dist/common-element.scss +35 -35
  44. package/dist/confirm-modal.scss +22 -2
  45. package/dist/confirmationModal.scss +139 -139
  46. package/dist/container.scss +32 -54
  47. package/dist/countdown.scss +256 -443
  48. package/dist/coupon.scss +355 -714
  49. package/dist/custom-fonts.scss +100 -100
  50. package/dist/default-dropdown.scss +12 -1
  51. package/dist/embroider-preview-element.scss +94 -94
  52. package/dist/embroider-template-1-v2.scss +123 -172
  53. package/dist/embroider-template-1.scss +68 -104
  54. package/dist/embroidery.scss +30 -31
  55. package/dist/employee-bulk-order.scss +418 -142
  56. package/dist/emtpy-templates.scss +165 -165
  57. package/dist/faq.scss +235 -419
  58. package/dist/filter-results.scss +125 -265
  59. package/dist/filters.scss +831 -1682
  60. package/dist/flex-text-editor.scss +271 -271
  61. package/dist/functions.scss +36 -0
  62. package/dist/gallery-slider-temp.scss +435 -758
  63. package/dist/global-styles.scss +23 -7
  64. package/dist/grid.scss +25 -33
  65. package/dist/hotspot.scss +69 -119
  66. package/dist/icon-list.scss +30 -59
  67. package/dist/image-for-product.scss +21 -21
  68. package/dist/image-temp.scss +21 -20
  69. package/dist/item-stock.scss +9 -16
  70. package/dist/kitDetails.scss +2719 -4299
  71. package/dist/kits.scss +24 -19
  72. package/dist/language-selector.scss +233 -375
  73. package/dist/last-x-orders.scss +101 -187
  74. package/dist/layouter-item.scss +75 -103
  75. package/dist/layouter-pro-item.scss +89 -95
  76. package/dist/layouter-pro.scss +87 -92
  77. package/dist/layouter.scss +67 -117
  78. package/dist/light-box-v2.scss +89 -104
  79. package/dist/lightbox.scss +78 -78
  80. package/dist/line.scss +29 -70
  81. package/dist/loader.scss +37 -37
  82. package/dist/login.scss +291 -572
  83. package/dist/map.scss +220 -369
  84. package/dist/marchandiserSets.scss +95 -104
  85. package/dist/mega-menu-container.scss +96 -109
  86. package/dist/mega-menu.scss +624 -734
  87. package/dist/menu-item.scss +19 -19
  88. package/dist/menu-v2.scss +507 -619
  89. package/dist/multi-select-dropdown.scss +27 -3
  90. package/dist/my-templates.scss +38 -9
  91. package/dist/myTemplates.scss +3 -0
  92. package/dist/option-bar.scss +215 -375
  93. package/dist/order-processing.scss +61 -61
  94. package/dist/order-status.scss +643 -1117
  95. package/dist/overflow-module.scss +62 -63
  96. package/dist/past-orders.scss +118 -149
  97. package/dist/payment-methods.scss +46 -30
  98. package/dist/pickup-locations.scss +564 -1121
  99. package/dist/position-module.scss +98 -95
  100. package/dist/prefix-list.scss +97 -86
  101. package/dist/product-actions.scss +1230 -1783
  102. package/dist/product-basic-elements.scss +108 -169
  103. package/dist/product-highlights.scss +116 -157
  104. package/dist/product-image-bundles.scss +345 -671
  105. package/dist/product-image.scss +341 -724
  106. package/dist/product-inventory.scss +673 -1357
  107. package/dist/product-labels.scss +94 -113
  108. package/dist/product-options.scss +288 -486
  109. package/dist/product-price.scss +1284 -2556
  110. package/dist/product-promotions.scss +1388 -2830
  111. package/dist/product-sizechart.scss +516 -905
  112. package/dist/product.scss +28 -61
  113. package/dist/productDetails.scss +19 -38
  114. package/dist/profile.scss +231 -447
  115. package/dist/quantity-selector.scss +313 -550
  116. package/dist/quick-inventory-check.scss +101 -187
  117. package/dist/quick-links.scss +56 -133
  118. package/dist/quick-order-pad.scss +216 -269
  119. package/dist/quota-details.scss +163 -297
  120. package/dist/quotes.scss +82 -121
  121. package/dist/repeater copy.scss +24 -0
  122. package/dist/repeater-embla-controls.scss +34 -14
  123. package/dist/repeater-grid-toggle.scss +156 -166
  124. package/dist/repeater-item.scss +41 -64
  125. package/dist/repeater.scss +579 -688
  126. package/dist/request-for-quotes.scss +66 -16
  127. package/dist/responsive-behaviour.scss +31 -29
  128. package/dist/rfqs.scss +118 -181
  129. package/dist/scroll.scss +89 -167
  130. package/dist/search.scss +179 -326
  131. package/dist/section.scss +27 -51
  132. package/dist/shareCartSideBar.scss +254 -254
  133. package/dist/shipping-estimator.scss +41 -41
  134. package/dist/shipping-payments.scss +198 -58
  135. package/dist/simple-list.scss +65 -135
  136. package/dist/social.scss +78 -143
  137. package/dist/sort.scss +89 -89
  138. package/dist/stack.scss +23 -34
  139. package/dist/static-global.scss +44 -26
  140. package/dist/static-text.scss +52 -52
  141. package/dist/stockStatus.scss +11 -19
  142. package/dist/store-locations.scss +587 -1113
  143. package/dist/sub-category.scss +74 -74
  144. package/dist/submit-quote.scss +275 -275
  145. package/dist/tab-container-item.scss +80 -80
  146. package/dist/tab-container.scss +81 -108
  147. package/dist/tab-v2.scss +277 -604
  148. package/dist/table-common.scss +215 -406
  149. package/dist/table.scss +267 -509
  150. package/dist/text-temp-v2.scss +12 -23
  151. package/dist/text-temp.scss +110 -109
  152. package/dist/theme-classes.scss +17 -13
  153. package/dist/toggle-button.scss +32 -32
  154. package/dist/transform-properties-module.scss +20 -20
  155. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +108 -0
  156. package/dist/types/builder/tools/element-edit/breadcrumbs.d.ts +6 -0
  157. package/dist/types/builder/tools/element-edit/bundle.d.ts +22 -0
  158. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +64 -0
  159. package/dist/types/builder/tools/element-edit/buttonInstance.d.ts +10 -0
  160. package/dist/types/builder/tools/element-edit/buyForWithTab.d.ts +84 -0
  161. package/dist/types/builder/tools/element-edit/cart.d.ts +6 -0
  162. package/dist/types/builder/tools/element-edit/cartAttributes.d.ts +60 -0
  163. package/dist/types/builder/tools/element-edit/cartDetails.d.ts +16 -0
  164. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +202 -0
  165. package/dist/types/builder/tools/element-edit/categoryGroups.d.ts +158 -0
  166. package/dist/types/builder/tools/element-edit/checkout.d.ts +172 -0
  167. package/dist/types/builder/tools/element-edit/common.d.ts +2 -0
  168. package/dist/types/builder/tools/element-edit/countdown.d.ts +44 -0
  169. package/dist/types/builder/tools/element-edit/coupon.d.ts +28 -0
  170. package/dist/types/builder/tools/element-edit/embroidery.d.ts +37 -0
  171. package/dist/types/builder/tools/element-edit/filterResults.d.ts +4 -0
  172. package/dist/types/builder/tools/element-edit/icon-list.d.ts +11 -0
  173. package/dist/types/builder/tools/element-edit/itemStock.d.ts +2 -0
  174. package/dist/types/builder/tools/element-edit/kitDetails.d.ts +66 -0
  175. package/dist/types/builder/tools/element-edit/kits.d.ts +4 -0
  176. package/dist/types/builder/tools/element-edit/map.d.ts +5 -1
  177. package/dist/types/builder/tools/element-edit/marchandiserSets.d.ts +2 -0
  178. package/dist/types/builder/tools/element-edit/orderStatus.d.ts +17 -0
  179. package/dist/types/builder/tools/element-edit/paymentMethods.d.ts +6 -0
  180. package/dist/types/builder/tools/element-edit/productCustomizations.d.ts +14 -0
  181. package/dist/types/builder/tools/element-edit/quickLinks.d.ts +26 -0
  182. package/dist/types/builder/tools/element-edit/scroll.d.ts +2 -11
  183. package/dist/types/builder/tools/element-edit/search.d.ts +1 -0
  184. package/dist/types/builder/tools/element-edit/searchResultsHeading.d.ts +6 -0
  185. package/dist/types/builder/tools/element-edit/shipping-payments.d.ts +72 -0
  186. package/dist/types/builder/tools/element-edit/shippingEstimator.d.ts +4 -0
  187. package/dist/types/builder/tools/element-edit/social.d.ts +2 -0
  188. package/dist/types/builder/tools/element-edit/spotlight.d.ts +2 -0
  189. package/dist/types/builder/tools/element-edit/table.d.ts +10 -0
  190. package/dist/types/builder/tools/element-edit/tabs.d.ts +6 -0
  191. package/dist/types/builder/tools/element-edit/typographyInstance.d.ts +110 -0
  192. package/dist/types/builder/tools/element-edit/userElements.d.ts +50 -11
  193. package/dist/types/builder/tools/element-edit/variantPicker.d.ts +4 -0
  194. package/dist/types/builder/tools/element-edit/video.d.ts +22 -0
  195. package/dist/uom-selector.scss +489 -943
  196. package/dist/user-elements.scss +537 -826
  197. package/dist/variant-picker.scss +1282 -2559
  198. package/dist/video.scss +147 -325
  199. package/dist/volume-pricing.scss +539 -1035
  200. package/dist/wishlist-overlay.scss +48 -48
  201. 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,145 +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-tt-tm: var(
193
- --_ctm-mob-dn-rm-bn-hr-se-tt-tm,
194
- var(--_ctm-tab-dn-rm-bn-hr-se-tt-tm, var(--_ctm-dn-rm-bn-hr-se-tt-tm))
195
- );
196
- --_sf-hr-wd-wp: var(
197
- --_ctm-mob-dn-rm-bn-hr-se-wd-wp,
198
- var(--_ctm-tab-dn-rm-bn-hr-se-wd-wp, var(--_ctm-dn-rm-bn-hr-se-wd-wp))
199
- );
200
- --_sf-hr-wd-bk: var(
201
- --_ctm-mob-dn-rm-bn-hr-se-wd-bk,
202
- var(--_ctm-tab-dn-rm-bn-hr-se-wd-bk, var(--_ctm-dn-rm-bn-hr-se-wd-bk))
203
- );
204
- --_sf-hr-ft-se: var(
205
- --_ctm-mob-dn-rm-bn-hr-se-ft-se,
206
- var(--_ctm-tab-dn-rm-bn-hr-se-ft-se, var(--_ctm-dn-rm-bn-hr-se-ft-se))
207
- );
208
- --_sf-hr-ft-wt: var(
209
- --_ctm-mob-dn-rm-bn-hr-se-ft-wt,
210
- var(--_ctm-tab-dn-rm-bn-hr-se-ft-wt, var(--_ctm-dn-rm-bn-hr-se-ft-wt))
211
- );
212
- --_sf-hr-ft-se-ic: var(
213
- --_ctm-mob-dn-rm-bn-hr-se-ft-se-ic,
214
- var(--_ctm-tab-dn-rm-bn-hr-se-ft-se-ic, var(--_ctm-dn-rm-bn-hr-se-ft-se-ic))
215
- );
216
- --_sf-hr-tt-an: var(
217
- --_ctm-mob-dn-rm-bn-hr-se-tt-an,
218
- var(--_ctm-tab-dn-rm-bn-hr-se-tt-an, var(--_ctm-dn-rm-bn-hr-se-tt-an))
219
- );
220
- --_sf-hr-lr-sg: var(
221
- --_ctm-mob-dn-rm-bn-hr-se-lr-sg,
222
- var(--_ctm-tab-dn-rm-bn-hr-se-lr-sg, var(--_ctm-dn-rm-bn-hr-se-lr-sg))
223
- );
224
- --_sf-hr-le-ht: var(
225
- --_ctm-mob-dn-rm-bn-hr-se-le-ht,
226
- var(--_ctm-tab-dn-rm-bn-hr-se-le-ht, var(--_ctm-dn-rm-bn-hr-se-le-ht))
227
- );
228
-
229
- --_sf-hr-in-se: var(
230
- --_ctm-mob-dn-rm-bn-hr-se-in-se,
231
- var(--_ctm-tab-dn-rm-bn-hr-se-in-se, var(--_ctm-dn-rm-bn-hr-se-in-se))
232
- );
233
- --_sf-hr-in-se: var(
234
- --_ctm-mob-dn-rm-bn-hr-se-in-se,
235
- var(--_ctm-tab-dn-rm-bn-hr-se-in-se, var(--_ctm-dn-rm-bn-hr-se-in-se))
236
- );
237
- --_sf-hr-in-c1: var(
238
- --_ctm-mob-dn-rm-bn-hr-se-in-c1,
239
- var(--_ctm-tab-dn-rm-bn-hr-se-in-c1, var(--_ctm-dn-rm-bn-hr-se-in-c1))
240
- );
241
- --_sf-hr-ue: var(
242
- --_ctm-mob-dn-rm-bn-hr-se-ue,
243
- var(--_ctm-tab-dn-rm-bn-hr-se-ue, var(--_ctm-dn-rm-bn-hr-se-ue))
244
- );
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)));
245
171
 
246
172
  // for pading and width
247
- --_sf-hr-pg: var(
248
- --_ctm-mob-dn-rm-bn-hr-pg,
249
- var(--_ctm-tab-dn-rm-bn-hr-pg, var(--_ctm-dn-rm-bn-hr-pg))
250
- );
251
- --_sf-hr-wh: var(
252
- --_ctm-mob-dn-rm-bn-hr-wh,
253
- var(--_ctm-tab-dn-rm-bn-hr-wh, var(--_ctm-dn-rm-bn-hr-wh))
254
- );
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)));
255
177
 
256
178
  &[data-hover-show-shadow="false"] {
257
179
  --_hover-show-shadow: none;
258
180
  }
181
+
259
182
  &[data-hover-show-icon="false"] {
260
183
  --_hover-show-icon: none;
261
184
  }
262
185
  }
186
+
263
187
  background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-bd-cr));
264
188
 
265
189
  padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-pg));
@@ -273,10 +197,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
273
197
 
274
198
  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-br-rs));
275
199
 
276
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-ae))
277
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-br))
278
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-sd))
279
- 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));
280
201
 
281
202
  &[data-show-border="true"] {
282
203
  border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-br-cr));
@@ -295,6 +216,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
295
216
  text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-tt-tm));
296
217
  word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-wd-wp));
297
218
  word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-wd-bk));
219
+
298
220
  &.flex__overflow {
299
221
  white-space: normal;
300
222
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
@@ -317,6 +239,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
317
239
 
318
240
  .icon {
319
241
  display: var(--_hover-show-icon, var(--_show-icon, flex));
242
+
320
243
  svg {
321
244
  width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-in-se));
322
245
  height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-in-se));
@@ -328,6 +251,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
328
251
  }
329
252
  }
330
253
  }
254
+
331
255
  [data-element-style="Text"] {
332
256
  display: inline-block;
333
257
  width: 100%;
@@ -359,19 +283,23 @@ $resizeActive: '[data-cms-element-resizer="true"]';
359
283
  align-self: stretch;
360
284
  align-items: center;
361
285
  width: 100%;
286
+
362
287
  .table__wrapper,
363
288
  .table__container {
364
289
  // overflow: visible !important;
365
290
  overflow-x: auto;
366
291
  scrollbar-width: none;
367
292
  }
293
+
368
294
  thead th {
369
295
  overflow: visible;
370
296
  position: relative;
371
297
  }
298
+
372
299
  .est__dropdown__main {
373
300
  z-index: var(--_higher-zIndex, 10);
374
301
  }
302
+
375
303
  .table__common_parent {
376
304
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
377
305
  width: 100%;
@@ -400,75 +328,61 @@ $resizeActive: '[data-cms-element-resizer="true"]';
400
328
  --_sf-hr-ls: var(--_ctm-dn-pn-hr-se-lr-sg, var(--_tst-dn-pn-hr-se-lr-sg));
401
329
  --_sf-hr-lh: var(--_ctm-dn-pn-hr-se-le-ht, var(--_tst-dn-pn-hr-se-le-ht));
402
330
  }
331
+
403
332
  &[data-widget-shadow="false"] {
404
333
  .table__wrapper {
405
334
  --_show-shadow: none;
406
335
  }
407
336
  }
337
+
408
338
  &[data-widget-border="true"] {
409
339
  .table__wrapper {
410
- border-color: var(
411
- --_ctm-mob-dn-te-wt-br-cr,
412
- var(--_ctm-tab-dn-te-wt-br-cr, var(--_ctm-dn-te-wt-br-cr))
413
- );
414
- border-style: var(
415
- --_ctm-mob-dn-te-wt-br-se,
416
- var(--_ctm-tab-dn-te-wt-br-se, var(--_ctm-dn-te-wt-br-se))
417
- );
418
- border-width: var(
419
- --_ctm-mob-dn-te-wt-br-wh,
420
- var(--_ctm-tab-dn-te-wt-br-wh, var(--_ctm-dn-te-wt-br-wh))
421
- );
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)));
422
346
  }
423
347
  }
348
+
424
349
  &[data-table-shadow="false"] {
425
350
  .table__container {
426
351
  --_show-table-shadow: none;
427
352
  }
428
353
  }
354
+
429
355
  &[data-table-border="true"] {
430
356
  .table__container {
431
- border-color: var(
432
- --_ctm-mob-dn-te-br-cr,
433
- var(--_ctm-tab-dn-te-br-cr, var(--_ctm-dn-te-br-cr))
434
- );
435
- border-style: var(
436
- --_ctm-mob-dn-te-br-se,
437
- var(--_ctm-tab-dn-te-br-se, var(--_ctm-dn-te-br-se))
438
- );
439
- border-width: var(
440
- --_ctm-mob-dn-te-br-wh,
441
- var(--_ctm-tab-dn-te-br-wh, var(--_ctm-dn-te-br-wh))
442
- );
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)));
443
363
  }
444
364
  }
445
365
 
446
366
  &[data-header-divider="true"] {
447
367
  thead tr th {
448
- border-bottom: 1px solid
449
- var(
450
- --_ctm-mob-dn-rw-ad-hr-ds-hr-dr,
451
- var(--_ctm-tab-dn-rw-ad-hr-ds-hr-dr, var(--_ctm-dn-rw-ad-hr-ds-hr-dr))
452
- );
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)));
453
370
  }
454
371
  }
372
+
455
373
  &[data-row-divider="true"] {
456
374
  tbody tr {
457
- border-bottom: 1px solid
458
- var(
459
- --_ctm-mob-dn-rw-ad-hr-ds-rw-dr,
460
- var(--_ctm-tab-dn-rw-ad-hr-ds-rw-dr, var(--_ctm-dn-rw-ad-hr-ds-rw-dr))
461
- );
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)));
462
377
  }
463
378
  }
379
+
464
380
  &[data-column-divider="true"] {
381
+
465
382
  tbody tr td,
466
383
  thead tr th {
467
- border-right: 1px solid
468
- var(
469
- --_ctm-mob-dn-rw-ad-hr-ds-cn-dr,
470
- var(--_ctm-tab-dn-rw-ad-hr-ds-cn-dr, var(--_ctm-dn-rw-ad-hr-ds-cn-dr))
471
- );
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)));
472
386
  }
473
387
 
474
388
  tbody tr td:last-child,
@@ -476,19 +390,16 @@ $resizeActive: '[data-cms-element-resizer="true"]';
476
390
  border-right: none;
477
391
  }
478
392
  }
393
+
479
394
  &[data-show-more-rows="onScroll"] {
480
395
  .table__container {
481
396
  overflow-y: scroll;
482
- height: var(
483
- --_ctm-mob-lt-te-ht,
484
- var(--_ctm-tab-lt-te-ht, var(--_ctm-lt-te-ht))
485
- ) !important;
397
+ height: var(--_ctm-mob-lt-te-ht,
398
+ var(--_ctm-tab-lt-te-ht, var(--_ctm-lt-te-ht))) !important;
486
399
 
487
400
  &::-webkit-scrollbar {
488
- width: var(
489
- --_ctm-mob-dn-sl-br-sl-br-wh,
490
- var(--_ctm-tab-dn-sl-br-sl-br-wh, var(--_ctm-dn-sl-br-sl-br-wh))
491
- );
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)));
492
403
  }
493
404
 
494
405
  &::-webkit-scrollbar-track {
@@ -496,10 +407,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
496
407
  }
497
408
 
498
409
  &::-webkit-scrollbar-thumb {
499
- background-color: var(
500
- --_ctm-mob-dn-sl-br-sl-br-cr,
501
- var(--_ctm-tab-dn-sl-br-sl-br-cr, var(--_ctm-dn-sl-br-sl-br-cr))
502
- );
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)));
503
412
  }
504
413
 
505
414
  // // Scrollbar thumb when hovered
@@ -518,65 +427,38 @@ $resizeActive: '[data-cms-element-resizer="true"]';
518
427
  background-color: prepareMediaVariable(--_ctm-dn-rw-ae-cr-bd-cr);
519
428
  }
520
429
  }
430
+
521
431
  .table__wrapper {
522
432
  flex: 1 1 auto;
523
433
  min-width: 0;
524
434
  overflow-x: auto;
525
- padding: var(
526
- --_ctm-mob-lt-pg,
527
- var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg, var(--_tst-lt-pg)))
528
- );
529
-
530
- background-color: var(
531
- --_ctm-mob-dn-te-wt-bd-cr,
532
- var(--_ctm-tab-dn-te-wt-bd-cr, var(--_ctm-dn-te-wt-bd-cr, var(--_tst-dn-te-wt-bd-cr)))
533
- );
534
-
535
- border-radius: var(
536
- --_ctm-mob-dn-te-wt-br-rs,
537
- var(--_ctm-tab-dn-te-wt-br-rs, var(--_ctm-dn-te-wt-br-rs, var(--_tst-dn-te-wt-br-rs)))
538
- );
539
-
540
- box-shadow: var(
541
- --_show-shadow,
542
- var(
543
- --_ctm-mob-dn-te-wt-sw-ae,
544
- var(--_ctm-tab-dn-te-wt-sw-ae, var(--_ctm-dn-te-wt-sw-ae))
545
- )
546
- var(
547
- --_ctm-mob-dn-te-wt-sw-br,
548
- var(--_ctm-tab-dn-te-wt-sw-br, var(--_ctm-dn-te-wt-sw-br))
549
- )
550
- var(
551
- --_ctm-mob-dn-te-wt-sw-sd,
552
- var(--_ctm-tab-dn-te-wt-sw-sd, var(--_ctm-dn-te-wt-sw-sd))
553
- )
554
- var(
555
- --_ctm-mob-dn-te-wt-sw-cr,
556
- var(--_ctm-tab-dn-te-wt-sw-cr, var(--_ctm-dn-te-wt-sw-cr))
557
- )
558
- );
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))));
559
450
 
560
451
  width: 100%;
561
452
 
562
453
  .table__container {
563
- background-color: var(
564
- --_ctm-mob-dn-te-bd-cr,
565
- var(--_ctm-tab-dn-te-bd-cr, var(--_ctm-dn-te-bd-cr))
566
- );
567
-
568
- border-radius: var(
569
- --_ctm-mob-dn-te-br-rs,
570
- var(--_ctm-tab-dn-te-br-rs, var(--_ctm-dn-te-br-rs))
571
- );
572
-
573
- box-shadow: var(
574
- --_show-table-shadow,
575
- var(--_ctm-mob-dn-te-sw-ae, var(--_ctm-tab-dn-te-sw-ae, var(--_ctm-dn-te-sw-ae)))
576
- var(--_ctm-mob-dn-te-sw-br, var(--_ctm-tab-dn-te-sw-br, var(--_ctm-dn-te-sw-br)))
577
- var(--_ctm-mob-dn-te-sw-sd, var(--_ctm-tab-dn-te-sw-sd, var(--_ctm-dn-te-sw-sd)))
578
- var(--_ctm-mob-dn-te-sw-cr, var(--_ctm-tab-dn-te-sw-cr, var(--_ctm-dn-te-sw-cr)))
579
- );
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))));
580
462
  }
581
463
 
582
464
  h3 {
@@ -584,6 +466,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
584
466
  width: 100%;
585
467
  margin-bottom: 10px;
586
468
  }
469
+
587
470
  table {
588
471
  border-collapse: collapse;
589
472
  // border: none;
@@ -593,69 +476,49 @@ $resizeActive: '[data-cms-element-resizer="true"]';
593
476
  width: max-content;
594
477
  min-width: 100%;
595
478
  table-layout: auto;
479
+
596
480
  th,
597
481
  td {
598
482
  border: none;
599
483
  }
484
+
600
485
  thead {
601
- background-color: var(
602
- --_ctm-mob-dn-te-hr-bd-cr,
603
- var(--_ctm-tab-dn-te-hr-bd-cr, var(--_ctm-dn-te-hr-bd-cr))
604
- );
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)));
605
488
 
606
489
  .thead__row__divider {
607
490
  height: var(--_ctm-mob-lt-hr-ht, var(--_ctm-tab-lt-hr-ht, var(--_ctm-lt-hr-ht)));
608
491
 
609
492
  .th__col__divider {
610
- padding: var(
611
- --_ctm-mob-lt-hr-cl-pg,
612
- var(--_ctm-tab-lt-hr-cl-pg, var(--_ctm-lt-hr-cl-pg))
613
- );
614
-
615
- color: var(
616
- --_ctm-mob-dn-hr-tt-cr,
617
- var(--_ctm-tab-dn-hr-tt-cr, var(--_ctm-dn-hr-tt-cr))
618
- );
619
-
620
- font-family: var(
621
- --_ctm-mob-dn-hr-tt-ft-fy,
622
- var(--_ctm-tab-dn-hr-tt-ft-fy, var(--_ctm-dn-hr-tt-ft-fy))
623
- );
624
-
625
- font-size: var(
626
- --_ctm-mob-dn-hr-tt-ft-se,
627
- var(--_ctm-tab-dn-hr-tt-ft-se, var(--_ctm-dn-hr-tt-ft-se))
628
- );
629
-
630
- font-weight: var(
631
- --_ctm-mob-dn-hr-tt-ft-wt,
632
- var(--_ctm-tab-dn-hr-tt-ft-wt, var(--_ctm-dn-hr-tt-ft-wt))
633
- );
634
-
635
- text-decoration: var(
636
- --_ctm-mob-dn-hr-tt-ue,
637
- var(--_ctm-tab-dn-hr-tt-ue, var(--_ctm-dn-hr-tt-ue))
638
- );
639
-
640
- font-style: var(
641
- --_ctm-mob-dn-hr-tt-ft-se-ic,
642
- var(--_ctm-tab-dn-hr-tt-ft-se-ic, var(--_ctm-dn-hr-tt-ft-se-ic))
643
- );
644
-
645
- text-align: var(
646
- --_ctm-mob-dn-hr-tt-tt-an,
647
- var(--_ctm-tab-dn-hr-tt-tt-an, var(--_ctm-dn-hr-tt-tt-an))
648
- );
649
-
650
- letter-spacing: var(
651
- --_ctm-mob-dn-hr-tt-lr-sg,
652
- var(--_ctm-tab-dn-hr-tt-lr-sg, var(--_ctm-dn-hr-tt-lr-sg))
653
- );
654
-
655
- line-height: var(
656
- --_ctm-mob-dn-hr-tt-le-ht,
657
- var(--_ctm-tab-dn-hr-tt-le-ht, var(--_ctm-dn-hr-tt-le-ht))
658
- );
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)));
659
522
 
660
523
  // Header Text > Text Transform and the word wrap/break pair that the
661
524
  // typography panel renders alongside it.
@@ -679,8 +542,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
679
542
  }
680
543
  }
681
544
  }
545
+
682
546
  tbody {
683
547
  .tbody__row__divider {
548
+
684
549
  // Set by CommonTable only when the caller passed onRowClick.
685
550
  // The cells carry it too: a <td> establishes its own cursor context,
686
551
  // so the pointer would stop at the row padding otherwise.
@@ -693,126 +558,68 @@ $resizeActive: '[data-cms-element-resizer="true"]';
693
558
  }
694
559
  }
695
560
 
696
- background-color: var(
697
- --_ctm-mob-dn-te-rw-bd-cr,
698
- var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr))
699
- );
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)));
700
563
 
701
564
  // Table Row > Hover Background. Falls back to the default background
702
565
  // so a row that has no hover colour set does not go transparent.
703
566
  &:hover {
704
- background-color: var(
705
- --_ctm-mob-dn-te-rw-bd-cr-hr,
706
- var(
707
- --_ctm-tab-dn-te-rw-bd-cr-hr,
708
- var(
709
- --_ctm-dn-te-rw-bd-cr-hr,
710
- var(
711
- --_ctm-mob-dn-te-rw-bd-cr,
712
- var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr))
713
- )
714
- )
715
- )
716
- );
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))))));
717
572
  }
718
573
 
719
574
  height: var(--_ctm-mob-lt-rw-ht, var(--_ctm-tab-lt-rw-ht, var(--_ctm-lt-rw-ht)));
720
575
 
721
576
  .td__col__divider {
722
- padding: var(
723
- --_ctm-mob-lt-rw-cl-pg,
724
- var(--_ctm-tab-lt-rw-cl-pg, var(--_ctm-lt-rw-cl-pg))
725
- );
726
-
727
- color: var(
728
- --_sf-hr-fc,
729
- var(
730
- --_ctm-mob-dn-rw-tt-cr,
731
- var(--_ctm-tab-dn-rw-tt-cr, var(--_ctm-dn-rw-tt-cr))
732
- )
733
- );
734
-
735
- font-family: var(
736
- --_sf-hr-ff,
737
- var(
738
- --_ctm-mob-dn-rw-tt-ft-fy,
739
- var(--_ctm-tab-dn-rw-tt-ft-fy, var(--_ctm-dn-rw-tt-ft-fy))
740
- )
741
- );
742
- text-transform: var(
743
- --_sf-hr-tt-tm,
744
- var(
745
- --_ctm-mob-dn-rw-tt-tt-tm,
746
- var(--_ctm-tab-dn-rw-tt-tt-tm, var(--_ctm-dn-rw-tt-tt-tm))
747
- )
748
- );
749
- word-wrap: var(
750
- --_sf-hr-wd-wp,
751
- var(
752
- --_ctm-mob-dn-rw-tt-wd-wp,
753
- var(--_ctm-tab-dn-rw-tt-wd-wp, var(--_ctm-dn-rw-tt-wd-wp))
754
- )
755
- );
756
- word-break: var(
757
- --_sf-hr-wd-bk,
758
- var(
759
- --_ctm-mob-dn-rw-tt-wd-bk,
760
- var(--_ctm-tab-dn-rw-tt-wd-bk, var(--_ctm-dn-rw-tt-wd-bk))
761
- )
762
- );
763
-
764
- font-size: var(
765
- --_sf-hr-fs,
766
- var(
767
- --_ctm-mob-dn-rw-tt-ft-se,
768
- var(--_ctm-tab-dn-rw-tt-ft-se, var(--_ctm-dn-rw-tt-ft-se))
769
- )
770
- );
771
-
772
- text-decoration: var(
773
- --_ctm-mob-dn-rw-tt-ue,
774
- var(--_ctm-tab-dn-rw-tt-ue, var(--_ctm-dn-rw-tt-ue))
775
- );
776
-
777
- font-weight: var(
778
- --_sf-hr-fw,
779
- var(
780
- --_ctm-mob-dn-rw-tt-ft-wt,
781
- var(--_ctm-tab-dn-rw-tt-ft-wt, var(--_ctm-dn-rw-tt-ft-wt))
782
- )
783
- );
784
-
785
- font-style: var(
786
- --_sf-hr-ft,
787
- var(
788
- --_ctm-mob-dn-rw-tt-ft-se-ic,
789
- var(--_ctm-tab-dn-rw-tt-ft-se-ic, var(--_ctm-dn-rw-tt-ft-se-ic))
790
- )
791
- );
792
-
793
- text-align: var(
794
- --_sf-hr-ta,
795
- var(
796
- --_ctm-mob-dn-rw-tt-tt-an,
797
- var(--_ctm-tab-dn-rw-tt-tt-an, var(--_ctm-dn-rw-tt-tt-an))
798
- )
799
- );
800
-
801
- letter-spacing: var(
802
- --_sf-hr-ls,
803
- var(
804
- --_ctm-mob-dn-rw-tt-lr-sg,
805
- var(--_ctm-tab-dn-rw-tt-lr-sg, var(--_ctm-dn-rw-tt-lr-sg))
806
- )
807
- );
808
-
809
- line-height: var(
810
- --_sf-hr-lh,
811
- var(
812
- --_ctm-mob-dn-rw-tt-le-ht,
813
- var(--_ctm-tab-dn-rw-tt-le-ht, var(--_ctm-dn-rw-tt-le-ht))
814
- )
815
- );
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))));
816
623
  }
817
624
  }
818
625
  }
@@ -821,18 +628,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
821
628
  .pagination {
822
629
  display: var(--_d-flex);
823
630
  align-items: var(--_align-center);
824
- justify-content: var(
825
- --_ctm-mob-lt-pn-at,
826
- var(--_ctm-tab-lt-pn-at, var(--_ctm-lt-pn-at))
827
- );
631
+ justify-content: var(--_ctm-mob-lt-pn-at,
632
+ var(--_ctm-tab-lt-pn-at, var(--_ctm-lt-pn-at)));
828
633
  margin-top: 10px;
829
- background-color: var(
830
- --_sf-bd-cr,
831
- var(
832
- --_ctm-mob-dn-pn-dt-se-bd-cr,
833
- var(--_ctm-tab-dn-pn-dt-se-bd-cr, var(--_ctm-dn-pn-dt-se-bd-cr))
834
- )
835
- );
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
+
836
638
  &.pagination__center {
837
639
  justify-content: var(justify-center);
838
640
  }
@@ -843,48 +645,27 @@ $resizeActive: '[data-cms-element-resizer="true"]';
843
645
  border-style: prepareMediaVariable(--_ctm-dn-pn-dt-se-br-se, none);
844
646
  border-width: prepareMediaVariable(--_ctm-dn-pn-dt-se-br-wh, 0);
845
647
  border-radius: prepareMediaVariable(--_ctm-dn-pn-dt-se-br-rs, 0);
846
- box-shadow: var(
847
- --_show-shadow,
848
- prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-ae, 0)
849
- prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-br, 0)
850
- prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-sd, 0)
851
- prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-cr, transparent)
852
- );
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));
853
650
 
854
651
  &:hover {
855
- background-color: var(
856
- --_sf-bd-cr,
857
- prepareMediaVariable(
858
- --_ctm-dn-pn-hr-se-bd-cr,
859
- prepareMediaVariable(--_ctm-dn-pn-dt-se-bd-cr)
860
- )
861
- );
862
- border-color: prepareMediaVariable(
863
- --_ctm-dn-pn-hr-se-br-cr,
864
- prepareMediaVariable(--_ctm-dn-pn-dt-se-br-cr)
865
- );
866
- border-style: prepareMediaVariable(
867
- --_ctm-dn-pn-hr-se-br-se,
868
- prepareMediaVariable(--_ctm-dn-pn-dt-se-br-se, none)
869
- );
870
- border-width: prepareMediaVariable(
871
- --_ctm-dn-pn-hr-se-br-wh,
872
- prepareMediaVariable(--_ctm-dn-pn-dt-se-br-wh, 0)
873
- );
874
- border-radius: prepareMediaVariable(
875
- --_ctm-dn-pn-hr-se-br-rs,
876
- prepareMediaVariable(--_ctm-dn-pn-dt-se-br-rs, 0)
877
- );
878
- box-shadow: var(
879
- --_show-shadow,
880
- prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-ae, 0)
881
- prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-br, 0)
882
- prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-sd, 0)
883
- prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-cr, transparent)
884
- );
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));
885
665
  }
886
666
 
887
667
  button {
668
+
888
669
  // Default glyph shows, hover glyph waits. Both are in the DOM so the
889
670
  // swap costs no re-render; when no hover icon is picked the renderer
890
671
  // falls back to the default one, so the pair looks identical.
@@ -913,6 +694,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
913
694
  // pinned to a hardcoded 18px and grey, so neither control did anything.
914
695
  width: prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se, 18px);
915
696
  height: prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se, 18px);
697
+
916
698
  path {
917
699
  stroke: prepareMediaVariable(--_ctm-dn-pn-dt-se-in-c1, var(--_gray-500));
918
700
  // Overrides the stroke-width presentation attribute baked into the icon markup.
@@ -921,26 +703,23 @@ $resizeActive: '[data-cms-element-resizer="true"]';
921
703
  }
922
704
 
923
705
  &:hover svg {
924
- width: prepareMediaVariable(
925
- --_ctm-dn-pn-hr-se-in-se,
926
- prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se, 18px)
927
- );
928
- height: prepareMediaVariable(
929
- --_ctm-dn-pn-hr-se-in-se,
930
- prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se, 18px)
931
- );
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
+
932
711
  path {
933
- stroke: prepareMediaVariable(
934
- --_ctm-dn-pn-hr-se-in-c1,
935
- prepareMediaVariable(--_ctm-dn-pn-dt-se-in-c1, var(--_gray-500))
936
- );
712
+ stroke: prepareMediaVariable(--_ctm-dn-pn-hr-se-in-c1,
713
+ prepareMediaVariable(--_ctm-dn-pn-dt-se-in-c1, var(--_gray-500)));
937
714
  }
938
715
  }
939
716
  }
717
+
940
718
  span {
941
719
  float: left;
942
720
  padding: var(--_pd-8) var(--_pd-16);
943
721
  text-decoration: none;
722
+
944
723
  span {
945
724
  // color: var(--_sf-hr-fc, var(--_ctm-dn-pn-bn-cr, var(--_tst-dn-pn-bn-cr)));
946
725
  // font-size: var(--_sf-hr-fs, var(--_ctm-dn-pn-ft-se, var(--_tst-dn-pn-ft-se)));
@@ -952,6 +731,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
952
731
  // letter-spacing: var(--_sf-hr-ls, var(--_ctm-dn-pn-lr-sg, var(--_tst-dn-pn-lr-sg)));
953
732
  // line-height: var(--_sf-hr-lh, var(--_ctm-dn-pn-le-ht, var(--_tst-dn-pn-le-ht)));
954
733
  }
734
+
955
735
  &.active:hover {
956
736
  &hover {
957
737
  --_sf-hr-fc: var(--_ctm-dn-pn-hr-se-cr, var(--_tst-dn-pn-hr-se-cr));
@@ -967,101 +747,55 @@ $resizeActive: '[data-cms-element-resizer="true"]';
967
747
  --_sf-hr-lh: var(--_ctm-dn-pn-hr-se-le-ht, var(--_tst-dn-pn-hr-se-le-ht));
968
748
  }
969
749
  }
750
+
970
751
  &.active {
971
- color: var(
972
- --_sf-hr-fc,
973
- var(
974
- --_ctm-mob-dn-pn-dt-se-cr,
975
- var(--_ctm-tab-dn-pn-dt-se-cr, var(--_ctm-dn-pn-dt-se-cr))
976
- )
977
- );
978
-
979
- font-family: var(
980
- --_sf-hr-ff,
981
- var(
982
- --_ctm-mob-dn-pn-dt-se-ft-fy,
983
- var(--_ctm-tab-dn-pn-dt-se-ft-fy, var(--_ctm-dn-pn-dt-se-ft-fy))
984
- )
985
- );
986
- text-transform: var(
987
- --_sf-hr-tt-tm,
988
- var(
989
- --_ctm-mob-dn-pn-dt-se-tt-tm,
990
- var(--_ctm-tab-dn-pn-dt-se-tt-tm, var(--_ctm-dn-pn-dt-se-tt-tm))
991
- )
992
- );
993
- word-wrap: var(
994
- --_sf-hr-wd-wp,
995
- var(
996
- --_ctm-mob-dn-pn-dt-se-wd-wp,
997
- var(--_ctm-tab-dn-pn-dt-se-wd-wp, var(--_ctm-dn-pn-dt-se-wd-wp))
998
- )
999
- );
1000
- word-break: var(
1001
- --_sf-hr-wd-bk,
1002
- var(
1003
- --_ctm-mob-dn-pn-dt-se-wd-bk,
1004
- var(--_ctm-tab-dn-pn-dt-se-wd-bk, var(--_ctm-dn-pn-dt-se-wd-bk))
1005
- )
1006
- );
1007
-
1008
- font-size: var(
1009
- --_sf-hr-fs,
1010
- var(
1011
- --_ctm-mob-dn-pn-dt-se-ft-se,
1012
- var(--_ctm-tab-dn-pn-dt-se-ft-se, var(--_ctm-dn-pn-dt-se-ft-se))
1013
- )
1014
- );
1015
-
1016
- text-decoration: var(
1017
- --_sf-hr-td,
1018
- var(
1019
- --_ctm-mob-dn-pn-dt-se-ue,
1020
- var(--_ctm-tab-dn-pn-dt-se-ue, var(--_ctm-dn-pn-dt-se-ue))
1021
- )
1022
- );
1023
-
1024
- font-weight: var(
1025
- --_sf-hr-fw,
1026
- var(
1027
- --_ctm-mob-dn-pn-dt-se-ft-wt,
1028
- var(--_ctm-tab-dn-pn-dt-se-ft-wt, var(--_ctm-dn-pn-dt-se-ft-wt))
1029
- )
1030
- );
1031
-
1032
- font-style: var(
1033
- --_sf-hr-ft,
1034
- var(
1035
- --_ctm-mob-dn-pn-dt-se-ft-se-ic,
1036
- var(--_ctm-tab-dn-pn-dt-se-ft-se-ic, var(--_ctm-dn-pn-dt-se-ft-se-ic))
1037
- )
1038
- );
1039
-
1040
- text-align: var(
1041
- --_sf-hr-ta,
1042
- var(
1043
- --_ctm-mob-dn-pn-dt-se-tt-an,
1044
- var(--_ctm-tab-dn-pn-dt-se-tt-an, var(--_ctm-dn-pn-dt-se-tt-an))
1045
- )
1046
- );
1047
-
1048
- letter-spacing: var(
1049
- --_sf-hr-ls,
1050
- var(
1051
- --_ctm-mob-dn-pn-dt-se-lr-sg,
1052
- var(--_ctm-tab-dn-pn-dt-se-lr-sg, var(--_ctm-dn-pn-dt-se-lr-sg))
1053
- )
1054
- );
1055
-
1056
- line-height: var(
1057
- --_sf-hr-lh,
1058
- var(
1059
- --_ctm-mob-dn-pn-dt-se-le-ht,
1060
- var(--_ctm-tab-dn-pn-dt-se-le-ht, var(--_ctm-dn-pn-dt-se-le-ht))
1061
- )
1062
- );
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))));
1063
796
  }
1064
797
  }
798
+
1065
799
  // Same wrong path as the svg rule above: the icon variables carry the
1066
800
  // section's state segment. Only the "next" button has this class in the
1067
801
  // markup, so the svg rules are what actually style both arrows — these are
@@ -1071,14 +805,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1071
805
  font-size: prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se);
1072
806
 
1073
807
  &:hover {
1074
- color: prepareMediaVariable(
1075
- --_ctm-dn-pn-hr-se-in-c1,
1076
- prepareMediaVariable(--_ctm-dn-pn-dt-se-in-c1)
1077
- );
1078
- font-size: prepareMediaVariable(
1079
- --_ctm-dn-pn-hr-se-in-se,
1080
- prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se)
1081
- );
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));
1082
812
  }
1083
813
  }
1084
814
  }
@@ -1110,6 +840,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1110
840
  // font-weight: 400;
1111
841
  // line-height: 24px;
1112
842
  width: 100%;
843
+
1113
844
  &:nth-of-type(1) {
1114
845
  color: prepareMediaVariable(--_ctm-dn-te-cr);
1115
846
  font-family: prepareMediaVariable(--_ctm-dn-te-ft-fy);
@@ -1124,6 +855,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1124
855
  line-height: prepareMediaVariable(--_ctm-dn-te-le-ht);
1125
856
  text-decoration: prepareMediaVariable(--_ctm-dn-te-ue);
1126
857
  }
858
+
1127
859
  &:nth-of-type(2) {
1128
860
  color: prepareMediaVariable(--_ctm-dn-dn-cr);
1129
861
  font-family: prepareMediaVariable(--_ctm-dn-dn-ft-fy);
@@ -1174,149 +906,99 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1174
906
  }
1175
907
  }
1176
908
  }
909
+
1177
910
  .btn__with__text[data-btn-name="loadMore"] {
1178
911
  &[data-show-shadow="false"] {
1179
912
  --_show-shadow: none;
1180
913
  }
914
+
1181
915
  &[data-icon-position="left"] {
1182
916
  --_sf-fd-bn: row;
1183
917
  }
918
+
1184
919
  &[data-icon-position="right"] {
1185
920
  --_sf-fd-bn: row-reverse;
1186
921
  }
922
+
1187
923
  &[data-icon-position="center"] {
1188
924
  --_sf-fd-bn: row;
1189
925
  }
1190
926
 
1191
927
  &:hover {
1192
- --_sf-hr-bd-cr: var(
1193
- --_ctm-mob-dn-ld-me-bn-hr-se-bd-cr,
1194
- var(--_ctm-tab-dn-ld-me-bn-hr-se-bd-cr, var(--_ctm-dn-ld-me-bn-hr-se-bd-cr))
1195
- );
1196
- --_sf-hr-br-cr: var(
1197
- --_ctm-mob-dn-ld-me-bn-hr-se-br-cr,
1198
- var(--_ctm-tab-dn-ld-me-bn-hr-se-br-cr, var(--_ctm-dn-ld-me-bn-hr-se-br-cr))
1199
- );
1200
- --_sf-hr-br-se: var(
1201
- --_ctm-mob-dn-ld-me-bn-hr-se-br-se,
1202
- var(--_ctm-tab-dn-ld-me-bn-hr-se-br-se, var(--_ctm-dn-ld-me-bn-hr-se-br-se))
1203
- );
1204
- --_sf-hr-br-wh: var(
1205
- --_ctm-mob-dn-ld-me-bn-hr-se-br-wh,
1206
- var(--_ctm-tab-dn-ld-me-bn-hr-se-br-wh, var(--_ctm-dn-ld-me-bn-hr-se-br-wh))
1207
- );
1208
- --_sf-hr-br-rs: var(
1209
- --_ctm-mob-dn-ld-me-bn-hr-se-br-rs,
1210
- var(--_ctm-tab-dn-ld-me-bn-hr-se-br-rs, var(--_ctm-dn-ld-me-bn-hr-se-br-rs))
1211
- );
1212
- --_sf-hr-at: var(
1213
- --_ctm-mob-dn-ld-me-bn-hr-se-at,
1214
- var(--_ctm-tab-dn-ld-me-bn-hr-se-at, var(--_ctm-dn-ld-me-bn-hr-se-at))
1215
- );
1216
- --_sf-hr-gp: var(
1217
- --_ctm-mob-dn-ld-me-bn-hr-se-gp,
1218
- var(--_ctm-tab-dn-ld-me-bn-hr-se-gp, var(--_ctm-dn-ld-me-bn-hr-se-gp))
1219
- );
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)));
1220
942
 
1221
943
  // for shadow
1222
- --_sf-hr-sw-ae: var(
1223
- --_ctm-mob-dn-ld-me-bn-hr-se-sw-ae,
1224
- var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-ae, var(--_ctm-dn-ld-me-bn-hr-se-sw-ae))
1225
- );
1226
- --_sf-hr-sw-br: var(
1227
- --_ctm-mob-dn-ld-me-bn-hr-se-sw-br,
1228
- var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-br, var(--_ctm-dn-ld-me-bn-hr-se-sw-br))
1229
- );
1230
- --_sf-hr-sw-hr: var(
1231
- --_ctm-mob-dn-ld-me-bn-hr-se-sw-hr,
1232
- var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-hr, var(--_ctm-dn-ld-me-bn-hr-se-sw-hr))
1233
- );
1234
- --_sf-hr-sw-cr: var(
1235
- --_ctm-mob-dn-ld-me-bn-hr-se-sw-cr,
1236
- var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-cr, var(--_ctm-dn-ld-me-bn-hr-se-sw-cr))
1237
- );
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)));
1238
952
 
1239
953
  // for font
1240
954
 
1241
- --_sf-hr-cr: var(
1242
- --_ctm-mob-dn-ld-me-bn-hr-se-cr,
1243
- var(--_ctm-tab-dn-ld-me-bn-hr-se-cr, var(--_ctm-dn-ld-me-bn-hr-se-cr))
1244
- );
1245
- --_sf-hr-ft-fy: var(
1246
- --_ctm-mob-dn-ld-me-bn-hr-se-ft-fy,
1247
- var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-fy, var(--_ctm-dn-ld-me-bn-hr-se-ft-fy))
1248
- );
1249
- --_sf-hr-tt-tm: var(
1250
- --_ctm-mob-dn-ld-me-bn-hr-se-tt-tm,
1251
- var(--_ctm-tab-dn-ld-me-bn-hr-se-tt-tm, var(--_ctm-dn-ld-me-bn-hr-se-tt-tm))
1252
- );
1253
- --_sf-hr-wd-wp: var(
1254
- --_ctm-mob-dn-ld-me-bn-hr-se-wd-wp,
1255
- var(--_ctm-tab-dn-ld-me-bn-hr-se-wd-wp, var(--_ctm-dn-ld-me-bn-hr-se-wd-wp))
1256
- );
1257
- --_sf-hr-wd-bk: var(
1258
- --_ctm-mob-dn-ld-me-bn-hr-se-wd-bk,
1259
- var(--_ctm-tab-dn-ld-me-bn-hr-se-wd-bk, var(--_ctm-dn-ld-me-bn-hr-se-wd-bk))
1260
- );
1261
- --_sf-hr-ft-se: var(
1262
- --_ctm-mob-dn-ld-me-bn-hr-se-ft-se,
1263
- var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-se, var(--_ctm-dn-ld-me-bn-hr-se-ft-se))
1264
- );
1265
- --_sf-hr-ft-wt: var(
1266
- --_ctm-mob-dn-ld-me-bn-hr-se-ft-wt,
1267
- var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-wt, var(--_ctm-dn-ld-me-bn-hr-se-ft-wt))
1268
- );
1269
- --_sf-hr-ft-se-ic: var(
1270
- --_ctm-mob-dn-ld-me-bn-hr-se-ft-se-ic,
1271
- var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-se-ic, var(--_ctm-dn-ld-me-bn-hr-se-ft-se-ic))
1272
- );
1273
- --_sf-hr-tt-an: var(
1274
- --_ctm-mob-dn-ld-me-bn-hr-se-tt-an,
1275
- var(--_ctm-tab-dn-ld-me-bn-hr-se-tt-an, var(--_ctm-dn-ld-me-bn-hr-se-tt-an))
1276
- );
1277
- --_sf-hr-lr-sg: var(
1278
- --_ctm-mob-dn-ld-me-bn-hr-se-lr-sg,
1279
- var(--_ctm-tab-dn-ld-me-bn-hr-se-lr-sg, var(--_ctm-dn-ld-me-bn-hr-se-lr-sg))
1280
- );
1281
- --_sf-hr-le-ht: var(
1282
- --_ctm-mob-dn-ld-me-bn-hr-se-le-ht,
1283
- var(--_ctm-tab-dn-ld-me-bn-hr-se-le-ht, var(--_ctm-dn-ld-me-bn-hr-se-le-ht))
1284
- );
1285
-
1286
- --_sf-hr-in-se: var(
1287
- --_ctm-mob-dn-ld-me-bn-hr-se-in-se,
1288
- var(--_ctm-tab-dn-ld-me-bn-hr-se-in-se, var(--_ctm-dn-ld-me-bn-hr-se-in-se))
1289
- );
1290
- --_sf-hr-in-se: var(
1291
- --_ctm-mob-dn-ld-me-bn-hr-se-in-se,
1292
- var(--_ctm-tab-dn-ld-me-bn-hr-se-in-se, var(--_ctm-dn-ld-me-bn-hr-se-in-se))
1293
- );
1294
- --_sf-hr-in-c1: var(
1295
- --_ctm-mob-dn-ld-me-bn-hr-se-in-c1,
1296
- var(--_ctm-tab-dn-ld-me-bn-hr-se-in-c1, var(--_ctm-dn-ld-me-bn-hr-se-in-c1))
1297
- );
1298
- --_sf-hr-ue: var(
1299
- --_ctm-mob-dn-ld-me-bn-hr-se-ue,
1300
- var(--_ctm-tab-dn-ld-me-bn-hr-se-ue, var(--_ctm-dn-ld-me-bn-hr-se-ue))
1301
- );
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)));
1302
986
 
1303
987
  // for pading and width
1304
- --_sf-hr-pg: var(
1305
- --_ctm-mob-dn-ld-me-bn-hr-pg,
1306
- var(--_ctm-tab-dn-ld-me-bn-hr-pg, var(--_ctm-dn-ld-me-bn-hr-pg))
1307
- );
1308
- --_sf-hr-wh: var(
1309
- --_ctm-mob-dn-ld-me-bn-hr-wh,
1310
- var(--_ctm-tab-dn-ld-me-bn-hr-wh, var(--_ctm-dn-ld-me-bn-hr-wh))
1311
- );
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)));
1312
992
 
1313
993
  &[data-hover-show-shadow="false"] {
1314
994
  --_hover-show-shadow: none;
1315
995
  }
996
+
1316
997
  &[data-hover-show-icon="false"] {
1317
998
  --_hover-show-icon: none;
1318
999
  }
1319
1000
  }
1001
+
1320
1002
  background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-bd-cr));
1321
1003
 
1322
1004
  padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-pg));
@@ -1330,10 +1012,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1330
1012
 
1331
1013
  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-rs));
1332
1014
 
1333
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-ae))
1334
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-br))
1335
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-sd))
1336
- 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));
1337
1016
 
1338
1017
  &[data-show-border="true"] {
1339
1018
  border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-cr));
@@ -1352,6 +1031,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1352
1031
  text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-tt-tm));
1353
1032
  word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-wd-wp));
1354
1033
  word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-wd-bk));
1034
+
1355
1035
  &.flex__overflow {
1356
1036
  white-space: normal;
1357
1037
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
@@ -1361,10 +1041,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1361
1041
 
1362
1042
  font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-wt));
1363
1043
 
1364
- font-style: var(
1365
- --_sf-hr-ft-se-ic,
1366
- prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-se-ic)
1367
- );
1044
+ font-style: var(--_sf-hr-ft-se-ic,
1045
+ prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-se-ic));
1368
1046
 
1369
1047
  text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-tt-an));
1370
1048
 
@@ -1377,6 +1055,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1377
1055
 
1378
1056
  .icon {
1379
1057
  display: var(--_hover-show-icon, var(--_show-icon, flex));
1058
+
1380
1059
  svg {
1381
1060
  width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-se));
1382
1061
  height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-se));
@@ -1388,6 +1067,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1388
1067
  }
1389
1068
  }
1390
1069
  }
1070
+
1391
1071
  [data-element-style="Text"] {
1392
1072
  display: inline-block;
1393
1073
  width: 100%;
@@ -1422,16 +1102,19 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1422
1102
  width: 100%;
1423
1103
  flex-direction: column;
1424
1104
  height: auto;
1105
+
1425
1106
  .slider_header_wrapper {
1426
1107
  display: flex;
1427
1108
  align-items: center;
1428
1109
  gap: 12px;
1429
1110
  justify-content: space-between;
1430
1111
  width: 100%;
1112
+
1431
1113
  .slider_header_wrapper_left {
1432
1114
  display: flex;
1433
1115
  align-items: center;
1434
1116
  gap: 12px;
1117
+
1435
1118
  // Stands in for the profile dropdown when there is only one
1436
1119
  // profile. Matches the heading beside it so the row reads as one line.
1437
1120
  .allocation_single_profile_name {
@@ -1458,6 +1141,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1458
1141
  display: flex;
1459
1142
  }
1460
1143
  }
1144
+
1461
1145
  .redeem_now_wrapper {
1462
1146
  .redeem_now_btn {
1463
1147
  display: flex;
@@ -1485,6 +1169,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1485
1169
  }
1486
1170
 
1487
1171
  .allocations_slider_slide_wrapper {
1172
+
1488
1173
  // Clicking an allocation selects it and its profile (it replaced the
1489
1174
  // Redeem button), so the whole slide is the hit area.
1490
1175
  &[data-is-clickable="true"] {
@@ -1538,6 +1223,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1538
1223
  }
1539
1224
  }
1540
1225
  }
1226
+
1541
1227
  .est__dropdown__main {
1542
1228
  position: relative;
1543
1229
  min-width: 150px;
@@ -1552,6 +1238,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1552
1238
 
1553
1239
  .est__dropdown {
1554
1240
  position: relative;
1241
+
1555
1242
  .est__dropdown__button {
1556
1243
  display: flex;
1557
1244
  align-items: center;
@@ -1592,7 +1279,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1592
1279
  --_sf-bmm-cr: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-cr)};
1593
1280
  }
1594
1281
 
1595
- & > span {
1282
+ &>span {
1596
1283
  display: var(--_d-flex);
1597
1284
 
1598
1285
  &:nth-of-type(1) {
@@ -1602,23 +1289,16 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1602
1289
  background: transparent;
1603
1290
  color: var(--_sf-bmm-cr, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-cr));
1604
1291
  font-family: var(--_sf-bmm-ft-fy, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-ft-fy));
1605
- text-transform: var(
1606
- --_sf-bmm-tt-tm,
1607
- prepareMediaVariable(--_ctm-dn-dn-st-dt-se-tt-tm)
1608
- );
1292
+ text-transform: var(--_sf-bmm-tt-tm, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-tt-tm));
1609
1293
  word-wrap: var(--_sf-bmm-wd-wp, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-wd-wp));
1610
1294
  word-break: var(--_sf-bmm-wd-bk, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-wd-bk));
1611
1295
  font-size: var(--_sf-bmm-ft-se, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-ft-se));
1612
1296
  font-weight: var(--_sf-bmm-ft-wt, (--_ctm-dn-dn-st-dt-se-ft-wt));
1613
- font-style: var(
1614
- --_sf-bmm-ft-se-ic,
1615
- prepareMediaVariable(--_ctm-dn-dn-st-dt-se-ft-se-ic)
1616
- );
1297
+ font-style: var(--_sf-bmm-ft-se-ic,
1298
+ prepareMediaVariable(--_ctm-dn-dn-st-dt-se-ft-se-ic));
1617
1299
  text-align: var(--_sf-bmm-tt-an, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-tt-an));
1618
- letter-spacing: var(
1619
- --_sf-bmm-lr-sg,
1620
- prepareMediaVariable(--_ctm-dn-dn-st-dt-se-lr-sg)
1621
- );
1300
+ letter-spacing: var(--_sf-bmm-lr-sg,
1301
+ prepareMediaVariable(--_ctm-dn-dn-st-dt-se-lr-sg));
1622
1302
  line-height: var(--_sf-bmm-le-ht, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-le-ht));
1623
1303
  text-decoration: var(--_sf-bmm-ue, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-ue));
1624
1304
 
@@ -1680,75 +1360,44 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1680
1360
  // padding: 12px;
1681
1361
  cursor: pointer;
1682
1362
  // text-align: left;
1683
- border-color: var(
1684
- --_sf-bmm-v1-br-clr,
1685
- #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-br-cr)}
1686
- );
1687
- border-width: var(
1688
- --_sf-bmm-v1-br-wh,
1689
- #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-br-wh)}
1690
- );
1691
- border-style: var(
1692
- --_sf-bmm-v1-br-se,
1693
- #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-br-se)}
1694
- );
1695
- border-radius: var(
1696
- --_sf-bmm-v1-br-rs,
1697
- #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-br-rs)}
1698
- );
1699
-
1700
- background: var(
1701
- --_sf-bmm-v1-bd-cr,
1702
- #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-bd-cr)}
1703
- );
1704
-
1705
- padding: var(
1706
- --_sf-bmm-v1-pg,
1707
- #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-pg, 12px)}
1708
- );
1709
-
1710
- font-family: var(
1711
- --_sf-bmm-v1-ft-fy,
1712
- prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-ft-fy)
1713
- );
1714
- text-transform: var(
1715
- --_sf-bmm-v1-tt-tm,
1716
- prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-tt-tm)
1717
- );
1718
- word-wrap: var(
1719
- --_sf-bmm-v1-wd-wp,
1720
- prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-wd-wp)
1721
- );
1722
- word-break: var(
1723
- --_sf-bmm-v1-wd-bk,
1724
- prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-wd-bk)
1725
- );
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));
1726
1386
  color: var(--_sf-bmm-v1-cr, prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-cr));
1727
- font-size: var(
1728
- --_sf-bmm-v1-ft-se,
1729
- prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-ft-se)
1730
- );
1387
+ font-size: var(--_sf-bmm-v1-ft-se,
1388
+ prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-ft-se));
1731
1389
  font-weight: var(--_sf-bmm-v1-ft-wt, (--_ctm-dn-dn-lt-im-dt-se-ft-wt));
1732
- font-style: var(
1733
- --_sf-bmm-v1-ft-se-ic,
1734
- prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-ft-se-ic)
1735
- );
1736
- text-align: var(
1737
- --_sf-bmm-v1-tt-an,
1738
- prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-tt-an)
1739
- );
1740
- letter-spacing: var(
1741
- --_sf-bmm-v1-lr-sg,
1742
- prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-lr-sg)
1743
- );
1744
- line-height: var(
1745
- --_sf-bmm-v1-le-ht,
1746
- prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-le-ht)
1747
- );
1748
- text-decoration: var(
1749
- --_sf-bmm-v1-ue,
1750
- prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-ue)
1751
- );
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
+
1752
1401
  &.selected {
1753
1402
  // background-color: var(--_primary-25);
1754
1403
  // color: var(--_primary-400);
@@ -1772,6 +1421,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1772
1421
 
1773
1422
  --_sf-bmm-v1-cr: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-sd-se-cr)};
1774
1423
  }
1424
+
1775
1425
  &:hover {
1776
1426
  // background-color: var(--_primary-25);
1777
1427
  // color: var(--_primary-400);
@@ -1801,6 +1451,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1801
1451
  }
1802
1452
  }
1803
1453
  }
1454
+
1804
1455
  .embla {
1805
1456
  width: 100%;
1806
1457
  height: 100%;
@@ -1835,9 +1486,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1835
1486
  &[data-control-type="Bottom"][data-slider-control="Arrows"] {
1836
1487
  height: calc(100% - calc(var(--_ctm-dn-pn-as-aw-se) + 8px));
1837
1488
  }
1489
+
1838
1490
  &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
1839
1491
  height: calc(100% - calc(var(--_ctm-dn-pn-le-le-ht) + 20px));
1840
1492
  }
1493
+
1841
1494
  &[data-control-type="Bottom"][data-slider-control="Dots"] {
1842
1495
  height: calc(100% - calc(var(--_ctm-dn-pn-ds-dt-se) + 20px));
1843
1496
  }
@@ -1857,20 +1510,25 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1857
1510
  width: 100%;
1858
1511
  justify-content: space-between;
1859
1512
  transform: translate(-50%, -50%);
1513
+
1860
1514
  // padding-left: 20px;
1861
1515
  &[data-control-type="Side"] {
1516
+
1862
1517
  .left-button,
1863
1518
  .right-button {
1864
1519
  background-color: transparent;
1865
1520
  }
1866
1521
  }
1522
+
1867
1523
  &[data-background-shape="Round"] {
1524
+
1868
1525
  .left-button,
1869
1526
  .right-button {
1870
1527
  background-color: #f2f5f5;
1871
1528
  box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
1872
1529
  }
1873
1530
  }
1531
+
1874
1532
  &[data-control-type="Bottom-Overflow"] {
1875
1533
  transform: translateX(-50%);
1876
1534
  width: 100%;
@@ -1879,6 +1537,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1879
1537
  top: unset;
1880
1538
  bottom: 6px;
1881
1539
  }
1540
+
1882
1541
  &[data-control-type="Bottom"] {
1883
1542
  transform: unset;
1884
1543
  position: static;
@@ -1887,6 +1546,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1887
1546
  gap: 12px;
1888
1547
  margin-top: 10px;
1889
1548
  }
1549
+
1890
1550
  .left-button {
1891
1551
  padding: 10px;
1892
1552
  border-radius: 50%;
@@ -1899,6 +1559,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1899
1559
  cursor: pointer;
1900
1560
  outline: none;
1901
1561
  margin-left: 12px;
1562
+
1902
1563
  &:disabled {
1903
1564
  & svg {
1904
1565
  path {
@@ -1907,6 +1568,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1907
1568
  }
1908
1569
  }
1909
1570
  }
1571
+
1910
1572
  .right-button {
1911
1573
  border-radius: 50%;
1912
1574
  border: none;
@@ -1928,11 +1590,14 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1928
1590
  }
1929
1591
  }
1930
1592
  }
1593
+
1931
1594
  .icon {
1932
1595
  display: flex;
1596
+
1933
1597
  svg {
1934
1598
  width: calc(var(--_ctm-dn-pn-as-aw-se) * 0.5);
1935
1599
  height: calc(var(--_ctm-dn-pn-as-aw-se) * 0.5);
1600
+
1936
1601
  path {
1937
1602
  stroke: var(--_ctm-dn-pn-as-aw-cr, var(--_tst-dn-pn-as-aw-cr));
1938
1603
  }
@@ -1943,9 +1608,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1943
1608
  &[data-thumbnail-placement="top"] {
1944
1609
  flex-direction: column-reverse;
1945
1610
  }
1611
+
1946
1612
  &[data-thumbnail-placement="bottom"] {
1947
1613
  flex-direction: column;
1948
1614
  }
1615
+
1949
1616
  &[data-thumbnail-placement="left"] {
1950
1617
  flex-direction: row-reverse;
1951
1618
 
@@ -1959,8 +1626,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1959
1626
  }
1960
1627
  }
1961
1628
  }
1629
+
1962
1630
  &[data-thumbnail-placement="right"] {
1963
1631
  flex-direction: row;
1632
+
1964
1633
  .embla__thumbs {
1965
1634
  width: var(--_ctm-lt-tl-se);
1966
1635
  height: 100%;
@@ -1971,16 +1640,19 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1971
1640
  }
1972
1641
  }
1973
1642
  }
1643
+
1974
1644
  &[data-control-type="Side"] {
1975
1645
  display: flex;
1976
1646
  align-self: center;
1977
1647
  gap: 16px;
1978
1648
  flex-direction: row;
1649
+
1979
1650
  .left-button:disabled,
1980
1651
  .right-button:disabled {
1981
1652
  display: none;
1982
1653
  }
1983
1654
  }
1655
+
1984
1656
  .embla__dots {
1985
1657
  display: flex;
1986
1658
  flex-wrap: wrap;
@@ -1997,6 +1669,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1997
1669
  transform: translateX(-50%);
1998
1670
  width: 75%;
1999
1671
  }
1672
+
2000
1673
  .embla__dot {
2001
1674
  -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
2002
1675
  -webkit-appearance: none;
@@ -2018,6 +1691,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2018
1691
  justify-content: center;
2019
1692
  border-radius: 50%;
2020
1693
  }
1694
+
2021
1695
  .embla__dot:after {
2022
1696
  // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
2023
1697
  width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
@@ -2027,10 +1701,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2027
1701
  align-items: center;
2028
1702
  content: "";
2029
1703
  }
1704
+
2030
1705
  .embla__dot--selected:after {
2031
1706
  box-shadow: inset 0 0 0 1px var(--text-body);
2032
1707
  background-color: var(--_ctm-dn-pn-ds-ct-dt-cr, var(--_tst-dn-pn-ds-ct-dt-cr));
2033
1708
  }
1709
+
2034
1710
  &[data-slider-control="Pagination Line"] {
2035
1711
  .embla__dot {
2036
1712
  width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
@@ -2039,6 +1715,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2039
1715
 
2040
1716
  border-radius: 6px;
2041
1717
  }
1718
+
2042
1719
  .embla__dot--selected:after {
2043
1720
  box-shadow: inset 0 0 0 1px var(--text-body);
2044
1721
  border-radius: 6px;
@@ -2069,6 +1746,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2069
1746
 
2070
1747
  overflow: hidden;
2071
1748
  }
1749
+
2072
1750
  .embla__thumbs__container {
2073
1751
  display: flex;
2074
1752
  flex-direction: row;
@@ -2082,6 +1760,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2082
1760
  min-width: var(--_ctm-lt-tl-se);
2083
1761
  max-width: var(--_ctm-lt-tl-se);
2084
1762
  height: var(--_ctm-lt-tl-se);
1763
+
2085
1764
  & img {
2086
1765
  width: 100%;
2087
1766
  height: 100%;
@@ -2091,4 +1770,4 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2091
1770
  }
2092
1771
  }
2093
1772
  }
2094
- }
1773
+ }