@sc-360-v2/storefront-cms-library 0.5.60 → 0.5.61

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 (140) 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 +2155 -1671
  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/bundleCategories.scss +301 -0
  19. package/dist/bundleDetails.scss +5072 -3774
  20. package/dist/button.scss +103 -78
  21. package/dist/buy-for-tab-container.scss +106 -77
  22. package/dist/buyForHeaders.scss +2976 -1722
  23. package/dist/cart-details.scss +1025 -485
  24. package/dist/cart-summary.scss +1234 -569
  25. package/dist/cart-wrapper.scss +79 -37
  26. package/dist/cart.scss +225 -117
  27. package/dist/cartAttributes.scss +647 -367
  28. package/dist/cartDropdownOverlay.scss +10 -1
  29. package/dist/category-groups-element.scss +108 -127
  30. package/dist/category-groups-product-grid.scss +147 -120
  31. package/dist/category-groups-product-image.scss +1457 -1162
  32. package/dist/category-groups-product-options.scss +685 -590
  33. package/dist/category-groups-product-price.scss +3244 -1966
  34. package/dist/category-groups-quota-details.scss +464 -210
  35. package/dist/category.scss +50 -26
  36. package/dist/checkout.scss +16 -24
  37. package/dist/confirm-modal.scss +2 -22
  38. package/dist/container.scss +54 -32
  39. package/dist/countdown.scss +443 -256
  40. package/dist/coupon.scss +16 -19
  41. package/dist/default-dropdown.scss +1 -12
  42. package/dist/embroider-template-1-v2.scss +172 -123
  43. package/dist/embroider-template-1.scss +104 -68
  44. package/dist/embroidery.scss +31 -30
  45. package/dist/employee-bulk-order.scss +142 -418
  46. package/dist/faq.scss +408 -228
  47. package/dist/filter-results.scss +265 -125
  48. package/dist/filters.scss +1682 -831
  49. package/dist/gallery-slider-temp.scss +805 -445
  50. package/dist/global-styles.scss +7 -23
  51. package/dist/grid.scss +33 -25
  52. package/dist/hotspot.scss +115 -68
  53. package/dist/image-temp.scss +38 -24
  54. package/dist/item-stock.scss +16 -9
  55. package/dist/kitDetails.scss +4301 -2721
  56. package/dist/kits.scss +19 -24
  57. package/dist/language-selector.scss +361 -211
  58. package/dist/last-x-orders.scss +174 -95
  59. package/dist/layouter-item.scss +106 -76
  60. package/dist/layouter-pro-item.scss +95 -89
  61. package/dist/layouter-pro.scss +92 -87
  62. package/dist/layouter.scss +264 -79
  63. package/dist/light-box-v2.scss +104 -89
  64. package/dist/login.scss +600 -311
  65. package/dist/map.scss +391 -228
  66. package/dist/marchandiserSets.scss +104 -95
  67. package/dist/mega-menu-container.scss +109 -96
  68. package/dist/mega-menu.scss +731 -624
  69. package/dist/menu-item.scss +2 -2
  70. package/dist/menu-v2.scss +619 -507
  71. package/dist/multi-select-dropdown.scss +3 -27
  72. package/dist/my-templates.scss +9 -38
  73. package/dist/option-bar.scss +375 -215
  74. package/dist/order-status.scss +1117 -643
  75. package/dist/overflow-module.scss +7 -6
  76. package/dist/past-orders.scss +149 -118
  77. package/dist/payment-methods.scss +30 -46
  78. package/dist/pickup-locations.scss +1118 -558
  79. package/dist/position-module.scss +17 -20
  80. package/dist/prefix-list.scss +10 -21
  81. package/dist/product-actions.scss +1778 -1228
  82. package/dist/product-basic-elements.scss +169 -108
  83. package/dist/product-highlights.scss +176 -107
  84. package/dist/product-image-bundles.scss +642 -337
  85. package/dist/product-inventory.scss +1357 -673
  86. package/dist/product-labels.scss +105 -84
  87. package/dist/product-options.scss +659 -316
  88. package/dist/product-price.scss +2562 -1284
  89. package/dist/product-promotions.scss +2830 -1388
  90. package/dist/product-sizechart.scss +905 -516
  91. package/dist/product.scss +61 -28
  92. package/dist/productDetails.scss +39 -19
  93. package/dist/profile.scss +451 -207
  94. package/dist/quantity-selector.scss +550 -313
  95. package/dist/quick-inventory-check.scss +174 -95
  96. package/dist/quick-links.scss +137 -56
  97. package/dist/quick-order-pad.scss +271 -218
  98. package/dist/quota-details.scss +282 -152
  99. package/dist/quotes.scss +121 -82
  100. package/dist/repeater-embla-controls.scss +26 -37
  101. package/dist/repeater-grid-toggle.scss +166 -156
  102. package/dist/repeater-item.scss +64 -41
  103. package/dist/repeater.scss +817 -554
  104. package/dist/request-for-quotes.scss +16 -66
  105. package/dist/responsive-behaviour.scss +1 -3
  106. package/dist/rfqs.scss +181 -118
  107. package/dist/scroll.scss +198 -90
  108. package/dist/search.scss +326 -179
  109. package/dist/section.scss +51 -27
  110. package/dist/shipping-payments.scss +58 -198
  111. package/dist/simple-list.scss +198 -61
  112. package/dist/social.scss +145 -80
  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 +511 -269
  120. package/dist/text-temp.scss +7 -8
  121. package/dist/theme-classes.scss +13 -17
  122. package/dist/types/builder/elements/bundle-categories/index.d.ts +30 -0
  123. package/dist/types/builder/enums/index.d.ts +1 -0
  124. package/dist/types/builder/index.d.ts +2 -1
  125. package/dist/types/builder/tools/element-edit/bundleCategories.d.ts +115 -0
  126. package/dist/types/builder/tools/element-edit/button.d.ts +1 -0
  127. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +1051 -2
  128. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  129. package/dist/types/builder/tools/element-edit/layouter.d.ts +33 -1
  130. package/dist/types/builder/tools/element-edit/productOptions.d.ts +3 -1
  131. package/dist/types/builder/tools/element-edit/productPrice.d.ts +1 -0
  132. package/dist/types/builder/tools/element-edit/repeater.d.ts +45 -1
  133. package/dist/types/builder/tools/element-edit/scroll.d.ts +6 -0
  134. package/dist/types/builder/tools/element-edit/userElements.d.ts +38 -37
  135. package/dist/uom-selector.scss +949 -489
  136. package/dist/user-elements.scss +892 -574
  137. package/dist/variant-picker.scss +2555 -1281
  138. package/dist/volume-pricing.scss +1037 -541
  139. package/dist/website.js +1 -1
  140. 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
+ }