@sc-360-v2/storefront-cms-library 0.5.69 → 0.5.71

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 (158) 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/bundleCategories.scss +301 -301
  16. package/dist/bundleDetails.scss +6189 -6189
  17. package/dist/buy-for-tab-container.scss +141 -141
  18. package/dist/buy-for-tab.scss +649 -649
  19. package/dist/buy-for-tabs-container-item.scss +80 -80
  20. package/dist/buyForPopup.scss +339 -339
  21. package/dist/cart-details.scss +3986 -3986
  22. package/dist/cart-products-sidebar.scss +211 -211
  23. package/dist/cart-summary.scss +2826 -2826
  24. package/dist/cart-wrapper.scss +127 -127
  25. package/dist/cartAttributes.scss +1422 -1422
  26. package/dist/cartDropdownOverlay.scss +653 -653
  27. package/dist/cartGrouping.scss +89 -89
  28. package/dist/category-groups-element.scss +739 -739
  29. package/dist/category-groups-quota-details.scss +626 -626
  30. package/dist/category.scss +137 -137
  31. package/dist/categoryDetails.scss +61 -61
  32. package/dist/categoryWidget.scss +34 -34
  33. package/dist/checkbox-radio.scss +124 -124
  34. package/dist/code-temp.scss +59 -59
  35. package/dist/colorpicker_v2.scss +62 -62
  36. package/dist/common-element.scss +35 -35
  37. package/dist/confirm-modal.scss +370 -370
  38. package/dist/confirmationModal.scss +139 -139
  39. package/dist/contact-us.scss +105 -105
  40. package/dist/container.scss +168 -168
  41. package/dist/countdown.scss +899 -899
  42. package/dist/coupon.scss +1519 -1519
  43. package/dist/custom-fonts.scss +100 -100
  44. package/dist/customization-tree.scss +162 -162
  45. package/dist/default-dropdown.scss +259 -259
  46. package/dist/dropdownTemplate.scss +699 -699
  47. package/dist/editCartItem.scss +110 -110
  48. package/dist/embed-temp.scss +73 -73
  49. package/dist/embroider-preview-element.scss +94 -94
  50. package/dist/embroider-template-1-v2.scss +1105 -1105
  51. package/dist/embroider-template-1.scss +501 -501
  52. package/dist/embroidery.scss +247 -247
  53. package/dist/employee-bulk-order.scss +4060 -4060
  54. package/dist/emtpy-templates.scss +165 -165
  55. package/dist/faq.scss +696 -696
  56. package/dist/fb-dropdown.scss +135 -135
  57. package/dist/filter-results.scss +361 -361
  58. package/dist/filters.scss +3040 -3040
  59. package/dist/flex-text-editor.scss +271 -271
  60. package/dist/form-preview.scss +530 -530
  61. package/dist/gallery-slider-temp.scss +1776 -1776
  62. package/dist/global-styles.scss +198 -198
  63. package/dist/grid.scss +169 -169
  64. package/dist/icon-library.scss +78 -78
  65. package/dist/icon-list.scss +39 -0
  66. package/dist/image-for-product.scss +21 -21
  67. package/dist/image-temp.scss +203 -203
  68. package/dist/item-stock.scss +93 -93
  69. package/dist/kitDetails.scss +5739 -5739
  70. package/dist/kits.scss +305 -305
  71. package/dist/language-selector.scss +948 -948
  72. package/dist/last-x-orders.scss +285 -285
  73. package/dist/layouter-item.scss +141 -141
  74. package/dist/layouter-pro-item.scss +139 -139
  75. package/dist/layouter-pro.scss +134 -134
  76. package/dist/layouter.scss +491 -491
  77. package/dist/light-box-v2.scss +155 -155
  78. package/dist/lightbox.scss +78 -78
  79. package/dist/loader.scss +37 -37
  80. package/dist/login.scss +29 -11
  81. package/dist/map.scss +1359 -1359
  82. package/dist/marchandiserSets.scss +141 -141
  83. package/dist/mega-menu-container.scss +152 -152
  84. package/dist/menu-item.scss +19 -19
  85. package/dist/menu-v2.scss +999 -999
  86. package/dist/menu.scss +174 -174
  87. package/dist/multi-select-dropdown.scss +316 -316
  88. package/dist/my-templates.scss +477 -477
  89. package/dist/my-wishlist.scss +27 -27
  90. package/dist/option-bar.scss +886 -886
  91. package/dist/order-processing.scss +61 -61
  92. package/dist/order-status.scss +2187 -2187
  93. package/dist/overflow-module.scss +63 -63
  94. package/dist/past-orders.scss +1039 -1039
  95. package/dist/payment-methods.scss +307 -307
  96. package/dist/phone-input.scss +208 -208
  97. package/dist/pickup-locations.scss +1359 -1359
  98. package/dist/position-module.scss +95 -95
  99. package/dist/prefix-list.scss +86 -86
  100. package/dist/product-actions.scss +2872 -2872
  101. package/dist/product-basic-elements.scss +600 -600
  102. package/dist/product-customizations.scss +155 -155
  103. package/dist/product-highlights.scss +348 -348
  104. package/dist/product-image-allocation.scss +1477 -1477
  105. package/dist/product-inventory.scss +1621 -1621
  106. package/dist/product-labels.scss +265 -265
  107. package/dist/product-options.scss +1444 -1444
  108. package/dist/product-price.scss +4 -0
  109. package/dist/product-promotions.scss +3224 -3224
  110. package/dist/product-sizechart.scss +1921 -1921
  111. package/dist/product.scss +140 -140
  112. package/dist/profile.scss +824 -824
  113. package/dist/quantity-selector.scss +1074 -1074
  114. package/dist/quick-inventory-check.scss +285 -285
  115. package/dist/quick-links.scss +627 -627
  116. package/dist/quota-details.scss +526 -526
  117. package/dist/quotes.scss +847 -847
  118. package/dist/repeater-embla-controls.scss +211 -211
  119. package/dist/repeater-grid-toggle.scss +206 -206
  120. package/dist/repeater-item.scss +152 -152
  121. package/dist/repeater.scss +946 -946
  122. package/dist/request-for-quotes.scss +841 -841
  123. package/dist/responsive-behaviour.scss +29 -29
  124. package/dist/rfqs.scss +861 -861
  125. package/dist/scroll.scss +414 -414
  126. package/dist/search-results-heading.scss +309 -309
  127. package/dist/search.scss +689 -689
  128. package/dist/section.scss +276 -276
  129. package/dist/shareCartSideBar.scss +254 -254
  130. package/dist/shipping-estimator.scss +41 -41
  131. package/dist/shipping-payments.scss +2518 -2518
  132. package/dist/simple-list.scss +338 -338
  133. package/dist/skeleton.scss +64 -64
  134. package/dist/spotlight.scss +1706 -1706
  135. package/dist/stack.scss +171 -171
  136. package/dist/static-global.scss +292 -292
  137. package/dist/static-text.scss +52 -52
  138. package/dist/stockStatus.scss +70 -70
  139. package/dist/store-locations.scss +1592 -1592
  140. package/dist/sub-category.scss +74 -74
  141. package/dist/submit-quote.scss +275 -275
  142. package/dist/tab-container-item.scss +80 -80
  143. package/dist/tab-container.scss +141 -141
  144. package/dist/table.scss +9 -0
  145. package/dist/tabs.scss +440 -440
  146. package/dist/text-temp.scss +109 -109
  147. package/dist/theme-classes.scss +421 -421
  148. package/dist/toaster.scss +392 -392
  149. package/dist/toggle-button.scss +32 -32
  150. package/dist/transform-properties-module.scss +20 -20
  151. package/dist/types/builder/tools/element-edit/icon-list.d.ts +5 -0
  152. package/dist/types/builder/tools/element-edit/login.d.ts +1 -0
  153. package/dist/types/builder/tools/element-edit/resetPassword.d.ts +1 -0
  154. package/dist/types/builder/tools/element-edit/userElements.d.ts +99 -0
  155. package/dist/user-elements.scss +2896 -2911
  156. package/dist/widget.scss +153 -153
  157. package/dist/wishlist-overlay.scss +48 -48
  158. package/package.json +1 -1
package/dist/brand-basic-elements.scss CHANGED
@@ -1,387 +1,387 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- @use "./functions.scss" as *;
4
- $overflowSelector: ".flex__overflow";
5
-
6
- [data-div-type="element"] {
7
- &[data-element-type="brandName"] {
8
- // width: var(--_lt-wh);
9
- // height: var(--_lt-ht);
10
- // margin: var(--_lt-mn);
11
- // padding: var(--_lt-pg);
12
- // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
13
- // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
14
- width: var(
15
- --_sf-el-wh-st-mx,
16
- calc(
17
- 1% *
18
- var(
19
- --_ctm-mob-ele-nw-wh-vl,
20
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
21
- )
22
- )
23
- );
24
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
25
- // The Height control. brandDescription and brandCode below already had this; only
26
- // brandName was missing it, so its own stylesheet never applied the height at all
27
- // and the wrapper's `min-height: inherit` had nothing to inherit. It happened to
28
- // work because brandName is *also* declared in product-basic-elements.scss, which
29
- // does set it — relying on that cross-file declaration is not something to keep.
30
- min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
31
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
32
- // height: ;
33
- // aspect-ratio: 1 / var(--_sf-aspect-ratio);
34
- // --_aspect-ratio: calc(
35
- // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
36
- // );
37
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
38
-
39
- & > .wrapper {
40
- width: 100%;
41
- // Follow the elements own height so the styled box (background, border, shadow)
42
- // matches the Height set in layout instead of only hugging the text.
43
- min-height: inherit;
44
- // height: 100%;
45
- background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
46
-
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
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
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
- // // cursor: pointer;
81
- // }
82
- .text-element {
83
- // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
84
- display: flex;
85
- flex-direction: column;
86
- --_sf-gp: 16px;
87
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
88
- row-gap: var(--_sf-gp);
89
- width: 100%;
90
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
91
- // border-color: var(
92
- // --_show-border,
93
- // var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
94
- // );
95
- // border-style: var(
96
- // --_show-border,
97
- // var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
98
- // );
99
- // border-width: var(
100
- // --_show-border,
101
- // var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
102
- // );
103
- // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
104
- // box-shadow: var(
105
- // --_show-shadow,
106
- // var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
107
- // var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
108
- // var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
109
- // var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
110
- // );
111
- color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
112
- font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
113
- text-transform: var(--_ctm-mob-dn-tt-tm, var(--_ctm-tab-dn-tt-tm, var(--_ctm-dn-tt-tm)));
114
- &.flex__overflow {
115
- white-space: normal;
116
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
117
- }
118
- font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
119
- font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
120
- font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
121
- text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
122
- letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
123
- // Line box guard. The line-height control stores a fixed length (its default is
124
- // 1rem), so it does not grow with the font size — at a large size the glyphs end
125
- // up taller than their own line box and spill out of it, which is what makes the
126
- // text look cut off. max(..., 1em) keeps the box at least as tall as the text
127
- // while still honouring any larger value the user sets.
128
- line-height: max(
129
- var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
130
- 1em
131
- );
132
- word-wrap: prepareMediaVariable(--_ctm-dn-wd-wp);
133
- word-break: prepareMediaVariable(--_ctm-dn-wd-bk);
134
-
135
- text-decoration: var(
136
- --_sf-hr-tt-dn,
137
- var(
138
- --_ctm-mob-dn-dt-se-ue,
139
- var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
140
- )
141
- );
142
- scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
143
- &[data-flip-x="true"] {
144
- transform: scaleX(-1);
145
- }
146
- &[data-flip-y="true"] {
147
- transform: scaleY(-1);
148
- }
149
- }
150
- }
151
- &[data-element-type="brandDescription"] {
152
- // width: var(--_lt-wh);
153
- // height: var(--_lt-ht);
154
- // margin: var(--_lt-mn);
155
- // padding: var(--_lt-pg);
156
- // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
157
- // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
158
- width: var(
159
- --_sf-el-wh-st-mx,
160
- calc(
161
- 1% *
162
- var(
163
- --_ctm-mob-ele-nw-wh-vl,
164
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
165
- )
166
- )
167
- );
168
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
169
- min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
170
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
171
- // height: ;
172
- // aspect-ratio: 1 / var(--_sf-aspect-ratio);
173
- // --_aspect-ratio: calc(
174
- // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
175
- // );
176
-
177
- & > .wrapper {
178
- width: 100%;
179
- // Follow the elements own height so the styled box (background, border, shadow)
180
- // matches the Height set in layout instead of only hugging the text.
181
- min-height: inherit;
182
- // height: 100%;
183
- background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
184
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
185
- border-color: var(
186
- --_show-border,
187
- var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
188
- );
189
- border-style: var(
190
- --_show-border,
191
- var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
192
- );
193
- border-width: var(
194
- --_show-border,
195
- var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
196
- );
197
- border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
198
- box-shadow: var(
199
- --_show-shadow,
200
- var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
201
- var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
202
- var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
203
- var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
204
- );
205
- }
206
- &[data-show-shadow="false"] {
207
- --_show-shadow: none;
208
- }
209
- &[data-show-border="false"] {
210
- --_show-border: none;
211
- }
212
- // .text-element {
213
- // background: #6d96e4;
214
- // padding: 10px;
215
- // font-weight: 600;
216
- // color: rgba(75, 69, 70, 1);
217
- // }
218
- .text-element {
219
- display: flex;
220
- flex-direction: column;
221
- --_sf-gp: 16px;
222
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
223
- row-gap: var(--_sf-gp);
224
- width: 100%;
225
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
226
-
227
- color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
228
- font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
229
- word-wrap: var(--_ctm-mob-dn-wd-wp, var(--_ctm-tab-dn-wd-wp, var(--_ctm-dn-wd-wp)));
230
- word-break: var(--_ctm-mob-dn-wd-bk, var(--_ctm-tab-dn-wd-bk, var(--_ctm-dn-wd-bk)));
231
- &.flex__overflow {
232
- white-space: normal;
233
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
234
- }
235
- font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
236
- font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
237
- font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
238
- text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
239
- letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
240
- // Line box guard. The line-height control stores a fixed length (its default is
241
- // 1rem), so it does not grow with the font size — at a large size the glyphs end
242
- // up taller than their own line box and spill out of it, which is what makes the
243
- // text look cut off. max(..., 1em) keeps the box at least as tall as the text
244
- // while still honouring any larger value the user sets.
245
- line-height: max(
246
- var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
247
- 1em
248
- );
249
- text-decoration: var(
250
- --_sf-hr-tt-dn,
251
- var(
252
- --_ctm-mob-dn-dt-se-ue,
253
- var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
254
- )
255
- );
256
- scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
257
- text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
258
- &[data-flip-x="true"] {
259
- transform: scaleX(-1);
260
- }
261
- &[data-flip-y="true"] {
262
- transform: scaleY(-1);
263
- }
264
- &#{$overflowSelector} {
265
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
266
- }
267
- }
268
- }
269
- &[data-element-type="brandCode"] {
270
- // width: var(--_lt-wh);
271
- // height: var(--_lt-ht);
272
- // margin: var(--_lt-mn);
273
- // padding: var(--_lt-pg);
274
- // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
275
- // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
276
- width: var(
277
- --_sf-el-wh-st-mx,
278
- calc(
279
- 1% *
280
- var(
281
- --_ctm-mob-ele-nw-wh-vl,
282
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
283
- )
284
- )
285
- );
286
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
287
- min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
288
- // height: ;
289
- // aspect-ratio: 1 / var(--_sf-aspect-ratio);
290
- // --_aspect-ratio: calc(
291
- // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
292
- // );
293
-
294
- & > .wrapper {
295
- width: 100%;
296
- // Follow the elements own height so the styled box (background, border, shadow)
297
- // matches the Height set in layout instead of only hugging the text.
298
- min-height: inherit;
299
- // height: 100%;
300
- background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
301
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
302
- border-color: var(
303
- --_show-border,
304
- var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
305
- );
306
- border-style: var(
307
- --_show-border,
308
- var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
309
- );
310
- border-width: var(
311
- --_show-border,
312
- var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
313
- );
314
- border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
315
- box-shadow: var(
316
- --_show-shadow,
317
- var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
318
- var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
319
- var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
320
- var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
321
- );
322
- }
323
- &[data-show-shadow="false"] {
324
- --_show-shadow: none;
325
- }
326
- &[data-show-border="false"] {
327
- --_show-border: none;
328
- }
329
- // .text-element {
330
- // // background: #6d96e4;
331
- // // padding: 10px;
332
- // // font-weight: 600;
333
- // // color: rgba(75, 69, 70, 1);
334
- // }
335
- .text-element {
336
- display: flex;
337
- flex-direction: column;
338
- --_sf-gp: 16px;
339
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
340
- row-gap: var(--_sf-gp);
341
- width: 100%;
342
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
343
-
344
- color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
345
- font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
346
- word-wrap: var(--_ctm-mob-dn-wd-wp, var(--_ctm-tab-dn-wd-wp, var(--_ctm-dn-wd-wp)));
347
- word-break: var(--_ctm-mob-dn-wd-bk, var(--_ctm-tab-dn-wd-bk, var(--_ctm-dn-wd-bk)));
348
- &.flex__overflow {
349
- white-space: normal;
350
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
351
- }
352
- font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
353
- font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
354
- font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
355
- text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
356
- letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
357
- // Line box guard. The line-height control stores a fixed length (its default is
358
- // 1rem), so it does not grow with the font size — at a large size the glyphs end
359
- // up taller than their own line box and spill out of it, which is what makes the
360
- // text look cut off. max(..., 1em) keeps the box at least as tall as the text
361
- // while still honouring any larger value the user sets.
362
- line-height: max(
363
- var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
364
- 1em
365
- );
366
- text-decoration: var(
367
- --_sf-hr-tt-dn,
368
- var(
369
- --_ctm-mob-dn-dt-se-ue,
370
- var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
371
- )
372
- );
373
- scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
374
- text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
375
- &[data-flip-x="true"] {
376
- transform: scaleX(-1);
377
- }
378
- &[data-flip-y="true"] {
379
- transform: scaleY(-1);
380
- }
381
-
382
- &#{$overflowSelector} {
383
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
384
- }
385
- }
386
- }
387
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+ $overflowSelector: ".flex__overflow";
5
+
6
+ [data-div-type="element"] {
7
+ &[data-element-type="brandName"] {
8
+ // width: var(--_lt-wh);
9
+ // height: var(--_lt-ht);
10
+ // margin: var(--_lt-mn);
11
+ // padding: var(--_lt-pg);
12
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
13
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
14
+ width: var(
15
+ --_sf-el-wh-st-mx,
16
+ calc(
17
+ 1% *
18
+ var(
19
+ --_ctm-mob-ele-nw-wh-vl,
20
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
21
+ )
22
+ )
23
+ );
24
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
25
+ // The Height control. brandDescription and brandCode below already had this; only
26
+ // brandName was missing it, so its own stylesheet never applied the height at all
27
+ // and the wrapper's `min-height: inherit` had nothing to inherit. It happened to
28
+ // work because brandName is *also* declared in product-basic-elements.scss, which
29
+ // does set it — relying on that cross-file declaration is not something to keep.
30
+ min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
31
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
32
+ // height: ;
33
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
34
+ // --_aspect-ratio: calc(
35
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
36
+ // );
37
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
38
+
39
+ & > .wrapper {
40
+ width: 100%;
41
+ // Follow the elements own height so the styled box (background, border, shadow)
42
+ // matches the Height set in layout instead of only hugging the text.
43
+ min-height: inherit;
44
+ // height: 100%;
45
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
46
+
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
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
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
+ // // cursor: pointer;
81
+ // }
82
+ .text-element {
83
+ // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
84
+ display: flex;
85
+ flex-direction: column;
86
+ --_sf-gp: 16px;
87
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
88
+ row-gap: var(--_sf-gp);
89
+ width: 100%;
90
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
91
+ // border-color: var(
92
+ // --_show-border,
93
+ // var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
94
+ // );
95
+ // border-style: var(
96
+ // --_show-border,
97
+ // var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
98
+ // );
99
+ // border-width: var(
100
+ // --_show-border,
101
+ // var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
102
+ // );
103
+ // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
104
+ // box-shadow: var(
105
+ // --_show-shadow,
106
+ // var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
107
+ // var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
108
+ // var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
109
+ // var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
110
+ // );
111
+ color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
112
+ font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
113
+ text-transform: var(--_ctm-mob-dn-tt-tm, var(--_ctm-tab-dn-tt-tm, var(--_ctm-dn-tt-tm)));
114
+ &.flex__overflow {
115
+ white-space: normal;
116
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
117
+ }
118
+ font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
119
+ font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
120
+ font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
121
+ text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
122
+ letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
123
+ // Line box guard. The line-height control stores a fixed length (its default is
124
+ // 1rem), so it does not grow with the font size — at a large size the glyphs end
125
+ // up taller than their own line box and spill out of it, which is what makes the
126
+ // text look cut off. max(..., 1em) keeps the box at least as tall as the text
127
+ // while still honouring any larger value the user sets.
128
+ line-height: max(
129
+ var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
130
+ 1em
131
+ );
132
+ word-wrap: prepareMediaVariable(--_ctm-dn-wd-wp);
133
+ word-break: prepareMediaVariable(--_ctm-dn-wd-bk);
134
+
135
+ text-decoration: var(
136
+ --_sf-hr-tt-dn,
137
+ var(
138
+ --_ctm-mob-dn-dt-se-ue,
139
+ var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
140
+ )
141
+ );
142
+ scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
143
+ &[data-flip-x="true"] {
144
+ transform: scaleX(-1);
145
+ }
146
+ &[data-flip-y="true"] {
147
+ transform: scaleY(-1);
148
+ }
149
+ }
150
+ }
151
+ &[data-element-type="brandDescription"] {
152
+ // width: var(--_lt-wh);
153
+ // height: var(--_lt-ht);
154
+ // margin: var(--_lt-mn);
155
+ // padding: var(--_lt-pg);
156
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
157
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
158
+ width: var(
159
+ --_sf-el-wh-st-mx,
160
+ calc(
161
+ 1% *
162
+ var(
163
+ --_ctm-mob-ele-nw-wh-vl,
164
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
165
+ )
166
+ )
167
+ );
168
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
169
+ min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
170
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
171
+ // height: ;
172
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
173
+ // --_aspect-ratio: calc(
174
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
175
+ // );
176
+
177
+ & > .wrapper {
178
+ width: 100%;
179
+ // Follow the elements own height so the styled box (background, border, shadow)
180
+ // matches the Height set in layout instead of only hugging the text.
181
+ min-height: inherit;
182
+ // height: 100%;
183
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
184
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
185
+ border-color: var(
186
+ --_show-border,
187
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
188
+ );
189
+ border-style: var(
190
+ --_show-border,
191
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
192
+ );
193
+ border-width: var(
194
+ --_show-border,
195
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
196
+ );
197
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
198
+ box-shadow: var(
199
+ --_show-shadow,
200
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
201
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
202
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
203
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
204
+ );
205
+ }
206
+ &[data-show-shadow="false"] {
207
+ --_show-shadow: none;
208
+ }
209
+ &[data-show-border="false"] {
210
+ --_show-border: none;
211
+ }
212
+ // .text-element {
213
+ // background: #6d96e4;
214
+ // padding: 10px;
215
+ // font-weight: 600;
216
+ // color: rgba(75, 69, 70, 1);
217
+ // }
218
+ .text-element {
219
+ display: flex;
220
+ flex-direction: column;
221
+ --_sf-gp: 16px;
222
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
223
+ row-gap: var(--_sf-gp);
224
+ width: 100%;
225
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
226
+
227
+ color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
228
+ font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
229
+ word-wrap: var(--_ctm-mob-dn-wd-wp, var(--_ctm-tab-dn-wd-wp, var(--_ctm-dn-wd-wp)));
230
+ word-break: var(--_ctm-mob-dn-wd-bk, var(--_ctm-tab-dn-wd-bk, var(--_ctm-dn-wd-bk)));
231
+ &.flex__overflow {
232
+ white-space: normal;
233
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
234
+ }
235
+ font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
236
+ font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
237
+ font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
238
+ text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
239
+ letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
240
+ // Line box guard. The line-height control stores a fixed length (its default is
241
+ // 1rem), so it does not grow with the font size — at a large size the glyphs end
242
+ // up taller than their own line box and spill out of it, which is what makes the
243
+ // text look cut off. max(..., 1em) keeps the box at least as tall as the text
244
+ // while still honouring any larger value the user sets.
245
+ line-height: max(
246
+ var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
247
+ 1em
248
+ );
249
+ text-decoration: var(
250
+ --_sf-hr-tt-dn,
251
+ var(
252
+ --_ctm-mob-dn-dt-se-ue,
253
+ var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
254
+ )
255
+ );
256
+ scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
257
+ text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
258
+ &[data-flip-x="true"] {
259
+ transform: scaleX(-1);
260
+ }
261
+ &[data-flip-y="true"] {
262
+ transform: scaleY(-1);
263
+ }
264
+ &#{$overflowSelector} {
265
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
266
+ }
267
+ }
268
+ }
269
+ &[data-element-type="brandCode"] {
270
+ // width: var(--_lt-wh);
271
+ // height: var(--_lt-ht);
272
+ // margin: var(--_lt-mn);
273
+ // padding: var(--_lt-pg);
274
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
275
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
276
+ width: var(
277
+ --_sf-el-wh-st-mx,
278
+ calc(
279
+ 1% *
280
+ var(
281
+ --_ctm-mob-ele-nw-wh-vl,
282
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
283
+ )
284
+ )
285
+ );
286
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
287
+ min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
288
+ // height: ;
289
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
290
+ // --_aspect-ratio: calc(
291
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
292
+ // );
293
+
294
+ & > .wrapper {
295
+ width: 100%;
296
+ // Follow the elements own height so the styled box (background, border, shadow)
297
+ // matches the Height set in layout instead of only hugging the text.
298
+ min-height: inherit;
299
+ // height: 100%;
300
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
301
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
302
+ border-color: var(
303
+ --_show-border,
304
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
305
+ );
306
+ border-style: var(
307
+ --_show-border,
308
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
309
+ );
310
+ border-width: var(
311
+ --_show-border,
312
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
313
+ );
314
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
315
+ box-shadow: var(
316
+ --_show-shadow,
317
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
318
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
319
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
320
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
321
+ );
322
+ }
323
+ &[data-show-shadow="false"] {
324
+ --_show-shadow: none;
325
+ }
326
+ &[data-show-border="false"] {
327
+ --_show-border: none;
328
+ }
329
+ // .text-element {
330
+ // // background: #6d96e4;
331
+ // // padding: 10px;
332
+ // // font-weight: 600;
333
+ // // color: rgba(75, 69, 70, 1);
334
+ // }
335
+ .text-element {
336
+ display: flex;
337
+ flex-direction: column;
338
+ --_sf-gp: 16px;
339
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
340
+ row-gap: var(--_sf-gp);
341
+ width: 100%;
342
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
343
+
344
+ color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
345
+ font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
346
+ word-wrap: var(--_ctm-mob-dn-wd-wp, var(--_ctm-tab-dn-wd-wp, var(--_ctm-dn-wd-wp)));
347
+ word-break: var(--_ctm-mob-dn-wd-bk, var(--_ctm-tab-dn-wd-bk, var(--_ctm-dn-wd-bk)));
348
+ &.flex__overflow {
349
+ white-space: normal;
350
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
351
+ }
352
+ font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
353
+ font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
354
+ font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
355
+ text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
356
+ letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
357
+ // Line box guard. The line-height control stores a fixed length (its default is
358
+ // 1rem), so it does not grow with the font size — at a large size the glyphs end
359
+ // up taller than their own line box and spill out of it, which is what makes the
360
+ // text look cut off. max(..., 1em) keeps the box at least as tall as the text
361
+ // while still honouring any larger value the user sets.
362
+ line-height: max(
363
+ var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
364
+ 1em
365
+ );
366
+ text-decoration: var(
367
+ --_sf-hr-tt-dn,
368
+ var(
369
+ --_ctm-mob-dn-dt-se-ue,
370
+ var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
371
+ )
372
+ );
373
+ scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
374
+ text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
375
+ &[data-flip-x="true"] {
376
+ transform: scaleX(-1);
377
+ }
378
+ &[data-flip-y="true"] {
379
+ transform: scaleY(-1);
380
+ }
381
+
382
+ &#{$overflowSelector} {
383
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
384
+ }
385
+ }
386
+ }
387
+ }