@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/Checkbox/Checkbox.module.css ADDED
@@ -0,0 +1,1395 @@
1
+ .checkbox {
2
+ display: inline-block;
3
+ position: relative;
4
+ line-height: 0;
5
+ }
6
+ .checkbox .icon {
7
+ margin: 0;
8
+ border-radius: var(--semantic-radius-full);
9
+ position: relative;
10
+ text-align: center;
11
+ }
12
+ .checkbox:global(.neutral).standalone .bg {
13
+ position: absolute;
14
+ top: -0.75rem;
15
+ right: -0.75rem;
16
+ bottom: -0.75rem;
17
+ left: -0.75rem;
18
+ border-radius: var(--semantic-radius-button);
19
+ will-change: box-shadow, box-shadow, box-shadow;
20
+ opacity: 0;
21
+ background-color: var(--semantic-color-surface-default-focused);
22
+ }
23
+ .checkbox:global(.neutral):global(.spottable) .bg {
24
+ position: absolute;
25
+ top: -0.75rem;
26
+ right: -0.75rem;
27
+ bottom: -0.75rem;
28
+ left: -0.75rem;
29
+ border-radius: var(--semantic-radius-button);
30
+ will-change: box-shadow, box-shadow, box-shadow;
31
+ opacity: 0;
32
+ background-color: var(--semantic-color-surface-default-focused);
33
+ }
34
+ .checkbox:global(.neutral) .icon {
35
+ color: transparent;
36
+ background-color: transparent;
37
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive);
38
+ }
39
+ .checkbox:global(.neutral).selected .icon {
40
+ color: var(--semantic-color-on-surface-main-selected);
41
+ background-color: var(--semantic-color-surface-accent);
42
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
43
+ }
44
+ .checkbox:global(.neutral).indeterminate .icon {
45
+ color: var(--semantic-color-stroke-selection-inactive);
46
+ background-color: transparent;
47
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive);
48
+ }
49
+ :global(.spotlight-input-key) .checkbox:global(.neutral):global(.spottable):focus .icon,
50
+ :global(.spotlight-input-mouse) .checkbox:global(.neutral):global(.spottable):focus .icon {
51
+ color: transparent;
52
+ background-color: transparent;
53
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
54
+ }
55
+ :global(.spotlight-input-key) .checkbox:global(.neutral):global(.spottable):focus .bg,
56
+ :global(.spotlight-input-mouse) .checkbox:global(.neutral):global(.spottable):focus .bg {
57
+ opacity: 1;
58
+ background-color: var(--semantic-color-surface-default-focused);
59
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
60
+ }
61
+ :global(.spotlight-input-key) .checkbox:global(.neutral):global(.spottable):focus.selected .icon,
62
+ :global(.spotlight-input-mouse) .checkbox:global(.neutral):global(.spottable):focus.selected .icon {
63
+ color: var(--semantic-color-on-surface-main-selected);
64
+ background-color: var(--semantic-color-surface-accent);
65
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
66
+ }
67
+ :global(.spotlight-input-key) .checkbox:global(.neutral):global(.spottable):focus.indeterminate .icon,
68
+ :global(.spotlight-input-mouse) .checkbox:global(.neutral):global(.spottable):focus.indeterminate .icon {
69
+ color: var(--semantic-color-stroke-selection-inactive-focused);
70
+ background-color: transparent;
71
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
72
+ }
73
+ :global(.spotlight-input-touch) .checkbox:global(.neutral):global(.spottable):active .icon {
74
+ color: transparent;
75
+ background-color: transparent;
76
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
77
+ }
78
+ :global(.spotlight-input-touch) .checkbox:global(.neutral):global(.spottable):active .bg {
79
+ opacity: 1;
80
+ background-color: var(--semantic-color-surface-default-focused);
81
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
82
+ }
83
+ :global(.spotlight-input-touch) .checkbox:global(.neutral):global(.spottable):active.selected .icon {
84
+ color: var(--semantic-color-on-surface-main-selected);
85
+ background-color: var(--semantic-color-surface-accent);
86
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
87
+ }
88
+ :global(.spotlight-input-touch) .checkbox:global(.neutral):global(.spottable):active.indeterminate .icon {
89
+ color: var(--semantic-color-stroke-selection-inactive-focused);
90
+ background-color: transparent;
91
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
92
+ }
93
+ :global(.spotlight-input-key) :global(.noAnimation) .checkbox:global(.neutral):global(.spottable):focus .bg,
94
+ :global(.spotlight-input-mouse) :global(.noAnimation) .checkbox:global(.neutral):global(.spottable):focus .bg {
95
+ box-shadow: none;
96
+ }
97
+ :global(.spotlight-input-touch) :global(.noAnimation) .checkbox:global(.neutral):global(.spottable):active .bg {
98
+ box-shadow: none;
99
+ }
100
+ .checkbox:global(.neutral)[disabled] {
101
+ opacity: 1;
102
+ }
103
+ .checkbox:global(.neutral)[disabled] .icon {
104
+ opacity: 0.3;
105
+ }
106
+ :global(.spotlight-input-key) .checkbox:global(.neutral)[disabled]:global(.spottable):focus .bg,
107
+ :global(.spotlight-input-mouse) .checkbox:global(.neutral)[disabled]:global(.spottable):focus .bg {
108
+ background-color: var(--semantic-color-surface-default-disabled-focused);
109
+ }
110
+ :global(.spotlight-input-key) .checkbox:global(.neutral)[disabled]:global(.spottable):focus.selected .icon,
111
+ :global(.spotlight-input-mouse) .checkbox:global(.neutral)[disabled]:global(.spottable):focus.selected .icon {
112
+ color: var(--semantic-color-on-surface-main-selected);
113
+ background-color: var(--semantic-color-surface-accent);
114
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
115
+ }
116
+ :global(.spotlight-input-key) .checkbox:global(.neutral)[disabled]:global(.spottable):focus.indeterminate .icon,
117
+ :global(.spotlight-input-mouse) .checkbox:global(.neutral)[disabled]:global(.spottable):focus.indeterminate .icon {
118
+ color: var(--semantic-color-stroke-selection-inactive-focused);
119
+ background-color: transparent;
120
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
121
+ }
122
+ :global(.spotlight-input-key) .checkbox:global(.neutral)[disabled]:global(.spottable):focus .icon,
123
+ :global(.spotlight-input-mouse) .checkbox:global(.neutral)[disabled]:global(.spottable):focus .icon {
124
+ opacity: 0.4;
125
+ }
126
+ :global(.spotlight-input-touch) .checkbox:global(.neutral)[disabled]:global(.spottable):active .bg {
127
+ background-color: var(--semantic-color-surface-default-disabled-focused);
128
+ }
129
+ :global(.spotlight-input-touch) .checkbox:global(.neutral)[disabled]:global(.spottable):active.selected .icon {
130
+ color: var(--semantic-color-on-surface-main-selected);
131
+ background-color: var(--semantic-color-surface-accent);
132
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
133
+ }
134
+ :global(.spotlight-input-touch) .checkbox:global(.neutral)[disabled]:global(.spottable):active.indeterminate .icon {
135
+ color: var(--semantic-color-stroke-selection-inactive-focused);
136
+ background-color: transparent;
137
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
138
+ }
139
+ :global(.spotlight-input-touch) .checkbox:global(.neutral)[disabled]:global(.spottable):active .icon {
140
+ opacity: 0.4;
141
+ }
142
+ :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast).standalone .bg {
143
+ position: absolute;
144
+ top: -0.75rem;
145
+ right: -0.75rem;
146
+ bottom: -0.75rem;
147
+ left: -0.75rem;
148
+ border-radius: var(--semantic-radius-button);
149
+ will-change: box-shadow, box-shadow, box-shadow;
150
+ opacity: 0;
151
+ background-color: var(--semantic-color-surface-default-focused);
152
+ }
153
+ :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast):global(.spottable) .bg {
154
+ position: absolute;
155
+ top: -0.75rem;
156
+ right: -0.75rem;
157
+ bottom: -0.75rem;
158
+ left: -0.75rem;
159
+ border-radius: var(--semantic-radius-button);
160
+ will-change: box-shadow, box-shadow, box-shadow;
161
+ opacity: 0;
162
+ background-color: var(--semantic-color-surface-default-focused);
163
+ }
164
+ :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast) .icon {
165
+ color: transparent;
166
+ background-color: transparent;
167
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive);
168
+ }
169
+ :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast).selected .icon {
170
+ color: var(--semantic-color-on-surface-main-selected);
171
+ background-color: var(--semantic-color-surface-accent);
172
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
173
+ }
174
+ :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast).indeterminate .icon {
175
+ color: var(--semantic-color-stroke-selection-inactive);
176
+ background-color: transparent;
177
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive);
178
+ }
179
+ :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast):global(.spottable):focus .icon,
180
+ :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast):global(.spottable):focus .icon {
181
+ color: transparent;
182
+ background-color: transparent;
183
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
184
+ }
185
+ :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast):global(.spottable):focus .bg,
186
+ :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast):global(.spottable):focus .bg {
187
+ opacity: 1;
188
+ background-color: var(--semantic-color-surface-default-focused);
189
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
190
+ }
191
+ :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast):global(.spottable):focus.selected .icon,
192
+ :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast):global(.spottable):focus.selected .icon {
193
+ color: var(--semantic-color-on-surface-main-selected);
194
+ background-color: var(--semantic-color-surface-accent);
195
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
196
+ }
197
+ :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast):global(.spottable):focus.indeterminate .icon,
198
+ :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast):global(.spottable):focus.indeterminate .icon {
199
+ color: var(--semantic-color-stroke-selection-inactive-focused);
200
+ background-color: transparent;
201
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
202
+ }
203
+ :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast):global(.spottable):active .icon {
204
+ color: transparent;
205
+ background-color: transparent;
206
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
207
+ }
208
+ :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast):global(.spottable):active .bg {
209
+ opacity: 1;
210
+ background-color: var(--semantic-color-surface-default-focused);
211
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
212
+ }
213
+ :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast):global(.spottable):active.selected .icon {
214
+ color: var(--semantic-color-on-surface-main-selected);
215
+ background-color: var(--semantic-color-surface-accent);
216
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
217
+ }
218
+ :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast):global(.spottable):active.indeterminate .icon {
219
+ color: var(--semantic-color-stroke-selection-inactive-focused);
220
+ background-color: transparent;
221
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
222
+ }
223
+ :global(.spotlight-input-key) :global(.noAnimation) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast):global(.spottable):focus .bg,
224
+ :global(.spotlight-input-mouse) :global(.noAnimation) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast):global(.spottable):focus .bg {
225
+ box-shadow: none;
226
+ }
227
+ :global(.spotlight-input-touch) :global(.noAnimation) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast):global(.spottable):active .bg {
228
+ box-shadow: none;
229
+ }
230
+ :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast)[disabled] {
231
+ opacity: 1;
232
+ }
233
+ :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast)[disabled] .icon {
234
+ opacity: 0.3;
235
+ }
236
+ :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast)[disabled]:global(.spottable):focus .bg,
237
+ :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast)[disabled]:global(.spottable):focus .bg {
238
+ background-color: var(--semantic-color-surface-default-disabled-focused);
239
+ }
240
+ :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast)[disabled]:global(.spottable):focus.selected .icon,
241
+ :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast)[disabled]:global(.spottable):focus.selected .icon {
242
+ color: var(--semantic-color-on-surface-main-selected);
243
+ background-color: var(--semantic-color-surface-accent);
244
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
245
+ }
246
+ :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast)[disabled]:global(.spottable):focus.indeterminate .icon,
247
+ :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast)[disabled]:global(.spottable):focus.indeterminate .icon {
248
+ color: var(--semantic-color-stroke-selection-inactive-focused);
249
+ background-color: transparent;
250
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
251
+ }
252
+ :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast)[disabled]:global(.spottable):focus .icon,
253
+ :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast)[disabled]:global(.spottable):focus .icon {
254
+ opacity: 0.4;
255
+ }
256
+ :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast)[disabled]:global(.spottable):active .bg {
257
+ background-color: var(--semantic-color-surface-default-disabled-focused);
258
+ }
259
+ :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast)[disabled]:global(.spottable):active.selected .icon {
260
+ color: var(--semantic-color-on-surface-main-selected);
261
+ background-color: var(--semantic-color-surface-accent);
262
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
263
+ }
264
+ :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast)[disabled]:global(.spottable):active.indeterminate .icon {
265
+ color: var(--semantic-color-stroke-selection-inactive-focused);
266
+ background-color: transparent;
267
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
268
+ }
269
+ :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast)[disabled]:global(.spottable):active .icon {
270
+ opacity: 0.4;
271
+ }
272
+ .checkbox:global(.light).standalone .bg {
273
+ position: absolute;
274
+ top: -0.75rem;
275
+ right: -0.75rem;
276
+ bottom: -0.75rem;
277
+ left: -0.75rem;
278
+ border-radius: var(--semantic-radius-button);
279
+ will-change: box-shadow, box-shadow, box-shadow;
280
+ opacity: 0;
281
+ background-color: var(--semantic-color-surface-default-focused);
282
+ }
283
+ .checkbox:global(.light):global(.spottable) .bg {
284
+ position: absolute;
285
+ top: -0.75rem;
286
+ right: -0.75rem;
287
+ bottom: -0.75rem;
288
+ left: -0.75rem;
289
+ border-radius: var(--semantic-radius-button);
290
+ will-change: box-shadow, box-shadow, box-shadow;
291
+ opacity: 0;
292
+ background-color: var(--semantic-color-surface-default-focused);
293
+ }
294
+ .checkbox:global(.light) .icon {
295
+ color: transparent;
296
+ background-color: transparent;
297
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive);
298
+ }
299
+ .checkbox:global(.light).selected .icon {
300
+ color: var(--semantic-color-on-surface-main-selected);
301
+ background-color: var(--semantic-color-surface-accent);
302
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
303
+ }
304
+ .checkbox:global(.light).indeterminate .icon {
305
+ color: var(--semantic-color-stroke-selection-inactive);
306
+ background-color: transparent;
307
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive);
308
+ }
309
+ :global(.spotlight-input-key) .checkbox:global(.light):global(.spottable):focus .icon,
310
+ :global(.spotlight-input-mouse) .checkbox:global(.light):global(.spottable):focus .icon {
311
+ color: transparent;
312
+ background-color: transparent;
313
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
314
+ }
315
+ :global(.spotlight-input-key) .checkbox:global(.light):global(.spottable):focus .bg,
316
+ :global(.spotlight-input-mouse) .checkbox:global(.light):global(.spottable):focus .bg {
317
+ opacity: 1;
318
+ background-color: var(--semantic-color-surface-default-focused);
319
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
320
+ }
321
+ :global(.spotlight-input-key) .checkbox:global(.light):global(.spottable):focus.selected .icon,
322
+ :global(.spotlight-input-mouse) .checkbox:global(.light):global(.spottable):focus.selected .icon {
323
+ color: var(--semantic-color-on-surface-main-selected);
324
+ background-color: var(--semantic-color-surface-accent);
325
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
326
+ }
327
+ :global(.spotlight-input-key) .checkbox:global(.light):global(.spottable):focus.indeterminate .icon,
328
+ :global(.spotlight-input-mouse) .checkbox:global(.light):global(.spottable):focus.indeterminate .icon {
329
+ color: var(--semantic-color-stroke-selection-inactive-focused);
330
+ background-color: transparent;
331
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
332
+ }
333
+ :global(.spotlight-input-touch) .checkbox:global(.light):global(.spottable):active .icon {
334
+ color: transparent;
335
+ background-color: transparent;
336
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
337
+ }
338
+ :global(.spotlight-input-touch) .checkbox:global(.light):global(.spottable):active .bg {
339
+ opacity: 1;
340
+ background-color: var(--semantic-color-surface-default-focused);
341
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
342
+ }
343
+ :global(.spotlight-input-touch) .checkbox:global(.light):global(.spottable):active.selected .icon {
344
+ color: var(--semantic-color-on-surface-main-selected);
345
+ background-color: var(--semantic-color-surface-accent);
346
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
347
+ }
348
+ :global(.spotlight-input-touch) .checkbox:global(.light):global(.spottable):active.indeterminate .icon {
349
+ color: var(--semantic-color-stroke-selection-inactive-focused);
350
+ background-color: transparent;
351
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
352
+ }
353
+ :global(.spotlight-input-key) :global(.noAnimation) .checkbox:global(.light):global(.spottable):focus .bg,
354
+ :global(.spotlight-input-mouse) :global(.noAnimation) .checkbox:global(.light):global(.spottable):focus .bg {
355
+ box-shadow: none;
356
+ }
357
+ :global(.spotlight-input-touch) :global(.noAnimation) .checkbox:global(.light):global(.spottable):active .bg {
358
+ box-shadow: none;
359
+ }
360
+ .checkbox:global(.light)[disabled] {
361
+ opacity: 1;
362
+ }
363
+ .checkbox:global(.light)[disabled] .icon {
364
+ opacity: 0.3;
365
+ }
366
+ :global(.spotlight-input-key) .checkbox:global(.light)[disabled]:global(.spottable):focus .bg,
367
+ :global(.spotlight-input-mouse) .checkbox:global(.light)[disabled]:global(.spottable):focus .bg {
368
+ background-color: var(--semantic-color-surface-default-disabled-focused);
369
+ }
370
+ :global(.spotlight-input-key) .checkbox:global(.light)[disabled]:global(.spottable):focus.selected .icon,
371
+ :global(.spotlight-input-mouse) .checkbox:global(.light)[disabled]:global(.spottable):focus.selected .icon {
372
+ color: var(--semantic-color-on-surface-main-selected);
373
+ background-color: var(--semantic-color-surface-accent);
374
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
375
+ }
376
+ :global(.spotlight-input-key) .checkbox:global(.light)[disabled]:global(.spottable):focus.indeterminate .icon,
377
+ :global(.spotlight-input-mouse) .checkbox:global(.light)[disabled]:global(.spottable):focus.indeterminate .icon {
378
+ color: var(--semantic-color-stroke-selection-inactive-focused);
379
+ background-color: transparent;
380
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
381
+ }
382
+ :global(.spotlight-input-key) .checkbox:global(.light)[disabled]:global(.spottable):focus .icon,
383
+ :global(.spotlight-input-mouse) .checkbox:global(.light)[disabled]:global(.spottable):focus .icon {
384
+ opacity: 0.4;
385
+ }
386
+ :global(.spotlight-input-touch) .checkbox:global(.light)[disabled]:global(.spottable):active .bg {
387
+ background-color: var(--semantic-color-surface-default-disabled-focused);
388
+ }
389
+ :global(.spotlight-input-touch) .checkbox:global(.light)[disabled]:global(.spottable):active.selected .icon {
390
+ color: var(--semantic-color-on-surface-main-selected);
391
+ background-color: var(--semantic-color-surface-accent);
392
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
393
+ }
394
+ :global(.spotlight-input-touch) .checkbox:global(.light)[disabled]:global(.spottable):active.indeterminate .icon {
395
+ color: var(--semantic-color-stroke-selection-inactive-focused);
396
+ background-color: transparent;
397
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
398
+ }
399
+ :global(.spotlight-input-touch) .checkbox:global(.light)[disabled]:global(.spottable):active .icon {
400
+ opacity: 0.4;
401
+ }
402
+ .checkbox:global(.game) {
403
+ --semantic-color-surface-default: #2d224c;
404
+ --semantic-color-surface-default-focused: #6d2fa1;
405
+ --semantic-color-on-surface-main-focused: #e6e6e6;
406
+ }
407
+ .checkbox:global(.game).standalone .bg {
408
+ position: absolute;
409
+ top: -0.75rem;
410
+ right: -0.75rem;
411
+ bottom: -0.75rem;
412
+ left: -0.75rem;
413
+ border-radius: var(--semantic-radius-button);
414
+ will-change: box-shadow, box-shadow, box-shadow;
415
+ opacity: 0;
416
+ background-color: var(--semantic-color-surface-default-focused);
417
+ }
418
+ .checkbox:global(.game):global(.spottable) .bg {
419
+ position: absolute;
420
+ top: -0.75rem;
421
+ right: -0.75rem;
422
+ bottom: -0.75rem;
423
+ left: -0.75rem;
424
+ border-radius: var(--semantic-radius-button);
425
+ will-change: box-shadow, box-shadow, box-shadow;
426
+ opacity: 0;
427
+ background-color: var(--semantic-color-surface-default-focused);
428
+ }
429
+ .checkbox:global(.game) .icon {
430
+ color: transparent;
431
+ background-color: transparent;
432
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive);
433
+ }
434
+ .checkbox:global(.game).selected .icon {
435
+ color: var(--semantic-color-on-surface-main-selected);
436
+ background-color: var(--semantic-color-surface-accent);
437
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
438
+ }
439
+ .checkbox:global(.game).indeterminate .icon {
440
+ color: var(--semantic-color-stroke-selection-inactive);
441
+ background-color: transparent;
442
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive);
443
+ }
444
+ :global(.spotlight-input-key) .checkbox:global(.game):global(.spottable):focus .icon,
445
+ :global(.spotlight-input-mouse) .checkbox:global(.game):global(.spottable):focus .icon {
446
+ color: transparent;
447
+ background-color: transparent;
448
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
449
+ }
450
+ :global(.spotlight-input-key) .checkbox:global(.game):global(.spottable):focus .bg,
451
+ :global(.spotlight-input-mouse) .checkbox:global(.game):global(.spottable):focus .bg {
452
+ opacity: 1;
453
+ background-color: var(--semantic-color-surface-default-focused);
454
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
455
+ }
456
+ :global(.spotlight-input-key) .checkbox:global(.game):global(.spottable):focus.selected .icon,
457
+ :global(.spotlight-input-mouse) .checkbox:global(.game):global(.spottable):focus.selected .icon {
458
+ color: var(--semantic-color-on-surface-main-selected);
459
+ background-color: var(--semantic-color-surface-accent);
460
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
461
+ }
462
+ :global(.spotlight-input-key) .checkbox:global(.game):global(.spottable):focus.indeterminate .icon,
463
+ :global(.spotlight-input-mouse) .checkbox:global(.game):global(.spottable):focus.indeterminate .icon {
464
+ color: var(--semantic-color-stroke-selection-inactive-focused);
465
+ background-color: transparent;
466
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
467
+ }
468
+ :global(.spotlight-input-touch) .checkbox:global(.game):global(.spottable):active .icon {
469
+ color: transparent;
470
+ background-color: transparent;
471
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
472
+ }
473
+ :global(.spotlight-input-touch) .checkbox:global(.game):global(.spottable):active .bg {
474
+ opacity: 1;
475
+ background-color: var(--semantic-color-surface-default-focused);
476
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
477
+ }
478
+ :global(.spotlight-input-touch) .checkbox:global(.game):global(.spottable):active.selected .icon {
479
+ color: var(--semantic-color-on-surface-main-selected);
480
+ background-color: var(--semantic-color-surface-accent);
481
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
482
+ }
483
+ :global(.spotlight-input-touch) .checkbox:global(.game):global(.spottable):active.indeterminate .icon {
484
+ color: var(--semantic-color-stroke-selection-inactive-focused);
485
+ background-color: transparent;
486
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
487
+ }
488
+ :global(.spotlight-input-key) :global(.noAnimation) .checkbox:global(.game):global(.spottable):focus .bg,
489
+ :global(.spotlight-input-mouse) :global(.noAnimation) .checkbox:global(.game):global(.spottable):focus .bg {
490
+ box-shadow: none;
491
+ }
492
+ :global(.spotlight-input-touch) :global(.noAnimation) .checkbox:global(.game):global(.spottable):active .bg {
493
+ box-shadow: none;
494
+ }
495
+ .checkbox:global(.game)[disabled] {
496
+ opacity: 1;
497
+ }
498
+ .checkbox:global(.game)[disabled] .icon {
499
+ opacity: 0.3;
500
+ }
501
+ :global(.spotlight-input-key) .checkbox:global(.game)[disabled]:global(.spottable):focus .bg,
502
+ :global(.spotlight-input-mouse) .checkbox:global(.game)[disabled]:global(.spottable):focus .bg {
503
+ background-color: var(--semantic-color-surface-default-disabled-focused);
504
+ }
505
+ :global(.spotlight-input-key) .checkbox:global(.game)[disabled]:global(.spottable):focus.selected .icon,
506
+ :global(.spotlight-input-mouse) .checkbox:global(.game)[disabled]:global(.spottable):focus.selected .icon {
507
+ color: var(--semantic-color-on-surface-main-selected);
508
+ background-color: var(--semantic-color-surface-accent);
509
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
510
+ }
511
+ :global(.spotlight-input-key) .checkbox:global(.game)[disabled]:global(.spottable):focus.indeterminate .icon,
512
+ :global(.spotlight-input-mouse) .checkbox:global(.game)[disabled]:global(.spottable):focus.indeterminate .icon {
513
+ color: var(--semantic-color-stroke-selection-inactive-focused);
514
+ background-color: transparent;
515
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
516
+ }
517
+ :global(.spotlight-input-key) .checkbox:global(.game)[disabled]:global(.spottable):focus .icon,
518
+ :global(.spotlight-input-mouse) .checkbox:global(.game)[disabled]:global(.spottable):focus .icon {
519
+ opacity: 0.4;
520
+ }
521
+ :global(.spotlight-input-touch) .checkbox:global(.game)[disabled]:global(.spottable):active .bg {
522
+ background-color: var(--semantic-color-surface-default-disabled-focused);
523
+ }
524
+ :global(.spotlight-input-touch) .checkbox:global(.game)[disabled]:global(.spottable):active.selected .icon {
525
+ color: var(--semantic-color-on-surface-main-selected);
526
+ background-color: var(--semantic-color-surface-accent);
527
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
528
+ }
529
+ :global(.spotlight-input-touch) .checkbox:global(.game)[disabled]:global(.spottable):active.indeterminate .icon {
530
+ color: var(--semantic-color-stroke-selection-inactive-focused);
531
+ background-color: transparent;
532
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
533
+ }
534
+ :global(.spotlight-input-touch) .checkbox:global(.game)[disabled]:global(.spottable):active .icon {
535
+ opacity: 0.4;
536
+ }
537
+ :global(.green) .checkbox:global(.game) {
538
+ --semantic-color-surface-default: #1F2C24;
539
+ --semantic-color-surface-default-focused: #3ea07d;
540
+ }
541
+ :global(.green) .checkbox:global(.game).standalone .bg {
542
+ position: absolute;
543
+ top: -0.75rem;
544
+ right: -0.75rem;
545
+ bottom: -0.75rem;
546
+ left: -0.75rem;
547
+ border-radius: var(--semantic-radius-button);
548
+ will-change: box-shadow, box-shadow, box-shadow;
549
+ opacity: 0;
550
+ background-color: var(--semantic-color-surface-default-focused);
551
+ }
552
+ :global(.green) .checkbox:global(.game):global(.spottable) .bg {
553
+ position: absolute;
554
+ top: -0.75rem;
555
+ right: -0.75rem;
556
+ bottom: -0.75rem;
557
+ left: -0.75rem;
558
+ border-radius: var(--semantic-radius-button);
559
+ will-change: box-shadow, box-shadow, box-shadow;
560
+ opacity: 0;
561
+ background-color: var(--semantic-color-surface-default-focused);
562
+ }
563
+ :global(.green) .checkbox:global(.game) .icon {
564
+ color: transparent;
565
+ background-color: transparent;
566
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive);
567
+ }
568
+ :global(.green) .checkbox:global(.game).selected .icon {
569
+ color: var(--semantic-color-on-surface-main-selected);
570
+ background-color: var(--semantic-color-surface-accent);
571
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
572
+ }
573
+ :global(.green) .checkbox:global(.game).indeterminate .icon {
574
+ color: var(--semantic-color-stroke-selection-inactive);
575
+ background-color: transparent;
576
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive);
577
+ }
578
+ :global(.spotlight-input-key) :global(.green) .checkbox:global(.game):global(.spottable):focus .icon,
579
+ :global(.spotlight-input-mouse) :global(.green) .checkbox:global(.game):global(.spottable):focus .icon {
580
+ color: transparent;
581
+ background-color: transparent;
582
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
583
+ }
584
+ :global(.spotlight-input-key) :global(.green) .checkbox:global(.game):global(.spottable):focus .bg,
585
+ :global(.spotlight-input-mouse) :global(.green) .checkbox:global(.game):global(.spottable):focus .bg {
586
+ opacity: 1;
587
+ background-color: var(--semantic-color-surface-default-focused);
588
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
589
+ }
590
+ :global(.spotlight-input-key) :global(.green) .checkbox:global(.game):global(.spottable):focus.selected .icon,
591
+ :global(.spotlight-input-mouse) :global(.green) .checkbox:global(.game):global(.spottable):focus.selected .icon {
592
+ color: var(--semantic-color-on-surface-main-selected);
593
+ background-color: var(--semantic-color-surface-accent);
594
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
595
+ }
596
+ :global(.spotlight-input-key) :global(.green) .checkbox:global(.game):global(.spottable):focus.indeterminate .icon,
597
+ :global(.spotlight-input-mouse) :global(.green) .checkbox:global(.game):global(.spottable):focus.indeterminate .icon {
598
+ color: var(--semantic-color-stroke-selection-inactive-focused);
599
+ background-color: transparent;
600
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
601
+ }
602
+ :global(.spotlight-input-touch) :global(.green) .checkbox:global(.game):global(.spottable):active .icon {
603
+ color: transparent;
604
+ background-color: transparent;
605
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
606
+ }
607
+ :global(.spotlight-input-touch) :global(.green) .checkbox:global(.game):global(.spottable):active .bg {
608
+ opacity: 1;
609
+ background-color: var(--semantic-color-surface-default-focused);
610
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
611
+ }
612
+ :global(.spotlight-input-touch) :global(.green) .checkbox:global(.game):global(.spottable):active.selected .icon {
613
+ color: var(--semantic-color-on-surface-main-selected);
614
+ background-color: var(--semantic-color-surface-accent);
615
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
616
+ }
617
+ :global(.spotlight-input-touch) :global(.green) .checkbox:global(.game):global(.spottable):active.indeterminate .icon {
618
+ color: var(--semantic-color-stroke-selection-inactive-focused);
619
+ background-color: transparent;
620
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
621
+ }
622
+ :global(.spotlight-input-key) :global(.noAnimation) :global(.green) .checkbox:global(.game):global(.spottable):focus .bg,
623
+ :global(.spotlight-input-mouse) :global(.noAnimation) :global(.green) .checkbox:global(.game):global(.spottable):focus .bg {
624
+ box-shadow: none;
625
+ }
626
+ :global(.spotlight-input-touch) :global(.noAnimation) :global(.green) .checkbox:global(.game):global(.spottable):active .bg {
627
+ box-shadow: none;
628
+ }
629
+ :global(.green) .checkbox:global(.game)[disabled] {
630
+ opacity: 1;
631
+ }
632
+ :global(.green) .checkbox:global(.game)[disabled] .icon {
633
+ opacity: 0.3;
634
+ }
635
+ :global(.spotlight-input-key) :global(.green) .checkbox:global(.game)[disabled]:global(.spottable):focus .bg,
636
+ :global(.spotlight-input-mouse) :global(.green) .checkbox:global(.game)[disabled]:global(.spottable):focus .bg {
637
+ background-color: var(--semantic-color-surface-default-disabled-focused);
638
+ }
639
+ :global(.spotlight-input-key) :global(.green) .checkbox:global(.game)[disabled]:global(.spottable):focus.selected .icon,
640
+ :global(.spotlight-input-mouse) :global(.green) .checkbox:global(.game)[disabled]:global(.spottable):focus.selected .icon {
641
+ color: var(--semantic-color-on-surface-main-selected);
642
+ background-color: var(--semantic-color-surface-accent);
643
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
644
+ }
645
+ :global(.spotlight-input-key) :global(.green) .checkbox:global(.game)[disabled]:global(.spottable):focus.indeterminate .icon,
646
+ :global(.spotlight-input-mouse) :global(.green) .checkbox:global(.game)[disabled]:global(.spottable):focus.indeterminate .icon {
647
+ color: var(--semantic-color-stroke-selection-inactive-focused);
648
+ background-color: transparent;
649
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
650
+ }
651
+ :global(.spotlight-input-key) :global(.green) .checkbox:global(.game)[disabled]:global(.spottable):focus .icon,
652
+ :global(.spotlight-input-mouse) :global(.green) .checkbox:global(.game)[disabled]:global(.spottable):focus .icon {
653
+ opacity: 0.4;
654
+ }
655
+ :global(.spotlight-input-touch) :global(.green) .checkbox:global(.game)[disabled]:global(.spottable):active .bg {
656
+ background-color: var(--semantic-color-surface-default-disabled-focused);
657
+ }
658
+ :global(.spotlight-input-touch) :global(.green) .checkbox:global(.game)[disabled]:global(.spottable):active.selected .icon {
659
+ color: var(--semantic-color-on-surface-main-selected);
660
+ background-color: var(--semantic-color-surface-accent);
661
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
662
+ }
663
+ :global(.spotlight-input-touch) :global(.green) .checkbox:global(.game)[disabled]:global(.spottable):active.indeterminate .icon {
664
+ color: var(--semantic-color-stroke-selection-inactive-focused);
665
+ background-color: transparent;
666
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
667
+ }
668
+ :global(.spotlight-input-touch) :global(.green) .checkbox:global(.game)[disabled]:global(.spottable):active .icon {
669
+ opacity: 0.4;
670
+ }
671
+ :global(.orange) .checkbox:global(.game) {
672
+ --semantic-color-surface-default: #422923;
673
+ --semantic-color-surface-default-focused: #b85f23;
674
+ }
675
+ :global(.orange) .checkbox:global(.game).standalone .bg {
676
+ position: absolute;
677
+ top: -0.75rem;
678
+ right: -0.75rem;
679
+ bottom: -0.75rem;
680
+ left: -0.75rem;
681
+ border-radius: var(--semantic-radius-button);
682
+ will-change: box-shadow, box-shadow, box-shadow;
683
+ opacity: 0;
684
+ background-color: var(--semantic-color-surface-default-focused);
685
+ }
686
+ :global(.orange) .checkbox:global(.game):global(.spottable) .bg {
687
+ position: absolute;
688
+ top: -0.75rem;
689
+ right: -0.75rem;
690
+ bottom: -0.75rem;
691
+ left: -0.75rem;
692
+ border-radius: var(--semantic-radius-button);
693
+ will-change: box-shadow, box-shadow, box-shadow;
694
+ opacity: 0;
695
+ background-color: var(--semantic-color-surface-default-focused);
696
+ }
697
+ :global(.orange) .checkbox:global(.game) .icon {
698
+ color: transparent;
699
+ background-color: transparent;
700
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive);
701
+ }
702
+ :global(.orange) .checkbox:global(.game).selected .icon {
703
+ color: var(--semantic-color-on-surface-main-selected);
704
+ background-color: var(--semantic-color-surface-accent);
705
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
706
+ }
707
+ :global(.orange) .checkbox:global(.game).indeterminate .icon {
708
+ color: var(--semantic-color-stroke-selection-inactive);
709
+ background-color: transparent;
710
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive);
711
+ }
712
+ :global(.spotlight-input-key) :global(.orange) .checkbox:global(.game):global(.spottable):focus .icon,
713
+ :global(.spotlight-input-mouse) :global(.orange) .checkbox:global(.game):global(.spottable):focus .icon {
714
+ color: transparent;
715
+ background-color: transparent;
716
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
717
+ }
718
+ :global(.spotlight-input-key) :global(.orange) .checkbox:global(.game):global(.spottable):focus .bg,
719
+ :global(.spotlight-input-mouse) :global(.orange) .checkbox:global(.game):global(.spottable):focus .bg {
720
+ opacity: 1;
721
+ background-color: var(--semantic-color-surface-default-focused);
722
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
723
+ }
724
+ :global(.spotlight-input-key) :global(.orange) .checkbox:global(.game):global(.spottable):focus.selected .icon,
725
+ :global(.spotlight-input-mouse) :global(.orange) .checkbox:global(.game):global(.spottable):focus.selected .icon {
726
+ color: var(--semantic-color-on-surface-main-selected);
727
+ background-color: var(--semantic-color-surface-accent);
728
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
729
+ }
730
+ :global(.spotlight-input-key) :global(.orange) .checkbox:global(.game):global(.spottable):focus.indeterminate .icon,
731
+ :global(.spotlight-input-mouse) :global(.orange) .checkbox:global(.game):global(.spottable):focus.indeterminate .icon {
732
+ color: var(--semantic-color-stroke-selection-inactive-focused);
733
+ background-color: transparent;
734
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
735
+ }
736
+ :global(.spotlight-input-touch) :global(.orange) .checkbox:global(.game):global(.spottable):active .icon {
737
+ color: transparent;
738
+ background-color: transparent;
739
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
740
+ }
741
+ :global(.spotlight-input-touch) :global(.orange) .checkbox:global(.game):global(.spottable):active .bg {
742
+ opacity: 1;
743
+ background-color: var(--semantic-color-surface-default-focused);
744
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
745
+ }
746
+ :global(.spotlight-input-touch) :global(.orange) .checkbox:global(.game):global(.spottable):active.selected .icon {
747
+ color: var(--semantic-color-on-surface-main-selected);
748
+ background-color: var(--semantic-color-surface-accent);
749
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
750
+ }
751
+ :global(.spotlight-input-touch) :global(.orange) .checkbox:global(.game):global(.spottable):active.indeterminate .icon {
752
+ color: var(--semantic-color-stroke-selection-inactive-focused);
753
+ background-color: transparent;
754
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
755
+ }
756
+ :global(.spotlight-input-key) :global(.noAnimation) :global(.orange) .checkbox:global(.game):global(.spottable):focus .bg,
757
+ :global(.spotlight-input-mouse) :global(.noAnimation) :global(.orange) .checkbox:global(.game):global(.spottable):focus .bg {
758
+ box-shadow: none;
759
+ }
760
+ :global(.spotlight-input-touch) :global(.noAnimation) :global(.orange) .checkbox:global(.game):global(.spottable):active .bg {
761
+ box-shadow: none;
762
+ }
763
+ :global(.orange) .checkbox:global(.game)[disabled] {
764
+ opacity: 1;
765
+ }
766
+ :global(.orange) .checkbox:global(.game)[disabled] .icon {
767
+ opacity: 0.3;
768
+ }
769
+ :global(.spotlight-input-key) :global(.orange) .checkbox:global(.game)[disabled]:global(.spottable):focus .bg,
770
+ :global(.spotlight-input-mouse) :global(.orange) .checkbox:global(.game)[disabled]:global(.spottable):focus .bg {
771
+ background-color: var(--semantic-color-surface-default-disabled-focused);
772
+ }
773
+ :global(.spotlight-input-key) :global(.orange) .checkbox:global(.game)[disabled]:global(.spottable):focus.selected .icon,
774
+ :global(.spotlight-input-mouse) :global(.orange) .checkbox:global(.game)[disabled]:global(.spottable):focus.selected .icon {
775
+ color: var(--semantic-color-on-surface-main-selected);
776
+ background-color: var(--semantic-color-surface-accent);
777
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
778
+ }
779
+ :global(.spotlight-input-key) :global(.orange) .checkbox:global(.game)[disabled]:global(.spottable):focus.indeterminate .icon,
780
+ :global(.spotlight-input-mouse) :global(.orange) .checkbox:global(.game)[disabled]:global(.spottable):focus.indeterminate .icon {
781
+ color: var(--semantic-color-stroke-selection-inactive-focused);
782
+ background-color: transparent;
783
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
784
+ }
785
+ :global(.spotlight-input-key) :global(.orange) .checkbox:global(.game)[disabled]:global(.spottable):focus .icon,
786
+ :global(.spotlight-input-mouse) :global(.orange) .checkbox:global(.game)[disabled]:global(.spottable):focus .icon {
787
+ opacity: 0.4;
788
+ }
789
+ :global(.spotlight-input-touch) :global(.orange) .checkbox:global(.game)[disabled]:global(.spottable):active .bg {
790
+ background-color: var(--semantic-color-surface-default-disabled-focused);
791
+ }
792
+ :global(.spotlight-input-touch) :global(.orange) .checkbox:global(.game)[disabled]:global(.spottable):active.selected .icon {
793
+ color: var(--semantic-color-on-surface-main-selected);
794
+ background-color: var(--semantic-color-surface-accent);
795
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
796
+ }
797
+ :global(.spotlight-input-touch) :global(.orange) .checkbox:global(.game)[disabled]:global(.spottable):active.indeterminate .icon {
798
+ color: var(--semantic-color-stroke-selection-inactive-focused);
799
+ background-color: transparent;
800
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
801
+ }
802
+ :global(.spotlight-input-touch) :global(.orange) .checkbox:global(.game)[disabled]:global(.spottable):active .icon {
803
+ opacity: 0.4;
804
+ }
805
+ :global(.spotlight-input-key) :global(.neutral):global(.spottable):focus .checkbox .icon,
806
+ :global(.spotlight-input-mouse) :global(.neutral):global(.spottable):focus .checkbox .icon {
807
+ color: transparent;
808
+ background-color: transparent;
809
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
810
+ }
811
+ :global(.spotlight-input-key) :global(.neutral):global(.spottable):focus .checkbox .bg,
812
+ :global(.spotlight-input-mouse) :global(.neutral):global(.spottable):focus .checkbox .bg {
813
+ opacity: 1;
814
+ background-color: var(--semantic-color-surface-default-focused);
815
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
816
+ }
817
+ :global(.spotlight-input-key) :global(.neutral):global(.spottable):focus .checkbox.selected .icon,
818
+ :global(.spotlight-input-mouse) :global(.neutral):global(.spottable):focus .checkbox.selected .icon {
819
+ color: var(--semantic-color-on-surface-main-selected);
820
+ background-color: var(--semantic-color-surface-accent);
821
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
822
+ }
823
+ :global(.spotlight-input-key) :global(.neutral):global(.spottable):focus .checkbox.indeterminate .icon,
824
+ :global(.spotlight-input-mouse) :global(.neutral):global(.spottable):focus .checkbox.indeterminate .icon {
825
+ color: var(--semantic-color-stroke-selection-inactive-focused);
826
+ background-color: transparent;
827
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
828
+ }
829
+ :global(.spotlight-input-touch) :global(.neutral):global(.spottable):active .checkbox .icon {
830
+ color: transparent;
831
+ background-color: transparent;
832
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
833
+ }
834
+ :global(.spotlight-input-touch) :global(.neutral):global(.spottable):active .checkbox .bg {
835
+ opacity: 1;
836
+ background-color: var(--semantic-color-surface-default-focused);
837
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
838
+ }
839
+ :global(.spotlight-input-touch) :global(.neutral):global(.spottable):active .checkbox.selected .icon {
840
+ color: var(--semantic-color-on-surface-main-selected);
841
+ background-color: var(--semantic-color-surface-accent);
842
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
843
+ }
844
+ :global(.spotlight-input-touch) :global(.neutral):global(.spottable):active .checkbox.indeterminate .icon {
845
+ color: var(--semantic-color-stroke-selection-inactive-focused);
846
+ background-color: transparent;
847
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
848
+ }
849
+ :global(.spotlight-input-key) :global(.noAnimation) :global(.neutral):global(.spottable):focus .checkbox .bg,
850
+ :global(.spotlight-input-mouse) :global(.noAnimation) :global(.neutral):global(.spottable):focus .checkbox .bg {
851
+ box-shadow: none;
852
+ }
853
+ :global(.spotlight-input-touch) :global(.noAnimation) :global(.neutral):global(.spottable):active .checkbox .bg {
854
+ box-shadow: none;
855
+ }
856
+ :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):focus .checkbox .icon,
857
+ :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):focus .checkbox .icon {
858
+ color: transparent;
859
+ background-color: transparent;
860
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
861
+ }
862
+ :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):focus .checkbox .bg,
863
+ :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):focus .checkbox .bg {
864
+ opacity: 1;
865
+ background-color: var(--semantic-color-surface-default-focused);
866
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
867
+ }
868
+ :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):focus .checkbox.selected .icon,
869
+ :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):focus .checkbox.selected .icon {
870
+ color: var(--semantic-color-on-surface-main-selected);
871
+ background-color: var(--semantic-color-surface-accent);
872
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
873
+ }
874
+ :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):focus .checkbox.indeterminate .icon,
875
+ :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):focus .checkbox.indeterminate .icon {
876
+ color: var(--semantic-color-stroke-selection-inactive-focused);
877
+ background-color: transparent;
878
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
879
+ }
880
+ :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):active .checkbox .icon {
881
+ color: transparent;
882
+ background-color: transparent;
883
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
884
+ }
885
+ :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):active .checkbox .bg {
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-touch) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):active .checkbox.selected .icon {
891
+ color: var(--semantic-color-on-surface-main-selected);
892
+ background-color: var(--semantic-color-surface-accent);
893
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
894
+ }
895
+ :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):active .checkbox.indeterminate .icon {
896
+ color: var(--semantic-color-stroke-selection-inactive-focused);
897
+ background-color: transparent;
898
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
899
+ }
900
+ :global(.spotlight-input-key) :global(.noAnimation) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):focus .checkbox .bg,
901
+ :global(.spotlight-input-mouse) :global(.noAnimation) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):focus .checkbox .bg {
902
+ box-shadow: none;
903
+ }
904
+ :global(.spotlight-input-touch) :global(.noAnimation) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):active .checkbox .bg {
905
+ box-shadow: none;
906
+ }
907
+ :global(.spotlight-input-key) :global(.light):global(.spottable):focus .checkbox .icon,
908
+ :global(.spotlight-input-mouse) :global(.light):global(.spottable):focus .checkbox .icon {
909
+ color: transparent;
910
+ background-color: transparent;
911
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
912
+ }
913
+ :global(.spotlight-input-key) :global(.light):global(.spottable):focus .checkbox .bg,
914
+ :global(.spotlight-input-mouse) :global(.light):global(.spottable):focus .checkbox .bg {
915
+ opacity: 1;
916
+ background-color: var(--semantic-color-surface-default-focused);
917
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
918
+ }
919
+ :global(.spotlight-input-key) :global(.light):global(.spottable):focus .checkbox.selected .icon,
920
+ :global(.spotlight-input-mouse) :global(.light):global(.spottable):focus .checkbox.selected .icon {
921
+ color: var(--semantic-color-on-surface-main-selected);
922
+ background-color: var(--semantic-color-surface-accent);
923
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
924
+ }
925
+ :global(.spotlight-input-key) :global(.light):global(.spottable):focus .checkbox.indeterminate .icon,
926
+ :global(.spotlight-input-mouse) :global(.light):global(.spottable):focus .checkbox.indeterminate .icon {
927
+ color: var(--semantic-color-stroke-selection-inactive-focused);
928
+ background-color: transparent;
929
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
930
+ }
931
+ :global(.spotlight-input-touch) :global(.light):global(.spottable):active .checkbox .icon {
932
+ color: transparent;
933
+ background-color: transparent;
934
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
935
+ }
936
+ :global(.spotlight-input-touch) :global(.light):global(.spottable):active .checkbox .bg {
937
+ opacity: 1;
938
+ background-color: var(--semantic-color-surface-default-focused);
939
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
940
+ }
941
+ :global(.spotlight-input-touch) :global(.light):global(.spottable):active .checkbox.selected .icon {
942
+ color: var(--semantic-color-on-surface-main-selected);
943
+ background-color: var(--semantic-color-surface-accent);
944
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
945
+ }
946
+ :global(.spotlight-input-touch) :global(.light):global(.spottable):active .checkbox.indeterminate .icon {
947
+ color: var(--semantic-color-stroke-selection-inactive-focused);
948
+ background-color: transparent;
949
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
950
+ }
951
+ :global(.spotlight-input-key) :global(.noAnimation) :global(.light):global(.spottable):focus .checkbox .bg,
952
+ :global(.spotlight-input-mouse) :global(.noAnimation) :global(.light):global(.spottable):focus .checkbox .bg {
953
+ box-shadow: none;
954
+ }
955
+ :global(.spotlight-input-touch) :global(.noAnimation) :global(.light):global(.spottable):active .checkbox .bg {
956
+ box-shadow: none;
957
+ }
958
+ :global(.game) {
959
+ --semantic-color-surface-default: #2d224c;
960
+ --semantic-color-surface-default-focused: #6d2fa1;
961
+ --semantic-color-on-surface-main-focused: #e6e6e6;
962
+ }
963
+ :global(.spotlight-input-key) :global(.game):global(.spottable):focus .checkbox .icon,
964
+ :global(.spotlight-input-mouse) :global(.game):global(.spottable):focus .checkbox .icon {
965
+ color: transparent;
966
+ background-color: transparent;
967
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
968
+ }
969
+ :global(.spotlight-input-key) :global(.game):global(.spottable):focus .checkbox .bg,
970
+ :global(.spotlight-input-mouse) :global(.game):global(.spottable):focus .checkbox .bg {
971
+ opacity: 1;
972
+ background-color: var(--semantic-color-surface-default-focused);
973
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
974
+ }
975
+ :global(.spotlight-input-key) :global(.game):global(.spottable):focus .checkbox.selected .icon,
976
+ :global(.spotlight-input-mouse) :global(.game):global(.spottable):focus .checkbox.selected .icon {
977
+ color: var(--semantic-color-on-surface-main-selected);
978
+ background-color: var(--semantic-color-surface-accent);
979
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
980
+ }
981
+ :global(.spotlight-input-key) :global(.game):global(.spottable):focus .checkbox.indeterminate .icon,
982
+ :global(.spotlight-input-mouse) :global(.game):global(.spottable):focus .checkbox.indeterminate .icon {
983
+ color: var(--semantic-color-stroke-selection-inactive-focused);
984
+ background-color: transparent;
985
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
986
+ }
987
+ :global(.spotlight-input-touch) :global(.game):global(.spottable):active .checkbox .icon {
988
+ color: transparent;
989
+ background-color: transparent;
990
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
991
+ }
992
+ :global(.spotlight-input-touch) :global(.game):global(.spottable):active .checkbox .bg {
993
+ opacity: 1;
994
+ background-color: var(--semantic-color-surface-default-focused);
995
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
996
+ }
997
+ :global(.spotlight-input-touch) :global(.game):global(.spottable):active .checkbox.selected .icon {
998
+ color: var(--semantic-color-on-surface-main-selected);
999
+ background-color: var(--semantic-color-surface-accent);
1000
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1001
+ }
1002
+ :global(.spotlight-input-touch) :global(.game):global(.spottable):active .checkbox.indeterminate .icon {
1003
+ color: var(--semantic-color-stroke-selection-inactive-focused);
1004
+ background-color: transparent;
1005
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
1006
+ }
1007
+ :global(.spotlight-input-key) :global(.noAnimation) :global(.game):global(.spottable):focus .checkbox .bg,
1008
+ :global(.spotlight-input-mouse) :global(.noAnimation) :global(.game):global(.spottable):focus .checkbox .bg {
1009
+ box-shadow: none;
1010
+ }
1011
+ :global(.spotlight-input-touch) :global(.noAnimation) :global(.game):global(.spottable):active .checkbox .bg {
1012
+ box-shadow: none;
1013
+ }
1014
+ :global(.green) :global(.game) {
1015
+ --semantic-color-surface-default: #1F2C24;
1016
+ --semantic-color-surface-default-focused: #3ea07d;
1017
+ }
1018
+ :global(.spotlight-input-key) :global(.green) :global(.game):global(.spottable):focus .checkbox .icon,
1019
+ :global(.spotlight-input-mouse) :global(.green) :global(.game):global(.spottable):focus .checkbox .icon {
1020
+ color: transparent;
1021
+ background-color: transparent;
1022
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
1023
+ }
1024
+ :global(.spotlight-input-key) :global(.green) :global(.game):global(.spottable):focus .checkbox .bg,
1025
+ :global(.spotlight-input-mouse) :global(.green) :global(.game):global(.spottable):focus .checkbox .bg {
1026
+ opacity: 1;
1027
+ background-color: var(--semantic-color-surface-default-focused);
1028
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
1029
+ }
1030
+ :global(.spotlight-input-key) :global(.green) :global(.game):global(.spottable):focus .checkbox.selected .icon,
1031
+ :global(.spotlight-input-mouse) :global(.green) :global(.game):global(.spottable):focus .checkbox.selected .icon {
1032
+ color: var(--semantic-color-on-surface-main-selected);
1033
+ background-color: var(--semantic-color-surface-accent);
1034
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1035
+ }
1036
+ :global(.spotlight-input-key) :global(.green) :global(.game):global(.spottable):focus .checkbox.indeterminate .icon,
1037
+ :global(.spotlight-input-mouse) :global(.green) :global(.game):global(.spottable):focus .checkbox.indeterminate .icon {
1038
+ color: var(--semantic-color-stroke-selection-inactive-focused);
1039
+ background-color: transparent;
1040
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
1041
+ }
1042
+ :global(.spotlight-input-touch) :global(.green) :global(.game):global(.spottable):active .checkbox .icon {
1043
+ color: transparent;
1044
+ background-color: transparent;
1045
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
1046
+ }
1047
+ :global(.spotlight-input-touch) :global(.green) :global(.game):global(.spottable):active .checkbox .bg {
1048
+ opacity: 1;
1049
+ background-color: var(--semantic-color-surface-default-focused);
1050
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
1051
+ }
1052
+ :global(.spotlight-input-touch) :global(.green) :global(.game):global(.spottable):active .checkbox.selected .icon {
1053
+ color: var(--semantic-color-on-surface-main-selected);
1054
+ background-color: var(--semantic-color-surface-accent);
1055
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1056
+ }
1057
+ :global(.spotlight-input-touch) :global(.green) :global(.game):global(.spottable):active .checkbox.indeterminate .icon {
1058
+ color: var(--semantic-color-stroke-selection-inactive-focused);
1059
+ background-color: transparent;
1060
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
1061
+ }
1062
+ :global(.spotlight-input-key) :global(.noAnimation) :global(.green) :global(.game):global(.spottable):focus .checkbox .bg,
1063
+ :global(.spotlight-input-mouse) :global(.noAnimation) :global(.green) :global(.game):global(.spottable):focus .checkbox .bg {
1064
+ box-shadow: none;
1065
+ }
1066
+ :global(.spotlight-input-touch) :global(.noAnimation) :global(.green) :global(.game):global(.spottable):active .checkbox .bg {
1067
+ box-shadow: none;
1068
+ }
1069
+ :global(.orange) :global(.game) {
1070
+ --semantic-color-surface-default: #422923;
1071
+ --semantic-color-surface-default-focused: #b85f23;
1072
+ }
1073
+ :global(.spotlight-input-key) :global(.orange) :global(.game):global(.spottable):focus .checkbox .icon,
1074
+ :global(.spotlight-input-mouse) :global(.orange) :global(.game):global(.spottable):focus .checkbox .icon {
1075
+ color: transparent;
1076
+ background-color: transparent;
1077
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
1078
+ }
1079
+ :global(.spotlight-input-key) :global(.orange) :global(.game):global(.spottable):focus .checkbox .bg,
1080
+ :global(.spotlight-input-mouse) :global(.orange) :global(.game):global(.spottable):focus .checkbox .bg {
1081
+ opacity: 1;
1082
+ background-color: var(--semantic-color-surface-default-focused);
1083
+ box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
1084
+ }
1085
+ :global(.spotlight-input-key) :global(.orange) :global(.game):global(.spottable):focus .checkbox.selected .icon,
1086
+ :global(.spotlight-input-mouse) :global(.orange) :global(.game):global(.spottable):focus .checkbox.selected .icon {
1087
+ color: var(--semantic-color-on-surface-main-selected);
1088
+ background-color: var(--semantic-color-surface-accent);
1089
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1090
+ }
1091
+ :global(.spotlight-input-key) :global(.orange) :global(.game):global(.spottable):focus .checkbox.indeterminate .icon,
1092
+ :global(.spotlight-input-mouse) :global(.orange) :global(.game):global(.spottable):focus .checkbox.indeterminate .icon {
1093
+ color: var(--semantic-color-stroke-selection-inactive-focused);
1094
+ background-color: transparent;
1095
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
1096
+ }
1097
+ :global(.spotlight-input-touch) :global(.orange) :global(.game):global(.spottable):active .checkbox .icon {
1098
+ color: transparent;
1099
+ background-color: transparent;
1100
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
1101
+ }
1102
+ :global(.spotlight-input-touch) :global(.orange) :global(.game):global(.spottable):active .checkbox .bg {
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-touch) :global(.orange) :global(.game):global(.spottable):active .checkbox.selected .icon {
1108
+ color: var(--semantic-color-on-surface-main-selected);
1109
+ background-color: var(--semantic-color-surface-accent);
1110
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1111
+ }
1112
+ :global(.spotlight-input-touch) :global(.orange) :global(.game):global(.spottable):active .checkbox.indeterminate .icon {
1113
+ color: var(--semantic-color-stroke-selection-inactive-focused);
1114
+ background-color: transparent;
1115
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
1116
+ }
1117
+ :global(.spotlight-input-key) :global(.noAnimation) :global(.orange) :global(.game):global(.spottable):focus .checkbox .bg,
1118
+ :global(.spotlight-input-mouse) :global(.noAnimation) :global(.orange) :global(.game):global(.spottable):focus .checkbox .bg {
1119
+ box-shadow: none;
1120
+ }
1121
+ :global(.spotlight-input-touch) :global(.noAnimation) :global(.orange) :global(.game):global(.spottable):active .checkbox .bg {
1122
+ box-shadow: none;
1123
+ }
1124
+ :global(.neutral)[disabled].checkbox.selected .icon {
1125
+ color: var(--semantic-color-on-surface-main-selected);
1126
+ background-color: var(--semantic-color-surface-accent);
1127
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1128
+ }
1129
+ :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast)[disabled].checkbox.selected .icon {
1130
+ color: var(--semantic-color-on-surface-main-selected);
1131
+ background-color: var(--semantic-color-surface-accent);
1132
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1133
+ }
1134
+ :global(.light)[disabled].checkbox.selected .icon {
1135
+ color: var(--semantic-color-on-surface-main-selected);
1136
+ background-color: var(--semantic-color-surface-accent);
1137
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1138
+ }
1139
+ :global(.game) {
1140
+ --semantic-color-surface-default: #2d224c;
1141
+ --semantic-color-surface-default-focused: #6d2fa1;
1142
+ --semantic-color-on-surface-main-focused: #e6e6e6;
1143
+ }
1144
+ :global(.game)[disabled].checkbox.selected .icon {
1145
+ color: var(--semantic-color-on-surface-main-selected);
1146
+ background-color: var(--semantic-color-surface-accent);
1147
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1148
+ }
1149
+ :global(.green) :global(.game) {
1150
+ --semantic-color-surface-default: #1F2C24;
1151
+ --semantic-color-surface-default-focused: #3ea07d;
1152
+ }
1153
+ :global(.green) :global(.game)[disabled].checkbox.selected .icon {
1154
+ color: var(--semantic-color-on-surface-main-selected);
1155
+ background-color: var(--semantic-color-surface-accent);
1156
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1157
+ }
1158
+ :global(.orange) :global(.game) {
1159
+ --semantic-color-surface-default: #422923;
1160
+ --semantic-color-surface-default-focused: #b85f23;
1161
+ }
1162
+ :global(.orange) :global(.game)[disabled].checkbox.selected .icon {
1163
+ color: var(--semantic-color-on-surface-main-selected);
1164
+ background-color: var(--semantic-color-surface-accent);
1165
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1166
+ }
1167
+ :global(.spotlight-input-key) :global(.neutral):global(.spottable):focus[disabled] .checkbox .bg,
1168
+ :global(.spotlight-input-mouse) :global(.neutral):global(.spottable):focus[disabled] .checkbox .bg {
1169
+ background-color: var(--semantic-color-surface-default-disabled-focused);
1170
+ }
1171
+ :global(.spotlight-input-key) :global(.neutral):global(.spottable):focus[disabled] .checkbox.selected .icon,
1172
+ :global(.spotlight-input-mouse) :global(.neutral):global(.spottable):focus[disabled] .checkbox.selected .icon {
1173
+ color: var(--semantic-color-on-surface-main-selected);
1174
+ background-color: var(--semantic-color-surface-accent);
1175
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1176
+ }
1177
+ :global(.spotlight-input-key) :global(.neutral):global(.spottable):focus[disabled] .checkbox.indeterminate .icon,
1178
+ :global(.spotlight-input-mouse) :global(.neutral):global(.spottable):focus[disabled] .checkbox.indeterminate .icon {
1179
+ color: var(--semantic-color-stroke-selection-inactive-focused);
1180
+ background-color: transparent;
1181
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
1182
+ }
1183
+ :global(.spotlight-input-key) :global(.neutral):global(.spottable):focus[disabled] .checkbox.standalone .icon,
1184
+ :global(.spotlight-input-mouse) :global(.neutral):global(.spottable):focus[disabled] .checkbox.standalone .icon {
1185
+ opacity: 0.4;
1186
+ }
1187
+ :global(.spotlight-input-touch) :global(.neutral):global(.spottable):active[disabled] .checkbox .bg {
1188
+ background-color: var(--semantic-color-surface-default-disabled-focused);
1189
+ }
1190
+ :global(.spotlight-input-touch) :global(.neutral):global(.spottable):active[disabled] .checkbox.selected .icon {
1191
+ color: var(--semantic-color-on-surface-main-selected);
1192
+ background-color: var(--semantic-color-surface-accent);
1193
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1194
+ }
1195
+ :global(.spotlight-input-touch) :global(.neutral):global(.spottable):active[disabled] .checkbox.indeterminate .icon {
1196
+ color: var(--semantic-color-stroke-selection-inactive-focused);
1197
+ background-color: transparent;
1198
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
1199
+ }
1200
+ :global(.spotlight-input-touch) :global(.neutral):global(.spottable):active[disabled] .checkbox.standalone .icon {
1201
+ opacity: 0.4;
1202
+ }
1203
+ :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):focus[disabled] .checkbox .bg,
1204
+ :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):focus[disabled] .checkbox .bg {
1205
+ background-color: var(--semantic-color-surface-default-disabled-focused);
1206
+ }
1207
+ :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):focus[disabled] .checkbox.selected .icon,
1208
+ :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):focus[disabled] .checkbox.selected .icon {
1209
+ color: var(--semantic-color-on-surface-main-selected);
1210
+ background-color: var(--semantic-color-surface-accent);
1211
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1212
+ }
1213
+ :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):focus[disabled] .checkbox.indeterminate .icon,
1214
+ :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):focus[disabled] .checkbox.indeterminate .icon {
1215
+ color: var(--semantic-color-stroke-selection-inactive-focused);
1216
+ background-color: transparent;
1217
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
1218
+ }
1219
+ :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):focus[disabled] .checkbox.standalone .icon,
1220
+ :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):focus[disabled] .checkbox.standalone .icon {
1221
+ opacity: 0.4;
1222
+ }
1223
+ :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):active[disabled] .checkbox .bg {
1224
+ background-color: var(--semantic-color-surface-default-disabled-focused);
1225
+ }
1226
+ :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):active[disabled] .checkbox.selected .icon {
1227
+ color: var(--semantic-color-on-surface-main-selected);
1228
+ background-color: var(--semantic-color-surface-accent);
1229
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1230
+ }
1231
+ :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):active[disabled] .checkbox.indeterminate .icon {
1232
+ color: var(--semantic-color-stroke-selection-inactive-focused);
1233
+ background-color: transparent;
1234
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
1235
+ }
1236
+ :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):active[disabled] .checkbox.standalone .icon {
1237
+ opacity: 0.4;
1238
+ }
1239
+ :global(.spotlight-input-key) :global(.light):global(.spottable):focus[disabled] .checkbox .bg,
1240
+ :global(.spotlight-input-mouse) :global(.light):global(.spottable):focus[disabled] .checkbox .bg {
1241
+ background-color: var(--semantic-color-surface-default-disabled-focused);
1242
+ }
1243
+ :global(.spotlight-input-key) :global(.light):global(.spottable):focus[disabled] .checkbox.selected .icon,
1244
+ :global(.spotlight-input-mouse) :global(.light):global(.spottable):focus[disabled] .checkbox.selected .icon {
1245
+ color: var(--semantic-color-on-surface-main-selected);
1246
+ background-color: var(--semantic-color-surface-accent);
1247
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1248
+ }
1249
+ :global(.spotlight-input-key) :global(.light):global(.spottable):focus[disabled] .checkbox.indeterminate .icon,
1250
+ :global(.spotlight-input-mouse) :global(.light):global(.spottable):focus[disabled] .checkbox.indeterminate .icon {
1251
+ color: var(--semantic-color-stroke-selection-inactive-focused);
1252
+ background-color: transparent;
1253
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
1254
+ }
1255
+ :global(.spotlight-input-key) :global(.light):global(.spottable):focus[disabled] .checkbox.standalone .icon,
1256
+ :global(.spotlight-input-mouse) :global(.light):global(.spottable):focus[disabled] .checkbox.standalone .icon {
1257
+ opacity: 0.4;
1258
+ }
1259
+ :global(.spotlight-input-touch) :global(.light):global(.spottable):active[disabled] .checkbox .bg {
1260
+ background-color: var(--semantic-color-surface-default-disabled-focused);
1261
+ }
1262
+ :global(.spotlight-input-touch) :global(.light):global(.spottable):active[disabled] .checkbox.selected .icon {
1263
+ color: var(--semantic-color-on-surface-main-selected);
1264
+ background-color: var(--semantic-color-surface-accent);
1265
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1266
+ }
1267
+ :global(.spotlight-input-touch) :global(.light):global(.spottable):active[disabled] .checkbox.indeterminate .icon {
1268
+ color: var(--semantic-color-stroke-selection-inactive-focused);
1269
+ background-color: transparent;
1270
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
1271
+ }
1272
+ :global(.spotlight-input-touch) :global(.light):global(.spottable):active[disabled] .checkbox.standalone .icon {
1273
+ opacity: 0.4;
1274
+ }
1275
+ :global(.game) {
1276
+ --semantic-color-surface-default: #2d224c;
1277
+ --semantic-color-surface-default-focused: #6d2fa1;
1278
+ --semantic-color-on-surface-main-focused: #e6e6e6;
1279
+ }
1280
+ :global(.spotlight-input-key) :global(.game):global(.spottable):focus[disabled] .checkbox .bg,
1281
+ :global(.spotlight-input-mouse) :global(.game):global(.spottable):focus[disabled] .checkbox .bg {
1282
+ background-color: var(--semantic-color-surface-default-disabled-focused);
1283
+ }
1284
+ :global(.spotlight-input-key) :global(.game):global(.spottable):focus[disabled] .checkbox.selected .icon,
1285
+ :global(.spotlight-input-mouse) :global(.game):global(.spottable):focus[disabled] .checkbox.selected .icon {
1286
+ color: var(--semantic-color-on-surface-main-selected);
1287
+ background-color: var(--semantic-color-surface-accent);
1288
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1289
+ }
1290
+ :global(.spotlight-input-key) :global(.game):global(.spottable):focus[disabled] .checkbox.indeterminate .icon,
1291
+ :global(.spotlight-input-mouse) :global(.game):global(.spottable):focus[disabled] .checkbox.indeterminate .icon {
1292
+ color: var(--semantic-color-stroke-selection-inactive-focused);
1293
+ background-color: transparent;
1294
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
1295
+ }
1296
+ :global(.spotlight-input-key) :global(.game):global(.spottable):focus[disabled] .checkbox.standalone .icon,
1297
+ :global(.spotlight-input-mouse) :global(.game):global(.spottable):focus[disabled] .checkbox.standalone .icon {
1298
+ opacity: 0.4;
1299
+ }
1300
+ :global(.spotlight-input-touch) :global(.game):global(.spottable):active[disabled] .checkbox .bg {
1301
+ background-color: var(--semantic-color-surface-default-disabled-focused);
1302
+ }
1303
+ :global(.spotlight-input-touch) :global(.game):global(.spottable):active[disabled] .checkbox.selected .icon {
1304
+ color: var(--semantic-color-on-surface-main-selected);
1305
+ background-color: var(--semantic-color-surface-accent);
1306
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1307
+ }
1308
+ :global(.spotlight-input-touch) :global(.game):global(.spottable):active[disabled] .checkbox.indeterminate .icon {
1309
+ color: var(--semantic-color-stroke-selection-inactive-focused);
1310
+ background-color: transparent;
1311
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
1312
+ }
1313
+ :global(.spotlight-input-touch) :global(.game):global(.spottable):active[disabled] .checkbox.standalone .icon {
1314
+ opacity: 0.4;
1315
+ }
1316
+ :global(.green) :global(.game) {
1317
+ --semantic-color-surface-default: #1F2C24;
1318
+ --semantic-color-surface-default-focused: #3ea07d;
1319
+ }
1320
+ :global(.spotlight-input-key) :global(.green) :global(.game):global(.spottable):focus[disabled] .checkbox .bg,
1321
+ :global(.spotlight-input-mouse) :global(.green) :global(.game):global(.spottable):focus[disabled] .checkbox .bg {
1322
+ background-color: var(--semantic-color-surface-default-disabled-focused);
1323
+ }
1324
+ :global(.spotlight-input-key) :global(.green) :global(.game):global(.spottable):focus[disabled] .checkbox.selected .icon,
1325
+ :global(.spotlight-input-mouse) :global(.green) :global(.game):global(.spottable):focus[disabled] .checkbox.selected .icon {
1326
+ color: var(--semantic-color-on-surface-main-selected);
1327
+ background-color: var(--semantic-color-surface-accent);
1328
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1329
+ }
1330
+ :global(.spotlight-input-key) :global(.green) :global(.game):global(.spottable):focus[disabled] .checkbox.indeterminate .icon,
1331
+ :global(.spotlight-input-mouse) :global(.green) :global(.game):global(.spottable):focus[disabled] .checkbox.indeterminate .icon {
1332
+ color: var(--semantic-color-stroke-selection-inactive-focused);
1333
+ background-color: transparent;
1334
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
1335
+ }
1336
+ :global(.spotlight-input-key) :global(.green) :global(.game):global(.spottable):focus[disabled] .checkbox.standalone .icon,
1337
+ :global(.spotlight-input-mouse) :global(.green) :global(.game):global(.spottable):focus[disabled] .checkbox.standalone .icon {
1338
+ opacity: 0.4;
1339
+ }
1340
+ :global(.spotlight-input-touch) :global(.green) :global(.game):global(.spottable):active[disabled] .checkbox .bg {
1341
+ background-color: var(--semantic-color-surface-default-disabled-focused);
1342
+ }
1343
+ :global(.spotlight-input-touch) :global(.green) :global(.game):global(.spottable):active[disabled] .checkbox.selected .icon {
1344
+ color: var(--semantic-color-on-surface-main-selected);
1345
+ background-color: var(--semantic-color-surface-accent);
1346
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1347
+ }
1348
+ :global(.spotlight-input-touch) :global(.green) :global(.game):global(.spottable):active[disabled] .checkbox.indeterminate .icon {
1349
+ color: var(--semantic-color-stroke-selection-inactive-focused);
1350
+ background-color: transparent;
1351
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
1352
+ }
1353
+ :global(.spotlight-input-touch) :global(.green) :global(.game):global(.spottable):active[disabled] .checkbox.standalone .icon {
1354
+ opacity: 0.4;
1355
+ }
1356
+ :global(.orange) :global(.game) {
1357
+ --semantic-color-surface-default: #422923;
1358
+ --semantic-color-surface-default-focused: #b85f23;
1359
+ }
1360
+ :global(.spotlight-input-key) :global(.orange) :global(.game):global(.spottable):focus[disabled] .checkbox .bg,
1361
+ :global(.spotlight-input-mouse) :global(.orange) :global(.game):global(.spottable):focus[disabled] .checkbox .bg {
1362
+ background-color: var(--semantic-color-surface-default-disabled-focused);
1363
+ }
1364
+ :global(.spotlight-input-key) :global(.orange) :global(.game):global(.spottable):focus[disabled] .checkbox.selected .icon,
1365
+ :global(.spotlight-input-mouse) :global(.orange) :global(.game):global(.spottable):focus[disabled] .checkbox.selected .icon {
1366
+ color: var(--semantic-color-on-surface-main-selected);
1367
+ background-color: var(--semantic-color-surface-accent);
1368
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1369
+ }
1370
+ :global(.spotlight-input-key) :global(.orange) :global(.game):global(.spottable):focus[disabled] .checkbox.indeterminate .icon,
1371
+ :global(.spotlight-input-mouse) :global(.orange) :global(.game):global(.spottable):focus[disabled] .checkbox.indeterminate .icon {
1372
+ color: var(--semantic-color-stroke-selection-inactive-focused);
1373
+ background-color: transparent;
1374
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
1375
+ }
1376
+ :global(.spotlight-input-key) :global(.orange) :global(.game):global(.spottable):focus[disabled] .checkbox.standalone .icon,
1377
+ :global(.spotlight-input-mouse) :global(.orange) :global(.game):global(.spottable):focus[disabled] .checkbox.standalone .icon {
1378
+ opacity: 0.4;
1379
+ }
1380
+ :global(.spotlight-input-touch) :global(.orange) :global(.game):global(.spottable):active[disabled] .checkbox .bg {
1381
+ background-color: var(--semantic-color-surface-default-disabled-focused);
1382
+ }
1383
+ :global(.spotlight-input-touch) :global(.orange) :global(.game):global(.spottable):active[disabled] .checkbox.selected .icon {
1384
+ color: var(--semantic-color-on-surface-main-selected);
1385
+ background-color: var(--semantic-color-surface-accent);
1386
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1387
+ }
1388
+ :global(.spotlight-input-touch) :global(.orange) :global(.game):global(.spottable):active[disabled] .checkbox.indeterminate .icon {
1389
+ color: var(--semantic-color-stroke-selection-inactive-focused);
1390
+ background-color: transparent;
1391
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
1392
+ }
1393
+ :global(.spotlight-input-touch) :global(.orange) :global(.game):global(.spottable):active[disabled] .checkbox.standalone .icon {
1394
+ opacity: 0.4;
1395
+ }