@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
package/dist/language-selector.scss CHANGED
@@ -18,41 +18,34 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
18
18
 
19
19
  @mixin widgetStateFont($state, $fallbackState: null) {
20
20
  @each $p in $widgetFontProps {
21
- $inner: if(
22
- $fallbackState == null,
23
- var(--_ctm-dn-wt-se-#{$state}-#{$p}),
24
- var(
25
- --_ctm-dn-wt-se-#{$state}-#{$p},
26
- var(
27
- --_ctm-mob-dn-wt-se-#{$fallbackState}-#{$p},
28
- var(
29
- --_ctm-tab-dn-wt-se-#{$fallbackState}-#{$p},
30
- var(--_ctm-dn-wt-se-#{$fallbackState}-#{$p})
31
- )
32
- )
33
- )
34
- );
35
- --_sf-wt-#{$p}: var(
36
- --_ctm-mob-dn-wt-se-#{$state}-#{$p},
37
- var(--_ctm-tab-dn-wt-se-#{$state}-#{$p}, #{$inner})
38
- );
21
+ $inner: if($fallbackState ==null,
22
+ var(--_ctm-dn-wt-se-#{$state}-#{$p}),
23
+ var(--_ctm-dn-wt-se-#{$state}-#{$p},
24
+ var(--_ctm-mob-dn-wt-se-#{$fallbackState}-#{$p},
25
+ var(--_ctm-tab-dn-wt-se-#{$fallbackState}-#{$p},
26
+ var(--_ctm-dn-wt-se-#{$fallbackState}-#{$p})))));
27
+ --_sf-wt-#{$p}: var(--_ctm-mob-dn-wt-se-#{$state}-#{$p},
28
+ var(--_ctm-tab-dn-wt-se-#{$state}-#{$p}, #{$inner}));
39
29
  }
40
30
  }
41
31
 
42
32
  [data-div-type="element"] {
33
+
43
34
  &[data-element-type="languageMenu"],
44
35
  &[data-element-type="currencySelector"],
45
36
  &[data-element-type="userGroupsSelector"],
46
37
  &[data-element-type="warehouseSelector"] {
47
38
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
48
39
 
49
- & > .wrapper {
40
+ &>.wrapper {
50
41
  width: 100%;
51
42
  height: auto;
52
43
  }
44
+
53
45
  &[data-show-shadow="false"] {
54
46
  --_show-shadow: none;
55
47
  }
48
+
56
49
  .language__conatiner {
57
50
  // background-color: var(
58
51
  // --_ctm-mob-dn-wt-se-dt-se-bd-cr,
@@ -163,30 +156,35 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
163
156
  border-style: none;
164
157
  }
165
158
  }
159
+
166
160
  &[data-widget-hover-border="false"] {
167
161
  .est__dropdown__main .est__dropdown .dropdown__button__wrapper:hover {
168
162
  border-width: 0;
169
163
  border-style: none;
170
164
  }
171
165
  }
166
+
172
167
  &[data-dropdown-border="false"] {
173
168
  .est__dropdown__main .est__dropdown .list {
174
169
  border-width: 0;
175
170
  border-style: none;
176
171
  }
177
172
  }
173
+
178
174
  &[data-item-border="false"] {
179
175
  .option:not(:hover):not([data-selected="true"]) {
180
176
  border-width: 0;
181
177
  border-style: none;
182
178
  }
183
179
  }
180
+
184
181
  &[data-item-hover-border="false"] {
185
182
  .option:hover:not([data-selected="true"]) {
186
183
  border-width: 0;
187
184
  border-style: none;
188
185
  }
189
186
  }
187
+
190
188
  &[data-item-selected-border="false"] {
191
189
  .option[data-selected="true"] {
192
190
  border-width: 0;
@@ -195,199 +193,111 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
195
193
  }
196
194
 
197
195
  .option:hover {
198
- --_sf-hr-bd-cr: var(
199
- --_ctm-mob-dn-im-se-hr-se-bd-cr,
200
- var(--_ctm-tab-dn-im-se-hr-se-bd-cr, var(--_ctm-dn-im-se-hr-se-bd-cr))
201
- );
202
- --_sf-hr-br-cr: var(
203
- --_ctm-mob-dn-im-se-hr-se-br-cr,
204
- var(--_ctm-tab-dn-im-se-hr-se-br-cr, var(--_ctm-dn-im-se-hr-se-br-cr))
205
- );
206
- --_sf-hr-br-se: var(
207
- --_ctm-mob-dn-im-se-hr-se-br-se,
208
- var(--_ctm-tab-dn-im-se-hr-se-br-se, var(--_ctm-dn-im-se-hr-se-br-se))
209
- );
210
- --_sf-hr-br-wh: var(
211
- --_ctm-mob-dn-im-se-hr-se-br-wh,
212
- var(--_ctm-tab-dn-im-se-hr-se-br-wh, var(--_ctm-dn-im-se-hr-se-br-wh))
213
- );
214
- --_sf-hr-br-rs: var(
215
- --_ctm-mob-dn-im-se-hr-se-br-rs,
216
- var(--_ctm-tab-dn-im-se-hr-se-br-rs, var(--_ctm-dn-im-se-hr-se-br-rs))
217
- );
196
+ --_sf-hr-bd-cr: var(--_ctm-mob-dn-im-se-hr-se-bd-cr,
197
+ var(--_ctm-tab-dn-im-se-hr-se-bd-cr, var(--_ctm-dn-im-se-hr-se-bd-cr)));
198
+ --_sf-hr-br-cr: var(--_ctm-mob-dn-im-se-hr-se-br-cr,
199
+ var(--_ctm-tab-dn-im-se-hr-se-br-cr, var(--_ctm-dn-im-se-hr-se-br-cr)));
200
+ --_sf-hr-br-se: var(--_ctm-mob-dn-im-se-hr-se-br-se,
201
+ var(--_ctm-tab-dn-im-se-hr-se-br-se, var(--_ctm-dn-im-se-hr-se-br-se)));
202
+ --_sf-hr-br-wh: var(--_ctm-mob-dn-im-se-hr-se-br-wh,
203
+ var(--_ctm-tab-dn-im-se-hr-se-br-wh, var(--_ctm-dn-im-se-hr-se-br-wh)));
204
+ --_sf-hr-br-rs: var(--_ctm-mob-dn-im-se-hr-se-br-rs,
205
+ var(--_ctm-tab-dn-im-se-hr-se-br-rs, var(--_ctm-dn-im-se-hr-se-br-rs)));
218
206
 
219
207
  // for shadow
220
- --_sf-hr-sw-ae: var(
221
- --_ctm-mob-dn-im-se-hr-se-sw-ae,
222
- var(--_ctm-tab-dn-im-se-hr-se-sw-ae, var(--_ctm-dn-im-se-hr-se-sw-ae))
223
- );
224
- --_sf-hr-sw-br: var(
225
- --_ctm-mob-dn-im-se-hr-se-sw-br,
226
- var(--_ctm-tab-dn-im-se-hr-se-sw-br, var(--_ctm-dn-im-se-hr-se-sw-br))
227
- );
228
- --_sf-hr-sw-hr: var(
229
- --_ctm-mob-dn-im-se-hr-se-sw-hr,
230
- var(--_ctm-tab-dn-im-se-hr-se-sw-hr, var(--_ctm-dn-im-se-hr-se-sw-hr))
231
- );
232
- --_sf-hr-sw-cr: var(
233
- --_ctm-mob-dn-im-se-hr-se-sw-cr,
234
- var(--_ctm-tab-dn-im-se-hr-se-sw-cr, var(--_ctm-dn-im-se-hr-se-sw-cr))
235
- );
208
+ --_sf-hr-sw-ae: var(--_ctm-mob-dn-im-se-hr-se-sw-ae,
209
+ var(--_ctm-tab-dn-im-se-hr-se-sw-ae, var(--_ctm-dn-im-se-hr-se-sw-ae)));
210
+ --_sf-hr-sw-br: var(--_ctm-mob-dn-im-se-hr-se-sw-br,
211
+ var(--_ctm-tab-dn-im-se-hr-se-sw-br, var(--_ctm-dn-im-se-hr-se-sw-br)));
212
+ --_sf-hr-sw-hr: var(--_ctm-mob-dn-im-se-hr-se-sw-hr,
213
+ var(--_ctm-tab-dn-im-se-hr-se-sw-hr, var(--_ctm-dn-im-se-hr-se-sw-hr)));
214
+ --_sf-hr-sw-cr: var(--_ctm-mob-dn-im-se-hr-se-sw-cr,
215
+ var(--_ctm-tab-dn-im-se-hr-se-sw-cr, var(--_ctm-dn-im-se-hr-se-sw-cr)));
236
216
 
237
217
  // for font
238
218
 
239
- --_sf-hr-cr: var(
240
- --_ctm-mob-dn-im-se-hr-se-cr,
241
- var(--_ctm-tab-dn-im-se-hr-se-cr, var(--_ctm-dn-im-se-hr-se-cr))
242
- );
243
- --_sf-hr-ft-fy: var(
244
- --_ctm-mob-dn-im-se-hr-se-ft-fy,
245
- var(--_ctm-tab-dn-im-se-hr-se-ft-fy, var(--_ctm-dn-im-se-hr-se-ft-fy))
246
- );
247
- --_sf-hr-ft-se: var(
248
- --_ctm-mob-dn-im-se-hr-se-ft-se,
249
- var(--_ctm-tab-dn-im-se-hr-se-ft-se, var(--_ctm-dn-im-se-hr-se-ft-se))
250
- );
251
- --_sf-hr-ft-wt: var(
252
- --_ctm-mob-dn-im-se-hr-se-ft-wt,
253
- var(--_ctm-tab-dn-im-se-hr-se-ft-wt, var(--_ctm-dn-im-se-hr-se-ft-wt))
254
- );
255
- --_sf-hr-ft-se-ic: var(
256
- --_ctm-mob-dn-im-se-hr-se-ft-se-ic,
257
- var(--_ctm-tab-dn-im-se-hr-se-ft-se-ic, var(--_ctm-dn-im-se-hr-se-ft-se-ic))
258
- );
259
- --_sf-hr-tt-an: var(
260
- --_ctm-mob-dn-im-se-hr-se-tt-an,
261
- var(--_ctm-tab-dn-im-se-hr-se-tt-an, var(--_ctm-dn-im-se-hr-se-tt-an))
262
- );
263
- --_sf-hr-lr-sg: var(
264
- --_ctm-mob-dn-im-se-hr-se-lr-sg,
265
- var(--_ctm-tab-dn-im-se-hr-se-lr-sg, var(--_ctm-dn-im-se-hr-se-lr-sg))
266
- );
267
- --_sf-hr-le-ht: var(
268
- --_ctm-mob-dn-im-se-hr-se-le-ht,
269
- var(--_ctm-tab-dn-im-se-hr-se-le-ht, var(--_ctm-dn-im-se-hr-se-le-ht))
270
- );
271
-
272
- --_sf-hr-ue: var(
273
- --_ctm-mob-dn-im-se-hr-se-ue,
274
- var(--_ctm-tab-dn-im-se-hr-se-ue, var(--_ctm-dn-im-se-hr-se-ue))
275
- );
276
- --_sf-hr-tt-tm: var(
277
- --_ctm-mob-dn-im-se-hr-se-tt-tm,
278
- var(--_ctm-tab-dn-im-se-hr-se-tt-tm, var(--_ctm-dn-im-se-hr-se-tt-tm))
279
- );
280
- --_sf-hr-wd-wp: var(
281
- --_ctm-mob-dn-im-se-hr-se-wd-wp,
282
- var(--_ctm-tab-dn-im-se-hr-se-wd-wp, var(--_ctm-dn-im-se-hr-se-wd-wp))
283
- );
284
- --_sf-hr-wd-bk: var(
285
- --_ctm-mob-dn-im-se-hr-se-wd-bk,
286
- var(--_ctm-tab-dn-im-se-hr-se-wd-bk, var(--_ctm-dn-im-se-hr-se-wd-bk))
287
- );
288
- --_sf-hr-pg: var(
289
- --_ctm-mob-dn-im-se-hr-se-pg,
290
- var(--_ctm-tab-dn-im-se-hr-se-pg, var(--_ctm-dn-im-se-hr-se-pg))
291
- );
219
+ --_sf-hr-cr: var(--_ctm-mob-dn-im-se-hr-se-cr,
220
+ var(--_ctm-tab-dn-im-se-hr-se-cr, var(--_ctm-dn-im-se-hr-se-cr)));
221
+ --_sf-hr-ft-fy: var(--_ctm-mob-dn-im-se-hr-se-ft-fy,
222
+ var(--_ctm-tab-dn-im-se-hr-se-ft-fy, var(--_ctm-dn-im-se-hr-se-ft-fy)));
223
+ --_sf-hr-ft-se: var(--_ctm-mob-dn-im-se-hr-se-ft-se,
224
+ var(--_ctm-tab-dn-im-se-hr-se-ft-se, var(--_ctm-dn-im-se-hr-se-ft-se)));
225
+ --_sf-hr-ft-wt: var(--_ctm-mob-dn-im-se-hr-se-ft-wt,
226
+ var(--_ctm-tab-dn-im-se-hr-se-ft-wt, var(--_ctm-dn-im-se-hr-se-ft-wt)));
227
+ --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-im-se-hr-se-ft-se-ic,
228
+ var(--_ctm-tab-dn-im-se-hr-se-ft-se-ic, var(--_ctm-dn-im-se-hr-se-ft-se-ic)));
229
+ --_sf-hr-tt-an: var(--_ctm-mob-dn-im-se-hr-se-tt-an,
230
+ var(--_ctm-tab-dn-im-se-hr-se-tt-an, var(--_ctm-dn-im-se-hr-se-tt-an)));
231
+ --_sf-hr-lr-sg: var(--_ctm-mob-dn-im-se-hr-se-lr-sg,
232
+ var(--_ctm-tab-dn-im-se-hr-se-lr-sg, var(--_ctm-dn-im-se-hr-se-lr-sg)));
233
+ --_sf-hr-le-ht: var(--_ctm-mob-dn-im-se-hr-se-le-ht,
234
+ var(--_ctm-tab-dn-im-se-hr-se-le-ht, var(--_ctm-dn-im-se-hr-se-le-ht)));
235
+
236
+ --_sf-hr-ue: var(--_ctm-mob-dn-im-se-hr-se-ue,
237
+ var(--_ctm-tab-dn-im-se-hr-se-ue, var(--_ctm-dn-im-se-hr-se-ue)));
238
+ --_sf-hr-tt-tm: var(--_ctm-mob-dn-im-se-hr-se-tt-tm,
239
+ var(--_ctm-tab-dn-im-se-hr-se-tt-tm, var(--_ctm-dn-im-se-hr-se-tt-tm)));
240
+ --_sf-hr-wd-wp: var(--_ctm-mob-dn-im-se-hr-se-wd-wp,
241
+ var(--_ctm-tab-dn-im-se-hr-se-wd-wp, var(--_ctm-dn-im-se-hr-se-wd-wp)));
242
+ --_sf-hr-wd-bk: var(--_ctm-mob-dn-im-se-hr-se-wd-bk,
243
+ var(--_ctm-tab-dn-im-se-hr-se-wd-bk, var(--_ctm-dn-im-se-hr-se-wd-bk)));
244
+ --_sf-hr-pg: var(--_ctm-mob-dn-im-se-hr-se-pg,
245
+ var(--_ctm-tab-dn-im-se-hr-se-pg, var(--_ctm-dn-im-se-hr-se-pg)));
292
246
  }
293
247
 
294
248
  .option[data-selected="true"] {
295
- --_sf-sd-bd-cr: var(
296
- --_ctm-mob-dn-im-se-sd-se-bd-cr,
297
- var(--_ctm-tab-dn-im-se-sd-se-bd-cr, var(--_ctm-dn-im-se-sd-se-bd-cr))
298
- );
299
- --_sf-sd-br-cr: var(
300
- --_ctm-mob-dn-im-se-sd-se-br-cr,
301
- var(--_ctm-tab-dn-im-se-sd-se-br-cr, var(--_ctm-dn-im-se-sd-se-br-cr))
302
- );
303
- --_sf-sd-br-se: var(
304
- --_ctm-mob-dn-im-se-sd-se-br-se,
305
- var(--_ctm-tab-dn-im-se-sd-se-br-se, var(--_ctm-dn-im-se-sd-se-br-se))
306
- );
307
- --_sf-sd-br-wh: var(
308
- --_ctm-mob-dn-im-se-sd-se-br-wh,
309
- var(--_ctm-tab-dn-im-se-sd-se-br-wh, var(--_ctm-dn-im-se-sd-se-br-wh))
310
- );
249
+ --_sf-sd-bd-cr: var(--_ctm-mob-dn-im-se-sd-se-bd-cr,
250
+ var(--_ctm-tab-dn-im-se-sd-se-bd-cr, var(--_ctm-dn-im-se-sd-se-bd-cr)));
251
+ --_sf-sd-br-cr: var(--_ctm-mob-dn-im-se-sd-se-br-cr,
252
+ var(--_ctm-tab-dn-im-se-sd-se-br-cr, var(--_ctm-dn-im-se-sd-se-br-cr)));
253
+ --_sf-sd-br-se: var(--_ctm-mob-dn-im-se-sd-se-br-se,
254
+ var(--_ctm-tab-dn-im-se-sd-se-br-se, var(--_ctm-dn-im-se-sd-se-br-se)));
255
+ --_sf-sd-br-wh: var(--_ctm-mob-dn-im-se-sd-se-br-wh,
256
+ var(--_ctm-tab-dn-im-se-sd-se-br-wh, var(--_ctm-dn-im-se-sd-se-br-wh)));
311
257
  // Was missing entirely, so `border-radius: var(--_sf-sd-br-rs, <default state>)`
312
258
  // always fell through to the default state and Selected > Border Radius did
313
259
  // nothing. Every sibling state variable had one; this is the odd one out.
314
- --_sf-sd-br-rs: var(
315
- --_ctm-mob-dn-im-se-sd-se-br-rs,
316
- var(--_ctm-tab-dn-im-se-sd-se-br-rs, var(--_ctm-dn-im-se-sd-se-br-rs))
317
- );
260
+ --_sf-sd-br-rs: var(--_ctm-mob-dn-im-se-sd-se-br-rs,
261
+ var(--_ctm-tab-dn-im-se-sd-se-br-rs, var(--_ctm-dn-im-se-sd-se-br-rs)));
318
262
  // new
319
- --_sf-sd-sw-ae: var(
320
- --_ctm-mob-dn-im-se-sd-se-sw-ae,
321
- var(--_ctm-tab-dn-im-se-sd-se-sw-ae, var(--_ctm-dn-im-se-sd-se-sw-ae))
322
- );
323
- --_sf-sd-sw-br: var(
324
- --_ctm-mob-dn-im-se-sd-se-sw-br,
325
- var(--_ctm-tab-dn-im-se-sd-se-sw-br, var(--_ctm-dn-im-se-sd-se-sw-br))
326
- );
327
- --_sf-sd-sw-sd: var(
328
- --_ctm-mob-dn-im-se-sd-se-sw-sd,
329
- var(--_ctm-tab-dn-im-se-sd-se-sw-sd, var(--_ctm-dn-im-se-sd-se-sw-sd))
330
- );
331
- --_sf-sd-sw-cr: var(
332
- --_ctm-mob-dn-im-se-sd-se-sw-cr,
333
- var(--_ctm-tab-dn-im-se-sd-se-sw-cr, var(--_ctm-dn-im-se-sd-se-sw-cr))
334
- );
263
+ --_sf-sd-sw-ae: var(--_ctm-mob-dn-im-se-sd-se-sw-ae,
264
+ var(--_ctm-tab-dn-im-se-sd-se-sw-ae, var(--_ctm-dn-im-se-sd-se-sw-ae)));
265
+ --_sf-sd-sw-br: var(--_ctm-mob-dn-im-se-sd-se-sw-br,
266
+ var(--_ctm-tab-dn-im-se-sd-se-sw-br, var(--_ctm-dn-im-se-sd-se-sw-br)));
267
+ --_sf-sd-sw-sd: var(--_ctm-mob-dn-im-se-sd-se-sw-sd,
268
+ var(--_ctm-tab-dn-im-se-sd-se-sw-sd, var(--_ctm-dn-im-se-sd-se-sw-sd)));
269
+ --_sf-sd-sw-cr: var(--_ctm-mob-dn-im-se-sd-se-sw-cr,
270
+ var(--_ctm-tab-dn-im-se-sd-se-sw-cr, var(--_ctm-dn-im-se-sd-se-sw-cr)));
335
271
 
336
272
  // for font
337
273
 
338
- --_sf-sd-cr: var(
339
- --_ctm-mob-dn-im-se-sd-se-cr,
340
- var(--_ctm-tab-dn-im-se-sd-se-cr, var(--_ctm-dn-im-se-sd-se-cr))
341
- );
342
- --_sf-sd-ft-fy: var(
343
- --_ctm-mob-dn-im-se-sd-se-ft-fy,
344
- var(--_ctm-tab-dn-im-se-sd-se-ft-fy, var(--_ctm-dn-im-se-sd-se-ft-fy))
345
- );
346
- --_sf-sd-ft-se: var(
347
- --_ctm-mob-dn-im-se-sd-se-ft-se,
348
- var(--_ctm-tab-dn-im-se-sd-se-ft-se, var(--_ctm-dn-im-se-sd-se-ft-se))
349
- );
350
- --_sf-sd-ft-wt: var(
351
- --_ctm-mob-dn-im-se-sd-se-ft-wt,
352
- var(--_ctm-tab-dn-im-se-sd-se-ft-wt, var(--_ctm-dn-im-se-sd-se-ft-wt))
353
- );
354
- --_sf-sd-ft-se-ic: var(
355
- --_ctm-mob-dn-im-se-sd-se-ft-se-ic,
356
- var(--_ctm-tab-dn-im-se-sd-se-ft-se-ic, var(--_ctm-dn-im-se-sd-se-ft-se-ic))
357
- );
358
- --_sf-sd-tt-an: var(
359
- --_ctm-mob-dn-im-se-sd-se-tt-an,
360
- var(--_ctm-tab-dn-im-se-sd-se-tt-an, var(--_ctm-dn-im-se-sd-se-tt-an))
361
- );
362
- --_sf-sd-lr-sg: var(
363
- --_ctm-mob-dn-im-se-sd-se-lr-sg,
364
- var(--_ctm-tab-dn-im-se-sd-se-lr-sg, var(--_ctm-dn-im-se-sd-se-lr-sg))
365
- );
366
- --_sf-sd-le-ht: var(
367
- --_ctm-mob-dn-im-se-sd-se-le-ht,
368
- var(--_ctm-tab-dn-im-se-sd-se-le-ht, var(--_ctm-dn-im-se-sd-se-le-ht))
369
- );
370
-
371
- --_sf-sd-ue: var(
372
- --_ctm-mob-dn-im-se-sd-se-ue,
373
- var(--_ctm-tab-dn-im-se-sd-se-ue, var(--_ctm-dn-im-se-sd-se-ue))
374
- );
375
- --_sf-sd-tt-tm: var(
376
- --_ctm-mob-dn-im-se-sd-se-tt-tm,
377
- var(--_ctm-tab-dn-im-se-sd-se-tt-tm, var(--_ctm-dn-im-se-sd-se-tt-tm))
378
- );
379
- --_sf-sd-wd-wp: var(
380
- --_ctm-mob-dn-im-se-sd-se-wd-wp,
381
- var(--_ctm-tab-dn-im-se-sd-se-wd-wp, var(--_ctm-dn-im-se-sd-se-wd-wp))
382
- );
383
- --_sf-sd-wd-bk: var(
384
- --_ctm-mob-dn-im-se-sd-se-wd-bk,
385
- var(--_ctm-tab-dn-im-se-sd-se-wd-bk, var(--_ctm-dn-im-se-sd-se-wd-bk))
386
- );
387
- --_sf-sd-pg: var(
388
- --_ctm-mob-dn-im-se-sd-se-pg,
389
- var(--_ctm-tab-dn-im-se-sd-se-pg, var(--_ctm-dn-im-se-sd-se-pg))
390
- );
274
+ --_sf-sd-cr: var(--_ctm-mob-dn-im-se-sd-se-cr,
275
+ var(--_ctm-tab-dn-im-se-sd-se-cr, var(--_ctm-dn-im-se-sd-se-cr)));
276
+ --_sf-sd-ft-fy: var(--_ctm-mob-dn-im-se-sd-se-ft-fy,
277
+ var(--_ctm-tab-dn-im-se-sd-se-ft-fy, var(--_ctm-dn-im-se-sd-se-ft-fy)));
278
+ --_sf-sd-ft-se: var(--_ctm-mob-dn-im-se-sd-se-ft-se,
279
+ var(--_ctm-tab-dn-im-se-sd-se-ft-se, var(--_ctm-dn-im-se-sd-se-ft-se)));
280
+ --_sf-sd-ft-wt: var(--_ctm-mob-dn-im-se-sd-se-ft-wt,
281
+ var(--_ctm-tab-dn-im-se-sd-se-ft-wt, var(--_ctm-dn-im-se-sd-se-ft-wt)));
282
+ --_sf-sd-ft-se-ic: var(--_ctm-mob-dn-im-se-sd-se-ft-se-ic,
283
+ var(--_ctm-tab-dn-im-se-sd-se-ft-se-ic, var(--_ctm-dn-im-se-sd-se-ft-se-ic)));
284
+ --_sf-sd-tt-an: var(--_ctm-mob-dn-im-se-sd-se-tt-an,
285
+ var(--_ctm-tab-dn-im-se-sd-se-tt-an, var(--_ctm-dn-im-se-sd-se-tt-an)));
286
+ --_sf-sd-lr-sg: var(--_ctm-mob-dn-im-se-sd-se-lr-sg,
287
+ var(--_ctm-tab-dn-im-se-sd-se-lr-sg, var(--_ctm-dn-im-se-sd-se-lr-sg)));
288
+ --_sf-sd-le-ht: var(--_ctm-mob-dn-im-se-sd-se-le-ht,
289
+ var(--_ctm-tab-dn-im-se-sd-se-le-ht, var(--_ctm-dn-im-se-sd-se-le-ht)));
290
+
291
+ --_sf-sd-ue: var(--_ctm-mob-dn-im-se-sd-se-ue,
292
+ var(--_ctm-tab-dn-im-se-sd-se-ue, var(--_ctm-dn-im-se-sd-se-ue)));
293
+ --_sf-sd-tt-tm: var(--_ctm-mob-dn-im-se-sd-se-tt-tm,
294
+ var(--_ctm-tab-dn-im-se-sd-se-tt-tm, var(--_ctm-dn-im-se-sd-se-tt-tm)));
295
+ --_sf-sd-wd-wp: var(--_ctm-mob-dn-im-se-sd-se-wd-wp,
296
+ var(--_ctm-tab-dn-im-se-sd-se-wd-wp, var(--_ctm-dn-im-se-sd-se-wd-wp)));
297
+ --_sf-sd-wd-bk: var(--_ctm-mob-dn-im-se-sd-se-wd-bk,
298
+ var(--_ctm-tab-dn-im-se-sd-se-wd-bk, var(--_ctm-dn-im-se-sd-se-wd-bk)));
299
+ --_sf-sd-pg: var(--_ctm-mob-dn-im-se-sd-se-pg,
300
+ var(--_ctm-tab-dn-im-se-sd-se-pg, var(--_ctm-dn-im-se-sd-se-pg)));
391
301
  }
392
302
 
393
303
  .option {
@@ -412,10 +322,8 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
412
322
  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-rs));
413
323
  border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-wh));
414
324
 
415
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-ae))
416
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-br))
417
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-sd))
418
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-cr));
325
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-cr));
326
+
419
327
  //
420
328
  &[data-selected="true"] {
421
329
  // `.option` only ever declared padding from the hover variable, so
@@ -428,45 +336,40 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
428
336
  border-style: var(--_sf-sd-br-se, prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-se));
429
337
  border-width: var(--_sf-sd-br-wh, prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-wh));
430
338
  border-radius: var(--_sf-sd-br-rs, prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-rs));
431
- box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-ae))
432
- var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-br))
433
- var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-sd))
434
- var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-cr));
339
+ box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-ae)) var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-br)) var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-sd)) var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-cr));
340
+
435
341
  .language__name {
436
342
  color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-im-se-dt-se-cr));
437
343
  font-family: var(--_sf-sd-ft-fy, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-fy));
438
344
  font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-se));
439
345
  font-weight: var(--_sf-sd-ft-wt, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-wt));
440
- font-style: var(
441
- --_sf-sd-ft-se-ic,
442
- prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-se-ic)
443
- );
346
+ font-style: var(--_sf-sd-ft-se-ic,
347
+ prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-se-ic));
444
348
  text-align: var(--_sf-sd-tt-an, prepareMediaVariable(--_ctm-dn-im-se-dt-se-tt-an));
445
349
  letter-spacing: var(--_sf-sd-lr-sg, prepareMediaVariable(--_ctm-dn-im-se-dt-se-lr-sg));
446
350
  line-height: var(--_sf-sd-le-ht, prepareMediaVariable(--_ctm-dn-im-se-dt-se-le-ht-dc));
447
351
  text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ue));
448
352
  text-transform: var(--_sf-sd-tt-tm, prepareMediaVariable(--_ctm-dn-im-se-dt-se-tt-tm));
449
- word-wrap: var(
450
- --_sf-sd-wd-wp,
451
- prepareMediaVariable(--_ctm-dn-im-se-dt-se-wd-wp, normal)
452
- );
453
- word-break: var(
454
- --_sf-sd-wd-bk,
455
- prepareMediaVariable(--_ctm-dn-im-se-dt-se-wd-bk, normal)
456
- );
353
+ word-wrap: var(--_sf-sd-wd-wp,
354
+ prepareMediaVariable(--_ctm-dn-im-se-dt-se-wd-wp, normal));
355
+ word-break: var(--_sf-sd-wd-bk,
356
+ prepareMediaVariable(--_ctm-dn-im-se-dt-se-wd-bk, normal));
457
357
  -webkit-line-clamp: var(--_sf-it-clamp-sd, var(--_sf-it-clamp, 1));
458
358
  white-space: var(--_sf-it-ws-sd, var(--_sf-it-ws, nowrap));
459
359
  }
460
360
  }
461
361
  }
362
+
462
363
  &[data-flex-direction="column"] {
463
364
  .language__name {
464
365
  white-space: unset;
465
366
  }
466
367
  }
368
+
467
369
  &[data-flex-direction="row"] {
468
370
  overflow-x: auto;
469
371
  }
372
+
470
373
  // Matched when *either* state wants a divider, so the rules below exist and each
471
374
  // state can then decide visibility for itself — gating on the default state alone
472
375
  // meant a divider switched on only for hover could never appear.
@@ -475,45 +378,25 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
475
378
  // only has to re-point them. Previously the declarations read the default
476
379
  // state's variables directly and the Widget Style > Hover > Divider controls
477
380
  // wrote to `--_ctm-dn-wt-se-hr-se-dr-*`, which nothing ever read.
478
- --_sf-dr-wt: var(
479
- --_ctm-mob-dn-wt-se-dt-se-dr-wt,
480
- var(--_ctm-tab-dn-wt-se-dt-se-dr-wt, var(--_ctm-dn-wt-se-dt-se-dr-wt))
481
- );
482
- --_sf-dr-cr: var(
483
- --_ctm-mob-dn-wt-se-dt-se-dr-cr,
484
- var(--_ctm-tab-dn-wt-se-dt-se-dr-cr, var(--_ctm-dn-wt-se-dt-se-dr-cr))
485
- );
381
+ --_sf-dr-wt: var(--_ctm-mob-dn-wt-se-dt-se-dr-wt,
382
+ var(--_ctm-tab-dn-wt-se-dt-se-dr-wt, var(--_ctm-dn-wt-se-dt-se-dr-wt)));
383
+ --_sf-dr-cr: var(--_ctm-mob-dn-wt-se-dt-se-dr-cr,
384
+ var(--_ctm-tab-dn-wt-se-dt-se-dr-cr, var(--_ctm-dn-wt-se-dt-se-dr-cr)));
486
385
 
487
386
  // Divider lives under Widget Style, so its hover state is the *widget* being
488
387
  // hovered, not an individual option. Scoping this to `.option:hover` only
489
388
  // repainted the hovered option's own divider, which read as "not working".
490
389
  &:hover {
491
- --_sf-dr-wt: var(
492
- --_ctm-mob-dn-wt-se-hr-se-dr-wt,
493
- var(
494
- --_ctm-tab-dn-wt-se-hr-se-dr-wt,
495
- var(
496
- --_ctm-dn-wt-se-hr-se-dr-wt,
497
- var(
498
- --_ctm-mob-dn-wt-se-dt-se-dr-wt,
499
- var(--_ctm-tab-dn-wt-se-dt-se-dr-wt, var(--_ctm-dn-wt-se-dt-se-dr-wt))
500
- )
501
- )
502
- )
503
- );
504
- --_sf-dr-cr: var(
505
- --_ctm-mob-dn-wt-se-hr-se-dr-cr,
506
- var(
507
- --_ctm-tab-dn-wt-se-hr-se-dr-cr,
508
- var(
509
- --_ctm-dn-wt-se-hr-se-dr-cr,
510
- var(
511
- --_ctm-mob-dn-wt-se-dt-se-dr-cr,
512
- var(--_ctm-tab-dn-wt-se-dt-se-dr-cr, var(--_ctm-dn-wt-se-dt-se-dr-cr))
513
- )
514
- )
515
- )
516
- );
390
+ --_sf-dr-wt: var(--_ctm-mob-dn-wt-se-hr-se-dr-wt,
391
+ var(--_ctm-tab-dn-wt-se-hr-se-dr-wt,
392
+ var(--_ctm-dn-wt-se-hr-se-dr-wt,
393
+ var(--_ctm-mob-dn-wt-se-dt-se-dr-wt,
394
+ var(--_ctm-tab-dn-wt-se-dt-se-dr-wt, var(--_ctm-dn-wt-se-dt-se-dr-wt))))));
395
+ --_sf-dr-cr: var(--_ctm-mob-dn-wt-se-hr-se-dr-cr,
396
+ var(--_ctm-tab-dn-wt-se-hr-se-dr-cr,
397
+ var(--_ctm-dn-wt-se-hr-se-dr-cr,
398
+ var(--_ctm-mob-dn-wt-se-dt-se-dr-cr,
399
+ var(--_ctm-tab-dn-wt-se-dt-se-dr-cr, var(--_ctm-dn-wt-se-dt-se-dr-cr))))));
517
400
  }
518
401
 
519
402
  // Both states also collapse the weight when their own switch is off, so the space
@@ -534,32 +417,34 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
534
417
  .option:not(:last-child) {
535
418
  @include dividerGapReserve(var(--_sf-dr-wt), right);
536
419
  }
420
+
537
421
  .option:not(:last-child)::before {
538
422
  content: "";
539
423
  position: absolute;
540
424
  top: 0;
541
- bottom: 0; /* For full height divider */
542
- right: dividerGapOffset(
543
- var(--_ctm-mob-lt-gp-bn-is, var(--_ctm-tab-lt-gp-bn-is, var(--_ctm-lt-gp-bn-is))),
544
- var(--_sf-dr-wt)
545
- );
546
- width: var(--_sf-dr-wt); /* Divider thickness */
547
- background-color: var(--_sf-dr-cr); /* Divider color */
425
+ bottom: 0;
426
+ /* For full height divider */
427
+ right: dividerGapOffset(var(--_ctm-mob-lt-gp-bn-is, var(--_ctm-tab-lt-gp-bn-is, var(--_ctm-lt-gp-bn-is))),
428
+ var(--_sf-dr-wt));
429
+ width: var(--_sf-dr-wt);
430
+ /* Divider thickness */
431
+ background-color: var(--_sf-dr-cr);
432
+ /* Divider color */
548
433
  }
549
434
  }
435
+
550
436
  &[data-flex-direction="column"] {
551
437
  .option:not(:last-child) {
552
438
  @include dividerGapReserve(var(--_sf-dr-wt));
553
439
  }
440
+
554
441
  .option:not(:last-child)::before {
555
442
  content: "";
556
443
  position: absolute;
557
444
  left: 0;
558
445
  right: 0;
559
- bottom: dividerGapOffset(
560
- var(--_ctm-mob-lt-gp-bn-is, var(--_ctm-tab-lt-gp-bn-is, var(--_ctm-lt-gp-bn-is))),
561
- var(--_sf-dr-wt)
562
- );
446
+ bottom: dividerGapOffset(var(--_ctm-mob-lt-gp-bn-is, var(--_ctm-tab-lt-gp-bn-is, var(--_ctm-lt-gp-bn-is))),
447
+ var(--_sf-dr-wt));
563
448
  height: var(--_sf-dr-wt);
564
449
  background-color: var(--_sf-dr-cr);
565
450
  }
@@ -571,9 +456,11 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
571
456
  &[data-show-divider="false"] .option::before {
572
457
  display: none;
573
458
  }
459
+
574
460
  &[data-show-divider-hover="false"]:hover .option::before {
575
461
  display: none;
576
462
  }
463
+
577
464
  &[data-show-divider-hover="true"]:hover .option:not(:last-child)::before {
578
465
  display: block;
579
466
  }
@@ -594,6 +481,7 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
594
481
  // appeared to do nothing.
595
482
  padding: var(--_sf-wt-pg, prepareMediaVariable(--_ctm-dn-wt-pr-tt-pg));
596
483
  gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
484
+
597
485
  .language__name {
598
486
  width: 100%;
599
487
  // Widget Style's per-state values first; the retired Widget Placeholder Text
@@ -616,10 +504,12 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
616
504
  .language__name {
617
505
  color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-im-se-dt-se-cr));
618
506
  font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-fy));
507
+
619
508
  &.flex__overflow {
620
509
  white-space: normal;
621
510
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
622
511
  }
512
+
623
513
  font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-se));
624
514
  font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-wt));
625
515
  font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-se-ic));
@@ -667,10 +557,12 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
667
557
  // the two swap in the markup as soon as an option is picked, so they have to
668
558
  // resolve identically or the text would jump on first selection.
669
559
  font-family: var(--_sf-wt-ft-fy, prepareMediaVariable(--_ctm-dn-wt-pr-tt-ft-fy));
560
+
670
561
  &.flex__overflow {
671
562
  white-space: normal;
672
563
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
673
564
  }
565
+
674
566
  font-size: var(--_sf-wt-ft-se, prepareMediaVariable(--_ctm-dn-wt-pr-tt-ft-se));
675
567
  color: var(--_sf-wt-cr, prepareMediaVariable(--_ctm-dn-wt-pr-tt-cr));
676
568
  // color: var(--_gray-600);
@@ -692,10 +584,12 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
692
584
  -webkit-line-clamp: var(--_sf-it-clamp, 1);
693
585
  white-space: var(--_sf-it-ws, nowrap);
694
586
  }
587
+
695
588
  .est__dropdown__main {
696
589
  position: relative;
697
590
  width: 100%;
698
591
  margin-top: 0px;
592
+
699
593
  label {
700
594
  font-size: 14px;
701
595
  color: var(--_gray-700);
@@ -725,99 +619,55 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
725
619
  // branches of the same markup.
726
620
  @include widgetStateFont(dt-se);
727
621
  padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
728
- background-color: var(
729
- --_ctm-mob-dn-wt-se-dt-se-bd-cr,
730
- var(--_ctm-tab-dn-wt-se-dt-se-bd-cr, var(--_ctm-dn-wt-se-dt-se-bd-cr))
731
- );
732
-
733
- border-color: var(
734
- --_ctm-mob-dn-wt-se-dt-se-br-cr,
735
- var(--_ctm-tab-dn-wt-se-dt-se-br-cr, var(--_ctm-dn-wt-se-dt-se-br-cr))
736
- );
737
-
738
- border-style: var(
739
- --_ctm-mob-dn-wt-se-dt-se-br-se,
740
- var(--_ctm-tab-dn-wt-se-dt-se-br-se, var(--_ctm-dn-wt-se-dt-se-br-se))
741
- );
742
-
743
- border-width: var(
744
- --_ctm-mob-dn-wt-se-dt-se-br-wh,
745
- var(--_ctm-tab-dn-wt-se-dt-se-br-wh, var(--_ctm-dn-wt-se-dt-se-br-wh))
746
- );
747
-
748
- border-radius: var(
749
- --_ctm-mob-dn-wt-se-dt-se-br-rs,
750
- var(--_ctm-tab-dn-wt-se-dt-se-br-rs, var(--_ctm-dn-wt-se-dt-se-br-rs))
751
- );
752
-
753
- box-shadow: var(
754
- --_show-shadow,
755
- var(
756
- --_ctm-mob-dn-wt-se-dt-se-sw-ae,
757
- var(--_ctm-tab-dn-wt-se-dt-se-sw-ae, var(--_ctm-dn-wt-se-dt-se-sw-ae))
758
- )
759
- var(
760
- --_ctm-mob-dn-wt-se-dt-se-sw-br,
761
- var(--_ctm-tab-dn-wt-se-dt-se-sw-br, var(--_ctm-dn-wt-se-dt-se-sw-br))
762
- )
763
- var(
764
- --_ctm-mob-dn-wt-se-dt-se-sw-sd,
765
- var(--_ctm-tab-dn-wt-se-dt-se-sw-sd, var(--_ctm-dn-wt-se-dt-se-sw-sd))
766
- )
767
- var(
768
- --_ctm-mob-dn-wt-se-dt-se-sw-cr,
769
- var(--_ctm-tab-dn-wt-se-dt-se-sw-cr, var(--_ctm-dn-wt-se-dt-se-sw-cr))
770
- )
771
- );
622
+ background-color: var(--_ctm-mob-dn-wt-se-dt-se-bd-cr,
623
+ var(--_ctm-tab-dn-wt-se-dt-se-bd-cr, var(--_ctm-dn-wt-se-dt-se-bd-cr)));
624
+
625
+ border-color: var(--_ctm-mob-dn-wt-se-dt-se-br-cr,
626
+ var(--_ctm-tab-dn-wt-se-dt-se-br-cr, var(--_ctm-dn-wt-se-dt-se-br-cr)));
627
+
628
+ border-style: var(--_ctm-mob-dn-wt-se-dt-se-br-se,
629
+ var(--_ctm-tab-dn-wt-se-dt-se-br-se, var(--_ctm-dn-wt-se-dt-se-br-se)));
630
+
631
+ border-width: var(--_ctm-mob-dn-wt-se-dt-se-br-wh,
632
+ var(--_ctm-tab-dn-wt-se-dt-se-br-wh, var(--_ctm-dn-wt-se-dt-se-br-wh)));
633
+
634
+ border-radius: var(--_ctm-mob-dn-wt-se-dt-se-br-rs,
635
+ var(--_ctm-tab-dn-wt-se-dt-se-br-rs, var(--_ctm-dn-wt-se-dt-se-br-rs)));
636
+
637
+ box-shadow: var(--_show-shadow,
638
+ var(--_ctm-mob-dn-wt-se-dt-se-sw-ae,
639
+ var(--_ctm-tab-dn-wt-se-dt-se-sw-ae, var(--_ctm-dn-wt-se-dt-se-sw-ae))) var(--_ctm-mob-dn-wt-se-dt-se-sw-br,
640
+ var(--_ctm-tab-dn-wt-se-dt-se-sw-br, var(--_ctm-dn-wt-se-dt-se-sw-br))) var(--_ctm-mob-dn-wt-se-dt-se-sw-sd,
641
+ var(--_ctm-tab-dn-wt-se-dt-se-sw-sd, var(--_ctm-dn-wt-se-dt-se-sw-sd))) var(--_ctm-mob-dn-wt-se-dt-se-sw-cr,
642
+ var(--_ctm-tab-dn-wt-se-dt-se-sw-cr, var(--_ctm-dn-wt-se-dt-se-sw-cr))));
643
+
772
644
  &:hover {
773
645
  // Hover state, falling back to the default state per property so a widget
774
646
  // that only sets a hover colour keeps the default font, size and the rest.
775
647
  @include widgetStateFont(hr-se, dt-se);
776
- background-color: var(
777
- --_ctm-mob-dn-wt-se-hr-se-bd-cr,
778
- var(--_ctm-tab-dn-wt-se-hr-se-bd-cr, var(--_ctm-dn-wt-se-hr-se-bd-cr))
779
- );
780
-
781
- border-color: var(
782
- --_ctm-mob-dn-wt-se-hr-se-br-cr,
783
- var(--_ctm-tab-dn-wt-se-hr-se-br-cr, var(--_ctm-dn-wt-se-hr-se-br-cr))
784
- );
785
-
786
- border-style: var(
787
- --_ctm-mob-dn-wt-se-hr-se-br-se,
788
- var(--_ctm-tab-dn-wt-se-hr-se-br-se, var(--_ctm-dn-wt-se-hr-se-br-se))
789
- );
790
-
791
- border-width: var(
792
- --_ctm-mob-dn-wt-se-hr-se-br-wh,
793
- var(--_ctm-tab-dn-wt-se-hr-se-br-wh, var(--_ctm-dn-wt-se-hr-se-br-wh))
794
- );
795
-
796
- border-radius: var(
797
- --_ctm-mob-dn-wt-se-hr-se-br-rs,
798
- var(--_ctm-tab-dn-wt-se-hr-se-br-rs, var(--_ctm-dn-wt-se-hr-se-br-rs))
799
- );
800
-
801
- box-shadow: var(
802
- --_show-shadow,
803
- var(
804
- --_ctm-mob-dn-wt-se-hr-se-sw-ae,
805
- var(--_ctm-tab-dn-wt-se-hr-se-sw-ae, var(--_ctm-dn-wt-se-hr-se-sw-ae))
806
- )
807
- var(
808
- --_ctm-mob-dn-wt-se-hr-se-sw-br,
809
- var(--_ctm-tab-dn-wt-se-hr-se-sw-br, var(--_ctm-dn-wt-se-hr-se-sw-br))
810
- )
811
- var(
812
- --_ctm-mob-dn-wt-se-hr-se-sw-sd,
813
- var(--_ctm-tab-dn-wt-se-hr-se-sw-sd, var(--_ctm-dn-wt-se-hr-se-sw-sd))
814
- )
815
- var(
816
- --_ctm-mob-dn-wt-se-hr-se-sw-cr,
817
- var(--_ctm-tab-dn-wt-se-hr-se-sw-cr, var(--_ctm-dn-wt-se-hr-se-sw-cr))
818
- )
819
- );
648
+ background-color: var(--_ctm-mob-dn-wt-se-hr-se-bd-cr,
649
+ var(--_ctm-tab-dn-wt-se-hr-se-bd-cr, var(--_ctm-dn-wt-se-hr-se-bd-cr)));
650
+
651
+ border-color: var(--_ctm-mob-dn-wt-se-hr-se-br-cr,
652
+ var(--_ctm-tab-dn-wt-se-hr-se-br-cr, var(--_ctm-dn-wt-se-hr-se-br-cr)));
653
+
654
+ border-style: var(--_ctm-mob-dn-wt-se-hr-se-br-se,
655
+ var(--_ctm-tab-dn-wt-se-hr-se-br-se, var(--_ctm-dn-wt-se-hr-se-br-se)));
656
+
657
+ border-width: var(--_ctm-mob-dn-wt-se-hr-se-br-wh,
658
+ var(--_ctm-tab-dn-wt-se-hr-se-br-wh, var(--_ctm-dn-wt-se-hr-se-br-wh)));
659
+
660
+ border-radius: var(--_ctm-mob-dn-wt-se-hr-se-br-rs,
661
+ var(--_ctm-tab-dn-wt-se-hr-se-br-rs, var(--_ctm-dn-wt-se-hr-se-br-rs)));
662
+
663
+ box-shadow: var(--_show-shadow,
664
+ var(--_ctm-mob-dn-wt-se-hr-se-sw-ae,
665
+ var(--_ctm-tab-dn-wt-se-hr-se-sw-ae, var(--_ctm-dn-wt-se-hr-se-sw-ae))) var(--_ctm-mob-dn-wt-se-hr-se-sw-br,
666
+ var(--_ctm-tab-dn-wt-se-hr-se-sw-br, var(--_ctm-dn-wt-se-hr-se-sw-br))) var(--_ctm-mob-dn-wt-se-hr-se-sw-sd,
667
+ var(--_ctm-tab-dn-wt-se-hr-se-sw-sd, var(--_ctm-dn-wt-se-hr-se-sw-sd))) var(--_ctm-mob-dn-wt-se-hr-se-sw-cr,
668
+ var(--_ctm-tab-dn-wt-se-hr-se-sw-cr, var(--_ctm-dn-wt-se-hr-se-sw-cr))));
820
669
  }
670
+
821
671
  .option_select {
822
672
  // Truncation is handled by `.language__name` inside, which knows whether
823
673
  // Text Overflow is on and how many lines to clamp to. A `white-space:
@@ -832,6 +682,7 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
832
682
  // Safe to scope on the wrapper: the options list is its sibling, not a
833
683
  // descendant, so option labels keep their own Item Style clamp.
834
684
  &:hover {
685
+
835
686
  .language__name,
836
687
  .value__selected__new {
837
688
  -webkit-line-clamp: var(--_sf-it-clamp-hr, var(--_sf-it-clamp, 1));
@@ -850,8 +701,8 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
850
701
  // pushing the toggle icon out of the widget.
851
702
  min-width: 0;
852
703
 
853
- & > .option_select,
854
- & > .value__selected__new {
704
+ &>.option_select,
705
+ &>.value__selected__new {
855
706
  flex: 1 1 auto;
856
707
  min-width: 0;
857
708
  }
@@ -862,12 +713,15 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
862
713
  // right: 0;
863
714
  transition: transform 0.4s ease-in-out;
864
715
  display: flex;
716
+
865
717
  &.rotate__180 {
866
718
  transform: rotate(180deg);
867
719
  }
720
+
868
721
  &.rotate__0 {
869
722
  transform: rotate(0deg);
870
723
  }
724
+
871
725
  width: prepareMediaVariable(--_ctm-dn-te-in-in-se);
872
726
  height: prepareMediaVariable(--_ctm-dn-te-in-in-se);
873
727
 
@@ -876,10 +730,8 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
876
730
  height: prepareMediaVariable(--_ctm-dn-te-in-in-se);
877
731
 
878
732
  path {
879
- stroke: var(
880
- --_ctm-mob-dn-te-in-in-c1,
881
- var(--_ctm-tab-dn-te-in-cr, var(--_ctm-dn-te-in-in-c1))
882
- );
733
+ stroke: var(--_ctm-mob-dn-te-in-in-c1,
734
+ var(--_ctm-tab-dn-te-in-cr, var(--_ctm-dn-te-in-in-c1)));
883
735
  // Overrides the stroke-width presentation attribute baked into the icon markup.
884
736
  stroke-width: prepareMediaVariable(--_ctm-dn-te-in-se-wh, 1.25);
885
737
  }
@@ -911,10 +763,7 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
911
763
  // padding: 2px;
912
764
  // border-radius: 4px;
913
765
  // border: 1px solid var(--_gray-300);
914
- box-shadow: prepareMediaVariable(--_ctm-dn-wt-dn-sw-ae)
915
- prepareMediaVariable(--_ctm-dn-wt-dn-sw-br)
916
- prepareMediaVariable(--_ctm-dn-wt-dn-sw-sd)
917
- prepareMediaVariable(--_ctm-dn-wt-dn-sw-cr);
766
+ box-shadow: prepareMediaVariable(--_ctm-dn-wt-dn-sw-ae) prepareMediaVariable(--_ctm-dn-wt-dn-sw-br) prepareMediaVariable(--_ctm-dn-wt-dn-sw-sd) prepareMediaVariable(--_ctm-dn-wt-dn-sw-cr);
918
767
 
919
768
  &.top {
920
769
  bottom: 100%;
@@ -932,6 +781,7 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
932
781
  // border-radius: 4px;
933
782
  // }
934
783
  }
784
+
935
785
  &.show__panel {
936
786
  animation: slideUp 0.4s ease-in-out forwards;
937
787
  }
@@ -945,4 +795,4 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
945
795
  }
946
796
  }
947
797
  }
948
- }
798
+ }