@sc-360-v2/storefront-cms-library 0.5.70 → 0.5.72

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 (141) hide show
  1. package/dist/add-existing-form.scss +68 -68
  2. package/dist/add-products-tab-details.scss +4071 -4071
  3. package/dist/add-products-tab-uom-details.scss +1106 -1106
  4. package/dist/add-products-tab.scss +2377 -2377
  5. package/dist/allocation-header-quota-details.scss +609 -609
  6. package/dist/allocations-quota-details.scss +525 -525
  7. package/dist/amount-estimator.scss +1192 -1192
  8. package/dist/animation-control.scss +23 -23
  9. package/dist/badge.scss +408 -408
  10. package/dist/brand-basic-elements.scss +387 -387
  11. package/dist/brand.scss +142 -142
  12. package/dist/breadcrumbs.scss +966 -966
  13. package/dist/builder.js +1 -1
  14. package/dist/bulk-order-pad.scss +692 -692
  15. package/dist/bundleDetails.scss +6189 -6189
  16. package/dist/buy-for-tab-container.scss +141 -141
  17. package/dist/buy-for-tab.scss +649 -649
  18. package/dist/buy-for-tabs-container-item.scss +80 -80
  19. package/dist/buyForPopup.scss +339 -339
  20. package/dist/cart-details.scss +3986 -3986
  21. package/dist/cart-products-sidebar.scss +211 -211
  22. package/dist/cart-wrapper.scss +127 -127
  23. package/dist/cartDropdownOverlay.scss +653 -653
  24. package/dist/cartGrouping.scss +89 -89
  25. package/dist/category-groups-element.scss +739 -739
  26. package/dist/category-groups-quota-details.scss +626 -626
  27. package/dist/category.scss +137 -137
  28. package/dist/categoryDetails.scss +61 -61
  29. package/dist/categoryWidget.scss +34 -34
  30. package/dist/checkbox-radio.scss +124 -124
  31. package/dist/code-temp.scss +59 -59
  32. package/dist/colorpicker_v2.scss +62 -62
  33. package/dist/common-element.scss +35 -35
  34. package/dist/confirm-modal.scss +370 -370
  35. package/dist/confirmationModal.scss +139 -139
  36. package/dist/contact-us.scss +105 -105
  37. package/dist/container.scss +168 -168
  38. package/dist/custom-fonts.scss +100 -100
  39. package/dist/customization-tree.scss +162 -162
  40. package/dist/default-dropdown.scss +259 -259
  41. package/dist/dropdownTemplate.scss +699 -699
  42. package/dist/editCartItem.scss +110 -110
  43. package/dist/embed-temp.scss +73 -73
  44. package/dist/embroider-preview-element.scss +94 -94
  45. package/dist/embroider-template-1-v2.scss +1105 -1105
  46. package/dist/embroider-template-1.scss +501 -501
  47. package/dist/embroidery.scss +247 -247
  48. package/dist/employee-bulk-order.scss +4060 -4060
  49. package/dist/emtpy-templates.scss +165 -165
  50. package/dist/faq.scss +696 -696
  51. package/dist/fb-dropdown.scss +135 -135
  52. package/dist/filter-results.scss +361 -361
  53. package/dist/flex-text-editor.scss +271 -271
  54. package/dist/form-preview.scss +530 -530
  55. package/dist/global-styles.scss +198 -198
  56. package/dist/grid.scss +169 -169
  57. package/dist/icon-library.scss +78 -78
  58. package/dist/image-for-product.scss +21 -21
  59. package/dist/image-temp.scss +203 -203
  60. package/dist/item-stock.scss +93 -93
  61. package/dist/kitDetails.scss +5739 -5739
  62. package/dist/kits.scss +305 -305
  63. package/dist/language-selector.scss +948 -948
  64. package/dist/last-x-orders.scss +285 -285
  65. package/dist/layouter-item.scss +141 -141
  66. package/dist/layouter-pro-item.scss +139 -139
  67. package/dist/layouter-pro.scss +134 -134
  68. package/dist/layouter.scss +491 -491
  69. package/dist/light-box-v2.scss +155 -155
  70. package/dist/lightbox.scss +78 -78
  71. package/dist/loader.scss +37 -37
  72. package/dist/login.scss +29 -11
  73. package/dist/marchandiserSets.scss +141 -141
  74. package/dist/mega-menu-container.scss +152 -152
  75. package/dist/menu-item.scss +19 -19
  76. package/dist/menu-v2.scss +999 -999
  77. package/dist/menu.scss +174 -174
  78. package/dist/multi-select-dropdown.scss +316 -316
  79. package/dist/my-templates.scss +477 -477
  80. package/dist/my-wishlist.scss +27 -27
  81. package/dist/option-bar.scss +886 -886
  82. package/dist/order-processing.scss +61 -61
  83. package/dist/order-status.scss +74 -0
  84. package/dist/overflow-module.scss +63 -63
  85. package/dist/past-orders.scss +1039 -1039
  86. package/dist/payment-methods.scss +307 -307
  87. package/dist/phone-input.scss +208 -208
  88. package/dist/pickup-locations.scss +1359 -1359
  89. package/dist/position-module.scss +95 -95
  90. package/dist/prefix-list.scss +86 -86
  91. package/dist/product-actions.scss +2872 -2872
  92. package/dist/product-basic-elements.scss +600 -600
  93. package/dist/product-customizations.scss +155 -155
  94. package/dist/product-inventory.scss +1621 -1621
  95. package/dist/product-labels.scss +265 -265
  96. package/dist/product-price.scss +3392 -3392
  97. package/dist/product-promotions.scss +3224 -3224
  98. package/dist/product-sizechart.scss +1921 -1921
  99. package/dist/product.scss +140 -140
  100. package/dist/profile.scss +824 -824
  101. package/dist/quantity-selector.scss +1074 -1074
  102. package/dist/quick-inventory-check.scss +285 -285
  103. package/dist/quick-links.scss +627 -627
  104. package/dist/quota-details.scss +526 -526
  105. package/dist/repeater-embla-controls.scss +211 -211
  106. package/dist/repeater-grid-toggle.scss +206 -206
  107. package/dist/repeater-item.scss +152 -152
  108. package/dist/repeater.scss +946 -946
  109. package/dist/request-for-quotes.scss +841 -841
  110. package/dist/responsive-behaviour.scss +29 -29
  111. package/dist/rfqs.scss +861 -861
  112. package/dist/scroll.scss +414 -414
  113. package/dist/search.scss +689 -689
  114. package/dist/section.scss +276 -276
  115. package/dist/shareCartSideBar.scss +254 -254
  116. package/dist/shipping-estimator.scss +41 -41
  117. package/dist/shipping-payments.scss +2518 -2518
  118. package/dist/simple-list.scss +338 -338
  119. package/dist/skeleton.scss +64 -64
  120. package/dist/sort.scss +176 -176
  121. package/dist/spotlight.scss +1706 -1706
  122. package/dist/stack.scss +171 -171
  123. package/dist/static-global.scss +292 -292
  124. package/dist/static-text.scss +52 -52
  125. package/dist/stockStatus.scss +70 -70
  126. package/dist/store-locations.scss +1592 -1592
  127. package/dist/sub-category.scss +74 -74
  128. package/dist/submit-quote.scss +275 -275
  129. package/dist/tab-container-item.scss +80 -80
  130. package/dist/tab-container.scss +141 -141
  131. package/dist/table.scss +9 -0
  132. package/dist/tabs.scss +440 -440
  133. package/dist/text-temp.scss +109 -109
  134. package/dist/theme-classes.scss +421 -421
  135. package/dist/toaster.scss +392 -392
  136. package/dist/toggle-button.scss +32 -32
  137. package/dist/transform-properties-module.scss +20 -20
  138. package/dist/types/builder/tools/element-edit/login.d.ts +1 -0
  139. package/dist/types/builder/tools/element-edit/resetPassword.d.ts +1 -0
  140. package/dist/wishlist-overlay.scss +48 -48
  141. package/package.json +1 -1
package/dist/product-basic-elements.scss CHANGED
@@ -1,600 +1,600 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
-
4
- @use "./functions.scss" as *;
5
- $overflowSelector: ".flex__overflow";
6
-
7
- [data-div-type="element"] {
8
- word-break: break-all;
9
- &[data-element-type="productName"],
10
- &[data-element-type="brandName"],
11
- &[data-element-type="categoryName"] {
12
- // width: var(--_lt-wh);
13
- // height: var(--_lt-ht);
14
- // margin: var(--_lt-mn);
15
- // padding: var(--_lt-pg);
16
- // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
17
- // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
18
- width: var(
19
- --_sf-el-wh-st-mx,
20
- calc(
21
- 1% *
22
- var(
23
- --_ctm-mob-ele-nw-wh-vl,
24
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
25
- )
26
- )
27
- );
28
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
29
- word-break: break-all;
30
- min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
31
-
32
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
33
- // height: ;
34
- // aspect-ratio: 1 / var(--_sf-aspect-ratio);
35
- // --_aspect-ratio: calc(
36
- // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
37
- // );
38
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
39
-
40
- & > .wrapper {
41
- width: 100%;
42
- // Follow the elements own height so the styled box (background, border, shadow)
43
- // matches the Height set in layout instead of only hugging the text.
44
- min-height: inherit;
45
- background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
46
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
47
- border-color: var(
48
- --_show-border,
49
- var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
50
- );
51
- border-style: var(
52
- --_show-border,
53
- var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
54
- );
55
- border-width: var(
56
- --_show-border,
57
- var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
58
- );
59
- border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
60
- box-shadow: var(
61
- --_show-shadow,
62
- var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
63
- var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
64
- var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
65
- var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
66
- );
67
- // height: 100%;
68
- }
69
- &[data-show-shadow="false"] {
70
- --_show-shadow: none;
71
- }
72
- &[data-show-border="false"] {
73
- --_show-border: none;
74
- }
75
- // .text-element {
76
- // background: #6d96e4;
77
- // // padding: 10px;
78
- // font-weight: 600;
79
- // color: rgba(75, 69, 70, 1);
80
- // }
81
- a .text-element,
82
- .text-element[data-has-link="true"] {
83
- cursor: pointer;
84
- }
85
- .text-element {
86
- word-break: break-word;
87
-
88
- // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
89
- // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
90
- // display: flex;
91
- // flex-direction: column;
92
- // display: var(--_d-inline-flex);
93
- // display: var();
94
- --_sf-gp: 16px;
95
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
96
- row-gap: var(--_sf-gp);
97
- width: 100%;
98
- &:has(.skeleton__element) {
99
- display: flex;
100
- align-items: start;
101
- }
102
-
103
- &#{$overflowSelector} {
104
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
105
- }
106
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
107
- // border-color: var(
108
- // --_show-border,
109
- // var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
110
- // );
111
- // border-style: var(
112
- // --_show-border,
113
- // var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
114
- // );
115
- // border-width: var(
116
- // --_show-border,
117
- // var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
118
- // );
119
- // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
120
- // box-shadow: var(
121
- // --_show-shadow,
122
- // var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
123
- // var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
124
- // var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
125
- // var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
126
- // );
127
- color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
128
- font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
129
- font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
130
- font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
131
- font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
132
- text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
133
- letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
134
- // Line box guard. The line-height control stores a fixed length (its default is
135
- // 1rem), so it does not grow with the font size — at a large size the glyphs end
136
- // up taller than their own line box and spill out of it, which is what makes the
137
- // text look cut off. max(..., 1em) keeps the box at least as tall as the text
138
- // while still honouring any larger value the user sets.
139
- line-height: max(
140
- var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
141
- 1em
142
- );
143
- text-decoration: var(
144
- --_sf-hr-tt-dn,
145
- var(
146
- --_ctm-mob-dn-dt-se-ue,
147
- var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
148
- )
149
- );
150
- scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
151
-
152
- &[data-flip-x="true"] {
153
- transform: scaleX(-1);
154
- }
155
- &[data-flip-y="true"] {
156
- transform: scaleY(-1);
157
- }
158
- text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
159
- word-wrap: prepareMediaVariable(--_ctm-dn-wd-wp);
160
- word-break: prepareMediaVariable(--_ctm-dn-wd-bk);
161
- }
162
- }
163
- &[data-element-type="productDescription"],
164
- &[data-element-type="categoryDescription"] {
165
- // width: var(--_lt-wh);
166
- // height: var(--_lt-ht);
167
- // margin: var(--_lt-mn);
168
- // padding: var(--_lt-pg);
169
- // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
170
- // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
171
- width: var(
172
- --_sf-el-wh-st-mx,
173
- calc(
174
- 1% *
175
- var(
176
- --_ctm-mob-ele-nw-wh-vl,
177
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
178
- )
179
- )
180
- );
181
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))));
182
- min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
183
-
184
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
185
- // height: ;
186
- // aspect-ratio: 1 / var(--_sf-aspect-ratio);
187
- // --_aspect-ratio: calc(
188
- // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
189
- // );
190
-
191
- & > .wrapper {
192
- width: 100%;
193
- // Follow the elements own height so the styled box (background, border, shadow)
194
- // matches the Height set in layout instead of only hugging the text.
195
- min-height: inherit;
196
-
197
- background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
198
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
199
-
200
- border-color: var(
201
- --_show-border,
202
- var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
203
- );
204
- border-style: var(
205
- --_show-border,
206
- var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
207
- );
208
- border-width: var(
209
- --_show-border,
210
- var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
211
- );
212
- border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
213
- box-shadow: var(
214
- --_show-shadow,
215
- var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
216
- var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
217
- var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
218
- var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
219
- );
220
- // height: 100%;
221
- }
222
- &[data-show-shadow="false"] {
223
- --_show-shadow: none;
224
- }
225
- &[data-show-border="false"] {
226
- --_show-border: none;
227
- }
228
- // .text-element {
229
- // background: #6d96e4;
230
- // // padding: 10px;
231
- // font-weight: 600;
232
- // color: rgba(75, 69, 70, 1);
233
- // }
234
- .text-element {
235
- // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
236
- // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
237
- // display: flex;
238
- // flex-direction: column;
239
- --_sf-gp: 16px;
240
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
241
- row-gap: var(--_sf-gp);
242
- width: 100%;
243
-
244
- &#{$overflowSelector} {
245
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
246
- }
247
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
248
- // border-color: var(
249
- // --_show-border,
250
- // var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
251
- // );
252
- // border-style: var(
253
- // --_show-border,
254
- // var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
255
- // );
256
- // border-width: var(
257
- // --_show-border,
258
- // var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
259
- // );
260
- // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
261
- // box-shadow: var(
262
- // --_show-shadow,
263
- // var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
264
- // var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
265
- // var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
266
- // var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
267
- // );
268
- // color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
269
- // font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))),
270
-
271
- // font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
272
- // font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
273
- // font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
274
- // text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
275
- // letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
276
- // line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
277
- // text-decoration: var(
278
- // --_sf-hr-tt-dn,
279
- // var(
280
- // --_ctm-mob-dn-dt-se-ue,
281
- // var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
282
- // )
283
- // );
284
- text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
285
- scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
286
- &[data-flip-x="true"] {
287
- transform: scaleX(-1);
288
- }
289
- &[data-flip-y="true"] {
290
- transform: scaleY(-1);
291
- }
292
- &,
293
- * {
294
- color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
295
- font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
296
- font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
297
- font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
298
- font-style: var(
299
- --_ctm-mob-dn-ft-se-ic,
300
- var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic))
301
- );
302
- text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
303
- letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
304
- // Line box guard — see the note on the other groups in this file.
305
- line-height: max(
306
- var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
307
- 1em
308
- );
309
- text-decoration: var(
310
- --_sf-hr-tt-dn,
311
- var(
312
- --_ctm-mob-dn-dt-se-ue,
313
- var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
314
- )
315
- );
316
- text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
317
- word-wrap: prepareMediaVariable(--_ctm-dn-wd-wp);
318
- word-break: prepareMediaVariable(--_ctm-dn-wd-bk);
319
- }
320
- }
321
- }
322
- &[data-element-type="productBrand"] {
323
- // width: var(--_lt-wh);
324
- // height: var(--_lt-ht);
325
- // margin: var(--_lt-mn);
326
- // padding: var(--_lt-pg);
327
- // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
328
- // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
329
- width: var(
330
- --_sf-el-wh-st-mx,
331
- calc(
332
- 1% *
333
- var(
334
- --_ctm-mob-ele-nw-wh-vl,
335
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
336
- )
337
- )
338
- );
339
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))));
340
- min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
341
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
342
- // height: ;
343
- // aspect-ratio: 1 / var(--_sf-aspect-ratio);
344
- // --_aspect-ratio: calc(
345
- // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
346
- // );
347
-
348
- & > .wrapper {
349
- width: 100%;
350
- // Follow the elements own height so the styled box (background, border, shadow)
351
- // matches the Height set in layout instead of only hugging the text.
352
- min-height: inherit;
353
- background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
354
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
355
- border-color: var(
356
- --_show-border,
357
- var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
358
- );
359
- border-style: var(
360
- --_show-border,
361
- var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
362
- );
363
- border-width: var(
364
- --_show-border,
365
- var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
366
- );
367
- border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
368
- box-shadow: var(
369
- --_show-shadow,
370
- var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
371
- var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
372
- var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
373
- var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
374
- );
375
- // height: 100%;
376
- }
377
- &[data-show-shadow="false"] {
378
- --_show-shadow: none;
379
- }
380
- &[data-show-border="false"] {
381
- --_show-border: none;
382
- }
383
- // .text-element {
384
- // background: #6d96e4;
385
- // // padding: 10px;
386
- // font-weight: 600;
387
- // color: rgba(75, 69, 70, 1);
388
- // }
389
- .text-element {
390
- // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
391
- // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
392
- display: flex;
393
- flex-direction: column;
394
- --_sf-gp: 16px;
395
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
396
- row-gap: var(--_sf-gp);
397
- width: 100%;
398
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
399
- // border-color: var(
400
- // --_show-border,
401
- // var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
402
- // );
403
- // border-style: var(
404
- // --_show-border,
405
- // var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
406
- // );
407
- // border-width: var(
408
- // --_show-border,
409
- // var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
410
- // );
411
- // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
412
- // box-shadow: var(
413
- // --_show-shadow,
414
- // var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
415
- // var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
416
- // var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
417
- // var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
418
- // );
419
- color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
420
- font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
421
- &.flex__overflow {
422
- white-space: normal;
423
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
424
- }
425
- font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
426
- font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
427
- font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
428
- text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
429
- letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
430
- // Line box guard. The line-height control stores a fixed length (its default is
431
- // 1rem), so it does not grow with the font size — at a large size the glyphs end
432
- // up taller than their own line box and spill out of it, which is what makes the
433
- // text look cut off. max(..., 1em) keeps the box at least as tall as the text
434
- // while still honouring any larger value the user sets.
435
- line-height: max(
436
- var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
437
- 1em
438
- );
439
- text-decoration: var(
440
- --_sf-hr-tt-dn,
441
- var(
442
- --_ctm-mob-dn-dt-se-ue,
443
- var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
444
- )
445
- );
446
- word-wrap: prepareMediaVariable(--_ctm-dn-wd-wp);
447
- word-break: prepareMediaVariable(--_ctm-dn-wd-bk);
448
- scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
449
- &[data-flip-x="true"] {
450
- transform: scaleX(-1);
451
- }
452
- &[data-flip-y="true"] {
453
- transform: scaleY(-1);
454
- }
455
- text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
456
- &#{$overflowSelector} {
457
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
458
- }
459
- }
460
- }
461
- &[data-element-type="productCode"],
462
- &[data-element-type="categoryCode"] {
463
- // width: var(--_lt-wh);
464
- // height: var(--_lt-ht);
465
- // margin: var(--_lt-mn);
466
- // padding: var(--_lt-pg);
467
- // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
468
- // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
469
- width: var(
470
- --_sf-el-wh-st-mx,
471
- calc(
472
- 1% *
473
- var(
474
- --_ctm-mob-ele-nw-wh-vl,
475
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
476
- )
477
- )
478
- );
479
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))));
480
- min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
481
- // height: ;
482
- // aspect-ratio: 1 / var(--_sf-aspect-ratio);
483
- // --_aspect-ratio: calc(
484
- // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
485
- // );
486
-
487
- & > .wrapper {
488
- width: 100%;
489
- // Follow the elements own height so the styled box (background, border, shadow)
490
- // matches the Height set in layout instead of only hugging the text.
491
- min-height: inherit;
492
- background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
493
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
494
- border-color: var(
495
- --_show-border,
496
- var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
497
- );
498
- border-style: var(
499
- --_show-border,
500
- var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
501
- );
502
- border-width: var(
503
- --_show-border,
504
- var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
505
- );
506
- border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
507
- box-shadow: var(
508
- --_show-shadow,
509
- var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
510
- var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
511
- var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
512
- var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
513
- );
514
- // height: 100%;
515
- }
516
- &[data-show-shadow="false"] {
517
- --_show-shadow: none;
518
- }
519
- &[data-show-border="false"] {
520
- --_show-border: none;
521
- }
522
- // .text-element {
523
- // background: #6d96e4;
524
- // // padding: 10px;
525
- // font-weight: 600;
526
- // color: rgba(75, 69, 70, 1);
527
- // }
528
- .text-element {
529
- // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
530
- // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
531
- display: flex;
532
- flex-direction: column;
533
- --_sf-gp: 16px;
534
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
535
- row-gap: var(--_sf-gp);
536
- width: 100%;
537
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
538
- // border-color: var(
539
- // --_show-border,
540
- // var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
541
- // );
542
- // border-style: var(
543
- // --_show-border,
544
- // var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
545
- // );
546
- // border-width: var(
547
- // --_show-border,
548
- // var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
549
- // );
550
- // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
551
- // box-shadow: var(
552
- // --_show-shadow,
553
- // var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
554
- // var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
555
- // var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
556
- // var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
557
- // );
558
- color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
559
- font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
560
- &.flex__overflow {
561
- white-space: normal;
562
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
563
- }
564
- font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
565
- font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
566
- font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
567
- text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
568
- letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
569
- // Line box guard. The line-height control stores a fixed length (its default is
570
- // 1rem), so it does not grow with the font size — at a large size the glyphs end
571
- // up taller than their own line box and spill out of it, which is what makes the
572
- // text look cut off. max(..., 1em) keeps the box at least as tall as the text
573
- // while still honouring any larger value the user sets.
574
- line-height: max(
575
- var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
576
- 1em
577
- );
578
- text-decoration: var(
579
- --_sf-hr-tt-dn,
580
- var(
581
- --_ctm-mob-dn-dt-se-ue,
582
- var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
583
- )
584
- );
585
- scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
586
- &[data-flip-x="true"] {
587
- transform: scaleX(-1);
588
- }
589
- &[data-flip-y="true"] {
590
- transform: scaleY(-1);
591
- }
592
- text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
593
- word-wrap: prepareMediaVariable(--_ctm-dn-wd-wp);
594
- word-break: prepareMediaVariable(--_ctm-dn-wd-bk);
595
- &#{$overflowSelector} {
596
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
597
- }
598
- }
599
- }
600
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+
4
+ @use "./functions.scss" as *;
5
+ $overflowSelector: ".flex__overflow";
6
+
7
+ [data-div-type="element"] {
8
+ word-break: break-all;
9
+ &[data-element-type="productName"],
10
+ &[data-element-type="brandName"],
11
+ &[data-element-type="categoryName"] {
12
+ // width: var(--_lt-wh);
13
+ // height: var(--_lt-ht);
14
+ // margin: var(--_lt-mn);
15
+ // padding: var(--_lt-pg);
16
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
17
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
18
+ width: var(
19
+ --_sf-el-wh-st-mx,
20
+ calc(
21
+ 1% *
22
+ var(
23
+ --_ctm-mob-ele-nw-wh-vl,
24
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
25
+ )
26
+ )
27
+ );
28
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
29
+ word-break: break-all;
30
+ min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
31
+
32
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
33
+ // height: ;
34
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
35
+ // --_aspect-ratio: calc(
36
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
37
+ // );
38
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
39
+
40
+ & > .wrapper {
41
+ width: 100%;
42
+ // Follow the elements own height so the styled box (background, border, shadow)
43
+ // matches the Height set in layout instead of only hugging the text.
44
+ min-height: inherit;
45
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
46
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
47
+ border-color: var(
48
+ --_show-border,
49
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
50
+ );
51
+ border-style: var(
52
+ --_show-border,
53
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
54
+ );
55
+ border-width: var(
56
+ --_show-border,
57
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
58
+ );
59
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
60
+ box-shadow: var(
61
+ --_show-shadow,
62
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
63
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
64
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
65
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
66
+ );
67
+ // height: 100%;
68
+ }
69
+ &[data-show-shadow="false"] {
70
+ --_show-shadow: none;
71
+ }
72
+ &[data-show-border="false"] {
73
+ --_show-border: none;
74
+ }
75
+ // .text-element {
76
+ // background: #6d96e4;
77
+ // // padding: 10px;
78
+ // font-weight: 600;
79
+ // color: rgba(75, 69, 70, 1);
80
+ // }
81
+ a .text-element,
82
+ .text-element[data-has-link="true"] {
83
+ cursor: pointer;
84
+ }
85
+ .text-element {
86
+ word-break: break-word;
87
+
88
+ // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
89
+ // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
90
+ // display: flex;
91
+ // flex-direction: column;
92
+ // display: var(--_d-inline-flex);
93
+ // display: var();
94
+ --_sf-gp: 16px;
95
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
96
+ row-gap: var(--_sf-gp);
97
+ width: 100%;
98
+ &:has(.skeleton__element) {
99
+ display: flex;
100
+ align-items: start;
101
+ }
102
+
103
+ &#{$overflowSelector} {
104
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
105
+ }
106
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
107
+ // border-color: var(
108
+ // --_show-border,
109
+ // var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
110
+ // );
111
+ // border-style: var(
112
+ // --_show-border,
113
+ // var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
114
+ // );
115
+ // border-width: var(
116
+ // --_show-border,
117
+ // var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
118
+ // );
119
+ // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
120
+ // box-shadow: var(
121
+ // --_show-shadow,
122
+ // var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
123
+ // var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
124
+ // var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
125
+ // var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
126
+ // );
127
+ color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
128
+ font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
129
+ font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
130
+ font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
131
+ font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
132
+ text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
133
+ letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
134
+ // Line box guard. The line-height control stores a fixed length (its default is
135
+ // 1rem), so it does not grow with the font size — at a large size the glyphs end
136
+ // up taller than their own line box and spill out of it, which is what makes the
137
+ // text look cut off. max(..., 1em) keeps the box at least as tall as the text
138
+ // while still honouring any larger value the user sets.
139
+ line-height: max(
140
+ var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
141
+ 1em
142
+ );
143
+ text-decoration: var(
144
+ --_sf-hr-tt-dn,
145
+ var(
146
+ --_ctm-mob-dn-dt-se-ue,
147
+ var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
148
+ )
149
+ );
150
+ scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
151
+
152
+ &[data-flip-x="true"] {
153
+ transform: scaleX(-1);
154
+ }
155
+ &[data-flip-y="true"] {
156
+ transform: scaleY(-1);
157
+ }
158
+ text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
159
+ word-wrap: prepareMediaVariable(--_ctm-dn-wd-wp);
160
+ word-break: prepareMediaVariable(--_ctm-dn-wd-bk);
161
+ }
162
+ }
163
+ &[data-element-type="productDescription"],
164
+ &[data-element-type="categoryDescription"] {
165
+ // width: var(--_lt-wh);
166
+ // height: var(--_lt-ht);
167
+ // margin: var(--_lt-mn);
168
+ // padding: var(--_lt-pg);
169
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
170
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
171
+ width: var(
172
+ --_sf-el-wh-st-mx,
173
+ calc(
174
+ 1% *
175
+ var(
176
+ --_ctm-mob-ele-nw-wh-vl,
177
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
178
+ )
179
+ )
180
+ );
181
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))));
182
+ min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
183
+
184
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
185
+ // height: ;
186
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
187
+ // --_aspect-ratio: calc(
188
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
189
+ // );
190
+
191
+ & > .wrapper {
192
+ width: 100%;
193
+ // Follow the elements own height so the styled box (background, border, shadow)
194
+ // matches the Height set in layout instead of only hugging the text.
195
+ min-height: inherit;
196
+
197
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
198
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
199
+
200
+ border-color: var(
201
+ --_show-border,
202
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
203
+ );
204
+ border-style: var(
205
+ --_show-border,
206
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
207
+ );
208
+ border-width: var(
209
+ --_show-border,
210
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
211
+ );
212
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
213
+ box-shadow: var(
214
+ --_show-shadow,
215
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
216
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
217
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
218
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
219
+ );
220
+ // height: 100%;
221
+ }
222
+ &[data-show-shadow="false"] {
223
+ --_show-shadow: none;
224
+ }
225
+ &[data-show-border="false"] {
226
+ --_show-border: none;
227
+ }
228
+ // .text-element {
229
+ // background: #6d96e4;
230
+ // // padding: 10px;
231
+ // font-weight: 600;
232
+ // color: rgba(75, 69, 70, 1);
233
+ // }
234
+ .text-element {
235
+ // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
236
+ // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
237
+ // display: flex;
238
+ // flex-direction: column;
239
+ --_sf-gp: 16px;
240
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
241
+ row-gap: var(--_sf-gp);
242
+ width: 100%;
243
+
244
+ &#{$overflowSelector} {
245
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
246
+ }
247
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
248
+ // border-color: var(
249
+ // --_show-border,
250
+ // var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
251
+ // );
252
+ // border-style: var(
253
+ // --_show-border,
254
+ // var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
255
+ // );
256
+ // border-width: var(
257
+ // --_show-border,
258
+ // var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
259
+ // );
260
+ // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
261
+ // box-shadow: var(
262
+ // --_show-shadow,
263
+ // var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
264
+ // var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
265
+ // var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
266
+ // var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
267
+ // );
268
+ // color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
269
+ // font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))),
270
+
271
+ // font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
272
+ // font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
273
+ // font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
274
+ // text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
275
+ // letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
276
+ // line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
277
+ // text-decoration: var(
278
+ // --_sf-hr-tt-dn,
279
+ // var(
280
+ // --_ctm-mob-dn-dt-se-ue,
281
+ // var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
282
+ // )
283
+ // );
284
+ text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
285
+ scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
286
+ &[data-flip-x="true"] {
287
+ transform: scaleX(-1);
288
+ }
289
+ &[data-flip-y="true"] {
290
+ transform: scaleY(-1);
291
+ }
292
+ &,
293
+ * {
294
+ color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
295
+ font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
296
+ font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
297
+ font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
298
+ font-style: var(
299
+ --_ctm-mob-dn-ft-se-ic,
300
+ var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic))
301
+ );
302
+ text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
303
+ letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
304
+ // Line box guard — see the note on the other groups in this file.
305
+ line-height: max(
306
+ var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
307
+ 1em
308
+ );
309
+ text-decoration: var(
310
+ --_sf-hr-tt-dn,
311
+ var(
312
+ --_ctm-mob-dn-dt-se-ue,
313
+ var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
314
+ )
315
+ );
316
+ text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
317
+ word-wrap: prepareMediaVariable(--_ctm-dn-wd-wp);
318
+ word-break: prepareMediaVariable(--_ctm-dn-wd-bk);
319
+ }
320
+ }
321
+ }
322
+ &[data-element-type="productBrand"] {
323
+ // width: var(--_lt-wh);
324
+ // height: var(--_lt-ht);
325
+ // margin: var(--_lt-mn);
326
+ // padding: var(--_lt-pg);
327
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
328
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
329
+ width: var(
330
+ --_sf-el-wh-st-mx,
331
+ calc(
332
+ 1% *
333
+ var(
334
+ --_ctm-mob-ele-nw-wh-vl,
335
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
336
+ )
337
+ )
338
+ );
339
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))));
340
+ min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
341
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
342
+ // height: ;
343
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
344
+ // --_aspect-ratio: calc(
345
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
346
+ // );
347
+
348
+ & > .wrapper {
349
+ width: 100%;
350
+ // Follow the elements own height so the styled box (background, border, shadow)
351
+ // matches the Height set in layout instead of only hugging the text.
352
+ min-height: inherit;
353
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
354
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
355
+ border-color: var(
356
+ --_show-border,
357
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
358
+ );
359
+ border-style: var(
360
+ --_show-border,
361
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
362
+ );
363
+ border-width: var(
364
+ --_show-border,
365
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
366
+ );
367
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
368
+ box-shadow: var(
369
+ --_show-shadow,
370
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
371
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
372
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
373
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
374
+ );
375
+ // height: 100%;
376
+ }
377
+ &[data-show-shadow="false"] {
378
+ --_show-shadow: none;
379
+ }
380
+ &[data-show-border="false"] {
381
+ --_show-border: none;
382
+ }
383
+ // .text-element {
384
+ // background: #6d96e4;
385
+ // // padding: 10px;
386
+ // font-weight: 600;
387
+ // color: rgba(75, 69, 70, 1);
388
+ // }
389
+ .text-element {
390
+ // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
391
+ // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
392
+ display: flex;
393
+ flex-direction: column;
394
+ --_sf-gp: 16px;
395
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
396
+ row-gap: var(--_sf-gp);
397
+ width: 100%;
398
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
399
+ // border-color: var(
400
+ // --_show-border,
401
+ // var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
402
+ // );
403
+ // border-style: var(
404
+ // --_show-border,
405
+ // var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
406
+ // );
407
+ // border-width: var(
408
+ // --_show-border,
409
+ // var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
410
+ // );
411
+ // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
412
+ // box-shadow: var(
413
+ // --_show-shadow,
414
+ // var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
415
+ // var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
416
+ // var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
417
+ // var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
418
+ // );
419
+ color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
420
+ font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
421
+ &.flex__overflow {
422
+ white-space: normal;
423
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
424
+ }
425
+ font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
426
+ font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
427
+ font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
428
+ text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
429
+ letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
430
+ // Line box guard. The line-height control stores a fixed length (its default is
431
+ // 1rem), so it does not grow with the font size — at a large size the glyphs end
432
+ // up taller than their own line box and spill out of it, which is what makes the
433
+ // text look cut off. max(..., 1em) keeps the box at least as tall as the text
434
+ // while still honouring any larger value the user sets.
435
+ line-height: max(
436
+ var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
437
+ 1em
438
+ );
439
+ text-decoration: var(
440
+ --_sf-hr-tt-dn,
441
+ var(
442
+ --_ctm-mob-dn-dt-se-ue,
443
+ var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
444
+ )
445
+ );
446
+ word-wrap: prepareMediaVariable(--_ctm-dn-wd-wp);
447
+ word-break: prepareMediaVariable(--_ctm-dn-wd-bk);
448
+ scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
449
+ &[data-flip-x="true"] {
450
+ transform: scaleX(-1);
451
+ }
452
+ &[data-flip-y="true"] {
453
+ transform: scaleY(-1);
454
+ }
455
+ text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
456
+ &#{$overflowSelector} {
457
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
458
+ }
459
+ }
460
+ }
461
+ &[data-element-type="productCode"],
462
+ &[data-element-type="categoryCode"] {
463
+ // width: var(--_lt-wh);
464
+ // height: var(--_lt-ht);
465
+ // margin: var(--_lt-mn);
466
+ // padding: var(--_lt-pg);
467
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
468
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
469
+ width: var(
470
+ --_sf-el-wh-st-mx,
471
+ calc(
472
+ 1% *
473
+ var(
474
+ --_ctm-mob-ele-nw-wh-vl,
475
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
476
+ )
477
+ )
478
+ );
479
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))));
480
+ min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
481
+ // height: ;
482
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
483
+ // --_aspect-ratio: calc(
484
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
485
+ // );
486
+
487
+ & > .wrapper {
488
+ width: 100%;
489
+ // Follow the elements own height so the styled box (background, border, shadow)
490
+ // matches the Height set in layout instead of only hugging the text.
491
+ min-height: inherit;
492
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
493
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
494
+ border-color: var(
495
+ --_show-border,
496
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
497
+ );
498
+ border-style: var(
499
+ --_show-border,
500
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
501
+ );
502
+ border-width: var(
503
+ --_show-border,
504
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
505
+ );
506
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
507
+ box-shadow: var(
508
+ --_show-shadow,
509
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
510
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
511
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
512
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
513
+ );
514
+ // height: 100%;
515
+ }
516
+ &[data-show-shadow="false"] {
517
+ --_show-shadow: none;
518
+ }
519
+ &[data-show-border="false"] {
520
+ --_show-border: none;
521
+ }
522
+ // .text-element {
523
+ // background: #6d96e4;
524
+ // // padding: 10px;
525
+ // font-weight: 600;
526
+ // color: rgba(75, 69, 70, 1);
527
+ // }
528
+ .text-element {
529
+ // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
530
+ // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
531
+ display: flex;
532
+ flex-direction: column;
533
+ --_sf-gp: 16px;
534
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
535
+ row-gap: var(--_sf-gp);
536
+ width: 100%;
537
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
538
+ // border-color: var(
539
+ // --_show-border,
540
+ // var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
541
+ // );
542
+ // border-style: var(
543
+ // --_show-border,
544
+ // var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
545
+ // );
546
+ // border-width: var(
547
+ // --_show-border,
548
+ // var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
549
+ // );
550
+ // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
551
+ // box-shadow: var(
552
+ // --_show-shadow,
553
+ // var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
554
+ // var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
555
+ // var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
556
+ // var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
557
+ // );
558
+ color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
559
+ font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
560
+ &.flex__overflow {
561
+ white-space: normal;
562
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
563
+ }
564
+ font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
565
+ font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
566
+ font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
567
+ text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
568
+ letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
569
+ // Line box guard. The line-height control stores a fixed length (its default is
570
+ // 1rem), so it does not grow with the font size — at a large size the glyphs end
571
+ // up taller than their own line box and spill out of it, which is what makes the
572
+ // text look cut off. max(..., 1em) keeps the box at least as tall as the text
573
+ // while still honouring any larger value the user sets.
574
+ line-height: max(
575
+ var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
576
+ 1em
577
+ );
578
+ text-decoration: var(
579
+ --_sf-hr-tt-dn,
580
+ var(
581
+ --_ctm-mob-dn-dt-se-ue,
582
+ var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
583
+ )
584
+ );
585
+ scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
586
+ &[data-flip-x="true"] {
587
+ transform: scaleX(-1);
588
+ }
589
+ &[data-flip-y="true"] {
590
+ transform: scaleY(-1);
591
+ }
592
+ text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
593
+ word-wrap: prepareMediaVariable(--_ctm-dn-wd-wp);
594
+ word-break: prepareMediaVariable(--_ctm-dn-wd-bk);
595
+ &#{$overflowSelector} {
596
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
597
+ }
598
+ }
599
+ }
600
+ }