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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (135) hide show
  1. package/dist/add-existing-form.scss +5 -13
  2. package/dist/add-order.scss +236 -126
  3. package/dist/add-products-tab-details.scss +2097 -1048
  4. package/dist/add-products-tab.scss +1204 -666
  5. package/dist/allocation-header-quota-details.scss +407 -189
  6. package/dist/allocationDetails.scss +2143 -1661
  7. package/dist/allocations-quota-details.scss +323 -159
  8. package/dist/allocations.scss +793 -475
  9. package/dist/amount-estimator.scss +743 -405
  10. package/dist/badge.scss +18 -43
  11. package/dist/brand-basic-elements.scss +124 -76
  12. package/dist/brand.scss +55 -28
  13. package/dist/breadcrumbs.scss +718 -356
  14. package/dist/builder.js +1 -1
  15. package/dist/builderLite.js +1 -1
  16. package/dist/bulk-variant-picker.scss +2027 -1128
  17. package/dist/bundle.scss +1477 -841
  18. package/dist/bundleDetails.scss +5072 -3774
  19. package/dist/button.scss +103 -79
  20. package/dist/buy-for-tab-container.scss +106 -77
  21. package/dist/buyForHeaders.scss +2976 -1722
  22. package/dist/cart-details.scss +1012 -481
  23. package/dist/cart-summary.scss +1149 -557
  24. package/dist/cart-wrapper.scss +79 -37
  25. package/dist/cart.scss +225 -117
  26. package/dist/cartAttributes.scss +735 -416
  27. package/dist/category-groups-element.scss +108 -127
  28. package/dist/category-groups-product-grid.scss +147 -120
  29. package/dist/category-groups-product-image.scss +1457 -1162
  30. package/dist/category-groups-product-options.scss +680 -613
  31. package/dist/category-groups-product-price.scss +3244 -1966
  32. package/dist/category-groups-quota-details.scss +464 -210
  33. package/dist/category.scss +50 -26
  34. package/dist/checkout.scss +16 -24
  35. package/dist/confirm-modal.scss +2 -22
  36. package/dist/container.scss +54 -32
  37. package/dist/countdown.scss +443 -255
  38. package/dist/coupon.scss +710 -351
  39. package/dist/default-dropdown.scss +1 -12
  40. package/dist/embroider-template-1-v2.scss +172 -123
  41. package/dist/embroider-template-1.scss +104 -68
  42. package/dist/embroidery.scss +31 -30
  43. package/dist/employee-bulk-order.scss +142 -418
  44. package/dist/faq.scss +408 -228
  45. package/dist/filter-results.scss +265 -125
  46. package/dist/filters.scss +1797 -900
  47. package/dist/gallery-slider-temp.scss +750 -432
  48. package/dist/global-styles.scss +7 -23
  49. package/dist/grid.scss +33 -25
  50. package/dist/hotspot.scss +115 -68
  51. package/dist/image-temp.scss +20 -21
  52. package/dist/item-stock.scss +16 -9
  53. package/dist/kitDetails.scss +4301 -2721
  54. package/dist/kits.scss +19 -24
  55. package/dist/language-selector.scss +361 -211
  56. package/dist/last-x-orders.scss +174 -95
  57. package/dist/layouter-item.scss +103 -75
  58. package/dist/layouter-pro-item.scss +95 -89
  59. package/dist/layouter-pro.scss +92 -87
  60. package/dist/layouter.scss +445 -383
  61. package/dist/light-box-v2.scss +104 -89
  62. package/dist/login.scss +566 -287
  63. package/dist/map.scss +368 -221
  64. package/dist/marchandiserSets.scss +104 -95
  65. package/dist/mega-menu-container.scss +109 -96
  66. package/dist/mega-menu.scss +731 -624
  67. package/dist/menu-item.scss +2 -2
  68. package/dist/menu-v2.scss +619 -507
  69. package/dist/multi-select-dropdown.scss +3 -27
  70. package/dist/my-templates.scss +9 -38
  71. package/dist/option-bar.scss +375 -215
  72. package/dist/option-families.scss +252 -0
  73. package/dist/order-status.scss +1117 -646
  74. package/dist/overflow-module.scss +7 -6
  75. package/dist/past-orders.scss +149 -118
  76. package/dist/payment-methods.scss +30 -46
  77. package/dist/pickup-locations.scss +1118 -558
  78. package/dist/position-module.scss +17 -20
  79. package/dist/prefix-list.scss +10 -21
  80. package/dist/product-actions.scss +2316 -1610
  81. package/dist/product-basic-elements.scss +169 -108
  82. package/dist/product-highlights.scss +152 -107
  83. package/dist/product-image-bundles.scss +642 -337
  84. package/dist/product-inventory.scss +1357 -673
  85. package/dist/product-labels.scss +105 -84
  86. package/dist/product-options.scss +1274 -1117
  87. package/dist/product-price.scss +2561 -1283
  88. package/dist/product-promotions.scss +2830 -1388
  89. package/dist/product-sizechart.scss +905 -516
  90. package/dist/product.scss +61 -28
  91. package/dist/productDetails.scss +39 -19
  92. package/dist/profile.scss +447 -207
  93. package/dist/quantity-selector.scss +550 -313
  94. package/dist/quick-inventory-check.scss +174 -95
  95. package/dist/quick-links.scss +133 -55
  96. package/dist/quick-order-pad.scss +271 -218
  97. package/dist/quota-details.scss +282 -152
  98. package/dist/quotes.scss +122 -89
  99. package/dist/repeater-embla-controls.scss +15 -35
  100. package/dist/repeater-grid-toggle.scss +166 -156
  101. package/dist/repeater-item.scss +64 -41
  102. package/dist/repeater.scss +814 -671
  103. package/dist/request-for-quotes.scss +16 -66
  104. package/dist/responsive-behaviour.scss +1 -3
  105. package/dist/rfqs.scss +181 -118
  106. package/dist/scroll.scss +172 -93
  107. package/dist/search.scss +326 -179
  108. package/dist/section.scss +51 -27
  109. package/dist/shipping-payments.scss +58 -198
  110. package/dist/simple-list.scss +164 -74
  111. package/dist/social.scss +145 -80
  112. package/dist/sort.scss +19 -11
  113. package/dist/stack.scss +34 -23
  114. package/dist/static-global.scss +26 -44
  115. package/dist/stockStatus.scss +19 -11
  116. package/dist/store-locations.scss +1105 -577
  117. package/dist/tab-container.scss +108 -81
  118. package/dist/table-common.scss +408 -217
  119. package/dist/table.scss +502 -271
  120. package/dist/text-temp.scss +7 -8
  121. package/dist/theme-classes.scss +13 -17
  122. package/dist/types/builder/enums/data-connectors.d.ts +3 -1
  123. package/dist/types/builder/enums/index.d.ts +3 -1
  124. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  125. package/dist/types/builder/tools/element-edit/optionFamilies.d.ts +20 -0
  126. package/dist/types/website/constants/data-connector-souces.d.ts +40 -8
  127. package/dist/types/website/constants/data-connectors.d.ts +12 -1
  128. package/dist/types/website/helper/ssr-functions.d.ts +8 -0
  129. package/dist/uom-selector.scss +949 -489
  130. package/dist/user-elements.scss +837 -529
  131. package/dist/variant-picker.scss +2555 -1281
  132. package/dist/volume-pricing.scss +1037 -541
  133. package/dist/website.js +1 -1
  134. package/dist/widget.scss +1 -0
  135. package/package.json +1 -1
package/dist/language-selector.scss CHANGED
@@ -18,34 +18,41 @@ $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($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}));
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
+ );
29
39
  }
30
40
  }
31
41
 
32
42
  [data-div-type="element"] {
33
-
34
43
  &[data-element-type="languageMenu"],
35
44
  &[data-element-type="currencySelector"],
36
45
  &[data-element-type="userGroupsSelector"],
37
46
  &[data-element-type="warehouseSelector"] {
38
47
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
39
48
 
40
- &>.wrapper {
49
+ & > .wrapper {
41
50
  width: 100%;
42
51
  height: auto;
43
52
  }
44
-
45
53
  &[data-show-shadow="false"] {
46
54
  --_show-shadow: none;
47
55
  }
48
-
49
56
  .language__conatiner {
50
57
  // background-color: var(
51
58
  // --_ctm-mob-dn-wt-se-dt-se-bd-cr,
@@ -156,35 +163,30 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
156
163
  border-style: none;
157
164
  }
158
165
  }
159
-
160
166
  &[data-widget-hover-border="false"] {
161
167
  .est__dropdown__main .est__dropdown .dropdown__button__wrapper:hover {
162
168
  border-width: 0;
163
169
  border-style: none;
164
170
  }
165
171
  }
166
-
167
172
  &[data-dropdown-border="false"] {
168
173
  .est__dropdown__main .est__dropdown .list {
169
174
  border-width: 0;
170
175
  border-style: none;
171
176
  }
172
177
  }
173
-
174
178
  &[data-item-border="false"] {
175
179
  .option:not(:hover):not([data-selected="true"]) {
176
180
  border-width: 0;
177
181
  border-style: none;
178
182
  }
179
183
  }
180
-
181
184
  &[data-item-hover-border="false"] {
182
185
  .option:hover:not([data-selected="true"]) {
183
186
  border-width: 0;
184
187
  border-style: none;
185
188
  }
186
189
  }
187
-
188
190
  &[data-item-selected-border="false"] {
189
191
  .option[data-selected="true"] {
190
192
  border-width: 0;
@@ -193,111 +195,199 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
193
195
  }
194
196
 
195
197
  .option:hover {
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)));
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
+ );
206
218
 
207
219
  // for shadow
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)));
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
+ );
216
236
 
217
237
  // for font
218
238
 
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)));
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
+ );
246
292
  }
247
293
 
248
294
  .option[data-selected="true"] {
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)));
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
+ );
257
311
  // Was missing entirely, so `border-radius: var(--_sf-sd-br-rs, <default state>)`
258
312
  // always fell through to the default state and Selected > Border Radius did
259
313
  // nothing. Every sibling state variable had one; this is the odd one out.
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)));
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
+ );
262
318
  // new
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)));
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
+ );
271
335
 
272
336
  // for font
273
337
 
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)));
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
+ );
301
391
  }
302
392
 
303
393
  .option {
@@ -322,8 +412,10 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
322
412
  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-rs));
323
413
  border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-wh));
324
414
 
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
-
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));
327
419
  //
328
420
  &[data-selected="true"] {
329
421
  // `.option` only ever declared padding from the hover variable, so
@@ -336,40 +428,45 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
336
428
  border-style: var(--_sf-sd-br-se, prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-se));
337
429
  border-width: var(--_sf-sd-br-wh, prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-wh));
338
430
  border-radius: var(--_sf-sd-br-rs, prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-rs));
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
-
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));
341
435
  .language__name {
342
436
  color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-im-se-dt-se-cr));
343
437
  font-family: var(--_sf-sd-ft-fy, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-fy));
344
438
  font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-se));
345
439
  font-weight: var(--_sf-sd-ft-wt, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-wt));
346
- font-style: var(--_sf-sd-ft-se-ic,
347
- prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-se-ic));
440
+ font-style: var(
441
+ --_sf-sd-ft-se-ic,
442
+ prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-se-ic)
443
+ );
348
444
  text-align: var(--_sf-sd-tt-an, prepareMediaVariable(--_ctm-dn-im-se-dt-se-tt-an));
349
445
  letter-spacing: var(--_sf-sd-lr-sg, prepareMediaVariable(--_ctm-dn-im-se-dt-se-lr-sg));
350
446
  line-height: var(--_sf-sd-le-ht, prepareMediaVariable(--_ctm-dn-im-se-dt-se-le-ht-dc));
351
447
  text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ue));
352
448
  text-transform: var(--_sf-sd-tt-tm, prepareMediaVariable(--_ctm-dn-im-se-dt-se-tt-tm));
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));
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
+ );
357
457
  -webkit-line-clamp: var(--_sf-it-clamp-sd, var(--_sf-it-clamp, 1));
358
458
  white-space: var(--_sf-it-ws-sd, var(--_sf-it-ws, nowrap));
359
459
  }
360
460
  }
361
461
  }
362
-
363
462
  &[data-flex-direction="column"] {
364
463
  .language__name {
365
464
  white-space: unset;
366
465
  }
367
466
  }
368
-
369
467
  &[data-flex-direction="row"] {
370
468
  overflow-x: auto;
371
469
  }
372
-
373
470
  // Matched when *either* state wants a divider, so the rules below exist and each
374
471
  // state can then decide visibility for itself — gating on the default state alone
375
472
  // meant a divider switched on only for hover could never appear.
@@ -378,25 +475,45 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
378
475
  // only has to re-point them. Previously the declarations read the default
379
476
  // state's variables directly and the Widget Style > Hover > Divider controls
380
477
  // wrote to `--_ctm-dn-wt-se-hr-se-dr-*`, which nothing ever read.
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)));
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
+ );
385
486
 
386
487
  // Divider lives under Widget Style, so its hover state is the *widget* being
387
488
  // hovered, not an individual option. Scoping this to `.option:hover` only
388
489
  // repainted the hovered option's own divider, which read as "not working".
389
490
  &:hover {
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))))));
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
+ );
400
517
  }
401
518
 
402
519
  // Both states also collapse the weight when their own switch is off, so the space
@@ -417,34 +534,32 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
417
534
  .option:not(:last-child) {
418
535
  @include dividerGapReserve(var(--_sf-dr-wt), right);
419
536
  }
420
-
421
537
  .option:not(:last-child)::before {
422
538
  content: "";
423
539
  position: absolute;
424
540
  top: 0;
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 */
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 */
433
548
  }
434
549
  }
435
-
436
550
  &[data-flex-direction="column"] {
437
551
  .option:not(:last-child) {
438
552
  @include dividerGapReserve(var(--_sf-dr-wt));
439
553
  }
440
-
441
554
  .option:not(:last-child)::before {
442
555
  content: "";
443
556
  position: absolute;
444
557
  left: 0;
445
558
  right: 0;
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));
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
+ );
448
563
  height: var(--_sf-dr-wt);
449
564
  background-color: var(--_sf-dr-cr);
450
565
  }
@@ -456,11 +571,9 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
456
571
  &[data-show-divider="false"] .option::before {
457
572
  display: none;
458
573
  }
459
-
460
574
  &[data-show-divider-hover="false"]:hover .option::before {
461
575
  display: none;
462
576
  }
463
-
464
577
  &[data-show-divider-hover="true"]:hover .option:not(:last-child)::before {
465
578
  display: block;
466
579
  }
@@ -481,7 +594,6 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
481
594
  // appeared to do nothing.
482
595
  padding: var(--_sf-wt-pg, prepareMediaVariable(--_ctm-dn-wt-pr-tt-pg));
483
596
  gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
484
-
485
597
  .language__name {
486
598
  width: 100%;
487
599
  // Widget Style's per-state values first; the retired Widget Placeholder Text
@@ -504,12 +616,10 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
504
616
  .language__name {
505
617
  color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-im-se-dt-se-cr));
506
618
  font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-fy));
507
-
508
619
  &.flex__overflow {
509
620
  white-space: normal;
510
621
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
511
622
  }
512
-
513
623
  font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-se));
514
624
  font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-wt));
515
625
  font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-se-ic));
@@ -557,12 +667,10 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
557
667
  // the two swap in the markup as soon as an option is picked, so they have to
558
668
  // resolve identically or the text would jump on first selection.
559
669
  font-family: var(--_sf-wt-ft-fy, prepareMediaVariable(--_ctm-dn-wt-pr-tt-ft-fy));
560
-
561
670
  &.flex__overflow {
562
671
  white-space: normal;
563
672
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
564
673
  }
565
-
566
674
  font-size: var(--_sf-wt-ft-se, prepareMediaVariable(--_ctm-dn-wt-pr-tt-ft-se));
567
675
  color: var(--_sf-wt-cr, prepareMediaVariable(--_ctm-dn-wt-pr-tt-cr));
568
676
  // color: var(--_gray-600);
@@ -584,12 +692,10 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
584
692
  -webkit-line-clamp: var(--_sf-it-clamp, 1);
585
693
  white-space: var(--_sf-it-ws, nowrap);
586
694
  }
587
-
588
695
  .est__dropdown__main {
589
696
  position: relative;
590
697
  width: 100%;
591
698
  margin-top: 0px;
592
-
593
699
  label {
594
700
  font-size: 14px;
595
701
  color: var(--_gray-700);
@@ -619,55 +725,99 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
619
725
  // branches of the same markup.
620
726
  @include widgetStateFont(dt-se);
621
727
  padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
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
-
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
+ );
644
772
  &:hover {
645
773
  // Hover state, falling back to the default state per property so a widget
646
774
  // that only sets a hover colour keeps the default font, size and the rest.
647
775
  @include widgetStateFont(hr-se, dt-se);
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))));
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
+ );
669
820
  }
670
-
671
821
  .option_select {
672
822
  // Truncation is handled by `.language__name` inside, which knows whether
673
823
  // Text Overflow is on and how many lines to clamp to. A `white-space:
@@ -682,7 +832,6 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
682
832
  // Safe to scope on the wrapper: the options list is its sibling, not a
683
833
  // descendant, so option labels keep their own Item Style clamp.
684
834
  &:hover {
685
-
686
835
  .language__name,
687
836
  .value__selected__new {
688
837
  -webkit-line-clamp: var(--_sf-it-clamp-hr, var(--_sf-it-clamp, 1));
@@ -701,8 +850,8 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
701
850
  // pushing the toggle icon out of the widget.
702
851
  min-width: 0;
703
852
 
704
- &>.option_select,
705
- &>.value__selected__new {
853
+ & > .option_select,
854
+ & > .value__selected__new {
706
855
  flex: 1 1 auto;
707
856
  min-width: 0;
708
857
  }
@@ -713,15 +862,12 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
713
862
  // right: 0;
714
863
  transition: transform 0.4s ease-in-out;
715
864
  display: flex;
716
-
717
865
  &.rotate__180 {
718
866
  transform: rotate(180deg);
719
867
  }
720
-
721
868
  &.rotate__0 {
722
869
  transform: rotate(0deg);
723
870
  }
724
-
725
871
  width: prepareMediaVariable(--_ctm-dn-te-in-in-se);
726
872
  height: prepareMediaVariable(--_ctm-dn-te-in-in-se);
727
873
 
@@ -730,8 +876,10 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
730
876
  height: prepareMediaVariable(--_ctm-dn-te-in-in-se);
731
877
 
732
878
  path {
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)));
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
+ );
735
883
  // Overrides the stroke-width presentation attribute baked into the icon markup.
736
884
  stroke-width: prepareMediaVariable(--_ctm-dn-te-in-se-wh, 1.25);
737
885
  }
@@ -763,7 +911,10 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
763
911
  // padding: 2px;
764
912
  // border-radius: 4px;
765
913
  // border: 1px solid var(--_gray-300);
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);
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);
767
918
 
768
919
  &.top {
769
920
  bottom: 100%;
@@ -781,7 +932,6 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
781
932
  // border-radius: 4px;
782
933
  // }
783
934
  }
784
-
785
935
  &.show__panel {
786
936
  animation: slideUp 0.4s ease-in-out forwards;
787
937
  }
@@ -795,4 +945,4 @@ $widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt
795
945
  }
796
946
  }
797
947
  }
798
- }
948
+ }