@enact/limestone 1.3.0

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 (463) hide show
  1. package/.github/PULL_REQUEST_TEMPLATE.md +28 -0
  2. package/.github/workflows/update-copyright-years.yml +25 -0
  3. package/.travis.yml +40 -0
  4. package/ActionGuide/ActionGuide.d.ts +73 -0
  5. package/ActionGuide/ActionGuide.js +164 -0
  6. package/ActionGuide/ActionGuide.module.css +73 -0
  7. package/ActionGuide/package.json +3 -0
  8. package/ActionGuide/tests/ActionGuide-specs.js +51 -0
  9. package/Alert/Alert.d.ts +155 -0
  10. package/Alert/Alert.js +313 -0
  11. package/Alert/Alert.module.css +190 -0
  12. package/Alert/AlertImage.js +102 -0
  13. package/Alert/AlertImage.module.css +15 -0
  14. package/Alert/package.json +3 -0
  15. package/Alert/tests/Alert-specs.js +204 -0
  16. package/BodyText/BodyText.d.ts +74 -0
  17. package/BodyText/BodyText.js +170 -0
  18. package/BodyText/BodyText.module.css +95 -0
  19. package/BodyText/package.json +3 -0
  20. package/BodyText/tests/BodyText-specs.js +55 -0
  21. package/Button/Button.d.ts +131 -0
  22. package/Button/Button.js +351 -0
  23. package/Button/Button.module.css +2518 -0
  24. package/Button/package.json +3 -0
  25. package/Button/tests/Button-specs.js +252 -0
  26. package/CHANGELOG.md +170 -0
  27. package/Card/Card.d.ts +138 -0
  28. package/Card/Card.js +396 -0
  29. package/Card/Card.module.css +1296 -0
  30. package/Card/package.json +3 -0
  31. package/Card/tests/Card-specs.js +65 -0
  32. package/Checkbox/Checkbox.d.ts +99 -0
  33. package/Checkbox/Checkbox.js +222 -0
  34. package/Checkbox/Checkbox.module.css +1395 -0
  35. package/Checkbox/package.json +3 -0
  36. package/Checkbox/tests/Checkbox-specs.js +79 -0
  37. package/CheckboxItem/CheckboxItem.d.ts +99 -0
  38. package/CheckboxItem/CheckboxItem.js +210 -0
  39. package/CheckboxItem/CheckboxItem.module.css +50 -0
  40. package/CheckboxItem/package.json +3 -0
  41. package/CheckboxItem/tests/CheckboxItem-specs.js +52 -0
  42. package/Chips/Chip.js +252 -0
  43. package/Chips/Chip.module.css +30 -0
  44. package/Chips/Chips.js +215 -0
  45. package/Chips/Chips.module.css +8 -0
  46. package/Chips/index.js +86 -0
  47. package/Chips/tests/Chip-specs.js +186 -0
  48. package/Chips/tests/Chips-specs.js +312 -0
  49. package/ColorPicker/ColorPicker.js +416 -0
  50. package/ColorPicker/ColorPicker.module.css +78 -0
  51. package/ColorPicker/package.json +3 -0
  52. package/ColorPicker/tests/ColorPicker-specs.js +225 -0
  53. package/ColorPicker/utils.js +135 -0
  54. package/ContextualMenuDecorator/ContextualMenuDecorator.d.ts +106 -0
  55. package/ContextualMenuDecorator/ContextualMenuDecorator.js +264 -0
  56. package/ContextualMenuDecorator/ContextualMenuDecorator.module.css +42 -0
  57. package/ContextualMenuDecorator/package.json +3 -0
  58. package/ContextualMenuDecorator/tests/ContextualMenuDecorator-specs.js +136 -0
  59. package/ContextualPopupDecorator/ContextualPopup.js +200 -0
  60. package/ContextualPopupDecorator/ContextualPopup.module.css +270 -0
  61. package/ContextualPopupDecorator/ContextualPopupDecorator.d.ts +182 -0
  62. package/ContextualPopupDecorator/ContextualPopupDecorator.js +867 -0
  63. package/ContextualPopupDecorator/ContextualPopupDecorator.module.css +3 -0
  64. package/ContextualPopupDecorator/HolePunchScrim.js +69 -0
  65. package/ContextualPopupDecorator/HolePunchScrim.module.css +38 -0
  66. package/ContextualPopupDecorator/package.json +3 -0
  67. package/ContextualPopupDecorator/tests/ContextualPopupDecorator-specs.js +621 -0
  68. package/DatePicker/DatePicker.d.ts +173 -0
  69. package/DatePicker/DatePicker.js +175 -0
  70. package/DatePicker/DatePicker.module.css +5 -0
  71. package/DatePicker/DatePickerBase.js +348 -0
  72. package/DatePicker/package.json +3 -0
  73. package/DatePicker/tests/DatePicker-specs.js +247 -0
  74. package/DayPicker/DayPicker.d.ts +92 -0
  75. package/DayPicker/DayPicker.js +188 -0
  76. package/DayPicker/DayPicker.module.css +35 -0
  77. package/DayPicker/DaySelectorDecorator.js +301 -0
  78. package/DayPicker/package.json +3 -0
  79. package/DayPicker/tests/DayPicker-specs.js +138 -0
  80. package/Dropdown/Dropdown.d.ts +135 -0
  81. package/Dropdown/Dropdown.js +460 -0
  82. package/Dropdown/Dropdown.module.css +160 -0
  83. package/Dropdown/DropdownList.js +360 -0
  84. package/Dropdown/package.json +3 -0
  85. package/Dropdown/tests/Dropdown-specs.js +267 -0
  86. package/FixedPopupPanels/FixedPopupPanels.d.ts +72 -0
  87. package/FixedPopupPanels/FixedPopupPanels.js +170 -0
  88. package/FixedPopupPanels/FixedPopupPanels.module.css +146 -0
  89. package/FixedPopupPanels/package.json +3 -0
  90. package/FixedPopupPanels/tests/FixedPopupPanels-specs.js +142 -0
  91. package/FlexiblePopupPanels/FlexiblePopupPanels.js +177 -0
  92. package/FlexiblePopupPanels/FlexiblePopupPanels.module.css +291 -0
  93. package/FlexiblePopupPanels/Header.js +110 -0
  94. package/FlexiblePopupPanels/Panel.js +256 -0
  95. package/FlexiblePopupPanels/index.d.ts +145 -0
  96. package/FlexiblePopupPanels/index.js +68 -0
  97. package/FlexiblePopupPanels/package.json +3 -0
  98. package/FlexiblePopupPanels/tests/FlexiblePopupPanels-specs.js +305 -0
  99. package/FlexiblePopupPanels/useNavButtonFocus.js +65 -0
  100. package/FormCheckboxItem/FormCheckboxItem.d.ts +87 -0
  101. package/FormCheckboxItem/FormCheckboxItem.js +200 -0
  102. package/FormCheckboxItem/FormCheckboxItem.module.css +374 -0
  103. package/FormCheckboxItem/package.json +3 -0
  104. package/FormCheckboxItem/tests/FormCheckboxItem-specs.js +164 -0
  105. package/Heading/Heading.d.ts +104 -0
  106. package/Heading/Heading.js +203 -0
  107. package/Heading/Heading.module.css +217 -0
  108. package/Heading/package.json +3 -0
  109. package/Heading/tests/Heading-specs.js +57 -0
  110. package/Icon/Icon.d.ts +377 -0
  111. package/Icon/Icon.js +503 -0
  112. package/Icon/Icon.module.css +121 -0
  113. package/Icon/IconList.js +611 -0
  114. package/Icon/package.json +3 -0
  115. package/Icon/tests/Icon-specs.js +131 -0
  116. package/IconItem/IconItem.d.ts +137 -0
  117. package/IconItem/IconItem.js +360 -0
  118. package/IconItem/IconItem.module.css +414 -0
  119. package/IconItem/package.json +3 -0
  120. package/IconItem/tests/IconItem-specs.js +106 -0
  121. package/Image/Image.d.ts +60 -0
  122. package/Image/Image.js +165 -0
  123. package/Image/Image.module.css +5 -0
  124. package/Image/package.json +3 -0
  125. package/Image/tests/Image-specs.js +62 -0
  126. package/ImageItem/ImageItem.d.ts +134 -0
  127. package/ImageItem/ImageItem.js +377 -0
  128. package/ImageItem/ImageItem.module.css +1079 -0
  129. package/ImageItem/package.json +3 -0
  130. package/ImageItem/tests/ImageItem-specs.js +223 -0
  131. package/Input/Input.js +715 -0
  132. package/Input/Input.module.css +699 -0
  133. package/Input/InputField.js +487 -0
  134. package/Input/InputField.module.css +763 -0
  135. package/Input/InputFieldDecoratorIcon.js +66 -0
  136. package/Input/InputFieldSpotlightDecorator.js +380 -0
  137. package/Input/Keypad.js +111 -0
  138. package/Input/NumberField.js +311 -0
  139. package/Input/index.d.ts +423 -0
  140. package/Input/index.js +87 -0
  141. package/Input/package.json +3 -0
  142. package/Input/pointer.js +103 -0
  143. package/Input/tests/Input-specs.js +537 -0
  144. package/Input/tests/InputField-specs.js +292 -0
  145. package/Input/tests/InputPopup-specs.js +56 -0
  146. package/Input/util.js +130 -0
  147. package/Item/Item.d.ts +108 -0
  148. package/Item/Item.js +360 -0
  149. package/Item/Item.module.css +665 -0
  150. package/Item/package.json +3 -0
  151. package/Item/tests/Item-specs.js +108 -0
  152. package/KeyGuide/KeyGuide.d.ts +103 -0
  153. package/KeyGuide/KeyGuide.js +254 -0
  154. package/KeyGuide/KeyGuide.module.css +431 -0
  155. package/KeyGuide/package.json +3 -0
  156. package/KeyGuide/tests/KeyGuide-specs.js +168 -0
  157. package/LICENSE +201 -0
  158. package/Marquee/Marquee.d.ts +42 -0
  159. package/Marquee/Marquee.js +45 -0
  160. package/Marquee/package.json +3 -0
  161. package/MediaOverlay/MediaOverlay.d.ts +134 -0
  162. package/MediaOverlay/MediaOverlay.js +304 -0
  163. package/MediaOverlay/MediaOverlay.module.css +292 -0
  164. package/MediaOverlay/package.json +3 -0
  165. package/MediaOverlay/tests/MediaOverlay-specs.js +127 -0
  166. package/MediaPlayer/MediaControls.js +934 -0
  167. package/MediaPlayer/MediaControls.module.css +86 -0
  168. package/MediaPlayer/MediaKnob.js +61 -0
  169. package/MediaPlayer/MediaSlider.js +131 -0
  170. package/MediaPlayer/MediaSlider.module.css +319 -0
  171. package/MediaPlayer/MediaSliderDecorator.js +245 -0
  172. package/MediaPlayer/Times.js +152 -0
  173. package/MediaPlayer/Times.module.css +34 -0
  174. package/MediaPlayer/index.d.ts +223 -0
  175. package/MediaPlayer/index.js +34 -0
  176. package/MediaPlayer/package.json +3 -0
  177. package/MediaPlayer/tests/MediaSlider-specs.js +126 -0
  178. package/MediaPlayer/tests/util-specs.js +114 -0
  179. package/MediaPlayer/util.js +83 -0
  180. package/PageViews/Page.js +77 -0
  181. package/PageViews/Page.module.css +3 -0
  182. package/PageViews/PageViews.js +440 -0
  183. package/PageViews/PageViews.module.css +175 -0
  184. package/PageViews/PageViewsRouter.js +150 -0
  185. package/PageViews/index.js +45 -0
  186. package/PageViews/tests/PageViews-specs.js +192 -0
  187. package/Panels/Header.js +599 -0
  188. package/Panels/Header.module.css +243 -0
  189. package/Panels/Panel.js +347 -0
  190. package/Panels/Panel.module.css +33 -0
  191. package/Panels/Panels.js +258 -0
  192. package/Panels/Panels.module.css +12 -0
  193. package/Panels/index.d.ts +376 -0
  194. package/Panels/index.js +66 -0
  195. package/Panels/package.json +3 -0
  196. package/Panels/tests/Header-specs.js +146 -0
  197. package/Panels/tests/Panels-specs.js +257 -0
  198. package/Picker/Picker.d.ts +193 -0
  199. package/Picker/Picker.js +389 -0
  200. package/Picker/Picker.module.css +46 -0
  201. package/Picker/package.json +3 -0
  202. package/Picker/tests/Picker-specs.js +91 -0
  203. package/Popup/Popup.d.ts +169 -0
  204. package/Popup/Popup.js +690 -0
  205. package/Popup/Popup.module.css +180 -0
  206. package/Popup/package.json +3 -0
  207. package/Popup/tests/Popup-specs.js +475 -0
  208. package/PopupTabLayout/PopupTabLayout.d.ts +196 -0
  209. package/PopupTabLayout/PopupTabLayout.js +605 -0
  210. package/PopupTabLayout/PopupTabLayout.module.css +226 -0
  211. package/PopupTabLayout/package.json +3 -0
  212. package/PopupTabLayout/tests/PopupTabLayout-specs.js +285 -0
  213. package/ProgressBar/ProgressBar.d.ts +171 -0
  214. package/ProgressBar/ProgressBar.js +223 -0
  215. package/ProgressBar/ProgressBar.module.css +264 -0
  216. package/ProgressBar/ProgressBarTooltip.js +359 -0
  217. package/ProgressBar/ProgressBarTooltip.module.css +86 -0
  218. package/ProgressBar/package.json +3 -0
  219. package/ProgressBar/tests/ProgressBar-specs.js +400 -0
  220. package/ProgressButton/ProgressButton.d.ts +57 -0
  221. package/ProgressButton/ProgressButton.js +143 -0
  222. package/ProgressButton/ProgressButton.module.css +147 -0
  223. package/ProgressButton/package.json +3 -0
  224. package/ProgressButton/tests/ProgressButton-specs.js +71 -0
  225. package/QuickGuidePanels/Panel.js +90 -0
  226. package/QuickGuidePanels/QuickGuidePanels.js +463 -0
  227. package/QuickGuidePanels/QuickGuidePanels.module.css +26 -0
  228. package/QuickGuidePanels/index.js +52 -0
  229. package/QuickGuidePanels/tests/QuickGuidePanels-specs.js +250 -0
  230. package/README.md +59 -0
  231. package/RadioItem/RadioItem.d.ts +59 -0
  232. package/RadioItem/RadioItem.js +146 -0
  233. package/RadioItem/RadioItem.module.css +233 -0
  234. package/RadioItem/package.json +3 -0
  235. package/RadioItem/tests/RadioItem-specs.js +62 -0
  236. package/RangePicker/RangePicker.d.ts +174 -0
  237. package/RangePicker/RangePicker.js +372 -0
  238. package/RangePicker/RangePicker.module.css +55 -0
  239. package/RangePicker/package.json +3 -0
  240. package/RangePicker/tests/RangePicker-specs.js +122 -0
  241. package/Region/Region.d.ts +33 -0
  242. package/Region/Region.js +91 -0
  243. package/Region/package.json +3 -0
  244. package/Region/tests/Region-specs.js +28 -0
  245. package/Scroller/ContentContainerDecorator.js +24 -0
  246. package/Scroller/EditableWrapper.js +1036 -0
  247. package/Scroller/EditableWrapper.module.css +22 -0
  248. package/Scroller/Scroller.d.ts +270 -0
  249. package/Scroller/Scroller.js +470 -0
  250. package/Scroller/Scroller.module.css +41 -0
  251. package/Scroller/package.json +3 -0
  252. package/Scroller/tests/ContentContainerDecorator-specs.js +20 -0
  253. package/Scroller/tests/EditableWrapper-specs.js +133 -0
  254. package/Scroller/tests/Scroller-specs.js +159 -0
  255. package/Scroller/useEvent.js +39 -0
  256. package/Scroller/useThemeScroller.js +410 -0
  257. package/Skinnable/Skinnable.d.ts +27 -0
  258. package/Skinnable/Skinnable.js +65 -0
  259. package/Skinnable/package.json +3 -0
  260. package/Slider/Slider.d.ts +218 -0
  261. package/Slider/Slider.js +441 -0
  262. package/Slider/Slider.module.css +880 -0
  263. package/Slider/SliderBehaviorDecorator.js +184 -0
  264. package/Slider/package.json +3 -0
  265. package/Slider/tests/Slider-specs.js +573 -0
  266. package/Slider/utils.js +114 -0
  267. package/Spinner/Spinner.d.ts +64 -0
  268. package/Spinner/Spinner.js +254 -0
  269. package/Spinner/Spinner.module.css +368 -0
  270. package/Spinner/package.json +3 -0
  271. package/Spinner/tests/Spinner-specs.js +70 -0
  272. package/Sprite/Sprite.d.ts +100 -0
  273. package/Sprite/Sprite.js +345 -0
  274. package/Sprite/Sprite.module.css +32 -0
  275. package/Sprite/package.json +3 -0
  276. package/Sprite/tests/Sprite-specs.js +59 -0
  277. package/Steps/Steps.d.ts +119 -0
  278. package/Steps/Steps.js +303 -0
  279. package/Steps/Steps.module.css +130 -0
  280. package/Steps/package.json +3 -0
  281. package/Steps/tests/Steps-specs.js +175 -0
  282. package/Switch/Switch.d.ts +54 -0
  283. package/Switch/Switch.js +143 -0
  284. package/Switch/Switch.module.css +714 -0
  285. package/Switch/package.json +3 -0
  286. package/Switch/tests/Switch-specs.js +54 -0
  287. package/SwitchItem/SwitchItem.d.ts +56 -0
  288. package/SwitchItem/SwitchItem.js +144 -0
  289. package/SwitchItem/SwitchItem.module.css +31 -0
  290. package/SwitchItem/package.json +3 -0
  291. package/SwitchItem/tests/SwitchItem-specs.js +49 -0
  292. package/TabLayout/RefocusDecorator.js +142 -0
  293. package/TabLayout/Tab.js +84 -0
  294. package/TabLayout/TabGroup.js +377 -0
  295. package/TabLayout/TabGroup.module.css +280 -0
  296. package/TabLayout/TabLayout.d.ts +161 -0
  297. package/TabLayout/TabLayout.js +661 -0
  298. package/TabLayout/TabLayout.module.css +101 -0
  299. package/TabLayout/package.json +3 -0
  300. package/TabLayout/tests/TabGroup-specs.js +214 -0
  301. package/TabLayout/tests/TabLayout-specs.js +740 -0
  302. package/ThemeDecorator/AccessibilityDecorator.js +151 -0
  303. package/ThemeDecorator/I18nFontDecorator.js +33 -0
  304. package/ThemeDecorator/ThemeDecorator.d.ts +143 -0
  305. package/ThemeDecorator/ThemeDecorator.js +307 -0
  306. package/ThemeDecorator/ThemeDecorator.module.css +1250 -0
  307. package/ThemeDecorator/fontGenerator.js +76 -0
  308. package/ThemeDecorator/package.json +3 -0
  309. package/ThemeDecorator/screenTypes.json +10 -0
  310. package/ThemeDecorator/tests/ThemeDecorator-specs.js +151 -0
  311. package/TimePicker/TimePicker.d.ts +147 -0
  312. package/TimePicker/TimePicker.js +255 -0
  313. package/TimePicker/TimePicker.module.css +61 -0
  314. package/TimePicker/TimePickerBase.js +396 -0
  315. package/TimePicker/package.json +3 -0
  316. package/TimePicker/tests/TimePicker-specs.js +248 -0
  317. package/TooltipDecorator/Tooltip.js +252 -0
  318. package/TooltipDecorator/Tooltip.module.css +496 -0
  319. package/TooltipDecorator/TooltipDecorator.d.ts +229 -0
  320. package/TooltipDecorator/TooltipDecorator.js +260 -0
  321. package/TooltipDecorator/TooltipLabel.js +117 -0
  322. package/TooltipDecorator/package.json +3 -0
  323. package/TooltipDecorator/tests/TooltipDecorator-specs.js +224 -0
  324. package/TooltipDecorator/tests/useTooltip-specs.js +266 -0
  325. package/TooltipDecorator/useTooltip.js +278 -0
  326. package/TooltipDecorator/util.js +273 -0
  327. package/VideoPlayer/Feedback.js +110 -0
  328. package/VideoPlayer/Feedback.module.css +55 -0
  329. package/VideoPlayer/FeedbackContent.js +99 -0
  330. package/VideoPlayer/FeedbackIcon.js +67 -0
  331. package/VideoPlayer/FeedbackIcons.js +76 -0
  332. package/VideoPlayer/FeedbackTooltip.js +242 -0
  333. package/VideoPlayer/FeedbackTooltip.module.css +160 -0
  334. package/VideoPlayer/MediaTitle.js +143 -0
  335. package/VideoPlayer/MediaTitle.module.css +95 -0
  336. package/VideoPlayer/Overlay.js +51 -0
  337. package/VideoPlayer/Video.js +345 -0
  338. package/VideoPlayer/VideoPlayer.d.ts +582 -0
  339. package/VideoPlayer/VideoPlayer.js +2116 -0
  340. package/VideoPlayer/VideoPlayer.module.css +164 -0
  341. package/VideoPlayer/package.json +3 -0
  342. package/VideoPlayer/tests/Video-specs.js +235 -0
  343. package/VideoPlayer/tests/VideoPlayer-specs.js +180 -0
  344. package/VirtualList/VirtualList.d.ts +411 -0
  345. package/VirtualList/VirtualList.js +931 -0
  346. package/VirtualList/VirtualList.module.css +52 -0
  347. package/VirtualList/package.json +3 -0
  348. package/VirtualList/tests/VirtualGridList-specs.js +289 -0
  349. package/VirtualList/tests/VirtualGridList-translate-specs.js +711 -0
  350. package/VirtualList/tests/VirtualList-specs.js +288 -0
  351. package/VirtualList/tests/VirtualList-translate-specs.js +704 -0
  352. package/VirtualList/tests/useEvent-specs.js +172 -0
  353. package/VirtualList/tests/useEvent-translate-specs.js +309 -0
  354. package/VirtualList/useEvent.js +324 -0
  355. package/VirtualList/usePreventScroll.js +31 -0
  356. package/VirtualList/useSpotlight.js +157 -0
  357. package/VirtualList/useThemeVirtualList.js +471 -0
  358. package/VirtualList/useThemeVirtualList.module.css +34 -0
  359. package/WizardPanels/Panel.js +99 -0
  360. package/WizardPanels/WizardPanels.js +501 -0
  361. package/WizardPanels/WizardPanels.module.css +15 -0
  362. package/WizardPanels/index.d.ts +182 -0
  363. package/WizardPanels/index.js +50 -0
  364. package/WizardPanels/package.json +3 -0
  365. package/WizardPanels/tests/WizardPanels-specs.js +713 -0
  366. package/codecov.yml +13 -0
  367. package/fonts/Limestone_Icons.ttf +0 -0
  368. package/fonts/Miso/LICENSE.txt +75 -0
  369. package/fonts/Miso/Miso-Bold.ttf +0 -0
  370. package/fonts/Miso/Miso-Light.ttf +0 -0
  371. package/fonts/Miso/Miso-Regular.ttf +0 -0
  372. package/fonts/MuseoSans/LICENSE.txt +75 -0
  373. package/fonts/MuseoSans/MuseoSans-Black.ttf +0 -0
  374. package/fonts/MuseoSans/MuseoSans-BlackItalic.ttf +0 -0
  375. package/fonts/MuseoSans/MuseoSans-Bold.ttf +0 -0
  376. package/fonts/MuseoSans/MuseoSans-BoldItalic.ttf +0 -0
  377. package/fonts/MuseoSans/MuseoSans-Light.ttf +0 -0
  378. package/fonts/MuseoSans/MuseoSans-Medium.ttf +0 -0
  379. package/fonts/MuseoSans/MuseoSans-MediumItalic.ttf +0 -0
  380. package/fonts/MuseoSans/MuseoSans-Thin.ttf +0 -0
  381. package/index.js +2 -0
  382. package/internal/$L/$L.d.ts +21 -0
  383. package/internal/$L/$L.js +97 -0
  384. package/internal/$L/package.json +3 -0
  385. package/internal/AsyncRenderChildren/AsyncRenderChildren.js +74 -0
  386. package/internal/AsyncRenderChildren/package.json +3 -0
  387. package/internal/AsyncRenderChildren/tests/AsyncRenderChildren-specs.js +49 -0
  388. package/internal/DateComponentPicker/DateComponentPicker.js +165 -0
  389. package/internal/DateComponentPicker/DateComponentPicker.module.css +53 -0
  390. package/internal/DateComponentPicker/DateComponentRangePicker.js +132 -0
  391. package/internal/DateComponentPicker/index.js +31 -0
  392. package/internal/DateComponentPicker/package.json +3 -0
  393. package/internal/DateTime/DateTime.js +83 -0
  394. package/internal/DateTime/DateTime.module.css +51 -0
  395. package/internal/DateTime/DateTimeDecorator.js +268 -0
  396. package/internal/DateTime/index.js +37 -0
  397. package/internal/DateTime/package.json +3 -0
  398. package/internal/DateTime/tests/DateTimeDecorator-specs.js +33 -0
  399. package/internal/DebounceDecorator/DebounceDecorator.js +125 -0
  400. package/internal/DebounceDecorator/package.json +3 -0
  401. package/internal/DebounceDecorator/tests/DebounceDecorator-specs.js +151 -0
  402. package/internal/Panels/Arrangers.js +248 -0
  403. package/internal/Panels/CancelDecorator.js +43 -0
  404. package/internal/Panels/FloatingLayerIdProvider.js +27 -0
  405. package/internal/Panels/NavigationButton.js +64 -0
  406. package/internal/Panels/NavigationButton.module.css +69 -0
  407. package/internal/Panels/PanelsRouter.js +223 -0
  408. package/internal/Panels/PopupDecorator.js +287 -0
  409. package/internal/Panels/TransitionDecorator.js +99 -0
  410. package/internal/Panels/Viewport.js +313 -0
  411. package/internal/Panels/Viewport.module.css +25 -0
  412. package/internal/Panels/captureKeys.js +48 -0
  413. package/internal/Panels/index.js +101 -0
  414. package/internal/Panels/package.json +3 -0
  415. package/internal/Panels/useAutoFocus.js +95 -0
  416. package/internal/Panels/useFocusOnTransition.js +45 -0
  417. package/internal/Panels/useToggleRole.js +30 -0
  418. package/internal/Panels/util.js +64 -0
  419. package/internal/Picker/Picker.js +942 -0
  420. package/internal/Picker/Picker.module.css +1145 -0
  421. package/internal/Picker/PickerButton.js +97 -0
  422. package/internal/Picker/PickerItem.js +38 -0
  423. package/internal/Picker/SpottablePicker.js +63 -0
  424. package/internal/Picker/package.json +3 -0
  425. package/internal/Picker/tests/Picker-specs.js +968 -0
  426. package/internal/SharedStateDecorator/SharedStateDecorator.js +167 -0
  427. package/internal/SharedStateDecorator/package.json +3 -0
  428. package/internal/SharedStateDecorator/tests/SharedStateDecorator-specs.js +277 -0
  429. package/internal/WindowEventable/WindowEventable.js +114 -0
  430. package/internal/WindowEventable/package.json +3 -0
  431. package/internal/util/package.json +3 -0
  432. package/internal/util/util.js +79 -0
  433. package/internal/validators/package.json +4 -0
  434. package/internal/validators/tests/validators-specs.js +80 -0
  435. package/internal/validators/validators.js +136 -0
  436. package/package.json +69 -0
  437. package/resources/ilibmanifest.json +3 -0
  438. package/styles/color-mixins.less +230 -0
  439. package/styles/colors-game-green.less +25 -0
  440. package/styles/colors-game-orange.less +25 -0
  441. package/styles/colors-game.less +56 -0
  442. package/styles/colors-highcontrast.less +21 -0
  443. package/styles/colors.less +435 -0
  444. package/styles/mixins.less +337 -0
  445. package/styles/skin.less +54 -0
  446. package/styles/variables-base.less +32 -0
  447. package/styles/variables-game.less +25 -0
  448. package/styles/variables.less +1182 -0
  449. package/useScroll/HoverToScroll.js +265 -0
  450. package/useScroll/HoverToScroll.module.css +38 -0
  451. package/useScroll/OverscrollEffect.module.css +14 -0
  452. package/useScroll/Scrollbar.js +171 -0
  453. package/useScroll/Scrollbar.module.css +19 -0
  454. package/useScroll/ScrollbarPlaceholder.js +64 -0
  455. package/useScroll/ScrollbarTrack.js +209 -0
  456. package/useScroll/ScrollbarTrack.module.css +136 -0
  457. package/useScroll/package.json +3 -0
  458. package/useScroll/useEvent.js +693 -0
  459. package/useScroll/useOverscrollEffect.js +105 -0
  460. package/useScroll/useScroll.js +523 -0
  461. package/useScroll/useScroll.module.css +49 -0
  462. package/useScroll/useSpotlight.js +32 -0
  463. package/useScroll/useThemeScrollContentHandle.js +32 -0
package/internal/Picker/Picker.module.css ADDED
@@ -0,0 +1,1145 @@
1
+ .picker {
2
+ vertical-align: bottom;
3
+ position: relative;
4
+ text-align: center;
5
+ margin: 0 0.75rem;
6
+ }
7
+ .picker .sizingPlaceholder,
8
+ .picker .valueWrapper {
9
+ font-family: "Limestone";
10
+ font-weight: normal;
11
+ font-size: var(--primitive-font-size-54);
12
+ line-height: 1.4em;
13
+ font-weight: var(--primitive-font-weight-semibold);
14
+ max-width: 20rem;
15
+ }
16
+ :global(.enact-locale-non-latin) .picker .sizingPlaceholder,
17
+ :global(.enact-locale-non-latin) .picker .valueWrapper {
18
+ font-family: "Limestone";
19
+ font-weight: var(--primitive-font-weight-regular);
20
+ }
21
+ :global(.enact-locale-km) .picker .sizingPlaceholder,
22
+ :global(.enact-locale-km) .picker .valueWrapper {
23
+ line-height: 1.7em;
24
+ }
25
+ :global(.enact-locale-si) .picker .sizingPlaceholder,
26
+ :global(.enact-locale-si) .picker .valueWrapper {
27
+ line-height: 1.7em;
28
+ }
29
+ :global(.enact-locale-th) .picker .sizingPlaceholder,
30
+ :global(.enact-locale-th) .picker .valueWrapper {
31
+ line-height: 1.7em;
32
+ }
33
+ :global(.enact-locale-vi) .picker .sizingPlaceholder,
34
+ :global(.enact-locale-vi) .picker .valueWrapper {
35
+ line-height: 1.7em;
36
+ }
37
+ .picker .sizingPlaceholder .item.numeric,
38
+ .picker .valueWrapper .item.numeric {
39
+ font-family: "Limestone Number";
40
+ }
41
+ :global(.enact-locale-non-latin) .picker .sizingPlaceholder .item.numeric,
42
+ :global(.enact-locale-non-latin) .picker .valueWrapper .item.numeric {
43
+ font-family: "Limestone Number";
44
+ }
45
+ .picker .sizingPlaceholder {
46
+ height: 0;
47
+ visibility: hidden;
48
+ padding-left: 1rem;
49
+ padding-right: 1rem;
50
+ line-height: 0;
51
+ }
52
+ .picker .valueWrapper {
53
+ margin-left: auto;
54
+ margin-right: auto;
55
+ height: 1.5rem;
56
+ line-height: 1.5rem;
57
+ position: relative;
58
+ }
59
+ :global(.enact-locale-km) .picker .valueWrapper {
60
+ height: 1.7em;
61
+ line-height: 1.7em;
62
+ }
63
+ :global(.enact-locale-si) .picker .valueWrapper {
64
+ height: 1.7em;
65
+ line-height: 1.7em;
66
+ }
67
+ :global(.enact-locale-th) .picker .valueWrapper {
68
+ height: 1.7em;
69
+ line-height: 1.7em;
70
+ }
71
+ :global(.enact-locale-vi) .picker .valueWrapper {
72
+ height: 1.7em;
73
+ line-height: 1.7em;
74
+ }
75
+ :global(.enact-locale-right-to-left) .picker .valueWrapper {
76
+ font-weight: var(--primitive-font-weight-semibold);
77
+ }
78
+ .picker .item {
79
+ padding: 0 1rem;
80
+ }
81
+ .picker.small .sizingPlaceholder,
82
+ .picker.small .item {
83
+ padding-left: 0.5rem;
84
+ padding-right: 0.5rem;
85
+ }
86
+ .picker .viewManager {
87
+ overflow: hidden;
88
+ height: 100%;
89
+ }
90
+ .picker .viewManager > .item:nth-child(2) {
91
+ top: -100%;
92
+ }
93
+ .picker .item {
94
+ position: relative;
95
+ }
96
+ .picker .incrementer,
97
+ .picker .decrementer {
98
+ cursor: pointer;
99
+ margin: 0;
100
+ position: relative;
101
+ line-height: 1em;
102
+ }
103
+ .picker .incrementer[disabled],
104
+ .picker .decrementer[disabled] {
105
+ cursor: default;
106
+ }
107
+ :global(.enact-locale-right-to-left) .picker.horizontal {
108
+ flex-direction: row-reverse;
109
+ }
110
+ .picker.horizontal .item {
111
+ padding: 0;
112
+ }
113
+ .picker.horizontal .decrementer,
114
+ .picker.horizontal .incrementer {
115
+ width: 2.5rem;
116
+ min-width: 2.5rem;
117
+ height: 2.5rem;
118
+ margin: 0;
119
+ padding: 0;
120
+ }
121
+ .picker.horizontal .incrementer {
122
+ margin-left: var(--primitive-spacing-36);
123
+ order: 3;
124
+ }
125
+ .picker.horizontal .decrementer {
126
+ margin-right: var(--primitive-spacing-36);
127
+ order: 1;
128
+ }
129
+ .picker.horizontal .valueWrapper {
130
+ order: 2;
131
+ }
132
+ .picker.vertical {
133
+ height: 7.54167rem;
134
+ }
135
+ .picker.vertical.large .valueWrapper {
136
+ width: 14.5rem;
137
+ }
138
+ .picker.joined::before {
139
+ content: "";
140
+ position: absolute;
141
+ top: 0;
142
+ right: 0;
143
+ bottom: 0;
144
+ left: 0;
145
+ }
146
+ .picker.joined .icon {
147
+ margin: 0;
148
+ }
149
+ .picker.joined.horizontal:not(.arrow) {
150
+ height: 4.375rem;
151
+ padding: var(--primitive-spacing-36) var(--primitive-spacing-48);
152
+ }
153
+ .picker.joined.horizontal:not(.arrow)::before {
154
+ border-radius: var(--semantic-radius-full);
155
+ }
156
+ .picker.joined.horizontal:not(.arrow) .sizingPlaceholder,
157
+ .picker.joined.horizontal:not(.arrow) .valueWrapper {
158
+ font-size: var(--primitive-font-size-66);
159
+ }
160
+ .picker.joined.horizontal:not(.arrow).large .valueWrapper {
161
+ width: 14.5rem;
162
+ }
163
+ .picker.joined.horizontal:not(.arrow) .valueWrapper {
164
+ margin: 0 0 var(--primitive-spacing-48) 0;
165
+ height: 1.875rem;
166
+ line-height: 1.875rem;
167
+ }
168
+ .picker.joined.horizontal:not(.arrow) .item {
169
+ pointer-events: none;
170
+ }
171
+ .picker.joined.horizontal:not(.arrow) .indicatorContainer {
172
+ margin: 0 auto;
173
+ line-height: 0;
174
+ white-space: nowrap;
175
+ }
176
+ .picker.joined.horizontal:not(.arrow) .indicatorContainer .indicator {
177
+ display: inline-block;
178
+ width: 0.5rem;
179
+ height: 0.5rem;
180
+ margin: var(--primitive-spacing-30) var(--primitive-spacing-12) 0;
181
+ border-radius: 0.5rem;
182
+ transform: scale(0.75);
183
+ vertical-align: middle;
184
+ will-change: transform;
185
+ transition: transform 200ms ease-out;
186
+ }
187
+ .picker.joined.horizontal:not(.arrow) .indicatorContainer .indicator.active {
188
+ transform: scale(1);
189
+ }
190
+ .picker.joined.horizontal.arrow::before,
191
+ .picker.joined.vertical::before {
192
+ border-radius: var(--semantic-radius-button);
193
+ }
194
+ .picker.joined.horizontal.arrow .incrementer,
195
+ .picker.joined.horizontal.arrow .decrementer {
196
+ line-height: 2rem;
197
+ height: 2.25rem;
198
+ margin: 0.1875rem 0.75rem;
199
+ padding: 0 0.375rem;
200
+ }
201
+ .picker.joined.vertical .valueWrapper {
202
+ font-size: var(--primitive-font-size-66);
203
+ height: 1.875rem;
204
+ line-height: 1.875rem;
205
+ }
206
+ .picker.small .valueWrapper {
207
+ width: 4.75rem;
208
+ }
209
+ .picker.medium .valueWrapper {
210
+ width: 7.5rem;
211
+ }
212
+ .picker.large .valueWrapper {
213
+ width: 9.75rem;
214
+ }
215
+ .picker:global(.neutral) {
216
+ color: var(--semantic-color-on-background-main);
217
+ }
218
+ .picker:global(.neutral) .icon {
219
+ color: var(--semantic-color-on-background-main);
220
+ }
221
+ .picker:global(.neutral).joined.horizontal:not(.arrow) {
222
+ color: var(--semantic-color-on-surface-main);
223
+ }
224
+ .picker:global(.neutral).joined.horizontal:not(.arrow)::before {
225
+ opacity: 1;
226
+ background-color: var(--semantic-color-surface-default-focused);
227
+ will-change: box-shadow;
228
+ background-color: var(--semantic-color-surface-default);
229
+ }
230
+ .picker:global(.neutral).joined.horizontal:not(.arrow) .indicator {
231
+ background-color: var(--semantic-color-on-surface-main);
232
+ opacity: 0.4;
233
+ }
234
+ .picker:global(.neutral).joined.horizontal:not(.arrow) .indicator.active {
235
+ opacity: 1;
236
+ }
237
+ .picker:global(.neutral).joined.horizontal.arrow::before,
238
+ .picker:global(.neutral).joined.vertical::before {
239
+ opacity: 0;
240
+ background-color: var(--semantic-color-surface-default-focused);
241
+ will-change: box-shadow;
242
+ }
243
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus,
244
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus,
245
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus,
246
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus {
247
+ color: var(--semantic-color-on-surface-main-focused);
248
+ }
249
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus.horizontal:not(.arrow)::before,
250
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus.horizontal:not(.arrow)::before,
251
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus.horizontal:not(.arrow)::before,
252
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus.horizontal:not(.arrow)::before {
253
+ opacity: 1;
254
+ background-color: var(--semantic-color-surface-default-focused);
255
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
256
+ }
257
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus.horizontal.arrow::before,
258
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus.horizontal.arrow::before,
259
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus.horizontal.arrow::before,
260
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus.horizontal.arrow::before,
261
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus.vertical::before,
262
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus.vertical::before,
263
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus.vertical::before,
264
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus.vertical::before {
265
+ opacity: 1;
266
+ background-color: var(--semantic-color-surface-default-focused);
267
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
268
+ }
269
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus[disabled],
270
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus[disabled],
271
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus[disabled],
272
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus[disabled] {
273
+ opacity: 1;
274
+ }
275
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus[disabled]::before,
276
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus[disabled]::before,
277
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus[disabled]::before,
278
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus[disabled]::before {
279
+ opacity: 0.585;
280
+ }
281
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus[disabled].horizontal:not(.arrow)::before,
282
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus[disabled].horizontal:not(.arrow)::before,
283
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus[disabled].horizontal:not(.arrow)::before,
284
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus[disabled].horizontal:not(.arrow)::before {
285
+ opacity: 0.585;
286
+ }
287
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus[disabled] .valueWrapper,
288
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus[disabled] .valueWrapper,
289
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus[disabled] .valueWrapper,
290
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus[disabled] .valueWrapper {
291
+ opacity: 0.4;
292
+ }
293
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus .icon,
294
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus .icon,
295
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus .icon,
296
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus .icon {
297
+ color: var(--semantic-color-on-surface-main-focused);
298
+ }
299
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus .indicator,
300
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus .indicator,
301
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus .indicator,
302
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus .indicator {
303
+ background-color: var(--semantic-color-on-surface-main-focused);
304
+ opacity: 0.4;
305
+ }
306
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus .indicator.active,
307
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus .indicator.active,
308
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus .indicator.active,
309
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus .indicator.active {
310
+ opacity: 1;
311
+ }
312
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active,
313
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active {
314
+ color: var(--semantic-color-on-surface-main-focused);
315
+ }
316
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active.horizontal:not(.arrow)::before,
317
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active.horizontal:not(.arrow)::before {
318
+ opacity: 1;
319
+ background-color: var(--semantic-color-surface-default-focused);
320
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
321
+ }
322
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active.horizontal.arrow::before,
323
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active.horizontal.arrow::before,
324
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active.vertical::before,
325
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active.vertical::before {
326
+ opacity: 1;
327
+ background-color: var(--semantic-color-surface-default-focused);
328
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
329
+ }
330
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active[disabled],
331
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active[disabled] {
332
+ opacity: 1;
333
+ }
334
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active[disabled]::before,
335
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active[disabled]::before {
336
+ opacity: 0.585;
337
+ }
338
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active[disabled].horizontal:not(.arrow)::before,
339
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active[disabled].horizontal:not(.arrow)::before {
340
+ opacity: 0.585;
341
+ }
342
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active[disabled] .valueWrapper,
343
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active[disabled] .valueWrapper {
344
+ opacity: 0.4;
345
+ }
346
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active .icon,
347
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active .icon {
348
+ color: var(--semantic-color-on-surface-main-focused);
349
+ }
350
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active .indicator,
351
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active .indicator {
352
+ background-color: var(--semantic-color-on-surface-main-focused);
353
+ opacity: 0.4;
354
+ }
355
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active .indicator.active,
356
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active .indicator.active {
357
+ opacity: 1;
358
+ }
359
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.noAnimation) .picker:global(.neutral).joined:global(.spottable):focus.horizontal.arrow::before,
360
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.noAnimation) .picker:global(.neutral).joined:global(.spottable):focus.horizontal.arrow::before,
361
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.noAnimation) .picker:global(.neutral).joined:global(.spottable):focus.vertical::before,
362
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.noAnimation) .picker:global(.neutral).joined:global(.spottable):focus.vertical::before {
363
+ box-shadow: none;
364
+ }
365
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.noAnimation) .picker:global(.neutral).joined:global(.spottable):active.horizontal.arrow::before,
366
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.noAnimation) .picker:global(.neutral).joined:global(.spottable):active.vertical::before {
367
+ box-shadow: none;
368
+ }
369
+ :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast) {
370
+ color: var(--semantic-color-on-background-main);
371
+ }
372
+ :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast) .icon {
373
+ color: var(--semantic-color-on-background-main);
374
+ }
375
+ :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined.horizontal:not(.arrow) {
376
+ color: var(--semantic-color-on-surface-main);
377
+ }
378
+ :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined.horizontal:not(.arrow)::before {
379
+ opacity: 1;
380
+ background-color: var(--semantic-color-surface-default-focused);
381
+ will-change: box-shadow;
382
+ background-color: var(--semantic-color-surface-default);
383
+ }
384
+ :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined.horizontal:not(.arrow) .indicator {
385
+ background-color: var(--semantic-color-on-surface-main);
386
+ opacity: 0.4;
387
+ }
388
+ :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined.horizontal:not(.arrow) .indicator.active {
389
+ opacity: 1;
390
+ }
391
+ :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined.horizontal.arrow::before,
392
+ :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined.vertical::before {
393
+ opacity: 0;
394
+ background-color: var(--semantic-color-surface-default-focused);
395
+ will-change: box-shadow;
396
+ }
397
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus,
398
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus,
399
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus,
400
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus {
401
+ color: var(--semantic-color-on-surface-main-focused);
402
+ }
403
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus.horizontal:not(.arrow)::before,
404
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus.horizontal:not(.arrow)::before,
405
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus.horizontal:not(.arrow)::before,
406
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus.horizontal:not(.arrow)::before {
407
+ opacity: 1;
408
+ background-color: var(--semantic-color-surface-default-focused);
409
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
410
+ }
411
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus.horizontal.arrow::before,
412
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus.horizontal.arrow::before,
413
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus.horizontal.arrow::before,
414
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus.horizontal.arrow::before,
415
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus.vertical::before,
416
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus.vertical::before,
417
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus.vertical::before,
418
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus.vertical::before {
419
+ opacity: 1;
420
+ background-color: var(--semantic-color-surface-default-focused);
421
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
422
+ }
423
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus[disabled],
424
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus[disabled],
425
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus[disabled],
426
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus[disabled] {
427
+ opacity: 1;
428
+ }
429
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus[disabled]::before,
430
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus[disabled]::before,
431
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus[disabled]::before,
432
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus[disabled]::before {
433
+ opacity: 0.585;
434
+ }
435
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus[disabled].horizontal:not(.arrow)::before,
436
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus[disabled].horizontal:not(.arrow)::before,
437
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus[disabled].horizontal:not(.arrow)::before,
438
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus[disabled].horizontal:not(.arrow)::before {
439
+ opacity: 0.585;
440
+ }
441
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus[disabled] .valueWrapper,
442
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus[disabled] .valueWrapper,
443
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus[disabled] .valueWrapper,
444
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus[disabled] .valueWrapper {
445
+ opacity: 0.4;
446
+ }
447
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .icon,
448
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .icon,
449
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .icon,
450
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .icon {
451
+ color: var(--semantic-color-on-surface-main-focused);
452
+ }
453
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .indicator,
454
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .indicator,
455
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .indicator,
456
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .indicator {
457
+ background-color: var(--semantic-color-on-surface-main-focused);
458
+ opacity: 0.4;
459
+ }
460
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .indicator.active,
461
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .indicator.active,
462
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .indicator.active,
463
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .indicator.active {
464
+ opacity: 1;
465
+ }
466
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active,
467
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active {
468
+ color: var(--semantic-color-on-surface-main-focused);
469
+ }
470
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active.horizontal:not(.arrow)::before,
471
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active.horizontal:not(.arrow)::before {
472
+ opacity: 1;
473
+ background-color: var(--semantic-color-surface-default-focused);
474
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
475
+ }
476
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active.horizontal.arrow::before,
477
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active.horizontal.arrow::before,
478
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active.vertical::before,
479
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active.vertical::before {
480
+ opacity: 1;
481
+ background-color: var(--semantic-color-surface-default-focused);
482
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
483
+ }
484
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active[disabled],
485
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active[disabled] {
486
+ opacity: 1;
487
+ }
488
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active[disabled]::before,
489
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active[disabled]::before {
490
+ opacity: 0.585;
491
+ }
492
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active[disabled].horizontal:not(.arrow)::before,
493
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active[disabled].horizontal:not(.arrow)::before {
494
+ opacity: 0.585;
495
+ }
496
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active[disabled] .valueWrapper,
497
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active[disabled] .valueWrapper {
498
+ opacity: 0.4;
499
+ }
500
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active .icon,
501
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active .icon {
502
+ color: var(--semantic-color-on-surface-main-focused);
503
+ }
504
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active .indicator,
505
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active .indicator {
506
+ background-color: var(--semantic-color-on-surface-main-focused);
507
+ opacity: 0.4;
508
+ }
509
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active .indicator.active,
510
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active .indicator.active {
511
+ opacity: 1;
512
+ }
513
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.noAnimation) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus.horizontal.arrow::before,
514
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.noAnimation) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus.horizontal.arrow::before,
515
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.noAnimation) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus.vertical::before,
516
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.noAnimation) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus.vertical::before {
517
+ box-shadow: none;
518
+ }
519
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.noAnimation) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active.horizontal.arrow::before,
520
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.noAnimation) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active.vertical::before {
521
+ box-shadow: none;
522
+ }
523
+ .picker:global(.light) {
524
+ color: var(--semantic-color-on-background-main);
525
+ }
526
+ .picker:global(.light) .icon {
527
+ color: var(--semantic-color-on-background-main);
528
+ }
529
+ .picker:global(.light).joined.horizontal:not(.arrow) {
530
+ color: var(--semantic-color-on-surface-main);
531
+ }
532
+ .picker:global(.light).joined.horizontal:not(.arrow)::before {
533
+ opacity: 1;
534
+ background-color: var(--semantic-color-surface-default-focused);
535
+ will-change: box-shadow;
536
+ background-color: var(--semantic-color-surface-default);
537
+ }
538
+ .picker:global(.light).joined.horizontal:not(.arrow) .indicator {
539
+ background-color: var(--semantic-color-on-surface-main);
540
+ opacity: 0.4;
541
+ }
542
+ .picker:global(.light).joined.horizontal:not(.arrow) .indicator.active {
543
+ opacity: 1;
544
+ }
545
+ .picker:global(.light).joined.horizontal.arrow::before,
546
+ .picker:global(.light).joined.vertical::before {
547
+ opacity: 0;
548
+ background-color: var(--semantic-color-surface-default-focused);
549
+ will-change: box-shadow;
550
+ }
551
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus,
552
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus,
553
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus,
554
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus {
555
+ color: var(--semantic-color-on-surface-main-focused);
556
+ }
557
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus.horizontal:not(.arrow)::before,
558
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus.horizontal:not(.arrow)::before,
559
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus.horizontal:not(.arrow)::before,
560
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus.horizontal:not(.arrow)::before {
561
+ opacity: 1;
562
+ background-color: var(--semantic-color-surface-default-focused);
563
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
564
+ }
565
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus.horizontal.arrow::before,
566
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus.horizontal.arrow::before,
567
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus.horizontal.arrow::before,
568
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus.horizontal.arrow::before,
569
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus.vertical::before,
570
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus.vertical::before,
571
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus.vertical::before,
572
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus.vertical::before {
573
+ opacity: 1;
574
+ background-color: var(--semantic-color-surface-default-focused);
575
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
576
+ }
577
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus[disabled],
578
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus[disabled],
579
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus[disabled],
580
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus[disabled] {
581
+ opacity: 1;
582
+ }
583
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus[disabled]::before,
584
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus[disabled]::before,
585
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus[disabled]::before,
586
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus[disabled]::before {
587
+ opacity: 0.585;
588
+ }
589
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus[disabled].horizontal:not(.arrow)::before,
590
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus[disabled].horizontal:not(.arrow)::before,
591
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus[disabled].horizontal:not(.arrow)::before,
592
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus[disabled].horizontal:not(.arrow)::before {
593
+ opacity: 0.585;
594
+ }
595
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus[disabled] .valueWrapper,
596
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus[disabled] .valueWrapper,
597
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus[disabled] .valueWrapper,
598
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus[disabled] .valueWrapper {
599
+ opacity: 0.4;
600
+ }
601
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus .icon,
602
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus .icon,
603
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus .icon,
604
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus .icon {
605
+ color: var(--semantic-color-on-surface-main-focused);
606
+ }
607
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus .indicator,
608
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus .indicator,
609
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus .indicator,
610
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus .indicator {
611
+ background-color: var(--semantic-color-on-surface-main-focused);
612
+ opacity: 0.4;
613
+ }
614
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus .indicator.active,
615
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus .indicator.active,
616
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus .indicator.active,
617
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus .indicator.active {
618
+ opacity: 1;
619
+ }
620
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active,
621
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active {
622
+ color: var(--semantic-color-on-surface-main-focused);
623
+ }
624
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active.horizontal:not(.arrow)::before,
625
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active.horizontal:not(.arrow)::before {
626
+ opacity: 1;
627
+ background-color: var(--semantic-color-surface-default-focused);
628
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
629
+ }
630
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active.horizontal.arrow::before,
631
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active.horizontal.arrow::before,
632
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active.vertical::before,
633
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active.vertical::before {
634
+ opacity: 1;
635
+ background-color: var(--semantic-color-surface-default-focused);
636
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
637
+ }
638
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active[disabled],
639
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active[disabled] {
640
+ opacity: 1;
641
+ }
642
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active[disabled]::before,
643
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active[disabled]::before {
644
+ opacity: 0.585;
645
+ }
646
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active[disabled].horizontal:not(.arrow)::before,
647
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active[disabled].horizontal:not(.arrow)::before {
648
+ opacity: 0.585;
649
+ }
650
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active[disabled] .valueWrapper,
651
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active[disabled] .valueWrapper {
652
+ opacity: 0.4;
653
+ }
654
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active .icon,
655
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active .icon {
656
+ color: var(--semantic-color-on-surface-main-focused);
657
+ }
658
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active .indicator,
659
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active .indicator {
660
+ background-color: var(--semantic-color-on-surface-main-focused);
661
+ opacity: 0.4;
662
+ }
663
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active .indicator.active,
664
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active .indicator.active {
665
+ opacity: 1;
666
+ }
667
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.noAnimation) .picker:global(.light).joined:global(.spottable):focus.horizontal.arrow::before,
668
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.noAnimation) .picker:global(.light).joined:global(.spottable):focus.horizontal.arrow::before,
669
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.noAnimation) .picker:global(.light).joined:global(.spottable):focus.vertical::before,
670
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.noAnimation) .picker:global(.light).joined:global(.spottable):focus.vertical::before {
671
+ box-shadow: none;
672
+ }
673
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.noAnimation) .picker:global(.light).joined:global(.spottable):active.horizontal.arrow::before,
674
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.noAnimation) .picker:global(.light).joined:global(.spottable):active.vertical::before {
675
+ box-shadow: none;
676
+ }
677
+ .picker:global(.game) {
678
+ --semantic-color-surface-default: #2d224c;
679
+ --semantic-color-surface-default-focused: #6d2fa1;
680
+ --semantic-color-on-surface-main-focused: #e6e6e6;
681
+ color: var(--semantic-color-on-background-main);
682
+ }
683
+ .picker:global(.game) .icon {
684
+ color: var(--semantic-color-on-background-main);
685
+ }
686
+ .picker:global(.game).joined.horizontal:not(.arrow) {
687
+ color: var(--semantic-color-on-surface-main);
688
+ }
689
+ .picker:global(.game).joined.horizontal:not(.arrow)::before {
690
+ opacity: 1;
691
+ background-color: var(--semantic-color-surface-default-focused);
692
+ will-change: box-shadow;
693
+ background-color: var(--semantic-color-surface-default);
694
+ }
695
+ .picker:global(.game).joined.horizontal:not(.arrow) .indicator {
696
+ background-color: var(--semantic-color-on-surface-main);
697
+ opacity: 0.4;
698
+ }
699
+ .picker:global(.game).joined.horizontal:not(.arrow) .indicator.active {
700
+ opacity: 1;
701
+ }
702
+ .picker:global(.game).joined.horizontal.arrow::before,
703
+ .picker:global(.game).joined.vertical::before {
704
+ opacity: 0;
705
+ background-color: var(--semantic-color-surface-default-focused);
706
+ will-change: box-shadow;
707
+ }
708
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus,
709
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus,
710
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus,
711
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus {
712
+ color: var(--semantic-color-on-surface-main-focused);
713
+ }
714
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus.horizontal:not(.arrow)::before,
715
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus.horizontal:not(.arrow)::before,
716
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus.horizontal:not(.arrow)::before,
717
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus.horizontal:not(.arrow)::before {
718
+ opacity: 1;
719
+ background-color: var(--semantic-color-surface-default-focused);
720
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
721
+ }
722
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus.horizontal.arrow::before,
723
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus.horizontal.arrow::before,
724
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus.horizontal.arrow::before,
725
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus.horizontal.arrow::before,
726
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus.vertical::before,
727
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus.vertical::before,
728
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus.vertical::before,
729
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus.vertical::before {
730
+ opacity: 1;
731
+ background-color: var(--semantic-color-surface-default-focused);
732
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
733
+ }
734
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus[disabled],
735
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus[disabled],
736
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus[disabled],
737
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus[disabled] {
738
+ opacity: 1;
739
+ }
740
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus[disabled]::before,
741
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus[disabled]::before,
742
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus[disabled]::before,
743
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus[disabled]::before {
744
+ opacity: 0.585;
745
+ }
746
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus[disabled].horizontal:not(.arrow)::before,
747
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus[disabled].horizontal:not(.arrow)::before,
748
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus[disabled].horizontal:not(.arrow)::before,
749
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus[disabled].horizontal:not(.arrow)::before {
750
+ opacity: 0.585;
751
+ }
752
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus[disabled] .valueWrapper,
753
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus[disabled] .valueWrapper,
754
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus[disabled] .valueWrapper,
755
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus[disabled] .valueWrapper {
756
+ opacity: 0.4;
757
+ }
758
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus .icon,
759
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus .icon,
760
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus .icon,
761
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus .icon {
762
+ color: var(--semantic-color-on-surface-main-focused);
763
+ }
764
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus .indicator,
765
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus .indicator,
766
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus .indicator,
767
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus .indicator {
768
+ background-color: var(--semantic-color-on-surface-main-focused);
769
+ opacity: 0.4;
770
+ }
771
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus .indicator.active,
772
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus .indicator.active,
773
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus .indicator.active,
774
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus .indicator.active {
775
+ opacity: 1;
776
+ }
777
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active,
778
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active {
779
+ color: var(--semantic-color-on-surface-main-focused);
780
+ }
781
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active.horizontal:not(.arrow)::before,
782
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active.horizontal:not(.arrow)::before {
783
+ opacity: 1;
784
+ background-color: var(--semantic-color-surface-default-focused);
785
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
786
+ }
787
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active.horizontal.arrow::before,
788
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active.horizontal.arrow::before,
789
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active.vertical::before,
790
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active.vertical::before {
791
+ opacity: 1;
792
+ background-color: var(--semantic-color-surface-default-focused);
793
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
794
+ }
795
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active[disabled],
796
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active[disabled] {
797
+ opacity: 1;
798
+ }
799
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active[disabled]::before,
800
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active[disabled]::before {
801
+ opacity: 0.585;
802
+ }
803
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active[disabled].horizontal:not(.arrow)::before,
804
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active[disabled].horizontal:not(.arrow)::before {
805
+ opacity: 0.585;
806
+ }
807
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active[disabled] .valueWrapper,
808
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active[disabled] .valueWrapper {
809
+ opacity: 0.4;
810
+ }
811
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active .icon,
812
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active .icon {
813
+ color: var(--semantic-color-on-surface-main-focused);
814
+ }
815
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active .indicator,
816
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active .indicator {
817
+ background-color: var(--semantic-color-on-surface-main-focused);
818
+ opacity: 0.4;
819
+ }
820
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active .indicator.active,
821
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active .indicator.active {
822
+ opacity: 1;
823
+ }
824
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.noAnimation) .picker:global(.game).joined:global(.spottable):focus.horizontal.arrow::before,
825
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.noAnimation) .picker:global(.game).joined:global(.spottable):focus.horizontal.arrow::before,
826
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.noAnimation) .picker:global(.game).joined:global(.spottable):focus.vertical::before,
827
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.noAnimation) .picker:global(.game).joined:global(.spottable):focus.vertical::before {
828
+ box-shadow: none;
829
+ }
830
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.noAnimation) .picker:global(.game).joined:global(.spottable):active.horizontal.arrow::before,
831
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.noAnimation) .picker:global(.game).joined:global(.spottable):active.vertical::before {
832
+ box-shadow: none;
833
+ }
834
+ :global(.green) .picker:global(.game) {
835
+ --semantic-color-surface-default: #1F2C24;
836
+ --semantic-color-surface-default-focused: #3ea07d;
837
+ color: var(--semantic-color-on-background-main);
838
+ }
839
+ :global(.green) .picker:global(.game) .icon {
840
+ color: var(--semantic-color-on-background-main);
841
+ }
842
+ :global(.green) .picker:global(.game).joined.horizontal:not(.arrow) {
843
+ color: var(--semantic-color-on-surface-main);
844
+ }
845
+ :global(.green) .picker:global(.game).joined.horizontal:not(.arrow)::before {
846
+ opacity: 1;
847
+ background-color: var(--semantic-color-surface-default-focused);
848
+ will-change: box-shadow;
849
+ background-color: var(--semantic-color-surface-default);
850
+ }
851
+ :global(.green) .picker:global(.game).joined.horizontal:not(.arrow) .indicator {
852
+ background-color: var(--semantic-color-on-surface-main);
853
+ opacity: 0.4;
854
+ }
855
+ :global(.green) .picker:global(.game).joined.horizontal:not(.arrow) .indicator.active {
856
+ opacity: 1;
857
+ }
858
+ :global(.green) .picker:global(.game).joined.horizontal.arrow::before,
859
+ :global(.green) .picker:global(.game).joined.vertical::before {
860
+ opacity: 0;
861
+ background-color: var(--semantic-color-surface-default-focused);
862
+ will-change: box-shadow;
863
+ }
864
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus,
865
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus,
866
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus,
867
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus {
868
+ color: var(--semantic-color-on-surface-main-focused);
869
+ }
870
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus.horizontal:not(.arrow)::before,
871
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus.horizontal:not(.arrow)::before,
872
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus.horizontal:not(.arrow)::before,
873
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus.horizontal:not(.arrow)::before {
874
+ opacity: 1;
875
+ background-color: var(--semantic-color-surface-default-focused);
876
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
877
+ }
878
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus.horizontal.arrow::before,
879
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus.horizontal.arrow::before,
880
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus.horizontal.arrow::before,
881
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus.horizontal.arrow::before,
882
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus.vertical::before,
883
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus.vertical::before,
884
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus.vertical::before,
885
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus.vertical::before {
886
+ opacity: 1;
887
+ background-color: var(--semantic-color-surface-default-focused);
888
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
889
+ }
890
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus[disabled],
891
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus[disabled],
892
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus[disabled],
893
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus[disabled] {
894
+ opacity: 1;
895
+ }
896
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus[disabled]::before,
897
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus[disabled]::before,
898
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus[disabled]::before,
899
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus[disabled]::before {
900
+ opacity: 0.585;
901
+ }
902
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus[disabled].horizontal:not(.arrow)::before,
903
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus[disabled].horizontal:not(.arrow)::before,
904
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus[disabled].horizontal:not(.arrow)::before,
905
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus[disabled].horizontal:not(.arrow)::before {
906
+ opacity: 0.585;
907
+ }
908
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus[disabled] .valueWrapper,
909
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus[disabled] .valueWrapper,
910
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus[disabled] .valueWrapper,
911
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus[disabled] .valueWrapper {
912
+ opacity: 0.4;
913
+ }
914
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus .icon,
915
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus .icon,
916
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus .icon,
917
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus .icon {
918
+ color: var(--semantic-color-on-surface-main-focused);
919
+ }
920
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus .indicator,
921
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus .indicator,
922
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus .indicator,
923
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus .indicator {
924
+ background-color: var(--semantic-color-on-surface-main-focused);
925
+ opacity: 0.4;
926
+ }
927
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus .indicator.active,
928
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus .indicator.active,
929
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus .indicator.active,
930
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus .indicator.active {
931
+ opacity: 1;
932
+ }
933
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active,
934
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active {
935
+ color: var(--semantic-color-on-surface-main-focused);
936
+ }
937
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active.horizontal:not(.arrow)::before,
938
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active.horizontal:not(.arrow)::before {
939
+ opacity: 1;
940
+ background-color: var(--semantic-color-surface-default-focused);
941
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
942
+ }
943
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active.horizontal.arrow::before,
944
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active.horizontal.arrow::before,
945
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active.vertical::before,
946
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active.vertical::before {
947
+ opacity: 1;
948
+ background-color: var(--semantic-color-surface-default-focused);
949
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
950
+ }
951
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active[disabled],
952
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active[disabled] {
953
+ opacity: 1;
954
+ }
955
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active[disabled]::before,
956
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active[disabled]::before {
957
+ opacity: 0.585;
958
+ }
959
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active[disabled].horizontal:not(.arrow)::before,
960
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active[disabled].horizontal:not(.arrow)::before {
961
+ opacity: 0.585;
962
+ }
963
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active[disabled] .valueWrapper,
964
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active[disabled] .valueWrapper {
965
+ opacity: 0.4;
966
+ }
967
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active .icon,
968
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active .icon {
969
+ color: var(--semantic-color-on-surface-main-focused);
970
+ }
971
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active .indicator,
972
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active .indicator {
973
+ background-color: var(--semantic-color-on-surface-main-focused);
974
+ opacity: 0.4;
975
+ }
976
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active .indicator.active,
977
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active .indicator.active {
978
+ opacity: 1;
979
+ }
980
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.noAnimation) :global(.green) .picker:global(.game).joined:global(.spottable):focus.horizontal.arrow::before,
981
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.noAnimation) :global(.green) .picker:global(.game).joined:global(.spottable):focus.horizontal.arrow::before,
982
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.noAnimation) :global(.green) .picker:global(.game).joined:global(.spottable):focus.vertical::before,
983
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.noAnimation) :global(.green) .picker:global(.game).joined:global(.spottable):focus.vertical::before {
984
+ box-shadow: none;
985
+ }
986
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.noAnimation) :global(.green) .picker:global(.game).joined:global(.spottable):active.horizontal.arrow::before,
987
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.noAnimation) :global(.green) .picker:global(.game).joined:global(.spottable):active.vertical::before {
988
+ box-shadow: none;
989
+ }
990
+ :global(.orange) .picker:global(.game) {
991
+ --semantic-color-surface-default: #422923;
992
+ --semantic-color-surface-default-focused: #b85f23;
993
+ color: var(--semantic-color-on-background-main);
994
+ }
995
+ :global(.orange) .picker:global(.game) .icon {
996
+ color: var(--semantic-color-on-background-main);
997
+ }
998
+ :global(.orange) .picker:global(.game).joined.horizontal:not(.arrow) {
999
+ color: var(--semantic-color-on-surface-main);
1000
+ }
1001
+ :global(.orange) .picker:global(.game).joined.horizontal:not(.arrow)::before {
1002
+ opacity: 1;
1003
+ background-color: var(--semantic-color-surface-default-focused);
1004
+ will-change: box-shadow;
1005
+ background-color: var(--semantic-color-surface-default);
1006
+ }
1007
+ :global(.orange) .picker:global(.game).joined.horizontal:not(.arrow) .indicator {
1008
+ background-color: var(--semantic-color-on-surface-main);
1009
+ opacity: 0.4;
1010
+ }
1011
+ :global(.orange) .picker:global(.game).joined.horizontal:not(.arrow) .indicator.active {
1012
+ opacity: 1;
1013
+ }
1014
+ :global(.orange) .picker:global(.game).joined.horizontal.arrow::before,
1015
+ :global(.orange) .picker:global(.game).joined.vertical::before {
1016
+ opacity: 0;
1017
+ background-color: var(--semantic-color-surface-default-focused);
1018
+ will-change: box-shadow;
1019
+ }
1020
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus,
1021
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus,
1022
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus,
1023
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus {
1024
+ color: var(--semantic-color-on-surface-main-focused);
1025
+ }
1026
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus.horizontal:not(.arrow)::before,
1027
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus.horizontal:not(.arrow)::before,
1028
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus.horizontal:not(.arrow)::before,
1029
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus.horizontal:not(.arrow)::before {
1030
+ opacity: 1;
1031
+ background-color: var(--semantic-color-surface-default-focused);
1032
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
1033
+ }
1034
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus.horizontal.arrow::before,
1035
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus.horizontal.arrow::before,
1036
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus.horizontal.arrow::before,
1037
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus.horizontal.arrow::before,
1038
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus.vertical::before,
1039
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus.vertical::before,
1040
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus.vertical::before,
1041
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus.vertical::before {
1042
+ opacity: 1;
1043
+ background-color: var(--semantic-color-surface-default-focused);
1044
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
1045
+ }
1046
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus[disabled],
1047
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus[disabled],
1048
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus[disabled],
1049
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus[disabled] {
1050
+ opacity: 1;
1051
+ }
1052
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus[disabled]::before,
1053
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus[disabled]::before,
1054
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus[disabled]::before,
1055
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus[disabled]::before {
1056
+ opacity: 0.585;
1057
+ }
1058
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus[disabled].horizontal:not(.arrow)::before,
1059
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus[disabled].horizontal:not(.arrow)::before,
1060
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus[disabled].horizontal:not(.arrow)::before,
1061
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus[disabled].horizontal:not(.arrow)::before {
1062
+ opacity: 0.585;
1063
+ }
1064
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus[disabled] .valueWrapper,
1065
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus[disabled] .valueWrapper,
1066
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus[disabled] .valueWrapper,
1067
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus[disabled] .valueWrapper {
1068
+ opacity: 0.4;
1069
+ }
1070
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .icon,
1071
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .icon,
1072
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .icon,
1073
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .icon {
1074
+ color: var(--semantic-color-on-surface-main-focused);
1075
+ }
1076
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .indicator,
1077
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .indicator,
1078
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .indicator,
1079
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .indicator {
1080
+ background-color: var(--semantic-color-on-surface-main-focused);
1081
+ opacity: 0.4;
1082
+ }
1083
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .indicator.active,
1084
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .indicator.active,
1085
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .indicator.active,
1086
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .indicator.active {
1087
+ opacity: 1;
1088
+ }
1089
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active,
1090
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active {
1091
+ color: var(--semantic-color-on-surface-main-focused);
1092
+ }
1093
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active.horizontal:not(.arrow)::before,
1094
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active.horizontal:not(.arrow)::before {
1095
+ opacity: 1;
1096
+ background-color: var(--semantic-color-surface-default-focused);
1097
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
1098
+ }
1099
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active.horizontal.arrow::before,
1100
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active.horizontal.arrow::before,
1101
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active.vertical::before,
1102
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active.vertical::before {
1103
+ opacity: 1;
1104
+ background-color: var(--semantic-color-surface-default-focused);
1105
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
1106
+ }
1107
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active[disabled],
1108
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active[disabled] {
1109
+ opacity: 1;
1110
+ }
1111
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active[disabled]::before,
1112
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active[disabled]::before {
1113
+ opacity: 0.585;
1114
+ }
1115
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active[disabled].horizontal:not(.arrow)::before,
1116
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active[disabled].horizontal:not(.arrow)::before {
1117
+ opacity: 0.585;
1118
+ }
1119
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active[disabled] .valueWrapper,
1120
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active[disabled] .valueWrapper {
1121
+ opacity: 0.4;
1122
+ }
1123
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active .icon,
1124
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active .icon {
1125
+ color: var(--semantic-color-on-surface-main-focused);
1126
+ }
1127
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active .indicator,
1128
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active .indicator {
1129
+ background-color: var(--semantic-color-on-surface-main-focused);
1130
+ opacity: 0.4;
1131
+ }
1132
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active .indicator.active,
1133
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active .indicator.active {
1134
+ opacity: 1;
1135
+ }
1136
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.noAnimation) :global(.orange) .picker:global(.game).joined:global(.spottable):focus.horizontal.arrow::before,
1137
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.noAnimation) :global(.orange) .picker:global(.game).joined:global(.spottable):focus.horizontal.arrow::before,
1138
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.noAnimation) :global(.orange) .picker:global(.game).joined:global(.spottable):focus.vertical::before,
1139
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.noAnimation) :global(.orange) .picker:global(.game).joined:global(.spottable):focus.vertical::before {
1140
+ box-shadow: none;
1141
+ }
1142
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.noAnimation) :global(.orange) .picker:global(.game).joined:global(.spottable):active.horizontal.arrow::before,
1143
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.noAnimation) :global(.orange) .picker:global(.game).joined:global(.spottable):active.vertical::before {
1144
+ box-shadow: none;
1145
+ }