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

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 (124) hide show
  1. package/dist/add-existing-form.scss +13 -5
  2. package/dist/add-order.scss +126 -236
  3. package/dist/add-products-tab-details.scss +1048 -2097
  4. package/dist/add-products-tab.scss +666 -1204
  5. package/dist/allocation-header-quota-details.scss +189 -407
  6. package/dist/allocationDetails.scss +1661 -2143
  7. package/dist/allocations-quota-details.scss +159 -323
  8. package/dist/allocations.scss +475 -793
  9. package/dist/amount-estimator.scss +405 -743
  10. package/dist/badge.scss +43 -18
  11. package/dist/brand-basic-elements.scss +76 -124
  12. package/dist/brand.scss +28 -55
  13. package/dist/breadcrumbs.scss +356 -718
  14. package/dist/builder.js +1 -1
  15. package/dist/bulk-variant-picker.scss +1128 -2027
  16. package/dist/bundle.scss +841 -1477
  17. package/dist/bundleDetails.scss +3774 -5072
  18. package/dist/button.scss +79 -103
  19. package/dist/buy-for-tab-container.scss +77 -106
  20. package/dist/buyForHeaders.scss +1722 -2976
  21. package/dist/cart-details.scss +481 -1012
  22. package/dist/cart-summary.scss +557 -1149
  23. package/dist/cart-wrapper.scss +37 -79
  24. package/dist/cart.scss +117 -225
  25. package/dist/cartAttributes.scss +416 -735
  26. package/dist/category-groups-element.scss +127 -108
  27. package/dist/category-groups-product-grid.scss +120 -147
  28. package/dist/category-groups-product-image.scss +1162 -1457
  29. package/dist/category-groups-product-options.scss +613 -680
  30. package/dist/category-groups-product-price.scss +1966 -3244
  31. package/dist/category-groups-quota-details.scss +210 -464
  32. package/dist/category.scss +26 -50
  33. package/dist/checkout.scss +24 -16
  34. package/dist/confirm-modal.scss +22 -2
  35. package/dist/container.scss +32 -54
  36. package/dist/countdown.scss +255 -443
  37. package/dist/coupon.scss +351 -710
  38. package/dist/default-dropdown.scss +12 -1
  39. package/dist/embroider-template-1-v2.scss +123 -172
  40. package/dist/embroider-template-1.scss +68 -104
  41. package/dist/embroidery.scss +30 -31
  42. package/dist/employee-bulk-order.scss +418 -142
  43. package/dist/faq.scss +228 -408
  44. package/dist/filter-results.scss +125 -265
  45. package/dist/filters.scss +900 -1797
  46. package/dist/gallery-slider-temp.scss +432 -750
  47. package/dist/global-styles.scss +218 -198
  48. package/dist/grid.scss +25 -33
  49. package/dist/hotspot.scss +68 -115
  50. package/dist/image-temp.scss +21 -20
  51. package/dist/item-stock.scss +9 -16
  52. package/dist/kitDetails.scss +2719 -4299
  53. package/dist/kits.scss +24 -19
  54. package/dist/language-selector.scss +211 -361
  55. package/dist/last-x-orders.scss +95 -174
  56. package/dist/layouter-item.scss +75 -103
  57. package/dist/layouter-pro-item.scss +89 -95
  58. package/dist/layouter-pro.scss +87 -92
  59. package/dist/layouter.scss +383 -445
  60. package/dist/light-box-v2.scss +89 -104
  61. package/dist/login.scss +287 -566
  62. package/dist/map.scss +221 -368
  63. package/dist/marchandiserSets.scss +95 -104
  64. package/dist/mega-menu-container.scss +96 -109
  65. package/dist/mega-menu.scss +624 -731
  66. package/dist/menu-item.scss +2 -2
  67. package/dist/menu-v2.scss +507 -619
  68. package/dist/multi-select-dropdown.scss +27 -3
  69. package/dist/my-templates.scss +38 -9
  70. package/dist/option-bar.scss +215 -375
  71. package/dist/order-status.scss +646 -1117
  72. package/dist/overflow-module.scss +6 -7
  73. package/dist/past-orders.scss +118 -149
  74. package/dist/payment-methods.scss +46 -30
  75. package/dist/pickup-locations.scss +558 -1118
  76. package/dist/position-module.scss +20 -17
  77. package/dist/prefix-list.scss +21 -10
  78. package/dist/product-actions.scss +1750 -2055
  79. package/dist/product-basic-elements.scss +108 -169
  80. package/dist/product-highlights.scss +107 -152
  81. package/dist/product-image-bundles.scss +337 -642
  82. package/dist/product-inventory.scss +673 -1357
  83. package/dist/product-labels.scss +84 -105
  84. package/dist/product-options.scss +1117 -1274
  85. package/dist/product-price.scss +1283 -2561
  86. package/dist/product-promotions.scss +1388 -2830
  87. package/dist/product-sizechart.scss +516 -905
  88. package/dist/product.scss +28 -61
  89. package/dist/productDetails.scss +19 -39
  90. package/dist/profile.scss +207 -447
  91. package/dist/quantity-selector.scss +837 -1074
  92. package/dist/quick-inventory-check.scss +95 -174
  93. package/dist/quick-links.scss +55 -133
  94. package/dist/quick-order-pad.scss +218 -271
  95. package/dist/quota-details.scss +152 -282
  96. package/dist/quotes.scss +89 -122
  97. package/dist/repeater-embla-controls.scss +35 -15
  98. package/dist/repeater-grid-toggle.scss +156 -166
  99. package/dist/repeater-item.scss +41 -64
  100. package/dist/repeater.scss +671 -814
  101. package/dist/request-for-quotes.scss +66 -16
  102. package/dist/responsive-behaviour.scss +3 -1
  103. package/dist/rfqs.scss +118 -181
  104. package/dist/scroll.scss +93 -172
  105. package/dist/search.scss +179 -326
  106. package/dist/section.scss +27 -51
  107. package/dist/shipping-payments.scss +198 -58
  108. package/dist/simple-list.scss +74 -164
  109. package/dist/social.scss +80 -145
  110. package/dist/sort.scss +11 -19
  111. package/dist/stack.scss +23 -34
  112. package/dist/static-global.scss +44 -26
  113. package/dist/stockStatus.scss +11 -19
  114. package/dist/store-locations.scss +577 -1105
  115. package/dist/tab-container.scss +81 -108
  116. package/dist/table-common.scss +217 -408
  117. package/dist/table.scss +271 -502
  118. package/dist/text-temp.scss +8 -7
  119. package/dist/theme-classes.scss +17 -13
  120. package/dist/uom-selector.scss +489 -949
  121. package/dist/user-elements.scss +529 -837
  122. package/dist/variant-picker.scss +1281 -2555
  123. package/dist/volume-pricing.scss +541 -1037
  124. package/package.json +1 -1
@@ -41,24 +41,16 @@ $imagePositions: (
41
41
  // )
42
42
  // )
43
43
  // );
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
- );
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)))));
50
46
 
51
47
  height: auto;
52
48
 
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
- );
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))))));
60
52
 
61
- & > div {
53
+ &>div {
62
54
  &.wrapper {
63
55
  width: 100%;
64
56
  }
@@ -102,39 +94,18 @@ $imagePositions: (
102
94
  gap: prepareMediaVariable(--_ctm-lt-qa-im-sg);
103
95
 
104
96
  &[data-control-type="Bottom"][data-slider-control="Arrows"] {
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
- );
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));
114
99
  }
115
100
 
116
101
  &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
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
- );
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));
126
104
  }
127
105
 
128
106
  &[data-control-type="Bottom"][data-slider-control="Dots"] {
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
- );
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));
138
109
  }
139
110
 
140
111
  .embla__slide {
@@ -145,11 +116,10 @@ $imagePositions: (
145
116
  }
146
117
  }
147
118
  }
119
+
148
120
  &:not([data-display-style="Column"]) {
149
121
  .embla__container {
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
- );
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))));
153
123
  }
154
124
  }
155
125
 
@@ -161,20 +131,25 @@ $imagePositions: (
161
131
  width: 100%;
162
132
  justify-content: space-between;
163
133
  transform: translate(-50%, -50%);
134
+
164
135
  // padding-left: 20px;
165
136
  &[data-control-type="Side"] {
137
+
166
138
  .left-button,
167
139
  .right-button {
168
140
  background-color: transparent;
169
141
  }
170
142
  }
143
+
171
144
  &[data-background-shape="Round"] {
145
+
172
146
  .left-button,
173
147
  .right-button {
174
148
  background-color: #f2f5f5;
175
149
  box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
176
150
  }
177
151
  }
152
+
178
153
  &[data-control-type="Bottom-Overflow"] {
179
154
  transform: translateX(-50%);
180
155
  width: 100%;
@@ -183,6 +158,7 @@ $imagePositions: (
183
158
  top: unset;
184
159
  bottom: 6px;
185
160
  }
161
+
186
162
  &[data-control-type="Bottom"] {
187
163
  transform: unset;
188
164
  position: static;
@@ -191,18 +167,15 @@ $imagePositions: (
191
167
  gap: 12px;
192
168
  margin-top: 10px;
193
169
  }
170
+
194
171
  .left-button {
195
172
  padding: 10px;
196
173
  border-radius: 50%;
197
174
  border: none;
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
- );
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)));
206
179
 
207
180
  display: flex;
208
181
  align-items: center;
@@ -210,6 +183,7 @@ $imagePositions: (
210
183
  cursor: pointer;
211
184
  outline: none;
212
185
  margin-left: 12px;
186
+
213
187
  &:disabled {
214
188
  & svg {
215
189
  path {
@@ -218,17 +192,14 @@ $imagePositions: (
218
192
  }
219
193
  }
220
194
  }
195
+
221
196
  .right-button {
222
197
  border-radius: 50%;
223
198
  border: none;
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
- );
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)));
232
203
 
233
204
  display: flex;
234
205
  align-items: center;
@@ -246,30 +217,19 @@ $imagePositions: (
246
217
  }
247
218
  }
248
219
  }
220
+
249
221
  .icon {
250
222
  display: flex;
251
223
 
252
224
  svg {
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
- );
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);
267
229
 
268
230
  path {
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
- );
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)));
273
233
  }
274
234
  }
275
235
  }
@@ -280,12 +240,14 @@ $imagePositions: (
280
240
  width: calc(100% - 60px);
281
241
  margin-inline: auto;
282
242
  }
243
+
283
244
  .left-button {
284
245
  position: absolute;
285
246
  left: 0;
286
247
  top: 50%;
287
248
  transform: translateY(-50%);
288
249
  }
250
+
289
251
  .right-button {
290
252
  position: absolute;
291
253
 
@@ -293,6 +255,7 @@ $imagePositions: (
293
255
  top: 50%;
294
256
  transform: translateY(-50%);
295
257
  }
258
+
296
259
  @media (max-width: 1024px) {
297
260
  .embla__viewport {
298
261
  width: calc(100% - 40px);
@@ -303,9 +266,11 @@ $imagePositions: (
303
266
  &[data-thumbnail-placement="top"] {
304
267
  flex-direction: column-reverse;
305
268
  }
269
+
306
270
  &[data-thumbnail-placement="bottom"] {
307
271
  flex-direction: column;
308
272
  }
273
+
309
274
  &[data-thumbnail-placement="left"] {
310
275
  flex-direction: row-reverse;
311
276
 
@@ -319,8 +284,10 @@ $imagePositions: (
319
284
  }
320
285
  }
321
286
  }
287
+
322
288
  &[data-thumbnail-placement="right"] {
323
289
  flex-direction: row;
290
+
324
291
  .embla__thumbs {
325
292
  width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
326
293
 
@@ -332,6 +299,7 @@ $imagePositions: (
332
299
  }
333
300
  }
334
301
  }
302
+
335
303
  .embla__dots {
336
304
  display: flex;
337
305
  flex-wrap: wrap;
@@ -348,14 +316,13 @@ $imagePositions: (
348
316
  transform: translateX(-50%);
349
317
  width: 75%;
350
318
  }
319
+
351
320
  .embla__dot {
352
321
  -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
353
322
  -webkit-appearance: none;
354
323
  appearance: none;
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
- );
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)));
359
326
 
360
327
  touch-action: manipulation;
361
328
  display: inline-flex;
@@ -366,75 +333,56 @@ $imagePositions: (
366
333
  margin: 0;
367
334
  // width: 0.6rem;
368
335
  // height: 0.6rem;
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
- );
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)));
377
340
 
378
341
  display: flex;
379
342
  align-items: center;
380
343
  justify-content: center;
381
344
  border-radius: 50%;
382
345
  }
346
+
383
347
  .embla__dot:after {
384
348
  // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
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
- );
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)));
393
353
 
394
354
  border-radius: 50%;
395
355
  display: flex;
396
356
  align-items: center;
397
357
  content: "";
398
358
  }
359
+
399
360
  .embla__dot--selected:after {
400
361
  box-shadow: inset 0 0 0 1px var(--text-body);
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
- );
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)));
405
364
  }
365
+
406
366
  &[data-slider-control="Pagination Line"] {
407
367
  .embla__dot {
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
- );
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)));
420
374
  border-radius: 6px;
421
375
  }
422
376
 
423
377
  .embla__dot--selected:after {
424
378
  box-shadow: inset 0 0 0 1px var(--text-body);
425
379
  border-radius: 6px;
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
- );
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)));
438
386
  }
439
387
  }
440
388
  }
@@ -459,6 +407,7 @@ $imagePositions: (
459
407
 
460
408
  overflow: hidden;
461
409
  }
410
+
462
411
  .embla__thumbs__container {
463
412
  display: flex;
464
413
  flex-direction: row;
@@ -482,46 +431,33 @@ $imagePositions: (
482
431
  }
483
432
  }
484
433
  }
434
+
485
435
  .user__element__container {
486
436
  display: flex;
487
437
  flex-direction: column;
488
438
 
489
439
  width: 100%;
490
440
  gap: prepareMediaVariable(--_ctm-lt-im-sg);
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
- );
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))));
523
458
 
524
459
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
460
+
525
461
  .user__element__item {
526
462
  position: relative;
527
463
  }
@@ -596,6 +532,7 @@ $imagePositions: (
596
532
  justify-content: space-between;
597
533
  align-items: center;
598
534
  flex-wrap: wrap;
535
+
599
536
  .user_elements_user_name_wrapper {
600
537
  width: unset;
601
538
  align-items: center;
@@ -607,6 +544,7 @@ $imagePositions: (
607
544
  width: unset;
608
545
  flex-wrap: wrap;
609
546
  }
547
+
610
548
  @media (max-width: 767px) {
611
549
  .user_elements_user_data_wrapper {
612
550
  flex-direction: column;
@@ -614,17 +552,21 @@ $imagePositions: (
614
552
  }
615
553
  }
616
554
  }
555
+
617
556
  .user_elements_quota_wrapper {
618
557
  flex-direction: row;
619
558
  align-items: center;
620
559
  flex-wrap: nowrap;
560
+
621
561
  .quota_label_wrapper {
622
562
  flex-shrink: 0;
623
563
  }
564
+
624
565
  .user_elements_user_name_wrapper {
625
566
  flex-direction: row;
626
567
  white-space: nowrap;
627
568
  }
569
+
628
570
  .quote_vertical_scroll_wrapper {
629
571
  flex-direction: row;
630
572
  flex-grow: 1;
@@ -637,6 +579,7 @@ $imagePositions: (
637
579
  width: 100%;
638
580
  }
639
581
  }
582
+
640
583
  // This row divider was drawn unconditionally, so the section's Divider
641
584
  // toggle had nothing to switch off in the maximized layout.
642
585
  &[data-show-divider="true"] {
@@ -654,24 +597,30 @@ $imagePositions: (
654
597
  width: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt);
655
598
  }
656
599
  }
600
+
657
601
  .quota_label {
658
602
  white-space: nowrap;
659
603
  }
604
+
660
605
  .quote_info_wrapper {
661
606
  justify-content: flex-start;
662
607
  align-items: center;
663
608
  }
609
+
664
610
  .embla__container {
665
611
  gap: prepareMediaVariable(--_ctm-lt-qa-im-sg);
666
612
  }
667
613
  }
614
+
668
615
  .user_elements_allowance_wrapper {
669
616
  flex-direction: row;
670
617
  flex-wrap: nowrap;
671
618
  align-items: center;
619
+
672
620
  .allowance_label_wrapper {
673
621
  flex-shrink: 0;
674
622
  }
623
+
675
624
  // Same: gated on the section's own Divider toggle.
676
625
  &[data-show-divider="true"] {
677
626
  .embla__slide:not(:last-child) {
@@ -691,28 +640,34 @@ $imagePositions: (
691
640
  left: unset;
692
641
  }
693
642
  }
643
+
694
644
  .allowance_vertical_scroll_wrapper {
695
645
  width: unset;
696
646
  flex-grow: 1;
697
647
  min-width: 0;
698
648
  }
649
+
699
650
  @media (max-width: 1024px) {
700
651
  .allowance_vertical_scroll_wrapper {
701
652
  width: 100%;
702
653
  }
703
654
  }
655
+
704
656
  .embla__container {
705
657
  gap: prepareMediaVariable(--_ctm-lt-ae-im-sg);
706
658
  }
707
659
  }
660
+
708
661
  .user_elements_user_info_secondary_wrapper {
709
662
  flex-direction: row;
710
663
  justify-content: space-between;
711
664
  align-items: center;
665
+
712
666
  .order_wrapper {
713
667
  justify-content: flex-start;
714
668
  }
715
669
  }
670
+
716
671
  .secondary_vertical_scroll_wrapper {
717
672
  flex-direction: row;
718
673
  width: unset;
@@ -720,9 +675,11 @@ $imagePositions: (
720
675
  align-items: center;
721
676
  width: 100%;
722
677
  gap: prepareMediaVariable(--_ctm-lt-ur-io-sy-im-sg);
678
+
723
679
  @media (max-width: 768px) {
724
680
  flex-wrap: wrap;
725
681
  }
682
+
726
683
  .child {
727
684
  flex-direction: column;
728
685
  justify-content: flex-start;
@@ -734,15 +691,18 @@ $imagePositions: (
734
691
  min-height: 44px;
735
692
  }
736
693
  }
694
+
737
695
  @media (max-width: 1024px) {
738
696
  .user_elements_user_info_wrapper {
739
697
  flex-direction: column;
740
698
  align-items: flex-start;
741
699
  }
700
+
742
701
  .user_elements_quota_wrapper {
743
702
  flex-direction: column;
744
703
  align-items: flex-start;
745
704
  }
705
+
746
706
  .user_elements_allowance_wrapper {
747
707
  flex-direction: column;
748
708
  align-items: flex-start;
@@ -755,20 +715,24 @@ $imagePositions: (
755
715
  display: flex;
756
716
  gap: 48px;
757
717
  margin-left: 32px;
718
+
758
719
  .quota__dtls {
759
720
  display: flex;
760
721
  align-items: center;
761
722
  gap: 8px;
723
+
762
724
  .quota__name {
763
725
  display: flex;
764
726
  flex-direction: column;
765
727
  // align-items: center;
766
728
  gap: 12px;
767
729
  }
730
+
768
731
  .quota__balance {
769
732
  display: flex;
770
733
  gap: 5px;
771
734
  }
735
+
772
736
  .back_slash {
773
737
  color: var(--_gray-300);
774
738
  position: relative;
@@ -776,12 +740,15 @@ $imagePositions: (
776
740
  }
777
741
  }
778
742
  }
743
+
779
744
  &[data-display-type="Horizontal"] {
780
745
  flex-direction: row;
746
+
781
747
  .user__element__item {
782
748
  width: 100%;
783
749
  flex-grow: 1;
784
750
  }
751
+
785
752
  .user__element__item {
786
753
  min-width: 200px;
787
754
  }
@@ -815,8 +782,7 @@ $imagePositions: (
815
782
  border-radius: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-rs);
816
783
  border-style: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-se);
817
784
  border-width: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-wh);
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);
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);
820
786
  gap: prepareMediaVariable(--_ctm-lt-ur-io-im-sg);
821
787
 
822
788
  padding: prepareMediaVariable(--_ctm-dn-ur-io-dn-fl-ad-oy-pg);
@@ -827,22 +793,27 @@ $imagePositions: (
827
793
  // Keeps the avatar and the trailing icon on the name's centre line instead of
828
794
  // stretching them to the row height.
829
795
  align-items: center;
796
+
830
797
  &[data-has-link="true"] {
831
798
  cursor: pointer;
799
+
832
800
  &:hover {
833
801
  color: var(--_primary-500);
834
802
  }
835
803
  }
804
+
836
805
  .user_elements_user_name {
837
806
  display: flex;
838
807
  color: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-cr);
839
808
  font-family: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-fy);
840
809
  word-wrap: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-wd-wp);
841
810
  word-break: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-wd-bk);
811
+
842
812
  &.flex__overflow {
843
813
  white-space: normal;
844
814
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
845
815
  }
816
+
846
817
  font-size: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-se);
847
818
  font-style: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-se-ic);
848
819
  font-weight: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-wt);
@@ -873,17 +844,16 @@ $imagePositions: (
873
844
  border-style: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-br-se);
874
845
  border-width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-br-wh);
875
846
  border-radius: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-br-rs);
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);
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);
880
848
  }
881
849
 
882
850
  .icon {
883
851
  cursor: pointer;
852
+
884
853
  svg {
885
854
  width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-in-se);
886
855
  height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-in-se);
856
+
887
857
  path {
888
858
  stroke: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-in-c1);
889
859
  // Overrides the stroke-width presentation attribute baked into the icon markup.
@@ -914,10 +884,12 @@ $imagePositions: (
914
884
  font-family: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-ft-fy);
915
885
  word-wrap: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-wd-wp);
916
886
  word-break: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-wd-bk);
887
+
917
888
  &.flex__overflow {
918
889
  white-space: normal;
919
890
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
920
891
  }
892
+
921
893
  font-size: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-ft-se);
922
894
  font-style: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-ft-se-ic);
923
895
  font-weight: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-ft-wt);
@@ -929,9 +901,11 @@ $imagePositions: (
929
901
 
930
902
  .icon {
931
903
  cursor: pointer;
904
+
932
905
  svg {
933
906
  width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-in-se);
934
907
  height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-in-se);
908
+
935
909
  path {
936
910
  stroke: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-in-c1);
937
911
  // Overrides the stroke-width presentation attribute baked into the icon markup.
@@ -950,10 +924,12 @@ $imagePositions: (
950
924
  font-family: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-ft-fy);
951
925
  word-wrap: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-wd-wp);
952
926
  word-break: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-wd-bk);
927
+
953
928
  &.flex__overflow {
954
929
  white-space: normal;
955
930
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
956
931
  }
932
+
957
933
  font-size: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-ft-se);
958
934
  font-style: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-ft-se-ic);
959
935
  font-weight: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-ft-wt);
@@ -965,9 +941,11 @@ $imagePositions: (
965
941
 
966
942
  .icon {
967
943
  cursor: pointer;
944
+
968
945
  svg {
969
946
  width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-in-se);
970
947
  height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-in-se);
948
+
971
949
  path {
972
950
  stroke: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-in-c1);
973
951
  // Overrides the stroke-width presentation attribute baked into the icon markup.
@@ -986,10 +964,12 @@ $imagePositions: (
986
964
  font-family: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-fy);
987
965
  word-wrap: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-wd-wp);
988
966
  word-break: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-wd-bk);
967
+
989
968
  &.flex__overflow {
990
969
  white-space: normal;
991
970
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
992
971
  }
972
+
993
973
  font-size: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-se);
994
974
  font-style: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-se-ic);
995
975
  font-weight: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-wt);
@@ -1001,9 +981,11 @@ $imagePositions: (
1001
981
 
1002
982
  .icon {
1003
983
  cursor: pointer;
984
+
1004
985
  svg {
1005
986
  width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-in-se);
1006
987
  height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-in-se);
988
+
1007
989
  path {
1008
990
  stroke: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-in-c1);
1009
991
  // Overrides the stroke-width presentation attribute baked into the icon markup.
@@ -1014,9 +996,11 @@ $imagePositions: (
1014
996
  }
1015
997
  }
1016
998
  }
999
+
1017
1000
  .child {
1018
1001
  position: relative;
1019
1002
  }
1003
+
1020
1004
  &[data-show-divider="true"] {
1021
1005
  .child:not(:last-child)::after {
1022
1006
  content: "";
@@ -1042,6 +1026,7 @@ $imagePositions: (
1042
1026
  margin-block: 0;
1043
1027
  border-radius: 0;
1044
1028
  }
1029
+
1045
1030
  // .user_elements_user_name_wrapper {
1046
1031
  // width: 100%;
1047
1032
  // position: relative;
@@ -1084,9 +1069,9 @@ $imagePositions: (
1084
1069
  border-radius: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-br-rs);
1085
1070
  border-style: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-br-se);
1086
1071
  border-width: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-br-wh);
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);
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);
1089
1073
  gap: prepareMediaVariable(--_ctm-lt-qa-dn-sg);
1074
+
1090
1075
  .quota_label_wrapper {
1091
1076
  display: flex;
1092
1077
  flex-direction: column;
@@ -1101,6 +1086,7 @@ $imagePositions: (
1101
1086
  align-self: flex-start;
1102
1087
  max-width: 100%;
1103
1088
  }
1089
+
1104
1090
  gap: 4px;
1105
1091
 
1106
1092
  .quota_label {
@@ -1111,10 +1097,12 @@ $imagePositions: (
1111
1097
  text-transform: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-tt-tm);
1112
1098
  word-wrap: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-wd-wp);
1113
1099
  word-break: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-wd-bk);
1100
+
1114
1101
  &.flex__overflow {
1115
1102
  white-space: normal;
1116
1103
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1117
1104
  }
1105
+
1118
1106
  font-size: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-ft-se);
1119
1107
  font-style: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-ft-se-ic);
1120
1108
  font-weight: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-ft-wt);
@@ -1123,6 +1111,7 @@ $imagePositions: (
1123
1111
  text-align: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-tt-an);
1124
1112
  text-decoration: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-ue);
1125
1113
  }
1114
+
1126
1115
  .quota_single_profile_name {
1127
1116
  display: flex;
1128
1117
  align-items: center;
@@ -1143,6 +1132,7 @@ $imagePositions: (
1143
1132
  }
1144
1133
 
1145
1134
  .quote_item_wrapper {
1135
+
1146
1136
  // Set only on the storefront, where clicking a quota row selects that
1147
1137
  // allocation and its profile. Builder/preview rows are dummy data.
1148
1138
  &[data-is-clickable="true"] {
@@ -1161,6 +1151,7 @@ $imagePositions: (
1161
1151
  // so a long quota name pushed the row out of the widget instead of wrapping
1162
1152
  // inside it.
1163
1153
  min-width: 0;
1154
+
1164
1155
  .quota_name_wrapper {
1165
1156
  display: flex;
1166
1157
  flex-direction: column;
@@ -1206,6 +1197,7 @@ $imagePositions: (
1206
1197
  display: flex;
1207
1198
  min-width: 0;
1208
1199
  }
1200
+
1209
1201
  .hilighted {
1210
1202
  color: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hd-dn-cr);
1211
1203
  font-family: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hd-dn-ft-fy);
@@ -1220,6 +1212,7 @@ $imagePositions: (
1220
1212
  text-align: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hd-dn-tt-an);
1221
1213
  text-decoration: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hd-dn-ue);
1222
1214
  }
1215
+
1223
1216
  .quota_inventory {
1224
1217
  display: flex;
1225
1218
  justify-content: center;
@@ -1263,11 +1256,13 @@ $imagePositions: (
1263
1256
  height: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt);
1264
1257
  background-color: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-dr-cr);
1265
1258
  }
1259
+
1266
1260
  &[data-content-alignment="Vertical"] {
1267
1261
  .quota_label_wrapper {
1268
1262
  width: 100%;
1269
1263
  position: relative;
1270
1264
  @include dividerGapReserve(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt);
1265
+
1271
1266
  &::after {
1272
1267
  content: "";
1273
1268
  position: absolute;
@@ -1302,6 +1297,7 @@ $imagePositions: (
1302
1297
  }
1303
1298
  }
1304
1299
  }
1300
+
1305
1301
  .quote_vertical_scroll_wrapper {
1306
1302
  overflow-y: auto;
1307
1303
  gap: prepareMediaVariable(--_ctm-lt-qa-im-sg);
@@ -1332,9 +1328,9 @@ $imagePositions: (
1332
1328
  border-radius: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-br-rs);
1333
1329
  border-style: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-br-se);
1334
1330
  border-width: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-br-wh);
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);
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);
1337
1332
  gap: prepareMediaVariable(--_ctm-lt-ae-dn-sg);
1333
+
1338
1334
  .allowance_label_wrapper {
1339
1335
  display: flex;
1340
1336
  flex-direction: column;
@@ -1349,6 +1345,7 @@ $imagePositions: (
1349
1345
  align-self: flex-start;
1350
1346
  max-width: 100%;
1351
1347
  }
1348
+
1352
1349
  // align-items: center;
1353
1350
  gap: 4px;
1354
1351
 
@@ -1361,10 +1358,12 @@ $imagePositions: (
1361
1358
  text-transform: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-tt-tm);
1362
1359
  word-wrap: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-wd-wp);
1363
1360
  word-break: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-wd-bk);
1361
+
1364
1362
  &.flex__overflow {
1365
1363
  white-space: normal;
1366
1364
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1367
1365
  }
1366
+
1368
1367
  font-size: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-ft-se);
1369
1368
  font-style: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-ft-se-ic);
1370
1369
  font-weight: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-ft-wt);
@@ -1410,6 +1409,7 @@ $imagePositions: (
1410
1409
  // Same as the quota rows: without this the name refuses to shrink and
1411
1410
  // overflows the widget.
1412
1411
  min-width: 0;
1412
+
1413
1413
  .allowance_name_wrapper {
1414
1414
  display: flex;
1415
1415
  flex-direction: column;
@@ -1470,6 +1470,7 @@ $imagePositions: (
1470
1470
  }
1471
1471
  }
1472
1472
  }
1473
+
1473
1474
  &[data-show-divider="true"] {
1474
1475
  .allowance_item_wrapper:not(:last-child) {
1475
1476
  @include dividerGapReserve(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt);
@@ -1485,12 +1486,14 @@ $imagePositions: (
1485
1486
  height: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt);
1486
1487
  background-color: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-dr-cr);
1487
1488
  }
1489
+
1488
1490
  &[data-content-alignment="Vertical"] {
1489
1491
  .allowance_label_wrapper {
1490
1492
  width: 100%;
1491
1493
  position: relative;
1492
1494
  gap: 10px;
1493
1495
  @include dividerGapReserve(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt);
1496
+
1494
1497
  &::after {
1495
1498
  content: "";
1496
1499
  position: absolute;
@@ -1546,9 +1549,7 @@ $imagePositions: (
1546
1549
  border-radius: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-rs);
1547
1550
  border-style: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-se);
1548
1551
  border-width: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-wh);
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);
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);
1552
1553
  gap: prepareMediaVariable(--_ctm-lt-ur-io-sy-im-sg);
1553
1554
 
1554
1555
  .secondary_vertical_scroll_wrapper {
@@ -1607,6 +1608,7 @@ $imagePositions: (
1607
1608
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1608
1609
  }
1609
1610
  }
1611
+
1610
1612
  .value {
1611
1613
  color: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-cr);
1612
1614
  font-family: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
@@ -1644,6 +1646,7 @@ $imagePositions: (
1644
1646
  display: flex;
1645
1647
  gap: 6px;
1646
1648
  justify-content: right;
1649
+
1647
1650
  .remaining_order {
1648
1651
  color: #243dc6;
1649
1652
  font-family: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
@@ -1671,6 +1674,7 @@ $imagePositions: (
1671
1674
  .payment_wrapper {
1672
1675
  display: flex;
1673
1676
  gap: 6px;
1677
+
1674
1678
  .remaining_payment {
1675
1679
  color: #243dc6;
1676
1680
  font-family: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
@@ -1704,41 +1708,24 @@ $imagePositions: (
1704
1708
  position: relative;
1705
1709
  display: inline-block;
1706
1710
  flex-shrink: 0;
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
- );
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)));
1715
1715
  margin-right: 6px;
1716
+
1716
1717
  .cart__quantity {
1717
1718
  position: absolute;
1718
1719
  top: -4px;
1719
1720
  right: -6px;
1720
1721
  border-radius: 50px;
1721
1722
 
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
- );
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);
1742
1729
  width: auto;
1743
1730
  padding-inline: 4px;
1744
1731
  box-sizing: border-box;
@@ -1748,6 +1735,7 @@ $imagePositions: (
1748
1735
  justify-content: center;
1749
1736
  white-space: nowrap;
1750
1737
  }
1738
+
1751
1739
  // .cart__quantity {
1752
1740
  // position: absolute;
1753
1741
  // top: 0;
@@ -1773,149 +1761,84 @@ $imagePositions: (
1773
1761
  // }
1774
1762
 
1775
1763
  .cart__quantity {
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
- );
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))));
1832
1789
  white-space: nowrap;
1833
1790
  line-height: 1;
1834
1791
  width: auto;
1835
1792
  padding-inline: 4px;
1836
1793
  box-sizing: border-box;
1837
1794
 
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
- );
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);
1868
1808
  // font-size: var(
1869
1809
  // --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ft-se,
1870
1810
  // var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ft-se, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ft-se))
1871
1811
  // );
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
- );
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)));
1891
1821
  // line-height: var(
1892
1822
  // --_ctm-mob-dn-ur-sy-io-dn-ct-ct-le-ht,
1893
1823
  // var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-le-ht, var(--_ctm-dn-ur-sy-io-dn-ct-ct-le-ht))
1894
1824
  // );
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
- );
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)));
1899
1827
  }
1828
+
1900
1829
  .cart__icon {
1901
1830
  display: var(--_sf-show-icon-ff, flex);
1831
+
1902
1832
  svg {
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
- );
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
+
1911
1838
  path {
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
- );
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)));
1919
1842
  // Overrides the stroke-width presentation attribute baked into the icon markup.
1920
1843
  stroke-width: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ct-in-se-wh, 1.25);
1921
1844
  }
@@ -1927,113 +1850,91 @@ $imagePositions: (
1927
1850
  .child {
1928
1851
  position: relative;
1929
1852
  }
1853
+
1930
1854
  &[data-show-divider="true"] {
1931
1855
  .child:not(:last-child) {
1932
1856
  @include dividerGapReserve(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt);
1933
1857
  }
1858
+
1934
1859
  .child:not(:last-child)::before {
1935
1860
  content: "";
1936
1861
  position: absolute;
1937
1862
  left: 0;
1938
1863
  right: 0;
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
- );
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)));
1958
1873
  }
1874
+
1959
1875
  &[data-content-alignment="Horizontal"] {
1876
+
1960
1877
  // Side by side, so the thickness has to be reserved horizontally instead.
1961
1878
  .child:not(:last-child) {
1962
1879
  margin-bottom: 0;
1963
1880
  @include dividerGapReserve(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt, right);
1964
1881
  }
1882
+
1965
1883
  .child:not(:last-child)::before {
1966
- right: dividerGapOffset(
1967
- --_ctm-lt-ur-io-sy-im-sg,
1968
- --_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt
1969
- );
1884
+ right: dividerGapOffset(--_ctm-lt-ur-io-sy-im-sg,
1885
+ --_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt);
1970
1886
  bottom: unset;
1971
1887
  top: 0;
1972
1888
 
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
- );
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)));
1980
1892
  height: 100%;
1981
1893
  left: unset;
1982
1894
  }
1895
+
1983
1896
  @media (max-width: 768px) {
1897
+
1984
1898
  // Back to stacked below the breakpoint, so the reserve goes back under the item.
1985
1899
  .child:not(:last-child) {
1986
1900
  margin-right: 0;
1987
1901
  @include dividerGapReserve(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt);
1988
1902
  }
1903
+
1989
1904
  .child:not(:last-child)::before {
1990
1905
  top: unset;
1991
1906
  left: 0;
1992
1907
  right: 0;
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
- );
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)));
2004
1913
  width: unset;
2005
1914
  }
2006
1915
  }
2007
1916
  }
1917
+
2008
1918
  &[data-content-alignment="Vertical"] {
2009
1919
  .secondary_label_wrapper {
2010
1920
  width: 100%;
2011
1921
  position: relative;
2012
1922
  @include dividerGapReserve(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt);
1923
+
2013
1924
  &::after {
2014
1925
  content: "";
2015
1926
  position: absolute;
2016
1927
  left: 0;
2017
1928
  right: 0;
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
- );
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)));
2037
1938
  }
2038
1939
  }
2039
1940
  }
@@ -2049,7 +1950,8 @@ $imagePositions: (
2049
1950
  justify-content: space-between;
2050
1951
  padding-right: 16px;
2051
1952
  }
2052
- .active_orders_wrapper > * {
1953
+
1954
+ .active_orders_wrapper>* {
2053
1955
  box-sizing: border-box;
2054
1956
  width: 100%;
2055
1957
  // line-height: 125%;
@@ -2064,6 +1966,7 @@ $imagePositions: (
2064
1966
  flex-direction: row;
2065
1967
  align-items: start;
2066
1968
  }
1969
+
2067
1970
  .my_cart_container {
2068
1971
  display: flex;
2069
1972
  align-items: center;
@@ -2073,6 +1976,7 @@ $imagePositions: (
2073
1976
  .popover-container {
2074
1977
  position: relative;
2075
1978
  display: inline-block;
1979
+
2076
1980
  .popover-trigger {
2077
1981
  cursor: pointer;
2078
1982
  font-weight: 500;
@@ -2108,55 +2012,30 @@ $imagePositions: (
2108
2012
 
2109
2013
  // width: 100%;
2110
2014
  gap: prepareMediaVariable(--_ctm-dn-pr-se-im-gp);
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
- );
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)));
2160
2039
  }
2161
2040
 
2162
2041
  .popover-box strong {
@@ -2176,63 +2055,36 @@ $imagePositions: (
2176
2055
  // var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
2177
2056
  // );
2178
2057
  transform: rotate(-45deg);
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
- );
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)));
2184
2060
  }
2185
2061
 
2186
2062
  .popover_item {
2187
2063
  // padding-inline: var(--_sf-cd-gp);
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
- );
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)));
2236
2088
  // margin-left: 10px;
2237
2089
  }
2238
2090
  }
@@ -2242,20 +2094,14 @@ $imagePositions: (
2242
2094
  // for dropdown
2243
2095
 
2244
2096
  .language__conatiner {
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
- );
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)));
2249
2099
 
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
- );
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)));
2254
2102
 
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
- );
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)));
2259
2105
 
2260
2106
  // The tablet name carried a doubled `dn-se-`, so tablet fell through to desktop.
2261
2107
  border-width: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-br-wh);
@@ -2266,30 +2112,15 @@ $imagePositions: (
2266
2112
  // var(--_ctm-tab-dn-dn-se-wt-se-br-cr, var(--_ctm-dn-dn-se-wt-se-br-cr))
2267
2113
  // );
2268
2114
 
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
- );
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))));
2293
2124
 
2294
2125
  // gap: var(
2295
2126
  // --_ctm-mob-dn-dn-se-lt-ss-it-ad-mn-qy-sg,
@@ -2299,200 +2130,110 @@ $imagePositions: (
2299
2130
 
2300
2131
  .option:hover {
2301
2132
  --_sf-hr-txt-tr: prepareMediaVariable(--_ctm-dn-dn-se-im-se-hr-se-tt-tm);
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
- );
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)));
2326
2145
  // for shadow
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
- );
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)));
2343
2154
 
2344
2155
  // for font
2345
2156
 
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
- );
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)));
2395
2182
  }
2396
2183
 
2397
2184
  .option[data-selected="true"] {
2398
2185
  --_sf-sd-txt-tr: prepareMediaVariable(--_ctm-dn-dn-se-im-se-sd-se-tt-tm);
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
- );
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)));
2419
2196
  // new
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
- );
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)));
2444
2209
 
2445
2210
  // for font
2446
2211
 
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
- );
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)));
2496
2237
  }
2497
2238
 
2498
2239
  .option {
@@ -2500,10 +2241,8 @@ $imagePositions: (
2500
2241
  display: flex;
2501
2242
  align-items: center;
2502
2243
  cursor: pointer;
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
- );
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)));
2507
2246
 
2508
2247
  position: relative;
2509
2248
  box-sizing: border-box;
@@ -2513,86 +2252,57 @@ $imagePositions: (
2513
2252
  padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-pg));
2514
2253
  border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-cr));
2515
2254
 
2516
- background-color: var(
2517
- --_sf-hr-bd-cr,
2518
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-bd-cr)
2519
- );
2255
+ background-color: var(--_sf-hr-bd-cr,
2256
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-bd-cr));
2520
2257
  border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-se));
2521
2258
  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-rs));
2522
2259
  border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-wh));
2523
2260
 
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));
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
+
2528
2263
  //
2529
2264
  &[data-selected="true"] {
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));
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
+
2555
2278
  .language__name {
2556
2279
  color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-cr));
2557
- font-family: var(
2558
- --_sf-sd-ft-fy,
2559
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-fy)
2560
- );
2280
+ font-family: var(--_sf-sd-ft-fy,
2281
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-fy));
2561
2282
  word-wrap: var(--_sf-sd-wd-wp, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-wd-wp));
2562
- word-break: var(
2563
- --_sf-sd-wd-bk,
2564
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-wd-bk)
2565
- );
2283
+ word-break: var(--_sf-sd-wd-bk,
2284
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-wd-bk));
2566
2285
  font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se));
2567
2286
  font-weight: 400;
2568
2287
  // font-weight: var(
2569
2288
  // --_sf-sd-ft-wt,
2570
2289
  // prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-wt)
2571
2290
  // );
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
- );
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));
2588
2299
  text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ue));
2589
- text-transform: var(
2590
- --_sf-sd-txt-tr,
2591
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-tm)
2592
- );
2300
+ text-transform: var(--_sf-sd-txt-tr,
2301
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-tm));
2593
2302
  }
2594
2303
  }
2595
2304
  }
2305
+
2596
2306
  &[data-flex-direction="column"] {
2597
2307
  .language__name {
2598
2308
  // white-space: unset;
@@ -2602,9 +2312,11 @@ $imagePositions: (
2602
2312
  text-overflow: ellipsis;
2603
2313
  }
2604
2314
  }
2315
+
2605
2316
  &[data-flex-direction="row"] {
2606
2317
  overflow-x: auto;
2607
2318
  }
2319
+
2608
2320
  // Both offsets used to be measured off `--_ctm-dn-dn-se-lt-ss-gp-bn-is`, which
2609
2321
  // belongs to the commented-out `dropdownStyle.layoutSettings` and is therefore
2610
2322
  // never emitted. The calc was invalid, so the divider never positioned at all.
@@ -2619,12 +2331,16 @@ $imagePositions: (
2619
2331
  content: "";
2620
2332
  position: absolute;
2621
2333
  top: 0;
2622
- bottom: 0; /* For full height divider */
2334
+ bottom: 0;
2335
+ /* For full height divider */
2623
2336
  right: dividerGapOffset(--_ctm-dn-dn-se-wt-dn-im-gp, --_ctm-dn-dn-se-wt-se-dr-wt);
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 */
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 */
2626
2341
  }
2627
2342
  }
2343
+
2628
2344
  &[data-flex-direction="column"] {
2629
2345
  .option:not(:last-child) {
2630
2346
  @include dividerGapReserve(--_ctm-dn-dn-se-wt-se-dr-wt);
@@ -2647,6 +2363,7 @@ $imagePositions: (
2647
2363
  display: flex;
2648
2364
  align-items: center;
2649
2365
  position: relative;
2366
+
2650
2367
  .language__name {
2651
2368
  // No caret clearance needed anymore: the caret is an in-flow sibling, spaced
2652
2369
  // by Widget Style > Item Gap.
@@ -2678,21 +2395,15 @@ $imagePositions: (
2678
2395
  word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-wd-bk));
2679
2396
  font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se));
2680
2397
  font-weight: 400;
2681
- font-style: var(
2682
- --_sf-hr-ft-se-ic,
2683
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se-ic)
2684
- );
2398
+ font-style: var(--_sf-hr-ft-se-ic,
2399
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se-ic));
2685
2400
  text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-an));
2686
- letter-spacing: var(
2687
- --_sf-hr-lr-sg,
2688
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-lr-sg)
2689
- );
2401
+ letter-spacing: var(--_sf-hr-lr-sg,
2402
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-lr-sg));
2690
2403
  line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-le-ht));
2691
2404
  text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ue));
2692
- text-transform: var(
2693
- --_sf-hr-txt-tr,
2694
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-tm)
2695
- );
2405
+ text-transform: var(--_sf-hr-txt-tr,
2406
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-tm));
2696
2407
  white-space: nowrap;
2697
2408
 
2698
2409
  // Item Style clamps the option label. `white-space: nowrap` above would stop
@@ -2714,63 +2425,41 @@ $imagePositions: (
2714
2425
  width: 100%;
2715
2426
  // padding: 8px 12px;
2716
2427
  text-align: left;
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
- );
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));
2765
2452
 
2766
2453
  &#{$overflowSelector} {
2767
2454
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
2768
2455
  }
2769
2456
  }
2457
+
2770
2458
  .est__dropdown__main {
2771
2459
  position: relative;
2772
2460
  width: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-wh);
2773
2461
  margin-top: 0px;
2462
+
2774
2463
  label {
2775
2464
  font-size: 14px;
2776
2465
  color: var(--_gray-700);
@@ -2795,6 +2484,7 @@ $imagePositions: (
2795
2484
  &.open .list {
2796
2485
  display: flex;
2797
2486
  }
2487
+
2798
2488
  .est__dropdown__button {
2799
2489
  display: flex;
2800
2490
  align-items: center;
@@ -2820,10 +2510,12 @@ $imagePositions: (
2820
2510
  display: flex;
2821
2511
  flex: 0 0 auto;
2822
2512
  transition: all 200ms ease-in;
2513
+
2823
2514
  &.open {
2824
2515
  transform: rotate(180deg);
2825
2516
  transform: all 200ms ease-in;
2826
2517
  }
2518
+
2827
2519
  &.close {
2828
2520
  transform: rotate(0deg);
2829
2521
  transform: all 200ms ease-in;
@@ -2856,10 +2548,7 @@ $imagePositions: (
2856
2548
  // padding: 2px;
2857
2549
  // border-radius: 4px;
2858
2550
  // border: 1px solid var(--_gray-300);
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);
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);
2863
2552
 
2864
2553
  &.top {
2865
2554
  bottom: 100%;
@@ -2869,6 +2558,7 @@ $imagePositions: (
2869
2558
  .option {
2870
2559
  cursor: pointer;
2871
2560
  }
2561
+
2872
2562
  &.show__panel {
2873
2563
  animation: slideUp 0.4s ease-in-out;
2874
2564
  }
@@ -2877,12 +2567,14 @@ $imagePositions: (
2877
2567
  animation: slideDown 0.4s ease-in-out;
2878
2568
  pointer-events: none;
2879
2569
  }
2570
+
2880
2571
  &:has(.no__records__found) {
2881
2572
  padding: 0px;
2882
2573
  }
2883
2574
  }
2884
2575
  }
2885
2576
  }
2577
+
2886
2578
  .no__records__found {
2887
2579
  padding: 12px;
2888
2580
  color: var(--_gray-700);
@@ -2893,4 +2585,4 @@ $imagePositions: (
2893
2585
  }
2894
2586
  }
2895
2587
  }
2896
- }
2588
+ }