@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/button copy.scss CHANGED
@@ -62,6 +62,18 @@
62
62
  --_ctm-mob-dn-hr-se-ft-fy,
63
63
  var(--_ctm-tab-dn-hr-se-ft-fy, var(--_ctm-dn-hr-se-ft-fy))
64
64
  );
65
+ --_sf-hr-tt-tm: var(
66
+ --_ctm-mob-dn-hr-se-tt-tm,
67
+ var(--_ctm-tab-dn-hr-se-tt-tm, var(--_ctm-dn-hr-se-tt-tm))
68
+ );
69
+ --_sf-hr-wd-wp: var(
70
+ --_ctm-mob-dn-hr-se-wd-wp,
71
+ var(--_ctm-tab-dn-hr-se-wd-wp, var(--_ctm-dn-hr-se-wd-wp))
72
+ );
73
+ --_sf-hr-wd-bk: var(
74
+ --_ctm-mob-dn-hr-se-wd-bk,
75
+ var(--_ctm-tab-dn-hr-se-wd-bk, var(--_ctm-dn-hr-se-wd-bk))
76
+ );
65
77
  --_sf-hr-fs: var(
66
78
  --_ctm-mob-dn-hr-se-ft-se,
67
79
  var(--_ctm-tab-dn-hr-se-ft-se, var(--_ctm-dn-hr-se-ft-se))
@@ -201,6 +213,22 @@
201
213
  --_sf-hr-ff,
202
214
  var(--_ctm-mob-dn-dt-se-ft-fy, var(--_ctm-tab-dn-dt-se-ft-fy, var(--_ctm-dn-dt-se-ft-fy)))
203
215
  );
216
+ text-transform: var(
217
+ --_sf-hr-tt-tm,
218
+ var(--_ctm-mob-dn-dt-se-tt-tm, var(--_ctm-tab-dn-dt-se-tt-tm, var(--_ctm-dn-dt-se-tt-tm)))
219
+ );
220
+ word-wrap: var(
221
+ --_sf-hr-wd-wp,
222
+ var(--_ctm-mob-dn-dt-se-wd-wp, var(--_ctm-tab-dn-dt-se-wd-wp, var(--_ctm-dn-dt-se-wd-wp)))
223
+ );
224
+ word-break: var(
225
+ --_sf-hr-wd-bk,
226
+ var(--_ctm-mob-dn-dt-se-wd-bk, var(--_ctm-tab-dn-dt-se-wd-bk, var(--_ctm-dn-dt-se-wd-bk)))
227
+ );
228
+ &.flex__overflow {
229
+ white-space: normal;
230
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
231
+ }
204
232
  font-size: var(
205
233
  --_sf-hr-fs,
206
234
  var(--_ctm-mob-dn-dt-se-ft-se, var(--_ctm-tab-dn-dt-se-ft-se, var(--_ctm-dn-dt-se-ft-se)))
package/dist/button.scss CHANGED
@@ -7,7 +7,7 @@
7
7
  &[data-element-type="button"] {
8
8
  min-height: 24px !important;
9
9
 
10
- & > .wrapper {
10
+ &>.wrapper {
11
11
  // width: 100%;
12
12
  height: 100%;
13
13
  height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
@@ -16,132 +16,98 @@
16
16
  &[data-show-shadow="false"] {
17
17
  --_show-shadow: none;
18
18
  }
19
+
19
20
  &[data-icon-position="left"] {
20
21
  --_sf-fd-bn: row;
21
22
  }
23
+
22
24
  &[data-icon-position="right"] {
23
25
  --_sf-fd-bn: row-reverse;
24
26
  }
27
+
25
28
  &[data-icon-position="center"] {
26
29
  --_sf-fd-bn: row;
27
30
  }
28
31
 
29
32
  &:hover {
30
- --_sf-hr-bd-cr: var(
31
- --_ctm-mob-dn-hr-se-bd-cr,
32
- var(--_ctm-tab-dn-hr-se-bd-cr, var(--_ctm-dn-hr-se-bd-cr))
33
- );
34
- --_sf-hr-br-cr: var(
35
- --_ctm-mob-dn-hr-se-br-cr,
36
- var(--_ctm-tab-dn-hr-se-br-cr, var(--_ctm-dn-hr-se-br-cr))
37
- );
38
- --_sf-hr-br-se: var(
39
- --_ctm-mob-dn-hr-se-br-se,
40
- var(--_ctm-tab-dn-hr-se-br-se, var(--_ctm-dn-hr-se-br-se))
41
- );
42
- --_sf-hr-br-wh: var(
43
- --_ctm-mob-dn-hr-se-br-wh,
44
- var(--_ctm-tab-dn-hr-se-br-wh, var(--_ctm-dn-hr-se-br-wh))
45
- );
46
- --_sf-hr-br-rs: var(
47
- --_ctm-mob-dn-hr-se-br-rs,
48
- var(--_ctm-tab-dn-hr-se-br-rs, var(--_ctm-dn-hr-se-br-rs))
49
- );
33
+ --_sf-hr-bd-cr: var(--_ctm-mob-dn-hr-se-bd-cr,
34
+ var(--_ctm-tab-dn-hr-se-bd-cr, var(--_ctm-dn-hr-se-bd-cr)));
35
+ --_sf-hr-br-cr: var(--_ctm-mob-dn-hr-se-br-cr,
36
+ var(--_ctm-tab-dn-hr-se-br-cr, var(--_ctm-dn-hr-se-br-cr)));
37
+ --_sf-hr-br-se: var(--_ctm-mob-dn-hr-se-br-se,
38
+ var(--_ctm-tab-dn-hr-se-br-se, var(--_ctm-dn-hr-se-br-se)));
39
+ --_sf-hr-br-wh: var(--_ctm-mob-dn-hr-se-br-wh,
40
+ var(--_ctm-tab-dn-hr-se-br-wh, var(--_ctm-dn-hr-se-br-wh)));
41
+ --_sf-hr-br-rs: var(--_ctm-mob-dn-hr-se-br-rs,
42
+ var(--_ctm-tab-dn-hr-se-br-rs, var(--_ctm-dn-hr-se-br-rs)));
50
43
 
51
44
  // for shadow
52
- --_sf-hr-sw-ae: var(
53
- --_ctm-mob-dn-hr-se-sw-ae,
54
- var(--_ctm-tab-dn-hr-se-sw-ae, var(--_ctm-dn-hr-se-sw-ae))
55
- );
56
- --_sf-hr-sw-br: var(
57
- --_ctm-mob-dn-hr-se-sw-br,
58
- var(--_ctm-tab-dn-hr-se-sw-br, var(--_ctm-dn-hr-se-sw-br))
59
- );
60
-
61
- --_sf-hr-sw-cr: var(
62
- --_ctm-mob-dn-hr-se-sw-cr,
63
- var(--_ctm-tab-dn-hr-se-sw-cr, var(--_ctm-dn-hr-se-sw-cr))
64
- );
45
+ --_sf-hr-sw-ae: var(--_ctm-mob-dn-hr-se-sw-ae,
46
+ var(--_ctm-tab-dn-hr-se-sw-ae, var(--_ctm-dn-hr-se-sw-ae)));
47
+ --_sf-hr-sw-br: var(--_ctm-mob-dn-hr-se-sw-br,
48
+ var(--_ctm-tab-dn-hr-se-sw-br, var(--_ctm-dn-hr-se-sw-br)));
49
+
50
+ --_sf-hr-sw-cr: var(--_ctm-mob-dn-hr-se-sw-cr,
51
+ var(--_ctm-tab-dn-hr-se-sw-cr, var(--_ctm-dn-hr-se-sw-cr)));
65
52
 
66
53
  // for font
67
54
 
68
- --_sf-hr-cr: var(
69
- --_ctm-mob-dn-hr-se-cr,
70
- var(--_ctm-tab-dn-hr-se-cr, var(--_ctm-dn-hr-se-cr))
71
- );
72
- --_sf-hr-ft-fy: var(
73
- --_ctm-mob-dn-hr-se-ft-fy,
74
- var(--_ctm-tab-dn-hr-se-ft-fy, var(--_ctm-dn-hr-se-ft-fy))
75
- );
76
- --_sf-hr-ft-se: var(
77
- --_ctm-mob-dn-hr-se-ft-se,
78
- var(--_ctm-tab-dn-hr-se-ft-se, var(--_ctm-dn-hr-se-ft-se))
79
- );
80
- --_sf-hr-ft-wt: var(
81
- --_ctm-mob-dn-hr-se-ft-wt,
82
- var(--_ctm-tab-dn-hr-se-ft-wt, var(--_ctm-dn-hr-se-ft-wt))
83
- );
84
- --_sf-hr-ft-se-ic: var(
85
- --_ctm-mob-dn-hr-se-ft-se-ic,
86
- var(--_ctm-tab-dn-hr-se-ft-se-ic, var(--_ctm-dn-hr-se-ft-se-ic))
87
- );
88
- --_sf-hr-tt-an: var(
89
- --_ctm-mob-dn-hr-se-tt-an,
90
- var(--_ctm-tab-dn-hr-se-tt-an, var(--_ctm-dn-hr-se-tt-an))
91
- );
92
- --_sf-hr-lr-sg: var(
93
- --_ctm-mob-dn-hr-se-lr-sg,
94
- var(--_ctm-tab-dn-hr-se-lr-sg, var(--_ctm-dn-hr-se-lr-sg))
95
- );
96
- --_sf-hr-le-ht: var(
97
- --_ctm-mob-dn-hr-se-le-ht,
98
- var(--_ctm-tab-dn-hr-se-le-ht, var(--_ctm-dn-hr-se-le-ht))
99
- );
100
-
101
- --_sf-hr-txt-tr: var(
102
- --_ctm-mob-dn-hr-se-tt-tm,
103
- var(--_ctm-tab-dn-hr-se-tt-tm, var(--_ctm-dn-hr-se-tt-tm))
104
- );
105
- --_sf-hr-wd-wp: var(
106
- --_ctm-mob-dn-hr-se-wd-wp,
107
- var(--_ctm-tab-dn-hr-se-wd-wp, var(--_ctm-dn-hr-se-wd-wp))
108
- );
109
- --_sf-hr-wd-bk: var(
110
- --_ctm-mob-dn-hr-se-wd-bk,
111
- var(--_ctm-tab-dn-hr-se-wd-bk, var(--_ctm-dn-hr-se-wd-bk))
112
- );
113
-
114
- --_sf-hr-in-se: var(
115
- --_ctm-mob-dn-hr-se-in-se,
116
- var(--_ctm-tab-dn-hr-se-in-se, var(--_ctm-dn-hr-se-in-se))
117
- );
118
-
119
- --_sf-hr-in-c1: var(
120
- --_ctm-mob-dn-hr-se-in-c1,
121
- var(--_ctm-tab-dn-hr-se-in-c1, var(--_ctm-dn-hr-se-in-c1))
122
- );
123
- --_sf-hr-ue: var(
124
- --_ctm-mob-dn-hr-se-ue,
125
- var(--_ctm-tab-dn-hr-se-ue, var(--_ctm-dn-hr-se-ue))
126
- );
55
+ --_sf-hr-cr: var(--_ctm-mob-dn-hr-se-cr,
56
+ var(--_ctm-tab-dn-hr-se-cr, var(--_ctm-dn-hr-se-cr)));
57
+ --_sf-hr-ft-fy: var(--_ctm-mob-dn-hr-se-ft-fy,
58
+ var(--_ctm-tab-dn-hr-se-ft-fy, var(--_ctm-dn-hr-se-ft-fy)));
59
+ --_sf-hr-tt-tm: var(--_ctm-mob-dn-hr-se-tt-tm,
60
+ var(--_ctm-tab-dn-hr-se-tt-tm, var(--_ctm-dn-hr-se-tt-tm)));
61
+ --_sf-hr-ft-se: var(--_ctm-mob-dn-hr-se-ft-se,
62
+ var(--_ctm-tab-dn-hr-se-ft-se, var(--_ctm-dn-hr-se-ft-se)));
63
+ --_sf-hr-ft-wt: var(--_ctm-mob-dn-hr-se-ft-wt,
64
+ var(--_ctm-tab-dn-hr-se-ft-wt, var(--_ctm-dn-hr-se-ft-wt)));
65
+ --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-hr-se-ft-se-ic,
66
+ var(--_ctm-tab-dn-hr-se-ft-se-ic, var(--_ctm-dn-hr-se-ft-se-ic)));
67
+ --_sf-hr-tt-an: var(--_ctm-mob-dn-hr-se-tt-an,
68
+ var(--_ctm-tab-dn-hr-se-tt-an, var(--_ctm-dn-hr-se-tt-an)));
69
+ --_sf-hr-lr-sg: var(--_ctm-mob-dn-hr-se-lr-sg,
70
+ var(--_ctm-tab-dn-hr-se-lr-sg, var(--_ctm-dn-hr-se-lr-sg)));
71
+ --_sf-hr-le-ht: var(--_ctm-mob-dn-hr-se-le-ht,
72
+ var(--_ctm-tab-dn-hr-se-le-ht, var(--_ctm-dn-hr-se-le-ht)));
73
+
74
+ --_sf-hr-txt-tr: var(--_ctm-mob-dn-hr-se-tt-tm,
75
+ var(--_ctm-tab-dn-hr-se-tt-tm, var(--_ctm-dn-hr-se-tt-tm)));
76
+ --_sf-hr-wd-wp: var(--_ctm-mob-dn-hr-se-wd-wp,
77
+ var(--_ctm-tab-dn-hr-se-wd-wp, var(--_ctm-dn-hr-se-wd-wp)));
78
+ --_sf-hr-wd-bk: var(--_ctm-mob-dn-hr-se-wd-bk,
79
+ var(--_ctm-tab-dn-hr-se-wd-bk, var(--_ctm-dn-hr-se-wd-bk)));
80
+
81
+ --_sf-hr-in-se: var(--_ctm-mob-dn-hr-se-in-se,
82
+ var(--_ctm-tab-dn-hr-se-in-se, var(--_ctm-dn-hr-se-in-se)));
83
+
84
+ --_sf-hr-in-c1: var(--_ctm-mob-dn-hr-se-in-c1,
85
+ var(--_ctm-tab-dn-hr-se-in-c1, var(--_ctm-dn-hr-se-in-c1)));
86
+ --_sf-hr-ue: var(--_ctm-mob-dn-hr-se-ue,
87
+ var(--_ctm-tab-dn-hr-se-ue, var(--_ctm-dn-hr-se-ue)));
127
88
 
128
89
  &[data-hover-show-shadow="false"] {
129
90
  --_hover-show-shadow: none;
130
91
  }
92
+
131
93
  &[data-hover-show-icon="false"] {
132
94
  --_hover-show-icon: none;
133
95
  }
134
96
  }
97
+
135
98
  &[data-show-icon="false"] {
136
99
  --_show-icon: none;
137
100
  }
101
+
138
102
  &[data-element-style="Icon"] {
139
103
  &[data-icon-position="left"] {
140
104
  --_sf-jc: start;
141
105
  }
106
+
142
107
  &[data-icon-position="right"] {
143
108
  --_sf-jc: end;
144
109
  }
110
+
145
111
  &[data-icon-position="center"] {
146
112
  --_sf-jc: center;
147
113
  }
@@ -163,10 +129,7 @@
163
129
 
164
130
  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-dt-se-br-rs));
165
131
 
166
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-dt-se-sw-ae))
167
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-dt-se-sw-br))
168
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-dt-se-sw-sd))
169
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-dt-se-sw-cr));
132
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-dt-se-sw-cr));
170
133
 
171
134
  &[data-show-border="true"] {
172
135
  border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-dt-se-br-cr));
@@ -183,6 +146,10 @@
183
146
 
184
147
  font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-dt-se-ft-fy));
185
148
 
149
+ &.flex__overflow {
150
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
151
+ }
152
+
186
153
  font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-dt-se-ft-se));
187
154
 
188
155
  font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-dt-se-ft-wt));
@@ -195,9 +162,14 @@
195
162
 
196
163
  line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-dt-se-le-ht));
197
164
 
198
- text-transform: var(--_sf-hr-txt-tr, prepareMediaVariable(--_ctm-dn-dt-se-tt-tm, normal));
199
- word-break: var(--_sf-hr-txt-wd-bk, prepareMediaVariable(--_ctm-dn-dt-se-wd-bk));
200
- word-wrap: var(--_sf-hr-txt-wd-bk, prepareMediaVariable(--_ctm-dn-tt-dt-se-wd-wp));
165
+ // The hover names have to match what the `&:hover` block above publishes:
166
+ // `--_sf-hr-wd-wp` and `--_sf-hr-wd-bk`. Both of these read `--_sf-hr-txt-wd-bk`,
167
+ // which is never set, so the hover word-break/word-wrap values never applied.
168
+ // The word-wrap default was also pointed at `--_ctm-dn-tt-dt-se-wd-wp`, a prefix
169
+ // the builder never emits, so Word Wrap did nothing in either state.
170
+ text-transform: var(--_sf-hr-txt-tr, prepareMediaVariable(--_ctm-dn-dt-se-tt-tm, none));
171
+ word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-dt-se-wd-bk, normal));
172
+ word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-dt-se-wd-wp, normal));
201
173
 
202
174
  text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-se-ue));
203
175
  // text-decoration: var(--_ctm-mob-dn-ue, var(--_ctm-tab-dn-ue, var(--_ctm-dn-ue)));
@@ -205,6 +177,7 @@
205
177
 
206
178
  .icon {
207
179
  display: var(--_hover-show-icon, var(--_show-icon, flex));
180
+
208
181
  svg {
209
182
  width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-dt-se-in-se));
210
183
  height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-dt-se-in-se));
@@ -216,6 +189,7 @@
216
189
  }
217
190
  }
218
191
  }
192
+
219
193
  [data-element-style="Text"] {
220
194
  display: inline-block;
221
195
  width: 100%;
@@ -248,29 +222,35 @@
248
222
  align-items: center;
249
223
  border-radius: 4px;
250
224
  gap: 8px;
251
- & > span {
225
+
226
+ &>span {
252
227
  display: flex;
253
228
  }
254
229
 
255
230
  &.btn__sm {
256
231
  padding-inline: 16px;
257
232
  font-size: 14px;
233
+
258
234
  svg {
259
235
  width: 16px;
260
236
  height: 16px;
261
237
  }
262
238
  }
239
+
263
240
  &.btn__md {
264
241
  padding-inline: 24px;
265
242
  font-size: 18px;
243
+
266
244
  svg {
267
245
  width: 20px;
268
246
  height: 20px;
269
247
  }
270
248
  }
249
+
271
250
  &.btn__lg {
272
251
  padding-inline: 32px;
273
252
  font-size: 24px;
253
+
274
254
  svg {
275
255
  width: 24px;
276
256
  height: 24px;
@@ -286,27 +266,34 @@
286
266
  color: var(--_base-white);
287
267
  }
288
268
  }
269
+
289
270
  &.secondary {
290
271
  background-color: var(--_gray-100);
291
272
  color: var(--_gray-700);
273
+
292
274
  &:hover {
293
275
  background-color: var(--_gray-200);
294
276
  color: var(--_gray-900);
295
277
  }
296
278
  }
279
+
297
280
  &.tertiary {
298
281
  background-color: transparent;
282
+
299
283
  &.primary__txt {
300
284
  color: var(--_primary-400);
285
+
301
286
  &:hover {
302
287
  color: var(--_primary-500);
303
288
  }
304
289
  }
290
+
305
291
  &.secondary__txt {
306
292
  color: var(--_gray-700);
293
+
307
294
  &:hover {
308
295
  color: var(--_gray-900);
309
296
  }
310
297
  }
311
298
  }
312
- }
299
+ }
package/dist/buy-for-tab-container.scss CHANGED
@@ -15,7 +15,8 @@
15
15
  // background: var(--_ctm-buyfo-dn-bd-cr);
16
16
  width: 1200px;
17
17
  margin: 0 auto;
18
- & > div {
18
+
19
+ &>div {
19
20
  &.wrapper {
20
21
  width: 100%;
21
22
  height: 100%;
@@ -26,116 +27,86 @@
26
27
  }
27
28
 
28
29
  &:is([data-background-type="gradient"] > *).wrapper {
29
- --_sf-buyfo-gradient-angle: calc(
30
- #{prepareMediaVariable(--_ctm-buyfo-dn-gt-ae, 90)} * 1deg
31
- );
30
+ --_sf-buyfo-gradient-angle: calc(#{prepareMediaVariable(--_ctm-buyfo-dn-gt-ae, 90)} * 1deg);
32
31
  --_sf-buyfo-gradient-start-color: #{prepareMediaVariable(
33
- --_ctm-buyfo-dn-gt-st-cr,
34
- transparent
35
- )};
36
- --_sf-buyfo-gradient-start-position: calc(
37
- #{prepareMediaVariable(--_ctm-buyfo-dn-gt-st-pn, 0)} * 1%
38
- );
39
- --_sf-buyfo-gradient-end-color: #{prepareMediaVariable(
40
- --_ctm-buyfo-dn-gt-ed-cr,
41
- transparent
42
- )};
43
- --_sf-buyfo-gradient-end-position: calc(
44
- #{prepareMediaVariable(--_ctm-buyfo-dn-gt-ed-pn, 100)} * 1%
45
- );
46
- --_sf-buyfo-gradient-position: #{prepareMediaVariable(--_ctm-buyfo-dn-gt-pn, center)};
32
+ --_ctm-buyfo-dn-gt-st-cr,
33
+ transparent)
47
34
  }
48
35
 
49
- &:is([data-gradient-type="Linear Gradient"] > *).wrapper {
50
- background-image: linear-gradient(
51
- var(--_sf-buyfo-gradient-angle),
52
- var(--_sf-buyfo-gradient-start-color) var(--_sf-buyfo-gradient-start-position),
53
- var(--_sf-buyfo-gradient-end-color) var(--_sf-buyfo-gradient-end-position)
54
- );
55
- }
36
+ ;
37
+ --_sf-buyfo-gradient-start-position: calc(#{prepareMediaVariable(--_ctm-buyfo-dn-gt-st-pn, 0)} * 1%);
38
+ --_sf-buyfo-gradient-end-color: #{prepareMediaVariable(
39
+ --_ctm-buyfo-dn-gt-ed-cr,
40
+ transparent)
41
+ }
56
42
 
57
- &:is([data-gradient-type="Radial Gradient"] > *).wrapper {
58
- background-image: radial-gradient(
59
- circle at var(--_sf-buyfo-gradient-position),
60
- var(--_sf-buyfo-gradient-start-color) var(--_sf-buyfo-gradient-start-position),
61
- var(--_sf-buyfo-gradient-end-color) var(--_sf-buyfo-gradient-end-position)
62
- );
63
- }
64
- &:is([data-background-type="image"] > *).wrapper {
65
- background-image: prepareMediaVariable(--_ctm-buyfo-dn-bd-ie);
66
- background-attachment: prepareMediaVariable(--_ctm-buyfo-dn-bd-at);
67
- background-position: prepareMediaVariable(--_ctm-buyfo-dn-bd-pn);
68
- background-position-y: prepareMediaVariable(--_ctm-buyfo-dn-bd-pn-y);
69
- background-repeat: prepareMediaVariable(--_ctm-buyfo-dn-bd-rt);
70
- background-size: prepareMediaVariable(--_ctm-buyfo-dn-bd-se);
71
- }
43
+ ;
44
+ --_sf-buyfo-gradient-end-position: calc(#{prepareMediaVariable(--_ctm-buyfo-dn-gt-ed-pn, 100)} * 1%);
45
+ --_sf-buyfo-gradient-position: #{prepareMediaVariable(--_ctm-buyfo-dn-gt-pn, center)};
46
+ }
72
47
 
73
- // background-color: var(
74
- // --_ctm-mob-buyfo-dn-bd-cr,
75
- // var(--_ctm-tab-buyfo-dn-bd-cr, var(--_ctm-buyfo-dn-bd-cr))
76
- // );
77
- // background-image: var(
78
- // --_ctm-mob-buyfo-dn-bd-ie,
79
- // var(--_ctm-tab-buyfo-dn-bd-ie, var(--_ctm-buyfo-dn-bd-ie))
80
- // );
81
- // background-attachment: var(
82
- // --_ctm-mob-buyfo-dn-bd-at,
83
- // var(--_ctm-tab-buyfo-dn-bd-at, var(--_ctm-buyfo-dn-bd-at))
84
- // );
85
- // background-position: var(
86
- // --_ctm-mob-buyfo-dn-bd-pn,
87
- // var(--_ctm-tab-buyfo-dn-bd-pn, var(--_ctm-buyfo-dn-bd-pn))
88
- // );
89
- // background-repeat: var(
90
- // --_ctm-mob-buyfo-dn-bd-rt,
91
- // var(--_ctm-tab-buyfo-dn-bd-rt, var(--_ctm-buyfo-dn-bd-rt))
92
- // );
93
- // background-size: var(
94
- // --_ctm-mob-buyfo-dn-bd-se,
95
- // var(--_ctm-tab-buyfo-dn-bd-se, var(--_ctm-buyfo-dn-bd-se))
96
- // );
97
- border-radius: var(
98
- --_ctm-mob-buyfo-dn-br-rs,
99
- var(--_ctm-tab-buyfo-dn-br-rs, var(--_ctm-buyfo-dn-br-rs))
100
- );
101
- border-color: var(
102
- --_ctm-mob-buyfo-dn-br-cr,
103
- var(--_ctm-tab-buyfo-dn-br-cr, var(--_ctm-buyfo-dn-br-cr))
104
- );
105
- border-style: var(
106
- --_ctm-mob-buyfo-dn-br-se,
107
- var(--_ctm-tab-buyfo-dn-br-se, var(--_ctm-buyfo-dn-br-se))
108
- );
109
- border-width: var(
110
- --_ctm-mob-buyfo-dn-br-wh,
111
- var(--_ctm-tab-buyfo-dn-br-wh, var(--_ctm-buyfo-dn-br-wh))
112
- );
113
- box-shadow: var(
114
- --_hover-show-shadow,
115
- var(
116
- --_sf-hr-bx-sw,
117
- var(
118
- --_show-shadow,
119
- var(
120
- --_ctm-mob-dn-dt-se-sw-ae,
121
- var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))
122
- )
123
- var(
124
- --_ctm-mob-dn-dt-se-sw-br,
125
- var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
126
- )
127
- var(
128
- --_ctm-mob-dn-dt-se-sw-sd,
129
- var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
130
- )
131
- var(
132
- --_ctm-mob-dn-dt-se-sw-cr,
133
- var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
134
- )
135
- )
136
- )
137
- );
138
- }
48
+ &:is([data-gradient-type="Linear Gradient"] > *).wrapper {
49
+ background-image: linear-gradient(var(--_sf-buyfo-gradient-angle),
50
+ var(--_sf-buyfo-gradient-start-color) var(--_sf-buyfo-gradient-start-position),
51
+ var(--_sf-buyfo-gradient-end-color) var(--_sf-buyfo-gradient-end-position));
139
52
  }
53
+
54
+ &:is([data-gradient-type="Radial Gradient"] > *).wrapper {
55
+ background-image: radial-gradient(circle at var(--_sf-buyfo-gradient-position),
56
+ var(--_sf-buyfo-gradient-start-color) var(--_sf-buyfo-gradient-start-position),
57
+ var(--_sf-buyfo-gradient-end-color) var(--_sf-buyfo-gradient-end-position));
58
+ }
59
+
60
+ &:is([data-background-type="image"] > *).wrapper {
61
+ background-image: prepareMediaVariable(--_ctm-buyfo-dn-bd-ie);
62
+ background-attachment: prepareMediaVariable(--_ctm-buyfo-dn-bd-at);
63
+ background-position: prepareMediaVariable(--_ctm-buyfo-dn-bd-pn);
64
+ background-position-y: prepareMediaVariable(--_ctm-buyfo-dn-bd-pn-y);
65
+ background-repeat: prepareMediaVariable(--_ctm-buyfo-dn-bd-rt);
66
+ background-size: prepareMediaVariable(--_ctm-buyfo-dn-bd-se);
67
+ }
68
+
69
+ // background-color: var(
70
+ // --_ctm-mob-buyfo-dn-bd-cr,
71
+ // var(--_ctm-tab-buyfo-dn-bd-cr, var(--_ctm-buyfo-dn-bd-cr))
72
+ // );
73
+ // background-image: var(
74
+ // --_ctm-mob-buyfo-dn-bd-ie,
75
+ // var(--_ctm-tab-buyfo-dn-bd-ie, var(--_ctm-buyfo-dn-bd-ie))
76
+ // );
77
+ // background-attachment: var(
78
+ // --_ctm-mob-buyfo-dn-bd-at,
79
+ // var(--_ctm-tab-buyfo-dn-bd-at, var(--_ctm-buyfo-dn-bd-at))
80
+ // );
81
+ // background-position: var(
82
+ // --_ctm-mob-buyfo-dn-bd-pn,
83
+ // var(--_ctm-tab-buyfo-dn-bd-pn, var(--_ctm-buyfo-dn-bd-pn))
84
+ // );
85
+ // background-repeat: var(
86
+ // --_ctm-mob-buyfo-dn-bd-rt,
87
+ // var(--_ctm-tab-buyfo-dn-bd-rt, var(--_ctm-buyfo-dn-bd-rt))
88
+ // );
89
+ // background-size: var(
90
+ // --_ctm-mob-buyfo-dn-bd-se,
91
+ // var(--_ctm-tab-buyfo-dn-bd-se, var(--_ctm-buyfo-dn-bd-se))
92
+ // );
93
+ border-radius: var(--_ctm-mob-buyfo-dn-br-rs,
94
+ var(--_ctm-tab-buyfo-dn-br-rs, var(--_ctm-buyfo-dn-br-rs)));
95
+ border-color: var(--_ctm-mob-buyfo-dn-br-cr,
96
+ var(--_ctm-tab-buyfo-dn-br-cr, var(--_ctm-buyfo-dn-br-cr)));
97
+ border-style: var(--_ctm-mob-buyfo-dn-br-se,
98
+ var(--_ctm-tab-buyfo-dn-br-se, var(--_ctm-buyfo-dn-br-se)));
99
+ border-width: var(--_ctm-mob-buyfo-dn-br-wh,
100
+ var(--_ctm-tab-buyfo-dn-br-wh, var(--_ctm-buyfo-dn-br-wh)));
101
+ box-shadow: var(--_hover-show-shadow,
102
+ var(--_sf-hr-bx-sw,
103
+ var(--_show-shadow,
104
+ var(--_ctm-mob-dn-dt-se-sw-ae,
105
+ var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))) var(--_ctm-mob-dn-dt-se-sw-br,
106
+ var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))) var(--_ctm-mob-dn-dt-se-sw-sd,
107
+ var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))) var(--_ctm-mob-dn-dt-se-sw-cr,
108
+ var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))))));
140
109
  }
141
110
  }
111
+ }
112
+ }
package/dist/buy-for-tab.scss CHANGED
@@ -328,6 +328,18 @@ $tabBodyWrapper: #{$tabBody}__wrapper;
328
328
  --_ctm-mob-buy-dn-ts-sd-se-ft-fy,
329
329
  var(--_ctm-tab-buy-dn-ts-sd-se-ft-fy, var(--_ctm-buy-dn-ts-sd-se-ft-fy))
330
330
  );
331
+ --_sf-buy-sd-tt-tm: var(
332
+ --_ctm-mob-buy-dn-ts-sd-se-tt-tm,
333
+ var(--_ctm-tab-buy-dn-ts-sd-se-tt-tm, var(--_ctm-buy-dn-ts-sd-se-tt-tm))
334
+ );
335
+ --_sf-buy-sd-wd-wp: var(
336
+ --_ctm-mob-buy-dn-ts-sd-se-wd-wp,
337
+ var(--_ctm-tab-buy-dn-ts-sd-se-wd-wp, var(--_ctm-buy-dn-ts-sd-se-wd-wp))
338
+ );
339
+ --_sf-buy-sd-wd-bk: var(
340
+ --_ctm-mob-buy-dn-ts-sd-se-wd-bk,
341
+ var(--_ctm-tab-buy-dn-ts-sd-se-wd-bk, var(--_ctm-buy-dn-ts-sd-se-wd-bk))
342
+ );
331
343
  --_sf-buy-sd-ft-sz: var(
332
344
  --_ctm-mob-buy-dn-ts-sd-se-ft-se,
333
345
  var(--_ctm-tab-buy-dn-ts-sd-se-ft-se, var(--_ctm-buy-dn-ts-sd-se-ft-se))
@@ -406,6 +418,18 @@ $tabBodyWrapper: #{$tabBody}__wrapper;
406
418
  --_ctm-mob-buy-dn-ts-hr-se-ft-fy,
407
419
  var(--_ctm-tab-buy-dn-ts-hr-se-ft-fy, var(--_ctm-buy-dn-ts-hr-se-ft-fy))
408
420
  );
421
+ --_sf-buy-hr-tt-tm: var(
422
+ --_ctm-mob-buy-dn-ts-hr-se-tt-tm,
423
+ var(--_ctm-tab-buy-dn-ts-hr-se-tt-tm, var(--_ctm-buy-dn-ts-hr-se-tt-tm))
424
+ );
425
+ --_sf-buy-hr-wd-wp: var(
426
+ --_ctm-mob-buy-dn-ts-hr-se-wd-wp,
427
+ var(--_ctm-tab-buy-dn-ts-hr-se-wd-wp, var(--_ctm-buy-dn-ts-hr-se-wd-wp))
428
+ );
429
+ --_sf-buy-hr-wd-bk: var(
430
+ --_ctm-mob-buy-dn-ts-hr-se-wd-bk,
431
+ var(--_ctm-tab-buy-dn-ts-hr-se-wd-bk, var(--_ctm-buy-dn-ts-hr-se-wd-bk))
432
+ );
409
433
  --_sf-buy-hr-ft-sz: var(
410
434
  --_ctm-mob-buy-dn-ts-hr-se-ft-se,
411
435
  var(--_ctm-tab-buy-dn-ts-hr-se-ft-se, var(--_ctm-buy-dn-ts-hr-se-ft-se))
@@ -470,6 +494,36 @@ $tabBodyWrapper: #{$tabBody}__wrapper;
470
494
  )
471
495
  )
472
496
  );
497
+ text-transform: var(
498
+ --_sf-buy-sd-tt-tm,
499
+ var(
500
+ --_sf-buy-hr-tt-tm,
501
+ var(
502
+ --_ctm-mob-buy-dn-ts-tt-tm,
503
+ var(--_ctm-tab-buy-dn-ts-tt-tm, var(--_ctm-buy-dn-ts-tt-tm))
504
+ )
505
+ )
506
+ );
507
+ word-wrap: var(
508
+ --_sf-buy-sd-wd-wp,
509
+ var(
510
+ --_sf-buy-hr-wd-wp,
511
+ var(
512
+ --_ctm-mob-buy-dn-ts-wd-wp,
513
+ var(--_ctm-tab-buy-dn-ts-wd-wp, var(--_ctm-buy-dn-ts-wd-wp))
514
+ )
515
+ )
516
+ );
517
+ word-break: var(
518
+ --_sf-buy-sd-wd-bk,
519
+ var(
520
+ --_sf-buy-hr-wd-bk,
521
+ var(
522
+ --_ctm-mob-buy-dn-ts-wd-bk,
523
+ var(--_ctm-tab-buy-dn-ts-wd-bk, var(--_ctm-buy-dn-ts-wd-bk))
524
+ )
525
+ )
526
+ );
473
527
 
474
528
  font-size: var(
475
529
  --_sf-buy-sd-ft-sz,