@sc-360-v2/storefront-cms-library 0.5.73 → 0.5.74

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 (135) hide show
  1. package/dist/add-existing-form.scss +5 -13
  2. package/dist/add-order.scss +236 -126
  3. package/dist/add-products-tab-details.scss +2097 -1048
  4. package/dist/add-products-tab.scss +1204 -666
  5. package/dist/allocation-header-quota-details.scss +407 -189
  6. package/dist/allocationDetails.scss +2143 -1661
  7. package/dist/allocations-quota-details.scss +323 -159
  8. package/dist/allocations.scss +793 -475
  9. package/dist/amount-estimator.scss +743 -405
  10. package/dist/badge.scss +18 -43
  11. package/dist/brand-basic-elements.scss +124 -76
  12. package/dist/brand.scss +55 -28
  13. package/dist/breadcrumbs.scss +718 -356
  14. package/dist/builder.js +1 -1
  15. package/dist/builderLite.js +1 -1
  16. package/dist/bulk-variant-picker.scss +2027 -1128
  17. package/dist/bundle.scss +1477 -841
  18. package/dist/bundleDetails.scss +5072 -3774
  19. package/dist/button.scss +103 -79
  20. package/dist/buy-for-tab-container.scss +106 -77
  21. package/dist/buyForHeaders.scss +2976 -1722
  22. package/dist/cart-details.scss +1012 -481
  23. package/dist/cart-summary.scss +1149 -557
  24. package/dist/cart-wrapper.scss +79 -37
  25. package/dist/cart.scss +225 -117
  26. package/dist/cartAttributes.scss +735 -416
  27. package/dist/category-groups-element.scss +108 -127
  28. package/dist/category-groups-product-grid.scss +147 -120
  29. package/dist/category-groups-product-image.scss +1457 -1162
  30. package/dist/category-groups-product-options.scss +680 -613
  31. package/dist/category-groups-product-price.scss +3244 -1966
  32. package/dist/category-groups-quota-details.scss +464 -210
  33. package/dist/category.scss +50 -26
  34. package/dist/checkout.scss +16 -24
  35. package/dist/confirm-modal.scss +2 -22
  36. package/dist/container.scss +54 -32
  37. package/dist/countdown.scss +443 -255
  38. package/dist/coupon.scss +710 -351
  39. package/dist/default-dropdown.scss +1 -12
  40. package/dist/embroider-template-1-v2.scss +172 -123
  41. package/dist/embroider-template-1.scss +104 -68
  42. package/dist/embroidery.scss +31 -30
  43. package/dist/employee-bulk-order.scss +142 -418
  44. package/dist/faq.scss +408 -228
  45. package/dist/filter-results.scss +265 -125
  46. package/dist/filters.scss +1797 -900
  47. package/dist/gallery-slider-temp.scss +750 -432
  48. package/dist/global-styles.scss +7 -23
  49. package/dist/grid.scss +33 -25
  50. package/dist/hotspot.scss +115 -68
  51. package/dist/image-temp.scss +20 -21
  52. package/dist/item-stock.scss +16 -9
  53. package/dist/kitDetails.scss +4301 -2721
  54. package/dist/kits.scss +19 -24
  55. package/dist/language-selector.scss +361 -211
  56. package/dist/last-x-orders.scss +174 -95
  57. package/dist/layouter-item.scss +103 -75
  58. package/dist/layouter-pro-item.scss +95 -89
  59. package/dist/layouter-pro.scss +92 -87
  60. package/dist/layouter.scss +445 -383
  61. package/dist/light-box-v2.scss +104 -89
  62. package/dist/login.scss +566 -287
  63. package/dist/map.scss +368 -221
  64. package/dist/marchandiserSets.scss +104 -95
  65. package/dist/mega-menu-container.scss +109 -96
  66. package/dist/mega-menu.scss +731 -624
  67. package/dist/menu-item.scss +2 -2
  68. package/dist/menu-v2.scss +619 -507
  69. package/dist/multi-select-dropdown.scss +3 -27
  70. package/dist/my-templates.scss +9 -38
  71. package/dist/option-bar.scss +375 -215
  72. package/dist/option-families.scss +252 -0
  73. package/dist/order-status.scss +1117 -646
  74. package/dist/overflow-module.scss +7 -6
  75. package/dist/past-orders.scss +149 -118
  76. package/dist/payment-methods.scss +30 -46
  77. package/dist/pickup-locations.scss +1118 -558
  78. package/dist/position-module.scss +17 -20
  79. package/dist/prefix-list.scss +10 -21
  80. package/dist/product-actions.scss +2316 -1610
  81. package/dist/product-basic-elements.scss +169 -108
  82. package/dist/product-highlights.scss +152 -107
  83. package/dist/product-image-bundles.scss +642 -337
  84. package/dist/product-inventory.scss +1357 -673
  85. package/dist/product-labels.scss +105 -84
  86. package/dist/product-options.scss +1274 -1117
  87. package/dist/product-price.scss +2561 -1283
  88. package/dist/product-promotions.scss +2830 -1388
  89. package/dist/product-sizechart.scss +905 -516
  90. package/dist/product.scss +61 -28
  91. package/dist/productDetails.scss +39 -19
  92. package/dist/profile.scss +447 -207
  93. package/dist/quantity-selector.scss +550 -313
  94. package/dist/quick-inventory-check.scss +174 -95
  95. package/dist/quick-links.scss +133 -55
  96. package/dist/quick-order-pad.scss +271 -218
  97. package/dist/quota-details.scss +282 -152
  98. package/dist/quotes.scss +122 -89
  99. package/dist/repeater-embla-controls.scss +15 -35
  100. package/dist/repeater-grid-toggle.scss +166 -156
  101. package/dist/repeater-item.scss +64 -41
  102. package/dist/repeater.scss +814 -671
  103. package/dist/request-for-quotes.scss +16 -66
  104. package/dist/responsive-behaviour.scss +1 -3
  105. package/dist/rfqs.scss +181 -118
  106. package/dist/scroll.scss +172 -93
  107. package/dist/search.scss +326 -179
  108. package/dist/section.scss +51 -27
  109. package/dist/shipping-payments.scss +58 -198
  110. package/dist/simple-list.scss +164 -74
  111. package/dist/social.scss +145 -80
  112. package/dist/sort.scss +19 -11
  113. package/dist/stack.scss +34 -23
  114. package/dist/static-global.scss +26 -44
  115. package/dist/stockStatus.scss +19 -11
  116. package/dist/store-locations.scss +1105 -577
  117. package/dist/tab-container.scss +108 -81
  118. package/dist/table-common.scss +408 -217
  119. package/dist/table.scss +502 -271
  120. package/dist/text-temp.scss +7 -8
  121. package/dist/theme-classes.scss +13 -17
  122. package/dist/types/builder/enums/data-connectors.d.ts +3 -1
  123. package/dist/types/builder/enums/index.d.ts +3 -1
  124. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  125. package/dist/types/builder/tools/element-edit/optionFamilies.d.ts +20 -0
  126. package/dist/types/website/constants/data-connector-souces.d.ts +40 -8
  127. package/dist/types/website/constants/data-connectors.d.ts +12 -1
  128. package/dist/types/website/helper/ssr-functions.d.ts +8 -0
  129. package/dist/uom-selector.scss +949 -489
  130. package/dist/user-elements.scss +837 -529
  131. package/dist/variant-picker.scss +2555 -1281
  132. package/dist/volume-pricing.scss +1037 -541
  133. package/dist/website.js +1 -1
  134. package/dist/widget.scss +1 -0
  135. package/package.json +1 -1
@@ -41,16 +41,24 @@ $imagePositions: (
41
41
  // )
42
42
  // )
43
43
  // );
44
- width: var(--_sf-el-wh-st-mx,
45
- calc(1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))));
44
+ width: var(
45
+ --_sf-el-wh-st-mx,
46
+ calc(
47
+ 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
48
+ )
49
+ );
46
50
 
47
51
  height: auto;
48
52
 
49
- margin: var(--_ctm-mob-bun-lt-mn,
50
- var(--_ctm-tab-bun-lt-mn,
51
- var(--_ctm-bun-lt-mn, var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn))))));
53
+ margin: var(
54
+ --_ctm-mob-bun-lt-mn,
55
+ var(
56
+ --_ctm-tab-bun-lt-mn,
57
+ var(--_ctm-bun-lt-mn, var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn))))
58
+ )
59
+ );
52
60
 
53
- &>div {
61
+ & > div {
54
62
  &.wrapper {
55
63
  width: 100%;
56
64
  }
@@ -94,18 +102,39 @@ $imagePositions: (
94
102
  gap: prepareMediaVariable(--_ctm-lt-qa-im-sg);
95
103
 
96
104
  &[data-control-type="Bottom"][data-slider-control="Arrows"] {
97
- height: calc(100% - calc(var(--_ctm-mob-dn-pn-as-aw-se,
98
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) + 10px));
105
+ height: calc(
106
+ 100% - calc(
107
+ var(
108
+ --_ctm-mob-dn-pn-as-aw-se,
109
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
110
+ ) +
111
+ 10px
112
+ )
113
+ );
99
114
  }
100
115
 
101
116
  &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
102
- height: calc(100% - calc(var(--_ctm-mob-dn-pn-le-le-ht,
103
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))) + 20px));
117
+ height: calc(
118
+ 100% - calc(
119
+ var(
120
+ --_ctm-mob-dn-pn-le-le-ht,
121
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
122
+ ) +
123
+ 20px
124
+ )
125
+ );
104
126
  }
105
127
 
106
128
  &[data-control-type="Bottom"][data-slider-control="Dots"] {
107
- height: calc(100% - calc(var(--_ctm-mob-dn-pn-ds-dt-se,
108
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))) + 20px));
129
+ height: calc(
130
+ 100% - calc(
131
+ var(
132
+ --_ctm-mob-dn-pn-ds-dt-se,
133
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
134
+ ) +
135
+ 20px
136
+ )
137
+ );
109
138
  }
110
139
 
111
140
  .embla__slide {
@@ -116,10 +145,11 @@ $imagePositions: (
116
145
  }
117
146
  }
118
147
  }
119
-
120
148
  &:not([data-display-style="Column"]) {
121
149
  .embla__container {
122
- grid-auto-columns: calc(100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))));
150
+ grid-auto-columns: calc(
151
+ 100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
152
+ );
123
153
  }
124
154
  }
125
155
 
@@ -131,25 +161,20 @@ $imagePositions: (
131
161
  width: 100%;
132
162
  justify-content: space-between;
133
163
  transform: translate(-50%, -50%);
134
-
135
164
  // padding-left: 20px;
136
165
  &[data-control-type="Side"] {
137
-
138
166
  .left-button,
139
167
  .right-button {
140
168
  background-color: transparent;
141
169
  }
142
170
  }
143
-
144
171
  &[data-background-shape="Round"] {
145
-
146
172
  .left-button,
147
173
  .right-button {
148
174
  background-color: #f2f5f5;
149
175
  box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
150
176
  }
151
177
  }
152
-
153
178
  &[data-control-type="Bottom-Overflow"] {
154
179
  transform: translateX(-50%);
155
180
  width: 100%;
@@ -158,7 +183,6 @@ $imagePositions: (
158
183
  top: unset;
159
184
  bottom: 6px;
160
185
  }
161
-
162
186
  &[data-control-type="Bottom"] {
163
187
  transform: unset;
164
188
  position: static;
@@ -167,15 +191,18 @@ $imagePositions: (
167
191
  gap: 12px;
168
192
  margin-top: 10px;
169
193
  }
170
-
171
194
  .left-button {
172
195
  padding: 10px;
173
196
  border-radius: 50%;
174
197
  border: none;
175
- width: var(--_ctm-mob-dn-pn-as-aw-se,
176
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
177
- height: var(--_ctm-mob-dn-pn-as-aw-se,
178
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
198
+ width: var(
199
+ --_ctm-mob-dn-pn-as-aw-se,
200
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
201
+ );
202
+ height: var(
203
+ --_ctm-mob-dn-pn-as-aw-se,
204
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
205
+ );
179
206
 
180
207
  display: flex;
181
208
  align-items: center;
@@ -183,7 +210,6 @@ $imagePositions: (
183
210
  cursor: pointer;
184
211
  outline: none;
185
212
  margin-left: 12px;
186
-
187
213
  &:disabled {
188
214
  & svg {
189
215
  path {
@@ -192,14 +218,17 @@ $imagePositions: (
192
218
  }
193
219
  }
194
220
  }
195
-
196
221
  .right-button {
197
222
  border-radius: 50%;
198
223
  border: none;
199
- width: var(--_ctm-mob-dn-pn-as-aw-se,
200
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
201
- height: var(--_ctm-mob-dn-pn-as-aw-se,
202
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
224
+ width: var(
225
+ --_ctm-mob-dn-pn-as-aw-se,
226
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
227
+ );
228
+ height: var(
229
+ --_ctm-mob-dn-pn-as-aw-se,
230
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
231
+ );
203
232
 
204
233
  display: flex;
205
234
  align-items: center;
@@ -217,19 +246,30 @@ $imagePositions: (
217
246
  }
218
247
  }
219
248
  }
220
-
221
249
  .icon {
222
250
  display: flex;
223
251
 
224
252
  svg {
225
- width: calc(var(--_ctm-mob-dn-pn-as-aw-se,
226
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) * 0.5);
227
- height: calc(var(--_ctm-mob-dn-pn-as-aw-se,
228
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) * 0.5);
253
+ width: calc(
254
+ var(
255
+ --_ctm-mob-dn-pn-as-aw-se,
256
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
257
+ ) *
258
+ 0.5
259
+ );
260
+ height: calc(
261
+ var(
262
+ --_ctm-mob-dn-pn-as-aw-se,
263
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
264
+ ) *
265
+ 0.5
266
+ );
229
267
 
230
268
  path {
231
- stroke: var(--_ctm-mob-dn-pn-as-aw-cr,
232
- var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr)));
269
+ stroke: var(
270
+ --_ctm-mob-dn-pn-as-aw-cr,
271
+ var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
272
+ );
233
273
  }
234
274
  }
235
275
  }
@@ -240,14 +280,12 @@ $imagePositions: (
240
280
  width: calc(100% - 60px);
241
281
  margin-inline: auto;
242
282
  }
243
-
244
283
  .left-button {
245
284
  position: absolute;
246
285
  left: 0;
247
286
  top: 50%;
248
287
  transform: translateY(-50%);
249
288
  }
250
-
251
289
  .right-button {
252
290
  position: absolute;
253
291
 
@@ -255,7 +293,6 @@ $imagePositions: (
255
293
  top: 50%;
256
294
  transform: translateY(-50%);
257
295
  }
258
-
259
296
  @media (max-width: 1024px) {
260
297
  .embla__viewport {
261
298
  width: calc(100% - 40px);
@@ -266,11 +303,9 @@ $imagePositions: (
266
303
  &[data-thumbnail-placement="top"] {
267
304
  flex-direction: column-reverse;
268
305
  }
269
-
270
306
  &[data-thumbnail-placement="bottom"] {
271
307
  flex-direction: column;
272
308
  }
273
-
274
309
  &[data-thumbnail-placement="left"] {
275
310
  flex-direction: row-reverse;
276
311
 
@@ -284,10 +319,8 @@ $imagePositions: (
284
319
  }
285
320
  }
286
321
  }
287
-
288
322
  &[data-thumbnail-placement="right"] {
289
323
  flex-direction: row;
290
-
291
324
  .embla__thumbs {
292
325
  width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
293
326
 
@@ -299,7 +332,6 @@ $imagePositions: (
299
332
  }
300
333
  }
301
334
  }
302
-
303
335
  .embla__dots {
304
336
  display: flex;
305
337
  flex-wrap: wrap;
@@ -316,13 +348,14 @@ $imagePositions: (
316
348
  transform: translateX(-50%);
317
349
  width: 75%;
318
350
  }
319
-
320
351
  .embla__dot {
321
352
  -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
322
353
  -webkit-appearance: none;
323
354
  appearance: none;
324
- background-color: var(--_ctm-mob-dn-pn-ds-or-dt-cr,
325
- var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr)));
355
+ background-color: var(
356
+ --_ctm-mob-dn-pn-ds-or-dt-cr,
357
+ var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
358
+ );
326
359
 
327
360
  touch-action: manipulation;
328
361
  display: inline-flex;
@@ -333,56 +366,75 @@ $imagePositions: (
333
366
  margin: 0;
334
367
  // width: 0.6rem;
335
368
  // height: 0.6rem;
336
- width: var(--_ctm-mob-dn-pn-ds-dt-se,
337
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)));
338
- height: var(--_ctm-mob-dn-pn-ds-dt-se,
339
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)));
369
+ width: var(
370
+ --_ctm-mob-dn-pn-ds-dt-se,
371
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
372
+ );
373
+ height: var(
374
+ --_ctm-mob-dn-pn-ds-dt-se,
375
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
376
+ );
340
377
 
341
378
  display: flex;
342
379
  align-items: center;
343
380
  justify-content: center;
344
381
  border-radius: 50%;
345
382
  }
346
-
347
383
  .embla__dot:after {
348
384
  // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
349
- width: var(--_ctm-mob-dn-pn-ds-dt-se,
350
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)));
351
- height: var(--_ctm-mob-dn-pn-ds-dt-se,
352
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)));
385
+ width: var(
386
+ --_ctm-mob-dn-pn-ds-dt-se,
387
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
388
+ );
389
+ height: var(
390
+ --_ctm-mob-dn-pn-ds-dt-se,
391
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
392
+ );
353
393
 
354
394
  border-radius: 50%;
355
395
  display: flex;
356
396
  align-items: center;
357
397
  content: "";
358
398
  }
359
-
360
399
  .embla__dot--selected:after {
361
400
  box-shadow: inset 0 0 0 1px var(--text-body);
362
- background-color: var(--_ctm-mob-dn-pn-ds-ct-dt-cr,
363
- var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr)));
401
+ background-color: var(
402
+ --_ctm-mob-dn-pn-ds-ct-dt-cr,
403
+ var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
404
+ );
364
405
  }
365
-
366
406
  &[data-slider-control="Pagination Line"] {
367
407
  .embla__dot {
368
- width: var(--_ctm-mob-dn-pn-le-le-wh,
369
- var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh)));
370
- height: var(--_ctm-mob-dn-pn-le-le-ht,
371
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht)));
372
- background-color: var(--_ctm-mob-dn-pn-le-or-le-cr,
373
- var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr)));
408
+ width: var(
409
+ --_ctm-mob-dn-pn-le-le-wh,
410
+ var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
411
+ );
412
+ height: var(
413
+ --_ctm-mob-dn-pn-le-le-ht,
414
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
415
+ );
416
+ background-color: var(
417
+ --_ctm-mob-dn-pn-le-or-le-cr,
418
+ var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
419
+ );
374
420
  border-radius: 6px;
375
421
  }
376
422
 
377
423
  .embla__dot--selected:after {
378
424
  box-shadow: inset 0 0 0 1px var(--text-body);
379
425
  border-radius: 6px;
380
- width: var(--_ctm-mob-dn-pn-le-le-wh,
381
- var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh)));
382
- height: var(--_ctm-mob-dn-pn-le-le-ht,
383
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht)));
384
- background-color: var(--_ctm-mob-dn-pn-le-ct-le-cr,
385
- var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr)));
426
+ width: var(
427
+ --_ctm-mob-dn-pn-le-le-wh,
428
+ var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
429
+ );
430
+ height: var(
431
+ --_ctm-mob-dn-pn-le-le-ht,
432
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
433
+ );
434
+ background-color: var(
435
+ --_ctm-mob-dn-pn-le-ct-le-cr,
436
+ var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
437
+ );
386
438
  }
387
439
  }
388
440
  }
@@ -407,7 +459,6 @@ $imagePositions: (
407
459
 
408
460
  overflow: hidden;
409
461
  }
410
-
411
462
  .embla__thumbs__container {
412
463
  display: flex;
413
464
  flex-direction: row;
@@ -431,33 +482,46 @@ $imagePositions: (
431
482
  }
432
483
  }
433
484
  }
434
-
435
485
  .user__element__container {
436
486
  display: flex;
437
487
  flex-direction: column;
438
488
 
439
489
  width: 100%;
440
490
  gap: prepareMediaVariable(--_ctm-lt-im-sg);
441
- background-color: var(--_ctm-mob-dn-wt-se-bd-cr,
442
- var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr)));
443
-
444
- border-color: var(--_ctm-mob-dn-wt-se-br-cr,
445
- var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr)));
446
-
447
- border-style: var(--_ctm-mob-dn-wt-se-br-se,
448
- var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se)));
449
-
450
- border-width: var(--_ctm-mob-dn-wt-se-br-wh,
451
- var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh)));
452
-
453
- border-radius: var(--_ctm-mob-dn-wt-se-br-rs,
454
- var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs)));
455
-
456
- box-shadow: var(--_show-shadow,
457
- var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae))) var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br))) var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd))) var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr))));
491
+ background-color: var(
492
+ --_ctm-mob-dn-wt-se-bd-cr,
493
+ var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
494
+ );
495
+
496
+ border-color: var(
497
+ --_ctm-mob-dn-wt-se-br-cr,
498
+ var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
499
+ );
500
+
501
+ border-style: var(
502
+ --_ctm-mob-dn-wt-se-br-se,
503
+ var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
504
+ );
505
+
506
+ border-width: var(
507
+ --_ctm-mob-dn-wt-se-br-wh,
508
+ var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
509
+ );
510
+
511
+ border-radius: var(
512
+ --_ctm-mob-dn-wt-se-br-rs,
513
+ var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
514
+ );
515
+
516
+ box-shadow: var(
517
+ --_show-shadow,
518
+ var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
519
+ var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
520
+ var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
521
+ var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
522
+ );
458
523
 
459
524
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
460
-
461
525
  .user__element__item {
462
526
  position: relative;
463
527
  }
@@ -532,7 +596,6 @@ $imagePositions: (
532
596
  justify-content: space-between;
533
597
  align-items: center;
534
598
  flex-wrap: wrap;
535
-
536
599
  .user_elements_user_name_wrapper {
537
600
  width: unset;
538
601
  align-items: center;
@@ -544,7 +607,6 @@ $imagePositions: (
544
607
  width: unset;
545
608
  flex-wrap: wrap;
546
609
  }
547
-
548
610
  @media (max-width: 767px) {
549
611
  .user_elements_user_data_wrapper {
550
612
  flex-direction: column;
@@ -552,21 +614,17 @@ $imagePositions: (
552
614
  }
553
615
  }
554
616
  }
555
-
556
617
  .user_elements_quota_wrapper {
557
618
  flex-direction: row;
558
619
  align-items: center;
559
620
  flex-wrap: nowrap;
560
-
561
621
  .quota_label_wrapper {
562
622
  flex-shrink: 0;
563
623
  }
564
-
565
624
  .user_elements_user_name_wrapper {
566
625
  flex-direction: row;
567
626
  white-space: nowrap;
568
627
  }
569
-
570
628
  .quote_vertical_scroll_wrapper {
571
629
  flex-direction: row;
572
630
  flex-grow: 1;
@@ -579,7 +637,6 @@ $imagePositions: (
579
637
  width: 100%;
580
638
  }
581
639
  }
582
-
583
640
  // This row divider was drawn unconditionally, so the section's Divider
584
641
  // toggle had nothing to switch off in the maximized layout.
585
642
  &[data-show-divider="true"] {
@@ -597,30 +654,24 @@ $imagePositions: (
597
654
  width: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt);
598
655
  }
599
656
  }
600
-
601
657
  .quota_label {
602
658
  white-space: nowrap;
603
659
  }
604
-
605
660
  .quote_info_wrapper {
606
661
  justify-content: flex-start;
607
662
  align-items: center;
608
663
  }
609
-
610
664
  .embla__container {
611
665
  gap: prepareMediaVariable(--_ctm-lt-qa-im-sg);
612
666
  }
613
667
  }
614
-
615
668
  .user_elements_allowance_wrapper {
616
669
  flex-direction: row;
617
670
  flex-wrap: nowrap;
618
671
  align-items: center;
619
-
620
672
  .allowance_label_wrapper {
621
673
  flex-shrink: 0;
622
674
  }
623
-
624
675
  // Same: gated on the section's own Divider toggle.
625
676
  &[data-show-divider="true"] {
626
677
  .embla__slide:not(:last-child) {
@@ -640,34 +691,28 @@ $imagePositions: (
640
691
  left: unset;
641
692
  }
642
693
  }
643
-
644
694
  .allowance_vertical_scroll_wrapper {
645
695
  width: unset;
646
696
  flex-grow: 1;
647
697
  min-width: 0;
648
698
  }
649
-
650
699
  @media (max-width: 1024px) {
651
700
  .allowance_vertical_scroll_wrapper {
652
701
  width: 100%;
653
702
  }
654
703
  }
655
-
656
704
  .embla__container {
657
705
  gap: prepareMediaVariable(--_ctm-lt-ae-im-sg);
658
706
  }
659
707
  }
660
-
661
708
  .user_elements_user_info_secondary_wrapper {
662
709
  flex-direction: row;
663
710
  justify-content: space-between;
664
711
  align-items: center;
665
-
666
712
  .order_wrapper {
667
713
  justify-content: flex-start;
668
714
  }
669
715
  }
670
-
671
716
  .secondary_vertical_scroll_wrapper {
672
717
  flex-direction: row;
673
718
  width: unset;
@@ -675,11 +720,9 @@ $imagePositions: (
675
720
  align-items: center;
676
721
  width: 100%;
677
722
  gap: prepareMediaVariable(--_ctm-lt-ur-io-sy-im-sg);
678
-
679
723
  @media (max-width: 768px) {
680
724
  flex-wrap: wrap;
681
725
  }
682
-
683
726
  .child {
684
727
  flex-direction: column;
685
728
  justify-content: flex-start;
@@ -691,18 +734,15 @@ $imagePositions: (
691
734
  min-height: 44px;
692
735
  }
693
736
  }
694
-
695
737
  @media (max-width: 1024px) {
696
738
  .user_elements_user_info_wrapper {
697
739
  flex-direction: column;
698
740
  align-items: flex-start;
699
741
  }
700
-
701
742
  .user_elements_quota_wrapper {
702
743
  flex-direction: column;
703
744
  align-items: flex-start;
704
745
  }
705
-
706
746
  .user_elements_allowance_wrapper {
707
747
  flex-direction: column;
708
748
  align-items: flex-start;
@@ -715,24 +755,20 @@ $imagePositions: (
715
755
  display: flex;
716
756
  gap: 48px;
717
757
  margin-left: 32px;
718
-
719
758
  .quota__dtls {
720
759
  display: flex;
721
760
  align-items: center;
722
761
  gap: 8px;
723
-
724
762
  .quota__name {
725
763
  display: flex;
726
764
  flex-direction: column;
727
765
  // align-items: center;
728
766
  gap: 12px;
729
767
  }
730
-
731
768
  .quota__balance {
732
769
  display: flex;
733
770
  gap: 5px;
734
771
  }
735
-
736
772
  .back_slash {
737
773
  color: var(--_gray-300);
738
774
  position: relative;
@@ -740,15 +776,12 @@ $imagePositions: (
740
776
  }
741
777
  }
742
778
  }
743
-
744
779
  &[data-display-type="Horizontal"] {
745
780
  flex-direction: row;
746
-
747
781
  .user__element__item {
748
782
  width: 100%;
749
783
  flex-grow: 1;
750
784
  }
751
-
752
785
  .user__element__item {
753
786
  min-width: 200px;
754
787
  }
@@ -782,7 +815,8 @@ $imagePositions: (
782
815
  border-radius: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-rs);
783
816
  border-style: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-se);
784
817
  border-width: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-wh);
785
- box-shadow: var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-br) var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-cr);
818
+ box-shadow: var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-br)
819
+ var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-cr);
786
820
  gap: prepareMediaVariable(--_ctm-lt-ur-io-im-sg);
787
821
 
788
822
  padding: prepareMediaVariable(--_ctm-dn-ur-io-dn-fl-ad-oy-pg);
@@ -793,27 +827,22 @@ $imagePositions: (
793
827
  // Keeps the avatar and the trailing icon on the name's centre line instead of
794
828
  // stretching them to the row height.
795
829
  align-items: center;
796
-
797
830
  &[data-has-link="true"] {
798
831
  cursor: pointer;
799
-
800
832
  &:hover {
801
833
  color: var(--_primary-500);
802
834
  }
803
835
  }
804
-
805
836
  .user_elements_user_name {
806
837
  display: flex;
807
838
  color: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-cr);
808
839
  font-family: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-fy);
809
840
  word-wrap: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-wd-wp);
810
841
  word-break: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-wd-bk);
811
-
812
842
  &.flex__overflow {
813
843
  white-space: normal;
814
844
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
815
845
  }
816
-
817
846
  font-size: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-se);
818
847
  font-style: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-se-ic);
819
848
  font-weight: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-wt);
@@ -844,16 +873,17 @@ $imagePositions: (
844
873
  border-style: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-br-se);
845
874
  border-width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-br-wh);
846
875
  border-radius: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-br-rs);
847
- box-shadow: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-sw-ae) prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-sw-br) prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-sw-sd) prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-sw-cr);
876
+ box-shadow: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-sw-ae)
877
+ prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-sw-br)
878
+ prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-sw-sd)
879
+ prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-sw-cr);
848
880
  }
849
881
 
850
882
  .icon {
851
883
  cursor: pointer;
852
-
853
884
  svg {
854
885
  width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-in-se);
855
886
  height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-in-se);
856
-
857
887
  path {
858
888
  stroke: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-in-c1);
859
889
  // Overrides the stroke-width presentation attribute baked into the icon markup.
@@ -884,12 +914,10 @@ $imagePositions: (
884
914
  font-family: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-ft-fy);
885
915
  word-wrap: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-wd-wp);
886
916
  word-break: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-wd-bk);
887
-
888
917
  &.flex__overflow {
889
918
  white-space: normal;
890
919
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
891
920
  }
892
-
893
921
  font-size: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-ft-se);
894
922
  font-style: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-ft-se-ic);
895
923
  font-weight: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-ft-wt);
@@ -901,11 +929,9 @@ $imagePositions: (
901
929
 
902
930
  .icon {
903
931
  cursor: pointer;
904
-
905
932
  svg {
906
933
  width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-in-se);
907
934
  height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-in-se);
908
-
909
935
  path {
910
936
  stroke: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-in-c1);
911
937
  // Overrides the stroke-width presentation attribute baked into the icon markup.
@@ -924,12 +950,10 @@ $imagePositions: (
924
950
  font-family: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-ft-fy);
925
951
  word-wrap: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-wd-wp);
926
952
  word-break: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-wd-bk);
927
-
928
953
  &.flex__overflow {
929
954
  white-space: normal;
930
955
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
931
956
  }
932
-
933
957
  font-size: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-ft-se);
934
958
  font-style: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-ft-se-ic);
935
959
  font-weight: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-ft-wt);
@@ -941,11 +965,9 @@ $imagePositions: (
941
965
 
942
966
  .icon {
943
967
  cursor: pointer;
944
-
945
968
  svg {
946
969
  width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-in-se);
947
970
  height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-in-se);
948
-
949
971
  path {
950
972
  stroke: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-in-c1);
951
973
  // Overrides the stroke-width presentation attribute baked into the icon markup.
@@ -964,12 +986,10 @@ $imagePositions: (
964
986
  font-family: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-fy);
965
987
  word-wrap: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-wd-wp);
966
988
  word-break: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-wd-bk);
967
-
968
989
  &.flex__overflow {
969
990
  white-space: normal;
970
991
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
971
992
  }
972
-
973
993
  font-size: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-se);
974
994
  font-style: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-se-ic);
975
995
  font-weight: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-wt);
@@ -981,11 +1001,9 @@ $imagePositions: (
981
1001
 
982
1002
  .icon {
983
1003
  cursor: pointer;
984
-
985
1004
  svg {
986
1005
  width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-in-se);
987
1006
  height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-in-se);
988
-
989
1007
  path {
990
1008
  stroke: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-in-c1);
991
1009
  // Overrides the stroke-width presentation attribute baked into the icon markup.
@@ -996,11 +1014,9 @@ $imagePositions: (
996
1014
  }
997
1015
  }
998
1016
  }
999
-
1000
1017
  .child {
1001
1018
  position: relative;
1002
1019
  }
1003
-
1004
1020
  &[data-show-divider="true"] {
1005
1021
  .child:not(:last-child)::after {
1006
1022
  content: "";
@@ -1026,7 +1042,6 @@ $imagePositions: (
1026
1042
  margin-block: 0;
1027
1043
  border-radius: 0;
1028
1044
  }
1029
-
1030
1045
  // .user_elements_user_name_wrapper {
1031
1046
  // width: 100%;
1032
1047
  // position: relative;
@@ -1069,9 +1084,9 @@ $imagePositions: (
1069
1084
  border-radius: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-br-rs);
1070
1085
  border-style: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-br-se);
1071
1086
  border-width: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-br-wh);
1072
- box-shadow: var(--_ctm-dn-qa-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-qa-dn-fl-ad-oy-sw-br) var(--_ctm-dn-qa-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-qa-dn-fl-ad-oy-sw-cr);
1087
+ box-shadow: var(--_ctm-dn-qa-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-qa-dn-fl-ad-oy-sw-br)
1088
+ var(--_ctm-dn-qa-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-qa-dn-fl-ad-oy-sw-cr);
1073
1089
  gap: prepareMediaVariable(--_ctm-lt-qa-dn-sg);
1074
-
1075
1090
  .quota_label_wrapper {
1076
1091
  display: flex;
1077
1092
  flex-direction: column;
@@ -1086,7 +1101,6 @@ $imagePositions: (
1086
1101
  align-self: flex-start;
1087
1102
  max-width: 100%;
1088
1103
  }
1089
-
1090
1104
  gap: 4px;
1091
1105
 
1092
1106
  .quota_label {
@@ -1097,12 +1111,10 @@ $imagePositions: (
1097
1111
  text-transform: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-tt-tm);
1098
1112
  word-wrap: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-wd-wp);
1099
1113
  word-break: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-wd-bk);
1100
-
1101
1114
  &.flex__overflow {
1102
1115
  white-space: normal;
1103
1116
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1104
1117
  }
1105
-
1106
1118
  font-size: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-ft-se);
1107
1119
  font-style: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-ft-se-ic);
1108
1120
  font-weight: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-ft-wt);
@@ -1111,7 +1123,6 @@ $imagePositions: (
1111
1123
  text-align: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-tt-an);
1112
1124
  text-decoration: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-ue);
1113
1125
  }
1114
-
1115
1126
  .quota_single_profile_name {
1116
1127
  display: flex;
1117
1128
  align-items: center;
@@ -1132,7 +1143,6 @@ $imagePositions: (
1132
1143
  }
1133
1144
 
1134
1145
  .quote_item_wrapper {
1135
-
1136
1146
  // Set only on the storefront, where clicking a quota row selects that
1137
1147
  // allocation and its profile. Builder/preview rows are dummy data.
1138
1148
  &[data-is-clickable="true"] {
@@ -1151,7 +1161,6 @@ $imagePositions: (
1151
1161
  // so a long quota name pushed the row out of the widget instead of wrapping
1152
1162
  // inside it.
1153
1163
  min-width: 0;
1154
-
1155
1164
  .quota_name_wrapper {
1156
1165
  display: flex;
1157
1166
  flex-direction: column;
@@ -1197,7 +1206,6 @@ $imagePositions: (
1197
1206
  display: flex;
1198
1207
  min-width: 0;
1199
1208
  }
1200
-
1201
1209
  .hilighted {
1202
1210
  color: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hd-dn-cr);
1203
1211
  font-family: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hd-dn-ft-fy);
@@ -1212,7 +1220,6 @@ $imagePositions: (
1212
1220
  text-align: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hd-dn-tt-an);
1213
1221
  text-decoration: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hd-dn-ue);
1214
1222
  }
1215
-
1216
1223
  .quota_inventory {
1217
1224
  display: flex;
1218
1225
  justify-content: center;
@@ -1256,13 +1263,11 @@ $imagePositions: (
1256
1263
  height: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt);
1257
1264
  background-color: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-dr-cr);
1258
1265
  }
1259
-
1260
1266
  &[data-content-alignment="Vertical"] {
1261
1267
  .quota_label_wrapper {
1262
1268
  width: 100%;
1263
1269
  position: relative;
1264
1270
  @include dividerGapReserve(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt);
1265
-
1266
1271
  &::after {
1267
1272
  content: "";
1268
1273
  position: absolute;
@@ -1297,7 +1302,6 @@ $imagePositions: (
1297
1302
  }
1298
1303
  }
1299
1304
  }
1300
-
1301
1305
  .quote_vertical_scroll_wrapper {
1302
1306
  overflow-y: auto;
1303
1307
  gap: prepareMediaVariable(--_ctm-lt-qa-im-sg);
@@ -1328,9 +1332,9 @@ $imagePositions: (
1328
1332
  border-radius: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-br-rs);
1329
1333
  border-style: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-br-se);
1330
1334
  border-width: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-br-wh);
1331
- box-shadow: var(--_ctm-dn-ae-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-ae-dn-fl-ad-oy-sw-br) var(--_ctm-dn-ae-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-ae-dn-fl-ad-oy-sw-cr);
1335
+ box-shadow: var(--_ctm-dn-ae-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-ae-dn-fl-ad-oy-sw-br)
1336
+ var(--_ctm-dn-ae-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-ae-dn-fl-ad-oy-sw-cr);
1332
1337
  gap: prepareMediaVariable(--_ctm-lt-ae-dn-sg);
1333
-
1334
1338
  .allowance_label_wrapper {
1335
1339
  display: flex;
1336
1340
  flex-direction: column;
@@ -1345,7 +1349,6 @@ $imagePositions: (
1345
1349
  align-self: flex-start;
1346
1350
  max-width: 100%;
1347
1351
  }
1348
-
1349
1352
  // align-items: center;
1350
1353
  gap: 4px;
1351
1354
 
@@ -1358,12 +1361,10 @@ $imagePositions: (
1358
1361
  text-transform: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-tt-tm);
1359
1362
  word-wrap: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-wd-wp);
1360
1363
  word-break: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-wd-bk);
1361
-
1362
1364
  &.flex__overflow {
1363
1365
  white-space: normal;
1364
1366
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1365
1367
  }
1366
-
1367
1368
  font-size: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-ft-se);
1368
1369
  font-style: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-ft-se-ic);
1369
1370
  font-weight: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-ft-wt);
@@ -1409,7 +1410,6 @@ $imagePositions: (
1409
1410
  // Same as the quota rows: without this the name refuses to shrink and
1410
1411
  // overflows the widget.
1411
1412
  min-width: 0;
1412
-
1413
1413
  .allowance_name_wrapper {
1414
1414
  display: flex;
1415
1415
  flex-direction: column;
@@ -1470,7 +1470,6 @@ $imagePositions: (
1470
1470
  }
1471
1471
  }
1472
1472
  }
1473
-
1474
1473
  &[data-show-divider="true"] {
1475
1474
  .allowance_item_wrapper:not(:last-child) {
1476
1475
  @include dividerGapReserve(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt);
@@ -1486,14 +1485,12 @@ $imagePositions: (
1486
1485
  height: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt);
1487
1486
  background-color: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-dr-cr);
1488
1487
  }
1489
-
1490
1488
  &[data-content-alignment="Vertical"] {
1491
1489
  .allowance_label_wrapper {
1492
1490
  width: 100%;
1493
1491
  position: relative;
1494
1492
  gap: 10px;
1495
1493
  @include dividerGapReserve(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt);
1496
-
1497
1494
  &::after {
1498
1495
  content: "";
1499
1496
  position: absolute;
@@ -1549,7 +1546,9 @@ $imagePositions: (
1549
1546
  border-radius: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-rs);
1550
1547
  border-style: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-se);
1551
1548
  border-width: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-wh);
1552
- box-shadow: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-br) var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-cr);
1549
+ box-shadow: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-ae)
1550
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-br) var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-sd)
1551
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-cr);
1553
1552
  gap: prepareMediaVariable(--_ctm-lt-ur-io-sy-im-sg);
1554
1553
 
1555
1554
  .secondary_vertical_scroll_wrapper {
@@ -1608,7 +1607,6 @@ $imagePositions: (
1608
1607
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1609
1608
  }
1610
1609
  }
1611
-
1612
1610
  .value {
1613
1611
  color: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-cr);
1614
1612
  font-family: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
@@ -1646,7 +1644,6 @@ $imagePositions: (
1646
1644
  display: flex;
1647
1645
  gap: 6px;
1648
1646
  justify-content: right;
1649
-
1650
1647
  .remaining_order {
1651
1648
  color: #243dc6;
1652
1649
  font-family: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
@@ -1674,7 +1671,6 @@ $imagePositions: (
1674
1671
  .payment_wrapper {
1675
1672
  display: flex;
1676
1673
  gap: 6px;
1677
-
1678
1674
  .remaining_payment {
1679
1675
  color: #243dc6;
1680
1676
  font-family: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
@@ -1708,24 +1704,41 @@ $imagePositions: (
1708
1704
  position: relative;
1709
1705
  display: inline-block;
1710
1706
  flex-shrink: 0;
1711
- width: var(--_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1712
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se)));
1713
- height: var(--_ctm-mob-dn-ur-sy-io-dn-ct-in-in-se,
1714
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se)));
1707
+ width: var(
1708
+ --_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1709
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se))
1710
+ );
1711
+ height: var(
1712
+ --_ctm-mob-dn-ur-sy-io-dn-ct-in-in-se,
1713
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se))
1714
+ );
1715
1715
  margin-right: 6px;
1716
-
1717
1716
  .cart__quantity {
1718
1717
  position: absolute;
1719
1718
  top: -4px;
1720
1719
  right: -6px;
1721
1720
  border-radius: 50px;
1722
1721
 
1723
- min-width: calc(var(--_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1724
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se,
1725
- var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se))) * 0.5);
1726
- height: calc(var(--_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1727
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se,
1728
- var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se))) * 0.5);
1722
+ min-width: calc(
1723
+ var(
1724
+ --_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1725
+ var(
1726
+ --_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se,
1727
+ var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se)
1728
+ )
1729
+ ) *
1730
+ 0.5
1731
+ );
1732
+ height: calc(
1733
+ var(
1734
+ --_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1735
+ var(
1736
+ --_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se,
1737
+ var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se)
1738
+ )
1739
+ ) *
1740
+ 0.5
1741
+ );
1729
1742
  width: auto;
1730
1743
  padding-inline: 4px;
1731
1744
  box-sizing: border-box;
@@ -1735,7 +1748,6 @@ $imagePositions: (
1735
1748
  justify-content: center;
1736
1749
  white-space: nowrap;
1737
1750
  }
1738
-
1739
1751
  // .cart__quantity {
1740
1752
  // position: absolute;
1741
1753
  // top: 0;
@@ -1761,84 +1773,149 @@ $imagePositions: (
1761
1773
  // }
1762
1774
 
1763
1775
  .cart__quantity {
1764
- background-color: var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-bd-cr,
1765
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-bd-cr, var(--_ctm-dn-ur-sy-io-dn-ct-ct-bd-cr)));
1766
-
1767
- border-color: var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-cr,
1768
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-cr, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-cr)));
1769
-
1770
- border-style: var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-se,
1771
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-se, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-se)));
1772
-
1773
- border-width: var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-wh,
1774
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-wh, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-wh)));
1775
-
1776
- border-radius: var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-rs,
1777
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-rs, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-rs)));
1778
-
1779
- box-shadow: var(--_show-shadow,
1780
- var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-ae,
1781
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-ae,
1782
- var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-ae))) var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-br,
1783
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-br,
1784
- var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-br))) var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-sd,
1785
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-sd,
1786
- var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-sd))) var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-cr,
1787
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-cr,
1788
- var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-cr))));
1776
+ background-color: var(
1777
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-bd-cr,
1778
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-bd-cr, var(--_ctm-dn-ur-sy-io-dn-ct-ct-bd-cr))
1779
+ );
1780
+
1781
+ border-color: var(
1782
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-cr,
1783
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-cr, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-cr))
1784
+ );
1785
+
1786
+ border-style: var(
1787
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-se,
1788
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-se, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-se))
1789
+ );
1790
+
1791
+ border-width: var(
1792
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-wh,
1793
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-wh, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-wh))
1794
+ );
1795
+
1796
+ border-radius: var(
1797
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-rs,
1798
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-rs, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-rs))
1799
+ );
1800
+
1801
+ box-shadow: var(
1802
+ --_show-shadow,
1803
+ var(
1804
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-ae,
1805
+ var(
1806
+ --_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-ae,
1807
+ var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-ae)
1808
+ )
1809
+ )
1810
+ var(
1811
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-br,
1812
+ var(
1813
+ --_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-br,
1814
+ var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-br)
1815
+ )
1816
+ )
1817
+ var(
1818
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-sd,
1819
+ var(
1820
+ --_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-sd,
1821
+ var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-sd)
1822
+ )
1823
+ )
1824
+ var(
1825
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-cr,
1826
+ var(
1827
+ --_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-cr,
1828
+ var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-cr)
1829
+ )
1830
+ )
1831
+ );
1789
1832
  white-space: nowrap;
1790
1833
  line-height: 1;
1791
1834
  width: auto;
1792
1835
  padding-inline: 4px;
1793
1836
  box-sizing: border-box;
1794
1837
 
1795
- color: var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-cr,
1796
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-cr, var(--_ctm-dn-ur-sy-io-dn-ct-ct-cr)));
1797
- font-family: var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-ft-fy,
1798
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ft-fy, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ft-fy)));
1799
- text-transform: var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-tt-tm,
1800
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-tt-tm, var(--_ctm-dn-ur-sy-io-dn-ct-ct-tt-tm)));
1801
- word-wrap: var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-wd-wp,
1802
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-wd-wp, var(--_ctm-dn-ur-sy-io-dn-ct-ct-wd-wp)));
1803
- word-break: var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-wd-bk,
1804
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-wd-bk, var(--_ctm-dn-ur-sy-io-dn-ct-ct-wd-bk)));
1805
- font-size: calc(var(--_ctm-mob-dn-ur-sy-io-dn-ct-in-in-se,
1806
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se,
1807
- var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se))) / 3);
1838
+ color: var(
1839
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-cr,
1840
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-cr, var(--_ctm-dn-ur-sy-io-dn-ct-ct-cr))
1841
+ );
1842
+ font-family: var(
1843
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ft-fy,
1844
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ft-fy, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ft-fy))
1845
+ );
1846
+ text-transform: var(
1847
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-tt-tm,
1848
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-tt-tm, var(--_ctm-dn-ur-sy-io-dn-ct-ct-tt-tm))
1849
+ );
1850
+ word-wrap: var(
1851
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-wd-wp,
1852
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-wd-wp, var(--_ctm-dn-ur-sy-io-dn-ct-ct-wd-wp))
1853
+ );
1854
+ word-break: var(
1855
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-wd-bk,
1856
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-wd-bk, var(--_ctm-dn-ur-sy-io-dn-ct-ct-wd-bk))
1857
+ );
1858
+ font-size: calc(
1859
+ var(
1860
+ --_ctm-mob-dn-ur-sy-io-dn-ct-in-in-se,
1861
+ var(
1862
+ --_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se,
1863
+ var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se)
1864
+ )
1865
+ ) /
1866
+ 3
1867
+ );
1808
1868
  // font-size: var(
1809
1869
  // --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ft-se,
1810
1870
  // var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ft-se, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ft-se))
1811
1871
  // );
1812
- font-weight: var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-ft-wt,
1813
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ft-wt, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ft-wt)));
1814
- font-style: var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-ft-se-ic,
1815
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ft-se-ic,
1816
- var(--_ctm-dn-ur-sy-io-dn-ct-ct-ft-se-ic)));
1817
- text-align: var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-tt-an,
1818
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-tt-an, var(--_ctm-dn-ur-sy-io-dn-ct-ct-tt-an)));
1819
- letter-spacing: var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-lr-sg,
1820
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-lr-sg, var(--_ctm-dn-ur-sy-io-dn-ct-ct-lr-sg)));
1872
+ font-weight: var(
1873
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ft-wt,
1874
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ft-wt, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ft-wt))
1875
+ );
1876
+ font-style: var(
1877
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ft-se-ic,
1878
+ var(
1879
+ --_ctm-tab-dn-ur-sy-io-dn-ct-ct-ft-se-ic,
1880
+ var(--_ctm-dn-ur-sy-io-dn-ct-ct-ft-se-ic)
1881
+ )
1882
+ );
1883
+ text-align: var(
1884
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-tt-an,
1885
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-tt-an, var(--_ctm-dn-ur-sy-io-dn-ct-ct-tt-an))
1886
+ );
1887
+ letter-spacing: var(
1888
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-lr-sg,
1889
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-lr-sg, var(--_ctm-dn-ur-sy-io-dn-ct-ct-lr-sg))
1890
+ );
1821
1891
  // line-height: var(
1822
1892
  // --_ctm-mob-dn-ur-sy-io-dn-ct-ct-le-ht,
1823
1893
  // var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-le-ht, var(--_ctm-dn-ur-sy-io-dn-ct-ct-le-ht))
1824
1894
  // );
1825
- text-decoration: var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-ue,
1826
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ue, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ue)));
1895
+ text-decoration: var(
1896
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ue,
1897
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ue, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ue))
1898
+ );
1827
1899
  }
1828
-
1829
1900
  .cart__icon {
1830
1901
  display: var(--_sf-show-icon-ff, flex);
1831
-
1832
1902
  svg {
1833
- width: var(--_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1834
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se)));
1835
- height: var(--_ctm-mob-dn-ur-sy-io-dn-ct-in-in-se,
1836
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se)));
1837
-
1903
+ width: var(
1904
+ --_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1905
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se))
1906
+ );
1907
+ height: var(
1908
+ --_ctm-mob-dn-ur-sy-io-dn-ct-in-in-se,
1909
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se))
1910
+ );
1838
1911
  path {
1839
- stroke: var(--_ctm-mob-dn-ur-sy-io-dn-ct-in-in-c1,
1840
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-c1,
1841
- var(--_ctm-dn-ur-sy-io-dn-ct-in-in-c1)));
1912
+ stroke: var(
1913
+ --_ctm-mob-dn-ur-sy-io-dn-ct-in-in-c1,
1914
+ var(
1915
+ --_ctm-tab-dn-ur-sy-io-dn-ct-in-in-c1,
1916
+ var(--_ctm-dn-ur-sy-io-dn-ct-in-in-c1)
1917
+ )
1918
+ );
1842
1919
  // Overrides the stroke-width presentation attribute baked into the icon markup.
1843
1920
  stroke-width: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ct-in-se-wh, 1.25);
1844
1921
  }
@@ -1850,91 +1927,113 @@ $imagePositions: (
1850
1927
  .child {
1851
1928
  position: relative;
1852
1929
  }
1853
-
1854
1930
  &[data-show-divider="true"] {
1855
1931
  .child:not(:last-child) {
1856
1932
  @include dividerGapReserve(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt);
1857
1933
  }
1858
-
1859
1934
  .child:not(:last-child)::before {
1860
1935
  content: "";
1861
1936
  position: absolute;
1862
1937
  left: 0;
1863
1938
  right: 0;
1864
- bottom: dividerGapOffset(--_ctm-lt-ur-io-sy-im-sg,
1865
- --_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt);
1866
-
1867
- height: var(--_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1868
- var(--_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1869
- var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt)));
1870
- background-color: var(--_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-cr,
1871
- var(--_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-cr,
1872
- var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-cr)));
1939
+ bottom: dividerGapOffset(
1940
+ --_ctm-lt-ur-io-sy-im-sg,
1941
+ --_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt
1942
+ );
1943
+
1944
+ height: var(
1945
+ --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1946
+ var(
1947
+ --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1948
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt)
1949
+ )
1950
+ );
1951
+ background-color: var(
1952
+ --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-cr,
1953
+ var(
1954
+ --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-cr,
1955
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-cr)
1956
+ )
1957
+ );
1873
1958
  }
1874
-
1875
1959
  &[data-content-alignment="Horizontal"] {
1876
-
1877
1960
  // Side by side, so the thickness has to be reserved horizontally instead.
1878
1961
  .child:not(:last-child) {
1879
1962
  margin-bottom: 0;
1880
1963
  @include dividerGapReserve(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt, right);
1881
1964
  }
1882
-
1883
1965
  .child:not(:last-child)::before {
1884
- right: dividerGapOffset(--_ctm-lt-ur-io-sy-im-sg,
1885
- --_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt);
1966
+ right: dividerGapOffset(
1967
+ --_ctm-lt-ur-io-sy-im-sg,
1968
+ --_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt
1969
+ );
1886
1970
  bottom: unset;
1887
1971
  top: 0;
1888
1972
 
1889
- width: var(--_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1890
- var(--_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1891
- var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt)));
1973
+ width: var(
1974
+ --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1975
+ var(
1976
+ --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1977
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt)
1978
+ )
1979
+ );
1892
1980
  height: 100%;
1893
1981
  left: unset;
1894
1982
  }
1895
-
1896
1983
  @media (max-width: 768px) {
1897
-
1898
1984
  // Back to stacked below the breakpoint, so the reserve goes back under the item.
1899
1985
  .child:not(:last-child) {
1900
1986
  margin-right: 0;
1901
1987
  @include dividerGapReserve(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt);
1902
1988
  }
1903
-
1904
1989
  .child:not(:last-child)::before {
1905
1990
  top: unset;
1906
1991
  left: 0;
1907
1992
  right: 0;
1908
- bottom: dividerGapOffset(--_ctm-lt-ur-io-sy-im-sg,
1909
- --_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt);
1910
- height: var(--_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1911
- var(--_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1912
- var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt)));
1993
+ bottom: dividerGapOffset(
1994
+ --_ctm-lt-ur-io-sy-im-sg,
1995
+ --_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt
1996
+ );
1997
+ height: var(
1998
+ --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1999
+ var(
2000
+ --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
2001
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt)
2002
+ )
2003
+ );
1913
2004
  width: unset;
1914
2005
  }
1915
2006
  }
1916
2007
  }
1917
-
1918
2008
  &[data-content-alignment="Vertical"] {
1919
2009
  .secondary_label_wrapper {
1920
2010
  width: 100%;
1921
2011
  position: relative;
1922
2012
  @include dividerGapReserve(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt);
1923
-
1924
2013
  &::after {
1925
2014
  content: "";
1926
2015
  position: absolute;
1927
2016
  left: 0;
1928
2017
  right: 0;
1929
- bottom: dividerGapOffset(--_ctm-lt-ur-io-sy-im-sg,
1930
- --_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt);
1931
- height: var(--_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1932
- var(--_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1933
- var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt)));
1934
-
1935
- background-color: var(--_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-cr,
1936
- var(--_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-cr,
1937
- var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-cr)));
2018
+ bottom: dividerGapOffset(
2019
+ --_ctm-lt-ur-io-sy-im-sg,
2020
+ --_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt
2021
+ );
2022
+ height: var(
2023
+ --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
2024
+ var(
2025
+ --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
2026
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt)
2027
+ )
2028
+ );
2029
+
2030
+ background-color: var(
2031
+ --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-cr,
2032
+ var(
2033
+ --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-cr,
2034
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-cr)
2035
+ )
2036
+ );
1938
2037
  }
1939
2038
  }
1940
2039
  }
@@ -1950,8 +2049,7 @@ $imagePositions: (
1950
2049
  justify-content: space-between;
1951
2050
  padding-right: 16px;
1952
2051
  }
1953
-
1954
- .active_orders_wrapper>* {
2052
+ .active_orders_wrapper > * {
1955
2053
  box-sizing: border-box;
1956
2054
  width: 100%;
1957
2055
  // line-height: 125%;
@@ -1966,7 +2064,6 @@ $imagePositions: (
1966
2064
  flex-direction: row;
1967
2065
  align-items: start;
1968
2066
  }
1969
-
1970
2067
  .my_cart_container {
1971
2068
  display: flex;
1972
2069
  align-items: center;
@@ -1976,7 +2073,6 @@ $imagePositions: (
1976
2073
  .popover-container {
1977
2074
  position: relative;
1978
2075
  display: inline-block;
1979
-
1980
2076
  .popover-trigger {
1981
2077
  cursor: pointer;
1982
2078
  font-weight: 500;
@@ -2012,30 +2108,55 @@ $imagePositions: (
2012
2108
 
2013
2109
  // width: 100%;
2014
2110
  gap: prepareMediaVariable(--_ctm-dn-pr-se-im-gp);
2015
- background-color: var(--_ctm-mob-dn-pr-se-bd-cr,
2016
- var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr)));
2017
-
2018
- border-color: var(--_ctm-mob-dn-pr-se-br-cr,
2019
- var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr)));
2020
-
2021
- border-style: var(--_ctm-mob-dn-pr-se-br-se,
2022
- var(--_ctm-tab-dn-pr-se-br-se, var(--_ctm-dn-pr-se-br-se)));
2023
-
2024
- border-width: var(--_ctm-mob-dn-pr-se-br-wh,
2025
- var(--_ctm-tab-dn-pr-se-br-wh, var(--_ctm-dn-pr-se-br-wh)));
2026
-
2027
- border-radius: var(--_ctm-mob-dn-pr-se-br-rs,
2028
- var(--_ctm-tab-dn-pr-se-br-rs, var(--_ctm-dn-pr-se-br-rs)));
2029
-
2030
- box-shadow: var(--_show-shadow,
2031
- var(--_ctm-mob-dn-pr-se-sw-ae,
2032
- var(--_ctm-tab-dn-pr-se-sw-ae, var(--_ctm-dn-pr-se-sw-ae))) var(--_ctm-mob-dn-pr-se-sw-br,
2033
- var(--_ctm-tab-dn-pr-se-sw-br, var(--_ctm-dn-pr-se-sw-br))) var(--_ctm-mob-dn-pr-se-sw-sd,
2034
- var(--_ctm-tab-dn-pr-se-sw-sd, var(--_ctm-dn-pr-se-sw-sd))) var(--_ctm-mob-dn-pr-se-sw-cr,
2035
- var(--_ctm-tab-dn-pr-se-sw-cr, var(--_ctm-dn-pr-se-sw-cr))));
2036
-
2037
- padding: var(--_ctm-mob-dn-pr-se-pg,
2038
- var(--_ctm-tab-dn-pr-se-pg, var(--_ctm-dn-pr-se-pg)));
2111
+ background-color: var(
2112
+ --_ctm-mob-dn-pr-se-bd-cr,
2113
+ var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
2114
+ );
2115
+
2116
+ border-color: var(
2117
+ --_ctm-mob-dn-pr-se-br-cr,
2118
+ var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr))
2119
+ );
2120
+
2121
+ border-style: var(
2122
+ --_ctm-mob-dn-pr-se-br-se,
2123
+ var(--_ctm-tab-dn-pr-se-br-se, var(--_ctm-dn-pr-se-br-se))
2124
+ );
2125
+
2126
+ border-width: var(
2127
+ --_ctm-mob-dn-pr-se-br-wh,
2128
+ var(--_ctm-tab-dn-pr-se-br-wh, var(--_ctm-dn-pr-se-br-wh))
2129
+ );
2130
+
2131
+ border-radius: var(
2132
+ --_ctm-mob-dn-pr-se-br-rs,
2133
+ var(--_ctm-tab-dn-pr-se-br-rs, var(--_ctm-dn-pr-se-br-rs))
2134
+ );
2135
+
2136
+ box-shadow: var(
2137
+ --_show-shadow,
2138
+ var(
2139
+ --_ctm-mob-dn-pr-se-sw-ae,
2140
+ var(--_ctm-tab-dn-pr-se-sw-ae, var(--_ctm-dn-pr-se-sw-ae))
2141
+ )
2142
+ var(
2143
+ --_ctm-mob-dn-pr-se-sw-br,
2144
+ var(--_ctm-tab-dn-pr-se-sw-br, var(--_ctm-dn-pr-se-sw-br))
2145
+ )
2146
+ var(
2147
+ --_ctm-mob-dn-pr-se-sw-sd,
2148
+ var(--_ctm-tab-dn-pr-se-sw-sd, var(--_ctm-dn-pr-se-sw-sd))
2149
+ )
2150
+ var(
2151
+ --_ctm-mob-dn-pr-se-sw-cr,
2152
+ var(--_ctm-tab-dn-pr-se-sw-cr, var(--_ctm-dn-pr-se-sw-cr))
2153
+ )
2154
+ );
2155
+
2156
+ padding: var(
2157
+ --_ctm-mob-dn-pr-se-pg,
2158
+ var(--_ctm-tab-dn-pr-se-pg, var(--_ctm-dn-pr-se-pg))
2159
+ );
2039
2160
  }
2040
2161
 
2041
2162
  .popover-box strong {
@@ -2055,36 +2176,63 @@ $imagePositions: (
2055
2176
  // var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
2056
2177
  // );
2057
2178
  transform: rotate(-45deg);
2058
- box-shadow: -1px -1px 0px var(--_ctm-mob-dn-pr-se-br-cr,
2059
- var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr)));
2179
+ box-shadow: -1px -1px 0px
2180
+ var(
2181
+ --_ctm-mob-dn-pr-se-br-cr,
2182
+ var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr))
2183
+ );
2060
2184
  }
2061
2185
 
2062
2186
  .popover_item {
2063
2187
  // padding-inline: var(--_sf-cd-gp);
2064
- color: var(--_ctm-mob-dn-pr-se-cr,
2065
- var(--_ctm-tab-dn-pr-se-cr, var(--_ctm-dn-pr-se-cr)));
2066
- font-family: var(--_ctm-mob-dn-pr-se-ft-fy,
2067
- var(--_ctm-tab-dn-pr-se-ft-fy, var(--_ctm-dn-pr-se-ft-fy)));
2068
- text-transform: var(--_ctm-mob-dn-pr-se-tt-tm,
2069
- var(--_ctm-tab-dn-pr-se-tt-tm, var(--_ctm-dn-pr-se-tt-tm)));
2070
- word-wrap: var(--_ctm-mob-dn-pr-se-wd-wp,
2071
- var(--_ctm-tab-dn-pr-se-wd-wp, var(--_ctm-dn-pr-se-wd-wp)));
2072
- word-break: var(--_ctm-mob-dn-pr-se-wd-bk,
2073
- var(--_ctm-tab-dn-pr-se-wd-bk, var(--_ctm-dn-pr-se-wd-bk)));
2074
- font-size: var(--_ctm-mob-dn-pr-se-ft-se,
2075
- var(--_ctm-tab-dn-pr-se-ft-se, var(--_ctm-dn-pr-se-ft-se)));
2076
- font-weight: var(--_ctm-mob-dn-pr-se-ft-wt,
2077
- var(--_ctm-tab-dn-pr-se-ft-wt, var(--_ctm-dn-pr-se-ft-wt)));
2078
- font-style: var(--_ctm-mob-dn-pr-se-ft-se-ic,
2079
- var(--_ctm-tab-dn-pr-se-ft-se-ic, var(--_ctm-dn-pr-se-ft-se-ic)));
2080
- text-align: var(--_ctm-mob-dn-pr-se-tt-an,
2081
- var(--_ctm-tab-dn-pr-se-tt-an, var(--_ctm-dn-pr-se-tt-an)));
2082
- letter-spacing: var(--_ctm-mob-dn-pr-se-lr-sg,
2083
- var(--_ctm-tab-dn-pr-se-lr-sg, var(--_ctm-dn-pr-se-lr-sg)));
2084
- line-height: var(--_ctm-mob-dn-pr-se-le-ht,
2085
- var(--_ctm-tab-dn-pr-se-le-ht, var(--_ctm-dn-pr-se-le-ht-dc)));
2086
- text-decoration: var(--_ctm-mob-dn-pr-se-ue,
2087
- var(--_ctm-tab-dn-pr-se-ue, var(--_ctm-dn-pr-se-ue)));
2188
+ color: var(
2189
+ --_ctm-mob-dn-pr-se-cr,
2190
+ var(--_ctm-tab-dn-pr-se-cr, var(--_ctm-dn-pr-se-cr))
2191
+ );
2192
+ font-family: var(
2193
+ --_ctm-mob-dn-pr-se-ft-fy,
2194
+ var(--_ctm-tab-dn-pr-se-ft-fy, var(--_ctm-dn-pr-se-ft-fy))
2195
+ );
2196
+ text-transform: var(
2197
+ --_ctm-mob-dn-pr-se-tt-tm,
2198
+ var(--_ctm-tab-dn-pr-se-tt-tm, var(--_ctm-dn-pr-se-tt-tm))
2199
+ );
2200
+ word-wrap: var(
2201
+ --_ctm-mob-dn-pr-se-wd-wp,
2202
+ var(--_ctm-tab-dn-pr-se-wd-wp, var(--_ctm-dn-pr-se-wd-wp))
2203
+ );
2204
+ word-break: var(
2205
+ --_ctm-mob-dn-pr-se-wd-bk,
2206
+ var(--_ctm-tab-dn-pr-se-wd-bk, var(--_ctm-dn-pr-se-wd-bk))
2207
+ );
2208
+ font-size: var(
2209
+ --_ctm-mob-dn-pr-se-ft-se,
2210
+ var(--_ctm-tab-dn-pr-se-ft-se, var(--_ctm-dn-pr-se-ft-se))
2211
+ );
2212
+ font-weight: var(
2213
+ --_ctm-mob-dn-pr-se-ft-wt,
2214
+ var(--_ctm-tab-dn-pr-se-ft-wt, var(--_ctm-dn-pr-se-ft-wt))
2215
+ );
2216
+ font-style: var(
2217
+ --_ctm-mob-dn-pr-se-ft-se-ic,
2218
+ var(--_ctm-tab-dn-pr-se-ft-se-ic, var(--_ctm-dn-pr-se-ft-se-ic))
2219
+ );
2220
+ text-align: var(
2221
+ --_ctm-mob-dn-pr-se-tt-an,
2222
+ var(--_ctm-tab-dn-pr-se-tt-an, var(--_ctm-dn-pr-se-tt-an))
2223
+ );
2224
+ letter-spacing: var(
2225
+ --_ctm-mob-dn-pr-se-lr-sg,
2226
+ var(--_ctm-tab-dn-pr-se-lr-sg, var(--_ctm-dn-pr-se-lr-sg))
2227
+ );
2228
+ line-height: var(
2229
+ --_ctm-mob-dn-pr-se-le-ht,
2230
+ var(--_ctm-tab-dn-pr-se-le-ht, var(--_ctm-dn-pr-se-le-ht-dc))
2231
+ );
2232
+ text-decoration: var(
2233
+ --_ctm-mob-dn-pr-se-ue,
2234
+ var(--_ctm-tab-dn-pr-se-ue, var(--_ctm-dn-pr-se-ue))
2235
+ );
2088
2236
  // margin-left: 10px;
2089
2237
  }
2090
2238
  }
@@ -2094,14 +2242,20 @@ $imagePositions: (
2094
2242
  // for dropdown
2095
2243
 
2096
2244
  .language__conatiner {
2097
- background-color: var(--_ctm-mob-dn-dn-se-wt-se-bd-cr,
2098
- var(--_ctm-tab-dn-dn-se-wt-se-bd-cr, var(--_ctm-dn-dn-se-wt-se-bd-cr)));
2245
+ background-color: var(
2246
+ --_ctm-mob-dn-dn-se-wt-se-bd-cr,
2247
+ var(--_ctm-tab-dn-dn-se-wt-se-bd-cr, var(--_ctm-dn-dn-se-wt-se-bd-cr))
2248
+ );
2099
2249
 
2100
- border-color: var(--_ctm-mob-dn-dn-se-wt-se-br-cr,
2101
- var(--_ctm-tab-dn-dn-se-wt-se-br-cr, var(--_ctm-dn-dn-se-wt-se-br-cr)));
2250
+ border-color: var(
2251
+ --_ctm-mob-dn-dn-se-wt-se-br-cr,
2252
+ var(--_ctm-tab-dn-dn-se-wt-se-br-cr, var(--_ctm-dn-dn-se-wt-se-br-cr))
2253
+ );
2102
2254
 
2103
- border-style: var(--_ctm-mob-dn-dn-se-wt-se-br-se,
2104
- var(--_ctm-tab-dn-dn-se-wt-se-br-se, var(--_ctm-dn-dn-se-wt-se-br-se)));
2255
+ border-style: var(
2256
+ --_ctm-mob-dn-dn-se-wt-se-br-se,
2257
+ var(--_ctm-tab-dn-dn-se-wt-se-br-se, var(--_ctm-dn-dn-se-wt-se-br-se))
2258
+ );
2105
2259
 
2106
2260
  // The tablet name carried a doubled `dn-se-`, so tablet fell through to desktop.
2107
2261
  border-width: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-br-wh);
@@ -2112,15 +2266,30 @@ $imagePositions: (
2112
2266
  // var(--_ctm-tab-dn-dn-se-wt-se-br-cr, var(--_ctm-dn-dn-se-wt-se-br-cr))
2113
2267
  // );
2114
2268
 
2115
- border-radius: var(--_ctm-mob-dn-dn-se-wt-se-br-rs,
2116
- var(--_ctm-tab-dn-dn-se-wt-se-br-rs, var(--_ctm-dn-dn-se-wt-se-br-rs)));
2117
-
2118
- box-shadow: var(--_show-shadow,
2119
- var(--_ctm-mob-dn-dn-se-wt-se-sw-ae,
2120
- var(--_ctm-tab-dn-dn-se-wt-se-sw-ae, var(--_ctm-dn-dn-se-wt-se-sw-ae))) var(--_ctm-mob-dn-dn-se-wt-se-sw-br,
2121
- var(--_ctm-tab-dn-dn-se-wt-se-sw-br, var(--_ctm-dn-dn-se-wt-se-sw-br))) var(--_ctm-mob-dn-dn-se-wt-se-sw-sd,
2122
- var(--_ctm-tab-dn-dn-se-wt-se-sw-sd, var(--_ctm-dn-dn-se-wt-se-sw-sd))) var(--_ctm-mob-dn-dn-se-wt-se-sw-cr,
2123
- var(--_ctm-tab-dn-dn-se-wt-se-sw-cr, var(--_ctm-dn-dn-se-wt-se-sw-cr))));
2269
+ border-radius: var(
2270
+ --_ctm-mob-dn-dn-se-wt-se-br-rs,
2271
+ var(--_ctm-tab-dn-dn-se-wt-se-br-rs, var(--_ctm-dn-dn-se-wt-se-br-rs))
2272
+ );
2273
+
2274
+ box-shadow: var(
2275
+ --_show-shadow,
2276
+ var(
2277
+ --_ctm-mob-dn-dn-se-wt-se-sw-ae,
2278
+ var(--_ctm-tab-dn-dn-se-wt-se-sw-ae, var(--_ctm-dn-dn-se-wt-se-sw-ae))
2279
+ )
2280
+ var(
2281
+ --_ctm-mob-dn-dn-se-wt-se-sw-br,
2282
+ var(--_ctm-tab-dn-dn-se-wt-se-sw-br, var(--_ctm-dn-dn-se-wt-se-sw-br))
2283
+ )
2284
+ var(
2285
+ --_ctm-mob-dn-dn-se-wt-se-sw-sd,
2286
+ var(--_ctm-tab-dn-dn-se-wt-se-sw-sd, var(--_ctm-dn-dn-se-wt-se-sw-sd))
2287
+ )
2288
+ var(
2289
+ --_ctm-mob-dn-dn-se-wt-se-sw-cr,
2290
+ var(--_ctm-tab-dn-dn-se-wt-se-sw-cr, var(--_ctm-dn-dn-se-wt-se-sw-cr))
2291
+ )
2292
+ );
2124
2293
 
2125
2294
  // gap: var(
2126
2295
  // --_ctm-mob-dn-dn-se-lt-ss-it-ad-mn-qy-sg,
@@ -2130,110 +2299,200 @@ $imagePositions: (
2130
2299
 
2131
2300
  .option:hover {
2132
2301
  --_sf-hr-txt-tr: prepareMediaVariable(--_ctm-dn-dn-se-im-se-hr-se-tt-tm);
2133
- --_sf-hr-bd-cr: var(--_ctm-mob-dn-dn-se-im-se-hr-se-bd-cr,
2134
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-bd-cr, var(--_ctm-dn-dn-se-im-se-hr-se-bd-cr)));
2135
- --_sf-hr-br-cr: var(--_ctm-mob-dn-dn-se-im-se-hr-se-br-cr,
2136
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-cr, var(--_ctm-dn-dn-se-im-se-hr-se-br-cr)));
2137
- --_sf-hr-br-se: var(--_ctm-mob-dn-dn-se-im-se-hr-se-br-se,
2138
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-se, var(--_ctm-dn-dn-se-im-se-hr-se-br-se)));
2139
- --_sf-hr-br-wh: var(--_ctm-mob-dn-dn-se-im-se-hr-se-br-wh,
2140
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-wh, var(--_ctm-dn-dn-se-im-se-hr-se-br-wh)));
2141
- --_sf-hr-br-rs: var(--_ctm-mob-dn-dn-se-im-se-hr-se-br-rs,
2142
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-rs, var(--_ctm-dn-dn-se-im-se-hr-se-br-rs)));
2143
- --_sf-hr-pg: var(--_ctm-mob-dn-dn-se-im-se-hr-se-pg,
2144
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-pg, var(--_ctm-dn-dn-se-im-se-hr-se-pg)));
2302
+ --_sf-hr-bd-cr: var(
2303
+ --_ctm-mob-dn-dn-se-im-se-hr-se-bd-cr,
2304
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-bd-cr, var(--_ctm-dn-dn-se-im-se-hr-se-bd-cr))
2305
+ );
2306
+ --_sf-hr-br-cr: var(
2307
+ --_ctm-mob-dn-dn-se-im-se-hr-se-br-cr,
2308
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-cr, var(--_ctm-dn-dn-se-im-se-hr-se-br-cr))
2309
+ );
2310
+ --_sf-hr-br-se: var(
2311
+ --_ctm-mob-dn-dn-se-im-se-hr-se-br-se,
2312
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-se, var(--_ctm-dn-dn-se-im-se-hr-se-br-se))
2313
+ );
2314
+ --_sf-hr-br-wh: var(
2315
+ --_ctm-mob-dn-dn-se-im-se-hr-se-br-wh,
2316
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-wh, var(--_ctm-dn-dn-se-im-se-hr-se-br-wh))
2317
+ );
2318
+ --_sf-hr-br-rs: var(
2319
+ --_ctm-mob-dn-dn-se-im-se-hr-se-br-rs,
2320
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-rs, var(--_ctm-dn-dn-se-im-se-hr-se-br-rs))
2321
+ );
2322
+ --_sf-hr-pg: var(
2323
+ --_ctm-mob-dn-dn-se-im-se-hr-se-pg,
2324
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-pg, var(--_ctm-dn-dn-se-im-se-hr-se-pg))
2325
+ );
2145
2326
  // for shadow
2146
- --_sf-hr-sw-ae: var(--_ctm-mob-dn-dn-se-im-se-hr-se-sw-ae,
2147
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-ae, var(--_ctm-dn-dn-se-im-se-hr-se-sw-ae)));
2148
- --_sf-hr-sw-br: var(--_ctm-mob-dn-dn-se-im-se-hr-se-sw-br,
2149
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-br, var(--_ctm-dn-dn-se-im-se-hr-se-sw-br)));
2150
- --_sf-hr-sw-hr: var(--_ctm-mob-dn-dn-se-im-se-hr-se-sw-hr,
2151
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-hr, var(--_ctm-dn-dn-se-im-se-hr-se-sw-hr)));
2152
- --_sf-hr-sw-cr: var(--_ctm-mob-dn-dn-se-im-se-hr-se-sw-cr,
2153
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-cr, var(--_ctm-dn-dn-se-im-se-hr-se-sw-cr)));
2327
+ --_sf-hr-sw-ae: var(
2328
+ --_ctm-mob-dn-dn-se-im-se-hr-se-sw-ae,
2329
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-ae, var(--_ctm-dn-dn-se-im-se-hr-se-sw-ae))
2330
+ );
2331
+ --_sf-hr-sw-br: var(
2332
+ --_ctm-mob-dn-dn-se-im-se-hr-se-sw-br,
2333
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-br, var(--_ctm-dn-dn-se-im-se-hr-se-sw-br))
2334
+ );
2335
+ --_sf-hr-sw-hr: var(
2336
+ --_ctm-mob-dn-dn-se-im-se-hr-se-sw-hr,
2337
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-hr, var(--_ctm-dn-dn-se-im-se-hr-se-sw-hr))
2338
+ );
2339
+ --_sf-hr-sw-cr: var(
2340
+ --_ctm-mob-dn-dn-se-im-se-hr-se-sw-cr,
2341
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-cr, var(--_ctm-dn-dn-se-im-se-hr-se-sw-cr))
2342
+ );
2154
2343
 
2155
2344
  // for font
2156
2345
 
2157
- --_sf-hr-cr: var(--_ctm-mob-dn-dn-se-im-se-hr-se-cr,
2158
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-cr, var(--_ctm-dn-dn-se-im-se-hr-se-cr)));
2159
- --_sf-hr-ft-fy: var(--_ctm-mob-dn-dn-se-im-se-hr-se-ft-fy,
2160
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-fy, var(--_ctm-dn-dn-se-im-se-hr-se-ft-fy)));
2161
- --_sf-hr-tt-tm: var(--_ctm-mob-dn-dn-se-im-se-hr-se-tt-tm,
2162
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-tt-tm, var(--_ctm-dn-dn-se-im-se-hr-se-tt-tm)));
2163
- --_sf-hr-wd-wp: var(--_ctm-mob-dn-dn-se-im-se-hr-se-wd-wp,
2164
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-wd-wp, var(--_ctm-dn-dn-se-im-se-hr-se-wd-wp)));
2165
- --_sf-hr-wd-bk: var(--_ctm-mob-dn-dn-se-im-se-hr-se-wd-bk,
2166
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-wd-bk, var(--_ctm-dn-dn-se-im-se-hr-se-wd-bk)));
2167
- --_sf-hr-ft-se: var(--_ctm-mob-dn-dn-se-im-se-hr-se-ft-se,
2168
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-se, var(--_ctm-dn-dn-se-im-se-hr-se-ft-se)));
2169
- --_sf-hr-ft-wt: var(--_ctm-mob-dn-dn-se-im-se-hr-se-ft-wt,
2170
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-wt, var(--_ctm-dn-dn-se-im-se-hr-se-ft-wt)));
2171
- --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-dn-se-im-se-hr-se-ft-se-ic,
2172
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-se-ic, var(--_ctm-dn-dn-se-im-se-hr-se-ft-se-ic)));
2173
- --_sf-hr-tt-an: var(--_ctm-mob-dn-dn-se-im-se-hr-se-tt-an,
2174
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-tt-an, var(--_ctm-dn-dn-se-im-se-hr-se-tt-an)));
2175
- --_sf-hr-lr-sg: var(--_ctm-mob-dn-dn-se-im-se-hr-se-lr-sg,
2176
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-lr-sg, var(--_ctm-dn-dn-se-im-se-hr-se-lr-sg)));
2177
- --_sf-hr-le-ht: var(--_ctm-mob-dn-dn-se-im-se-hr-se-le-ht,
2178
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-le-ht, var(--_ctm-dn-dn-se-im-se-hr-se-le-ht)));
2179
-
2180
- --_sf-hr-ue: var(--_ctm-mob-dn-dn-se-im-se-hr-se-ue,
2181
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-ue, var(--_ctm-dn-dn-se-im-se-hr-se-ue)));
2346
+ --_sf-hr-cr: var(
2347
+ --_ctm-mob-dn-dn-se-im-se-hr-se-cr,
2348
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-cr, var(--_ctm-dn-dn-se-im-se-hr-se-cr))
2349
+ );
2350
+ --_sf-hr-ft-fy: var(
2351
+ --_ctm-mob-dn-dn-se-im-se-hr-se-ft-fy,
2352
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-fy, var(--_ctm-dn-dn-se-im-se-hr-se-ft-fy))
2353
+ );
2354
+ --_sf-hr-tt-tm: var(
2355
+ --_ctm-mob-dn-dn-se-im-se-hr-se-tt-tm,
2356
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-tt-tm, var(--_ctm-dn-dn-se-im-se-hr-se-tt-tm))
2357
+ );
2358
+ --_sf-hr-wd-wp: var(
2359
+ --_ctm-mob-dn-dn-se-im-se-hr-se-wd-wp,
2360
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-wd-wp, var(--_ctm-dn-dn-se-im-se-hr-se-wd-wp))
2361
+ );
2362
+ --_sf-hr-wd-bk: var(
2363
+ --_ctm-mob-dn-dn-se-im-se-hr-se-wd-bk,
2364
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-wd-bk, var(--_ctm-dn-dn-se-im-se-hr-se-wd-bk))
2365
+ );
2366
+ --_sf-hr-ft-se: var(
2367
+ --_ctm-mob-dn-dn-se-im-se-hr-se-ft-se,
2368
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-se, var(--_ctm-dn-dn-se-im-se-hr-se-ft-se))
2369
+ );
2370
+ --_sf-hr-ft-wt: var(
2371
+ --_ctm-mob-dn-dn-se-im-se-hr-se-ft-wt,
2372
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-wt, var(--_ctm-dn-dn-se-im-se-hr-se-ft-wt))
2373
+ );
2374
+ --_sf-hr-ft-se-ic: var(
2375
+ --_ctm-mob-dn-dn-se-im-se-hr-se-ft-se-ic,
2376
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-se-ic, var(--_ctm-dn-dn-se-im-se-hr-se-ft-se-ic))
2377
+ );
2378
+ --_sf-hr-tt-an: var(
2379
+ --_ctm-mob-dn-dn-se-im-se-hr-se-tt-an,
2380
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-tt-an, var(--_ctm-dn-dn-se-im-se-hr-se-tt-an))
2381
+ );
2382
+ --_sf-hr-lr-sg: var(
2383
+ --_ctm-mob-dn-dn-se-im-se-hr-se-lr-sg,
2384
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-lr-sg, var(--_ctm-dn-dn-se-im-se-hr-se-lr-sg))
2385
+ );
2386
+ --_sf-hr-le-ht: var(
2387
+ --_ctm-mob-dn-dn-se-im-se-hr-se-le-ht,
2388
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-le-ht, var(--_ctm-dn-dn-se-im-se-hr-se-le-ht))
2389
+ );
2390
+
2391
+ --_sf-hr-ue: var(
2392
+ --_ctm-mob-dn-dn-se-im-se-hr-se-ue,
2393
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-ue, var(--_ctm-dn-dn-se-im-se-hr-se-ue))
2394
+ );
2182
2395
  }
2183
2396
 
2184
2397
  .option[data-selected="true"] {
2185
2398
  --_sf-sd-txt-tr: prepareMediaVariable(--_ctm-dn-dn-se-im-se-sd-se-tt-tm);
2186
- --_sf-sd-bd-cr: var(--_ctm-mob-dn-dn-se-im-se-sd-se-bd-cr,
2187
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-bd-cr, var(--_ctm-dn-dn-se-im-se-sd-se-bd-cr)));
2188
- --_sf-sd-br-cr: var(--_ctm-mob-dn-dn-se-im-se-sd-se-br-cr,
2189
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-cr, var(--_ctm-dn-dn-se-im-se-sd-se-br-cr)));
2190
- --_sf-sd-br-se: var(--_ctm-mob-dn-dn-se-im-se-sd-se-br-se,
2191
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-se, var(--_ctm-dn-dn-se-im-se-sd-se-br-se)));
2192
- --_sf-sd-br-rs: var(--_ctm-mob-dn-dn-se-im-se-sd-se-br-rs,
2193
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-rs, var(--_ctm-dn-dn-se-im-se-sd-se-br-rs)));
2194
- --_sf-sd-br-wh: var(--_ctm-mob-dn-dn-se-im-se-sd-se-br-wh,
2195
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-wh, var(--_ctm-dn-dn-se-im-se-sd-se-br-wh)));
2399
+ --_sf-sd-bd-cr: var(
2400
+ --_ctm-mob-dn-dn-se-im-se-sd-se-bd-cr,
2401
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-bd-cr, var(--_ctm-dn-dn-se-im-se-sd-se-bd-cr))
2402
+ );
2403
+ --_sf-sd-br-cr: var(
2404
+ --_ctm-mob-dn-dn-se-im-se-sd-se-br-cr,
2405
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-cr, var(--_ctm-dn-dn-se-im-se-sd-se-br-cr))
2406
+ );
2407
+ --_sf-sd-br-se: var(
2408
+ --_ctm-mob-dn-dn-se-im-se-sd-se-br-se,
2409
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-se, var(--_ctm-dn-dn-se-im-se-sd-se-br-se))
2410
+ );
2411
+ --_sf-sd-br-rs: var(
2412
+ --_ctm-mob-dn-dn-se-im-se-sd-se-br-rs,
2413
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-rs, var(--_ctm-dn-dn-se-im-se-sd-se-br-rs))
2414
+ );
2415
+ --_sf-sd-br-wh: var(
2416
+ --_ctm-mob-dn-dn-se-im-se-sd-se-br-wh,
2417
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-wh, var(--_ctm-dn-dn-se-im-se-sd-se-br-wh))
2418
+ );
2196
2419
  // new
2197
- --_sf-sd-sw-ae: var(--_ctm-mob-dn-dn-se-im-se-sd-se-sw-ae,
2198
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-ae, var(--_ctm-dn-dn-se-im-se-sd-se-sw-ae)));
2199
- --_sf-sd-sw-br: var(--_ctm-mob-dn-dn-se-im-se-sd-se-sw-br,
2200
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-br, var(--_ctm-dn-dn-se-im-se-sd-se-sw-br)));
2201
- --_sf-sd-sw-sd: var(--_ctm-mob-dn-dn-se-im-se-sd-se-sw-sd,
2202
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-sd, var(--_ctm-dn-dn-se-im-se-sd-se-sw-sd)));
2203
- --_sf-sd-sw-cr: var(--_ctm-mob-dn-dn-se-im-se-sd-se-sw-cr,
2204
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-cr, var(--_ctm-dn-dn-se-im-se-sd-se-sw-cr)));
2205
- --_sf-sd-pg: var(--_ctm-mob-dn-dn-se-im-se-sd-se-pg,
2206
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-pg, var(--_ctm-dn-dn-se-im-se-sd-se-pg)));
2207
- --_sf-sd-im-gp: var(--_ctm-mob-dn-dn-se-im-se-sd-se-im-gp,
2208
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-im-gp, var(--_ctm-dn-dn-se-im-se-sd-se-im-gp)));
2420
+ --_sf-sd-sw-ae: var(
2421
+ --_ctm-mob-dn-dn-se-im-se-sd-se-sw-ae,
2422
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-ae, var(--_ctm-dn-dn-se-im-se-sd-se-sw-ae))
2423
+ );
2424
+ --_sf-sd-sw-br: var(
2425
+ --_ctm-mob-dn-dn-se-im-se-sd-se-sw-br,
2426
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-br, var(--_ctm-dn-dn-se-im-se-sd-se-sw-br))
2427
+ );
2428
+ --_sf-sd-sw-sd: var(
2429
+ --_ctm-mob-dn-dn-se-im-se-sd-se-sw-sd,
2430
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-sd, var(--_ctm-dn-dn-se-im-se-sd-se-sw-sd))
2431
+ );
2432
+ --_sf-sd-sw-cr: var(
2433
+ --_ctm-mob-dn-dn-se-im-se-sd-se-sw-cr,
2434
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-cr, var(--_ctm-dn-dn-se-im-se-sd-se-sw-cr))
2435
+ );
2436
+ --_sf-sd-pg: var(
2437
+ --_ctm-mob-dn-dn-se-im-se-sd-se-pg,
2438
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-pg, var(--_ctm-dn-dn-se-im-se-sd-se-pg))
2439
+ );
2440
+ --_sf-sd-im-gp: var(
2441
+ --_ctm-mob-dn-dn-se-im-se-sd-se-im-gp,
2442
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-im-gp, var(--_ctm-dn-dn-se-im-se-sd-se-im-gp))
2443
+ );
2209
2444
 
2210
2445
  // for font
2211
2446
 
2212
- --_sf-sd-cr: var(--_ctm-mob-dn-dn-se-im-se-sd-se-cr,
2213
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-cr, var(--_ctm-dn-dn-se-im-se-sd-se-cr)));
2214
- --_sf-sd-ft-fy: var(--_ctm-mob-dn-dn-se-im-se-sd-se-ft-fy,
2215
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-fy, var(--_ctm-dn-dn-se-im-se-sd-se-ft-fy)));
2216
- --_sf-sd-tt-tm: var(--_ctm-mob-dn-dn-se-im-se-sd-se-tt-tm,
2217
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-tt-tm, var(--_ctm-dn-dn-se-im-se-sd-se-tt-tm)));
2218
- --_sf-sd-wd-wp: var(--_ctm-mob-dn-dn-se-im-se-sd-se-wd-wp,
2219
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-wd-wp, var(--_ctm-dn-dn-se-im-se-sd-se-wd-wp)));
2220
- --_sf-sd-wd-bk: var(--_ctm-mob-dn-dn-se-im-se-sd-se-wd-bk,
2221
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-wd-bk, var(--_ctm-dn-dn-se-im-se-sd-se-wd-bk)));
2222
- --_sf-sd-ft-se: var(--_ctm-mob-dn-dn-se-im-se-sd-se-ft-se,
2223
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-se, var(--_ctm-dn-dn-se-im-se-sd-se-ft-se)));
2224
- --_sf-sd-ft-wt: var(--_ctm-mob-dn-dn-se-im-se-sd-se-ft-wt,
2225
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-wt, var(--_ctm-dn-dn-se-im-se-sd-se-ft-wt)));
2226
- --_sf-sd-ft-se-ic: var(--_ctm-mob-dn-dn-se-im-se-sd-se-ft-se-ic,
2227
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-se-ic, var(--_ctm-dn-dn-se-im-se-sd-se-ft-se-ic)));
2228
- --_sf-sd-tt-an: var(--_ctm-mob-dn-dn-se-im-se-sd-se-tt-an,
2229
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-tt-an, var(--_ctm-dn-dn-se-im-se-sd-se-tt-an)));
2230
- --_sf-sd-lr-sg: var(--_ctm-mob-dn-dn-se-im-se-sd-se-lr-sg,
2231
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-lr-sg, var(--_ctm-dn-dn-se-im-se-sd-se-lr-sg)));
2232
- --_sf-sd-le-ht: var(--_ctm-mob-dn-dn-se-im-se-sd-se-le-ht,
2233
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-le-ht, var(--_ctm-dn-dn-se-im-se-sd-se-le-ht)));
2234
-
2235
- --_sf-sd-ue: var(--_ctm-mob-dn-dn-se-im-se-sd-se-ue,
2236
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-ue, var(--_ctm-dn-dn-se-im-se-sd-se-ue)));
2447
+ --_sf-sd-cr: var(
2448
+ --_ctm-mob-dn-dn-se-im-se-sd-se-cr,
2449
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-cr, var(--_ctm-dn-dn-se-im-se-sd-se-cr))
2450
+ );
2451
+ --_sf-sd-ft-fy: var(
2452
+ --_ctm-mob-dn-dn-se-im-se-sd-se-ft-fy,
2453
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-fy, var(--_ctm-dn-dn-se-im-se-sd-se-ft-fy))
2454
+ );
2455
+ --_sf-sd-tt-tm: var(
2456
+ --_ctm-mob-dn-dn-se-im-se-sd-se-tt-tm,
2457
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-tt-tm, var(--_ctm-dn-dn-se-im-se-sd-se-tt-tm))
2458
+ );
2459
+ --_sf-sd-wd-wp: var(
2460
+ --_ctm-mob-dn-dn-se-im-se-sd-se-wd-wp,
2461
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-wd-wp, var(--_ctm-dn-dn-se-im-se-sd-se-wd-wp))
2462
+ );
2463
+ --_sf-sd-wd-bk: var(
2464
+ --_ctm-mob-dn-dn-se-im-se-sd-se-wd-bk,
2465
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-wd-bk, var(--_ctm-dn-dn-se-im-se-sd-se-wd-bk))
2466
+ );
2467
+ --_sf-sd-ft-se: var(
2468
+ --_ctm-mob-dn-dn-se-im-se-sd-se-ft-se,
2469
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-se, var(--_ctm-dn-dn-se-im-se-sd-se-ft-se))
2470
+ );
2471
+ --_sf-sd-ft-wt: var(
2472
+ --_ctm-mob-dn-dn-se-im-se-sd-se-ft-wt,
2473
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-wt, var(--_ctm-dn-dn-se-im-se-sd-se-ft-wt))
2474
+ );
2475
+ --_sf-sd-ft-se-ic: var(
2476
+ --_ctm-mob-dn-dn-se-im-se-sd-se-ft-se-ic,
2477
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-se-ic, var(--_ctm-dn-dn-se-im-se-sd-se-ft-se-ic))
2478
+ );
2479
+ --_sf-sd-tt-an: var(
2480
+ --_ctm-mob-dn-dn-se-im-se-sd-se-tt-an,
2481
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-tt-an, var(--_ctm-dn-dn-se-im-se-sd-se-tt-an))
2482
+ );
2483
+ --_sf-sd-lr-sg: var(
2484
+ --_ctm-mob-dn-dn-se-im-se-sd-se-lr-sg,
2485
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-lr-sg, var(--_ctm-dn-dn-se-im-se-sd-se-lr-sg))
2486
+ );
2487
+ --_sf-sd-le-ht: var(
2488
+ --_ctm-mob-dn-dn-se-im-se-sd-se-le-ht,
2489
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-le-ht, var(--_ctm-dn-dn-se-im-se-sd-se-le-ht))
2490
+ );
2491
+
2492
+ --_sf-sd-ue: var(
2493
+ --_ctm-mob-dn-dn-se-im-se-sd-se-ue,
2494
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-ue, var(--_ctm-dn-dn-se-im-se-sd-se-ue))
2495
+ );
2237
2496
  }
2238
2497
 
2239
2498
  .option {
@@ -2241,8 +2500,10 @@ $imagePositions: (
2241
2500
  display: flex;
2242
2501
  align-items: center;
2243
2502
  cursor: pointer;
2244
- justify-content: var(--_ctm-mob-dn-dn-se-lt-ss-at,
2245
- var(--_ctm-tab-dn-dn-se-lt-ss-at, var(--_ctm-dn-dn-se-lt-ss-at)));
2503
+ justify-content: var(
2504
+ --_ctm-mob-dn-dn-se-lt-ss-at,
2505
+ var(--_ctm-tab-dn-dn-se-lt-ss-at, var(--_ctm-dn-dn-se-lt-ss-at))
2506
+ );
2246
2507
 
2247
2508
  position: relative;
2248
2509
  box-sizing: border-box;
@@ -2252,57 +2513,86 @@ $imagePositions: (
2252
2513
  padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-pg));
2253
2514
  border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-cr));
2254
2515
 
2255
- background-color: var(--_sf-hr-bd-cr,
2256
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-bd-cr));
2516
+ background-color: var(
2517
+ --_sf-hr-bd-cr,
2518
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-bd-cr)
2519
+ );
2257
2520
  border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-se));
2258
2521
  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-rs));
2259
2522
  border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-wh));
2260
2523
 
2261
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-cr));
2262
-
2524
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-ae))
2525
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-br))
2526
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-sd))
2527
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-cr));
2263
2528
  //
2264
2529
  &[data-selected="true"] {
2265
- border-color: var(--_sf-sd-br-cr,
2266
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-cr));
2267
-
2268
- background-color: var(--_sf-sd-bd-cr,
2269
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-bd-cr));
2270
- border-style: var(--_sf-sd-br-se,
2271
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-se));
2272
- border-width: var(--_sf-sd-br-wh,
2273
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-wh));
2274
- border-radius: var(--_sf-sd-br-rs,
2275
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-rs));
2276
- box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-ae)) var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-br)) var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-sd)) var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-cr));
2277
-
2530
+ border-color: var(
2531
+ --_sf-sd-br-cr,
2532
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-cr)
2533
+ );
2534
+
2535
+ background-color: var(
2536
+ --_sf-sd-bd-cr,
2537
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-bd-cr)
2538
+ );
2539
+ border-style: var(
2540
+ --_sf-sd-br-se,
2541
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-se)
2542
+ );
2543
+ border-width: var(
2544
+ --_sf-sd-br-wh,
2545
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-wh)
2546
+ );
2547
+ border-radius: var(
2548
+ --_sf-sd-br-rs,
2549
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-rs)
2550
+ );
2551
+ box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-ae))
2552
+ var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-br))
2553
+ var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-sd))
2554
+ var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-cr));
2278
2555
  .language__name {
2279
2556
  color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-cr));
2280
- font-family: var(--_sf-sd-ft-fy,
2281
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-fy));
2557
+ font-family: var(
2558
+ --_sf-sd-ft-fy,
2559
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-fy)
2560
+ );
2282
2561
  word-wrap: var(--_sf-sd-wd-wp, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-wd-wp));
2283
- word-break: var(--_sf-sd-wd-bk,
2284
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-wd-bk));
2562
+ word-break: var(
2563
+ --_sf-sd-wd-bk,
2564
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-wd-bk)
2565
+ );
2285
2566
  font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se));
2286
2567
  font-weight: 400;
2287
2568
  // font-weight: var(
2288
2569
  // --_sf-sd-ft-wt,
2289
2570
  // prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-wt)
2290
2571
  // );
2291
- font-style: var(--_sf-sd-ft-se-ic,
2292
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se-ic));
2293
- text-align: var(--_sf-sd-tt-an,
2294
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-an));
2295
- letter-spacing: var(--_sf-sd-lr-sg,
2296
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-lr-sg));
2297
- line-height: var(--_sf-sd-le-ht,
2298
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-le-ht-dc));
2572
+ font-style: var(
2573
+ --_sf-sd-ft-se-ic,
2574
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se-ic)
2575
+ );
2576
+ text-align: var(
2577
+ --_sf-sd-tt-an,
2578
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-an)
2579
+ );
2580
+ letter-spacing: var(
2581
+ --_sf-sd-lr-sg,
2582
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-lr-sg)
2583
+ );
2584
+ line-height: var(
2585
+ --_sf-sd-le-ht,
2586
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-le-ht-dc)
2587
+ );
2299
2588
  text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ue));
2300
- text-transform: var(--_sf-sd-txt-tr,
2301
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-tm));
2589
+ text-transform: var(
2590
+ --_sf-sd-txt-tr,
2591
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-tm)
2592
+ );
2302
2593
  }
2303
2594
  }
2304
2595
  }
2305
-
2306
2596
  &[data-flex-direction="column"] {
2307
2597
  .language__name {
2308
2598
  // white-space: unset;
@@ -2312,11 +2602,9 @@ $imagePositions: (
2312
2602
  text-overflow: ellipsis;
2313
2603
  }
2314
2604
  }
2315
-
2316
2605
  &[data-flex-direction="row"] {
2317
2606
  overflow-x: auto;
2318
2607
  }
2319
-
2320
2608
  // Both offsets used to be measured off `--_ctm-dn-dn-se-lt-ss-gp-bn-is`, which
2321
2609
  // belongs to the commented-out `dropdownStyle.layoutSettings` and is therefore
2322
2610
  // never emitted. The calc was invalid, so the divider never positioned at all.
@@ -2331,16 +2619,12 @@ $imagePositions: (
2331
2619
  content: "";
2332
2620
  position: absolute;
2333
2621
  top: 0;
2334
- bottom: 0;
2335
- /* For full height divider */
2622
+ bottom: 0; /* For full height divider */
2336
2623
  right: dividerGapOffset(--_ctm-dn-dn-se-wt-dn-im-gp, --_ctm-dn-dn-se-wt-se-dr-wt);
2337
- width: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-dr-wt);
2338
- /* Divider thickness */
2339
- background-color: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-dr-cr);
2340
- /* Divider color */
2624
+ width: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-dr-wt); /* Divider thickness */
2625
+ background-color: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-dr-cr); /* Divider color */
2341
2626
  }
2342
2627
  }
2343
-
2344
2628
  &[data-flex-direction="column"] {
2345
2629
  .option:not(:last-child) {
2346
2630
  @include dividerGapReserve(--_ctm-dn-dn-se-wt-se-dr-wt);
@@ -2363,7 +2647,6 @@ $imagePositions: (
2363
2647
  display: flex;
2364
2648
  align-items: center;
2365
2649
  position: relative;
2366
-
2367
2650
  .language__name {
2368
2651
  // No caret clearance needed anymore: the caret is an in-flow sibling, spaced
2369
2652
  // by Widget Style > Item Gap.
@@ -2395,15 +2678,21 @@ $imagePositions: (
2395
2678
  word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-wd-bk));
2396
2679
  font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se));
2397
2680
  font-weight: 400;
2398
- font-style: var(--_sf-hr-ft-se-ic,
2399
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se-ic));
2681
+ font-style: var(
2682
+ --_sf-hr-ft-se-ic,
2683
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se-ic)
2684
+ );
2400
2685
  text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-an));
2401
- letter-spacing: var(--_sf-hr-lr-sg,
2402
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-lr-sg));
2686
+ letter-spacing: var(
2687
+ --_sf-hr-lr-sg,
2688
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-lr-sg)
2689
+ );
2403
2690
  line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-le-ht));
2404
2691
  text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ue));
2405
- text-transform: var(--_sf-hr-txt-tr,
2406
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-tm));
2692
+ text-transform: var(
2693
+ --_sf-hr-txt-tr,
2694
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-tm)
2695
+ );
2407
2696
  white-space: nowrap;
2408
2697
 
2409
2698
  // Item Style clamps the option label. `white-space: nowrap` above would stop
@@ -2425,41 +2714,63 @@ $imagePositions: (
2425
2714
  width: 100%;
2426
2715
  // padding: 8px 12px;
2427
2716
  text-align: left;
2428
- font-family: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-ft-fy,
2429
- prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-fy));
2430
- word-wrap: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-wd-wp,
2431
- prepareMediaVariable(--_ctm-dn-dn-se-wt-se-wd-wp));
2432
- word-break: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-wd-bk,
2433
- prepareMediaVariable(--_ctm-dn-dn-se-wt-se-wd-bk));
2434
- font-size: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-ft-se,
2435
- prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-se));
2436
- color: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-cr,
2437
- prepareMediaVariable(--_ctm-dn-dn-se-wt-se-cr));
2438
- font-weight: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-ft-wt,
2439
- prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-wt));
2440
- font-style: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-ft-se-ic,
2441
- prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-se-ic));
2442
- text-decoration: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-ue,
2443
- prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ue));
2444
- text-align: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-tt-an,
2445
- prepareMediaVariable(--_ctm-dn-dn-se-wt-se-tt-an));
2446
- letter-spacing: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-lr-sg,
2447
- prepareMediaVariable(--_ctm-dn-dn-se-wt-se-lr-sg));
2448
- line-height: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-le-ht,
2449
- prepareMediaVariable(--_ctm-dn-dn-se-wt-se-le-ht));
2450
- text-transform: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-tt-tm,
2451
- prepareMediaVariable(--_ctm-dn-dn-se-wt-se-tt-tm));
2717
+ font-family: prepareMediaVariable(
2718
+ --_ctm-dn-dn-se-wt-pr-tt-ft-fy,
2719
+ prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-fy)
2720
+ );
2721
+ word-wrap: prepareMediaVariable(
2722
+ --_ctm-dn-dn-se-wt-pr-tt-wd-wp,
2723
+ prepareMediaVariable(--_ctm-dn-dn-se-wt-se-wd-wp)
2724
+ );
2725
+ word-break: prepareMediaVariable(
2726
+ --_ctm-dn-dn-se-wt-pr-tt-wd-bk,
2727
+ prepareMediaVariable(--_ctm-dn-dn-se-wt-se-wd-bk)
2728
+ );
2729
+ font-size: prepareMediaVariable(
2730
+ --_ctm-dn-dn-se-wt-pr-tt-ft-se,
2731
+ prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-se)
2732
+ );
2733
+ color: prepareMediaVariable(
2734
+ --_ctm-dn-dn-se-wt-pr-tt-cr,
2735
+ prepareMediaVariable(--_ctm-dn-dn-se-wt-se-cr)
2736
+ );
2737
+ font-weight: prepareMediaVariable(
2738
+ --_ctm-dn-dn-se-wt-pr-tt-ft-wt,
2739
+ prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-wt)
2740
+ );
2741
+ font-style: prepareMediaVariable(
2742
+ --_ctm-dn-dn-se-wt-pr-tt-ft-se-ic,
2743
+ prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-se-ic)
2744
+ );
2745
+ text-decoration: prepareMediaVariable(
2746
+ --_ctm-dn-dn-se-wt-pr-tt-ue,
2747
+ prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ue)
2748
+ );
2749
+ text-align: prepareMediaVariable(
2750
+ --_ctm-dn-dn-se-wt-pr-tt-tt-an,
2751
+ prepareMediaVariable(--_ctm-dn-dn-se-wt-se-tt-an)
2752
+ );
2753
+ letter-spacing: prepareMediaVariable(
2754
+ --_ctm-dn-dn-se-wt-pr-tt-lr-sg,
2755
+ prepareMediaVariable(--_ctm-dn-dn-se-wt-se-lr-sg)
2756
+ );
2757
+ line-height: prepareMediaVariable(
2758
+ --_ctm-dn-dn-se-wt-pr-tt-le-ht,
2759
+ prepareMediaVariable(--_ctm-dn-dn-se-wt-se-le-ht)
2760
+ );
2761
+ text-transform: prepareMediaVariable(
2762
+ --_ctm-dn-dn-se-wt-pr-tt-tt-tm,
2763
+ prepareMediaVariable(--_ctm-dn-dn-se-wt-se-tt-tm)
2764
+ );
2452
2765
 
2453
2766
  &#{$overflowSelector} {
2454
2767
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
2455
2768
  }
2456
2769
  }
2457
-
2458
2770
  .est__dropdown__main {
2459
2771
  position: relative;
2460
2772
  width: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-wh);
2461
2773
  margin-top: 0px;
2462
-
2463
2774
  label {
2464
2775
  font-size: 14px;
2465
2776
  color: var(--_gray-700);
@@ -2484,7 +2795,6 @@ $imagePositions: (
2484
2795
  &.open .list {
2485
2796
  display: flex;
2486
2797
  }
2487
-
2488
2798
  .est__dropdown__button {
2489
2799
  display: flex;
2490
2800
  align-items: center;
@@ -2510,12 +2820,10 @@ $imagePositions: (
2510
2820
  display: flex;
2511
2821
  flex: 0 0 auto;
2512
2822
  transition: all 200ms ease-in;
2513
-
2514
2823
  &.open {
2515
2824
  transform: rotate(180deg);
2516
2825
  transform: all 200ms ease-in;
2517
2826
  }
2518
-
2519
2827
  &.close {
2520
2828
  transform: rotate(0deg);
2521
2829
  transform: all 200ms ease-in;
@@ -2548,7 +2856,10 @@ $imagePositions: (
2548
2856
  // padding: 2px;
2549
2857
  // border-radius: 4px;
2550
2858
  // border: 1px solid var(--_gray-300);
2551
- box-shadow: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-ae) prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-br) prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-sd) prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-cr);
2859
+ box-shadow: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-ae)
2860
+ prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-br)
2861
+ prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-sd)
2862
+ prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-cr);
2552
2863
 
2553
2864
  &.top {
2554
2865
  bottom: 100%;
@@ -2558,7 +2869,6 @@ $imagePositions: (
2558
2869
  .option {
2559
2870
  cursor: pointer;
2560
2871
  }
2561
-
2562
2872
  &.show__panel {
2563
2873
  animation: slideUp 0.4s ease-in-out;
2564
2874
  }
@@ -2567,14 +2877,12 @@ $imagePositions: (
2567
2877
  animation: slideDown 0.4s ease-in-out;
2568
2878
  pointer-events: none;
2569
2879
  }
2570
-
2571
2880
  &:has(.no__records__found) {
2572
2881
  padding: 0px;
2573
2882
  }
2574
2883
  }
2575
2884
  }
2576
2885
  }
2577
-
2578
2886
  .no__records__found {
2579
2887
  padding: 12px;
2580
2888
  color: var(--_gray-700);
@@ -2585,4 +2893,4 @@ $imagePositions: (
2585
2893
  }
2586
2894
  }
2587
2895
  }
2588
- }
2896
+ }