@graupl/graupl 1.0.0-beta.4 → 1.0.0-beta.41

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 (475) hide show
  1. package/LICENSE +674 -0
  2. package/README.md +9 -0
  3. package/dist/css/base/button.css +2 -2
  4. package/dist/css/base/button.css.map +1 -1
  5. package/dist/css/base/form.css +2 -2
  6. package/dist/css/base/form.css.map +1 -1
  7. package/dist/css/base/link.css +2 -2
  8. package/dist/css/base/link.css.map +1 -1
  9. package/dist/css/base/table.css +2 -2
  10. package/dist/css/base/table.css.map +1 -1
  11. package/dist/css/base.css +2 -2
  12. package/dist/css/base.css.map +1 -1
  13. package/dist/css/component/accordion.css +2 -2
  14. package/dist/css/component/accordion.css.map +1 -1
  15. package/dist/css/component/alert.css +2 -2
  16. package/dist/css/component/alert.css.map +1 -1
  17. package/dist/css/component/badge.css +2 -0
  18. package/dist/css/component/badge.css.map +1 -0
  19. package/dist/css/component/breadcrumb.css +2 -0
  20. package/dist/css/component/breadcrumb.css.map +1 -0
  21. package/dist/css/component/card.css +2 -2
  22. package/dist/css/component/card.css.map +1 -1
  23. package/dist/css/component/carousel.css +2 -2
  24. package/dist/css/component/carousel.css.map +1 -1
  25. package/dist/css/component/disclosure.css +2 -0
  26. package/dist/css/component/disclosure.css.map +1 -0
  27. package/dist/css/component/input-group.css +2 -2
  28. package/dist/css/component/input-group.css.map +1 -1
  29. package/dist/css/component/list.css +2 -2
  30. package/dist/css/component/list.css.map +1 -1
  31. package/dist/css/component/menu.css +2 -2
  32. package/dist/css/component/menu.css.map +1 -1
  33. package/dist/css/component/navigation.css +2 -2
  34. package/dist/css/component/navigation.css.map +1 -1
  35. package/dist/css/component/tabs.css +2 -0
  36. package/dist/css/component/tabs.css.map +1 -0
  37. package/dist/css/component.css +2 -2
  38. package/dist/css/component.css.map +1 -1
  39. package/dist/css/graupl.css +2 -2
  40. package/dist/css/graupl.css.map +1 -1
  41. package/dist/css/init.css +2 -2
  42. package/dist/css/init.css.map +1 -1
  43. package/dist/css/layout/columns.css +2 -2
  44. package/dist/css/layout/columns.css.map +1 -1
  45. package/dist/css/layout/container.css +2 -2
  46. package/dist/css/layout/container.css.map +1 -1
  47. package/dist/css/layout/flex-columns.css +2 -2
  48. package/dist/css/layout/flex-columns.css.map +1 -1
  49. package/dist/css/layout.css +2 -2
  50. package/dist/css/layout.css.map +1 -1
  51. package/dist/css/normalize.css +2 -2
  52. package/dist/css/normalize.css.map +1 -1
  53. package/dist/css/state/focus.css +2 -2
  54. package/dist/css/state/focus.css.map +1 -1
  55. package/dist/css/state.css +2 -2
  56. package/dist/css/state.css.map +1 -1
  57. package/dist/css/theme/color.css +2 -2
  58. package/dist/css/theme/color.css.map +1 -1
  59. package/dist/css/theme/typography.css +2 -2
  60. package/dist/css/theme/typography.css.map +1 -1
  61. package/dist/css/theme.css +2 -2
  62. package/dist/css/theme.css.map +1 -1
  63. package/dist/css/utilities/alignment.css +1 -1
  64. package/dist/css/utilities/alignment.css.map +1 -1
  65. package/dist/css/utilities/background.css +2 -2
  66. package/dist/css/utilities/background.css.map +1 -1
  67. package/dist/css/utilities/border.css +2 -2
  68. package/dist/css/utilities/border.css.map +1 -1
  69. package/dist/css/utilities/color.css +2 -2
  70. package/dist/css/utilities/color.css.map +1 -1
  71. package/dist/css/utilities/container.css +2 -0
  72. package/dist/css/utilities/container.css.map +1 -0
  73. package/dist/css/utilities/display.css +2 -2
  74. package/dist/css/utilities/display.css.map +1 -1
  75. package/dist/css/utilities/flex.css +2 -2
  76. package/dist/css/utilities/flex.css.map +1 -1
  77. package/dist/css/utilities/gradient.css +2 -2
  78. package/dist/css/utilities/gradient.css.map +1 -1
  79. package/dist/css/utilities/height.css +2 -2
  80. package/dist/css/utilities/height.css.map +1 -1
  81. package/dist/css/utilities/inset.css +2 -2
  82. package/dist/css/utilities/inset.css.map +1 -1
  83. package/dist/css/utilities/isolation.css +2 -0
  84. package/dist/css/utilities/isolation.css.map +1 -0
  85. package/dist/css/utilities/justification.css +1 -1
  86. package/dist/css/utilities/justification.css.map +1 -1
  87. package/dist/css/utilities/list.css +1 -1
  88. package/dist/css/utilities/list.css.map +1 -1
  89. package/dist/css/utilities/object.css +2 -0
  90. package/dist/css/utilities/object.css.map +1 -0
  91. package/dist/css/utilities/order.css +2 -2
  92. package/dist/css/utilities/order.css.map +1 -1
  93. package/dist/css/utilities/position.css +2 -0
  94. package/dist/css/utilities/position.css.map +1 -0
  95. package/dist/css/utilities/ratio.css +2 -2
  96. package/dist/css/utilities/ratio.css.map +1 -1
  97. package/dist/css/utilities/spacing.css +2 -2
  98. package/dist/css/utilities/spacing.css.map +1 -1
  99. package/dist/css/utilities/typography.css +2 -2
  100. package/dist/css/utilities/typography.css.map +1 -1
  101. package/dist/css/utilities/visibility.css +2 -2
  102. package/dist/css/utilities/visibility.css.map +1 -1
  103. package/dist/css/utilities/visually-hidden.css +2 -0
  104. package/dist/css/utilities/visually-hidden.css.map +1 -0
  105. package/dist/css/utilities/width.css +2 -2
  106. package/dist/css/utilities/width.css.map +1 -1
  107. package/dist/css/utilities/z-index.css +2 -0
  108. package/dist/css/utilities/z-index.css.map +1 -0
  109. package/dist/css/utilities.css +2 -2
  110. package/dist/css/utilities.css.map +1 -1
  111. package/dist/js/accordion.js +5 -0
  112. package/dist/js/accordion.js.map +1 -0
  113. package/dist/js/alert.js +5 -0
  114. package/dist/js/alert.js.map +1 -0
  115. package/dist/js/breadcrumb.js +5 -0
  116. package/dist/js/breadcrumb.js.map +1 -0
  117. package/dist/js/carousel.js +5 -0
  118. package/dist/js/carousel.js.map +1 -0
  119. package/dist/js/component/accordion.cjs.js +5 -3
  120. package/dist/js/component/accordion.cjs.js.map +1 -0
  121. package/dist/js/component/accordion.es.js +5 -0
  122. package/dist/js/component/accordion.es.js.map +1 -0
  123. package/dist/js/component/accordion.iife.js +5 -3
  124. package/dist/js/component/accordion.iife.js.map +1 -0
  125. package/dist/js/component/alert.cjs.js +5 -3
  126. package/dist/js/component/alert.cjs.js.map +1 -0
  127. package/dist/js/component/alert.es.js +5 -0
  128. package/dist/js/component/alert.es.js.map +1 -0
  129. package/dist/js/component/alert.iife.js +5 -3
  130. package/dist/js/component/alert.iife.js.map +1 -0
  131. package/dist/js/component/breadcrumb.cjs.js +5 -0
  132. package/dist/js/component/breadcrumb.cjs.js.map +1 -0
  133. package/dist/js/component/breadcrumb.es.js +5 -0
  134. package/dist/js/component/breadcrumb.es.js.map +1 -0
  135. package/dist/js/component/breadcrumb.iife.js +5 -0
  136. package/dist/js/component/breadcrumb.iife.js.map +1 -0
  137. package/dist/js/component/carousel.cjs.js +5 -3
  138. package/dist/js/component/carousel.cjs.js.map +1 -0
  139. package/dist/js/component/carousel.es.js +5 -0
  140. package/dist/js/component/carousel.es.js.map +1 -0
  141. package/dist/js/component/carousel.iife.js +5 -3
  142. package/dist/js/component/carousel.iife.js.map +1 -0
  143. package/dist/js/component/disclosure.cjs.js +5 -0
  144. package/dist/js/component/disclosure.cjs.js.map +1 -0
  145. package/dist/js/component/disclosure.es.js +5 -0
  146. package/dist/js/component/disclosure.es.js.map +1 -0
  147. package/dist/js/component/disclosure.iife.js +5 -0
  148. package/dist/js/component/disclosure.iife.js.map +1 -0
  149. package/dist/js/component/tabs.cjs.js +5 -0
  150. package/dist/js/component/tabs.cjs.js.map +1 -0
  151. package/dist/js/component/tabs.es.js +5 -0
  152. package/dist/js/component/tabs.es.js.map +1 -0
  153. package/dist/js/component/tabs.iife.js +5 -0
  154. package/dist/js/component/tabs.iife.js.map +1 -0
  155. package/dist/js/disclosure.js +5 -0
  156. package/dist/js/disclosure.js.map +1 -0
  157. package/dist/js/generator/accordion.cjs.js +5 -0
  158. package/dist/js/generator/accordion.cjs.js.map +1 -0
  159. package/dist/js/generator/accordion.es.js +5 -0
  160. package/dist/js/generator/accordion.es.js.map +1 -0
  161. package/dist/js/generator/accordion.iife.js +5 -0
  162. package/dist/js/generator/accordion.iife.js.map +1 -0
  163. package/dist/js/generator/alert.cjs.js +5 -0
  164. package/dist/js/generator/alert.cjs.js.map +1 -0
  165. package/dist/js/generator/alert.es.js +5 -0
  166. package/dist/js/generator/alert.es.js.map +1 -0
  167. package/dist/js/generator/alert.iife.js +5 -0
  168. package/dist/js/generator/alert.iife.js.map +1 -0
  169. package/dist/js/generator/breadcrumb.cjs.js +5 -0
  170. package/dist/js/generator/breadcrumb.cjs.js.map +1 -0
  171. package/dist/js/generator/breadcrumb.es.js +5 -0
  172. package/dist/js/generator/breadcrumb.es.js.map +1 -0
  173. package/dist/js/generator/breadcrumb.iife.js +5 -0
  174. package/dist/js/generator/breadcrumb.iife.js.map +1 -0
  175. package/dist/js/generator/carousel.cjs.js +5 -0
  176. package/dist/js/generator/carousel.cjs.js.map +1 -0
  177. package/dist/js/generator/carousel.es.js +5 -0
  178. package/dist/js/generator/carousel.es.js.map +1 -0
  179. package/dist/js/generator/carousel.iife.js +5 -0
  180. package/dist/js/generator/carousel.iife.js.map +1 -0
  181. package/dist/js/generator/disclosure.cjs.js +5 -0
  182. package/dist/js/generator/disclosure.cjs.js.map +1 -0
  183. package/dist/js/generator/disclosure.es.js +5 -0
  184. package/dist/js/generator/disclosure.es.js.map +1 -0
  185. package/dist/js/generator/disclosure.iife.js +5 -0
  186. package/dist/js/generator/disclosure.iife.js.map +1 -0
  187. package/dist/js/generator/navigation.cjs.js +3 -0
  188. package/dist/js/generator/navigation.cjs.js.map +1 -0
  189. package/dist/js/generator/navigation.es.js +3 -0
  190. package/dist/js/generator/navigation.es.js.map +1 -0
  191. package/dist/js/generator/navigation.iife.js +3 -0
  192. package/dist/js/generator/navigation.iife.js.map +1 -0
  193. package/dist/js/generator/tabs.cjs.js +5 -0
  194. package/dist/js/generator/tabs.cjs.js.map +1 -0
  195. package/dist/js/generator/tabs.es.js +5 -0
  196. package/dist/js/generator/tabs.es.js.map +1 -0
  197. package/dist/js/generator/tabs.iife.js +5 -0
  198. package/dist/js/generator/tabs.iife.js.map +1 -0
  199. package/dist/js/graupl.js +5 -0
  200. package/dist/js/graupl.js.map +1 -0
  201. package/dist/js/navigation.js +3 -0
  202. package/dist/js/navigation.js.map +1 -0
  203. package/dist/js/storage/initializer.js +3 -0
  204. package/dist/js/storage/initializer.js.map +1 -0
  205. package/dist/js/storage/storage-manager.cjs.js +3 -0
  206. package/dist/js/storage/storage-manager.cjs.js.map +1 -0
  207. package/dist/js/storage/storage-manager.es.js +3 -0
  208. package/dist/js/storage/storage-manager.es.js.map +1 -0
  209. package/dist/js/storage/storage-manager.iife.js +3 -0
  210. package/dist/js/storage/storage-manager.iife.js.map +1 -0
  211. package/dist/js/tabs.js +5 -0
  212. package/dist/js/tabs.js.map +1 -0
  213. package/package.json +59 -49
  214. package/scss/base/button.scss +1 -1
  215. package/scss/base/form.scss +1 -1
  216. package/scss/base/link.scss +1 -1
  217. package/scss/base/table.scss +1 -1
  218. package/scss/base.scss +1 -1
  219. package/scss/component/accordion.scss +1 -1
  220. package/scss/component/alert.scss +1 -1
  221. package/scss/component/badge.scss +3 -0
  222. package/scss/component/breadcrumb.scss +3 -0
  223. package/scss/component/card.scss +1 -1
  224. package/scss/component/carousel.scss +1 -1
  225. package/scss/component/disclosure.scss +3 -0
  226. package/scss/component/input-group.scss +1 -1
  227. package/scss/component/list.scss +1 -1
  228. package/scss/component/menu.scss +1 -1
  229. package/scss/component/navigation.scss +1 -1
  230. package/scss/component/tabs.scss +3 -0
  231. package/scss/component.scss +1 -1
  232. package/scss/graupl.scss +1 -1
  233. package/scss/init.scss +1 -1
  234. package/scss/layout/columns.scss +1 -1
  235. package/scss/layout/container.scss +1 -1
  236. package/scss/layout/flex-columns.scss +1 -1
  237. package/scss/layout.scss +1 -1
  238. package/scss/normalize.scss +1 -1
  239. package/scss/state/focus.scss +1 -1
  240. package/scss/state.scss +1 -1
  241. package/scss/theme/color.scss +1 -1
  242. package/scss/theme/typography.scss +1 -1
  243. package/scss/theme.scss +1 -1
  244. package/scss/utilities/alignment.scss +1 -1
  245. package/scss/utilities/background.scss +1 -1
  246. package/scss/utilities/border.scss +1 -1
  247. package/scss/utilities/color.scss +1 -1
  248. package/scss/utilities/container.scss +3 -0
  249. package/scss/utilities/display.scss +1 -1
  250. package/scss/utilities/flex.scss +1 -1
  251. package/scss/utilities/gradient.scss +1 -1
  252. package/scss/utilities/height.scss +1 -1
  253. package/scss/utilities/inset.scss +1 -1
  254. package/scss/utilities/isolation.scss +3 -0
  255. package/scss/utilities/justification.scss +1 -1
  256. package/scss/utilities/list.scss +1 -1
  257. package/scss/utilities/object.scss +3 -0
  258. package/scss/utilities/order.scss +1 -1
  259. package/scss/utilities/position.scss +3 -0
  260. package/scss/utilities/ratio.scss +1 -1
  261. package/scss/utilities/spacing.scss +1 -1
  262. package/scss/utilities/typography.scss +1 -1
  263. package/scss/utilities/visibility.scss +1 -1
  264. package/scss/utilities/visually-hidden.scss +3 -0
  265. package/scss/utilities/width.scss +1 -1
  266. package/scss/utilities/z-index.scss +3 -0
  267. package/scss/utilities.scss +1 -1
  268. package/.browserslistrc +0 -3
  269. package/.czrc +0 -3
  270. package/.editorconfig +0 -13
  271. package/.github/CODE_OF_CONDUCT.md +0 -73
  272. package/.github/COMMIT_CONVENTION.md +0 -17
  273. package/.github/CONTRIBUTING.md +0 -86
  274. package/.github/ISSUE_TEMPLATE/bug_report.md +0 -30
  275. package/.github/ISSUE_TEMPLATE/documentation.md +0 -20
  276. package/.github/ISSUE_TEMPLATE/feature_request.md +0 -20
  277. package/.github/SECURITY.md +0 -26
  278. package/.github/dependabot.yml +0 -17
  279. package/.github/pull_request_template.md +0 -5
  280. package/.github/workflows/codeql-analysis.yml +0 -71
  281. package/.github/workflows/docs.yml +0 -59
  282. package/.github/workflows/test.yml +0 -27
  283. package/.husky/commit-msg +0 -3
  284. package/.husky/pre-commit +0 -4
  285. package/.prettierignore +0 -12
  286. package/.stylelintignore +0 -9
  287. package/.versionrc.cjs +0 -61
  288. package/CHANGELOG.md +0 -430
  289. package/build.js +0 -7
  290. package/combine-at-rules.cjs +0 -61
  291. package/commitlint.config.js +0 -5
  292. package/dist/css/utilities/postion.css +0 -2
  293. package/dist/css/utilities/postion.css.map +0 -1
  294. package/dist/js/component/accordion.esm.js +0 -1289
  295. package/dist/js/component/alert.esm.js +0 -529
  296. package/dist/js/component/carousel.esm.js +0 -1110
  297. package/dist/js/graupl.cjs.js +0 -5
  298. package/dist/js/graupl.esm.js +0 -1462
  299. package/dist/js/graupl.iife.js +0 -5
  300. package/docs/.vitepress/config.js +0 -78
  301. package/docs/.vitepress/theme/custom.scss +0 -35
  302. package/docs/.vitepress/theme/index.js +0 -4
  303. package/docs/compiling-graupl.md +0 -56
  304. package/docs/components/alert.md +0 -130
  305. package/docs/components/button.md +0 -84
  306. package/docs/components/card.md +0 -369
  307. package/docs/components/index.md +0 -1
  308. package/docs/components/inputgroup.md +0 -159
  309. package/docs/components/menu.md +0 -326
  310. package/docs/components/navigation.md +0 -158
  311. package/docs/content.md +0 -237
  312. package/docs/defaults.md +0 -121
  313. package/docs/forms.md +0 -79
  314. package/docs/functions.md +0 -9
  315. package/docs/getting-started.md +0 -1
  316. package/docs/index.md +0 -1
  317. package/docs/introduction.md +0 -25
  318. package/docs/layout.md +0 -200
  319. package/docs/mixins.md +0 -47
  320. package/docs/state.md +0 -67
  321. package/docs/theme.md +0 -258
  322. package/docs/utilities.md +0 -357
  323. package/eslint.config.js +0 -74
  324. package/index.html +0 -923
  325. package/index.js +0 -12
  326. package/lint-staged.config.js +0 -6
  327. package/postcss.config.cjs +0 -11
  328. package/prettier.config.js +0 -16
  329. package/scss/utilities/postion.scss +0 -3
  330. package/src/js/accordion/Accordion.js +0 -1163
  331. package/src/js/accordion/AccordionItem.js +0 -496
  332. package/src/js/accordion/index.js +0 -10
  333. package/src/js/alert/Alert.js +0 -581
  334. package/src/js/alert/index.js +0 -11
  335. package/src/js/carousel/Carousel.js +0 -1427
  336. package/src/js/carousel/index.js +0 -10
  337. package/src/js/domHelpers.js +0 -37
  338. package/src/js/eventHandlers.js +0 -39
  339. package/src/js/navigation/index.js +0 -36
  340. package/src/js/storage.js +0 -106
  341. package/src/js/validate.js +0 -225
  342. package/src/scss/_defaults.scss +0 -152
  343. package/src/scss/_index.scss +0 -15
  344. package/src/scss/_init.scss +0 -6
  345. package/src/scss/_normalize.scss +0 -197
  346. package/src/scss/_variables.scss +0 -53
  347. package/src/scss/base/_index.scss +0 -6
  348. package/src/scss/base/button/_defaults.scss +0 -60
  349. package/src/scss/base/button/_index.scss +0 -107
  350. package/src/scss/base/button/_mixins.scss +0 -166
  351. package/src/scss/base/button/_variables.scss +0 -176
  352. package/src/scss/base/form/_defaults.scss +0 -17
  353. package/src/scss/base/form/_index.scss +0 -93
  354. package/src/scss/base/form/_variables.scss +0 -153
  355. package/src/scss/base/link/_defaults.scss +0 -50
  356. package/src/scss/base/link/_index.scss +0 -134
  357. package/src/scss/base/link/_variables.scss +0 -262
  358. package/src/scss/base/table/_defaults.scss +0 -53
  359. package/src/scss/base/table/_index.scss +0 -121
  360. package/src/scss/base/table/_variables.scss +0 -135
  361. package/src/scss/component/_index.scss +0 -10
  362. package/src/scss/component/accordion/_defaults.scss +0 -40
  363. package/src/scss/component/accordion/_index.scss +0 -180
  364. package/src/scss/component/accordion/_variables.scss +0 -316
  365. package/src/scss/component/alert/_defaults.scss +0 -49
  366. package/src/scss/component/alert/_index.scss +0 -118
  367. package/src/scss/component/alert/_variables.scss +0 -170
  368. package/src/scss/component/card/_defaults.scss +0 -32
  369. package/src/scss/component/card/_index.scss +0 -178
  370. package/src/scss/component/card/_variables.scss +0 -186
  371. package/src/scss/component/carousel/_defaults.scss +0 -43
  372. package/src/scss/component/carousel/_index.scss +0 -188
  373. package/src/scss/component/carousel/_variables.scss +0 -104
  374. package/src/scss/component/input-group/_defaults.scss +0 -30
  375. package/src/scss/component/input-group/_index.scss +0 -47
  376. package/src/scss/component/input-group/_variables.scss +0 -66
  377. package/src/scss/component/list/_defaults.scss +0 -15
  378. package/src/scss/component/list/_index.scss +0 -50
  379. package/src/scss/component/list/_variables.scss +0 -176
  380. package/src/scss/component/menu/_defaults.scss +0 -66
  381. package/src/scss/component/menu/_index.scss +0 -305
  382. package/src/scss/component/menu/_variables.scss +0 -500
  383. package/src/scss/component/navigation/_defaults.scss +0 -29
  384. package/src/scss/component/navigation/_index.scss +0 -189
  385. package/src/scss/component/navigation/_variables.scss +0 -237
  386. package/src/scss/functions/_important.scss +0 -13
  387. package/src/scss/functions/_screen.scss +0 -38
  388. package/src/scss/functions/_theme.scss +0 -39
  389. package/src/scss/functions/_utility.scss +0 -28
  390. package/src/scss/layout/_index.scss +0 -5
  391. package/src/scss/layout/columns/_defaults.scss +0 -24
  392. package/src/scss/layout/columns/_index.scss +0 -58
  393. package/src/scss/layout/columns/_variables.scss +0 -51
  394. package/src/scss/layout/container/_defaults.scss +0 -23
  395. package/src/scss/layout/container/_index.scss +0 -43
  396. package/src/scss/layout/container/_variables.scss +0 -50
  397. package/src/scss/layout/flex-columns/_defaults.scss +0 -24
  398. package/src/scss/layout/flex-columns/_index.scss +0 -78
  399. package/src/scss/layout/flex-columns/_variables.scss +0 -26
  400. package/src/scss/mixins/_animation.scss +0 -15
  401. package/src/scss/mixins/_layer.scss +0 -16
  402. package/src/scss/mixins/_screen.scss +0 -77
  403. package/src/scss/mixins/_state.scss +0 -18
  404. package/src/scss/mixins/_theme.scss +0 -15
  405. package/src/scss/mixins/_utility.scss +0 -138
  406. package/src/scss/mixins/_visually-hidden.scss +0 -20
  407. package/src/scss/state/_index.scss +0 -3
  408. package/src/scss/state/focus/_defaults.scss +0 -10
  409. package/src/scss/state/focus/_index.scss +0 -13
  410. package/src/scss/state/focus/_mixins.scss +0 -15
  411. package/src/scss/state/focus/_variables.scss +0 -44
  412. package/src/scss/theme/_index.scss +0 -4
  413. package/src/scss/theme/color/_defaults.scss +0 -143
  414. package/src/scss/theme/color/_index.scss +0 -42
  415. package/src/scss/theme/color/_variables.scss +0 -129
  416. package/src/scss/theme/typography/_defaults.scss +0 -54
  417. package/src/scss/theme/typography/_index.scss +0 -111
  418. package/src/scss/theme/typography/_variables.scss +0 -231
  419. package/src/scss/utilities/_index.scss +0 -20
  420. package/src/scss/utilities/alignment/_defaults.scss +0 -64
  421. package/src/scss/utilities/alignment/_index.scss +0 -168
  422. package/src/scss/utilities/alignment/_variables.scss +0 -6
  423. package/src/scss/utilities/background/_defaults.scss +0 -145
  424. package/src/scss/utilities/background/_index.scss +0 -340
  425. package/src/scss/utilities/background/_variables.scss +0 -6
  426. package/src/scss/utilities/border/_defaults.scss +0 -61
  427. package/src/scss/utilities/border/_index.scss +0 -269
  428. package/src/scss/utilities/border/_variables.scss +0 -6
  429. package/src/scss/utilities/color/_defaults.scss +0 -37
  430. package/src/scss/utilities/color/_index.scss +0 -202
  431. package/src/scss/utilities/color/_variables.scss +0 -6
  432. package/src/scss/utilities/display/_defaults.scss +0 -36
  433. package/src/scss/utilities/display/_index.scss +0 -134
  434. package/src/scss/utilities/display/_variables.scss +0 -6
  435. package/src/scss/utilities/flex/_defaults.scss +0 -87
  436. package/src/scss/utilities/flex/_index.scss +0 -255
  437. package/src/scss/utilities/flex/_variables.scss +0 -6
  438. package/src/scss/utilities/gradient/_defaults.scss +0 -58
  439. package/src/scss/utilities/gradient/_index.scss +0 -380
  440. package/src/scss/utilities/gradient/_variables.scss +0 -29
  441. package/src/scss/utilities/height/_defaults.scss +0 -43
  442. package/src/scss/utilities/height/_index.scss +0 -236
  443. package/src/scss/utilities/height/_variables.scss +0 -6
  444. package/src/scss/utilities/inset/_defaults.scss +0 -43
  445. package/src/scss/utilities/inset/_index.scss +0 -90
  446. package/src/scss/utilities/inset/_variables.scss +0 -6
  447. package/src/scss/utilities/justification/_defaults.scss +0 -61
  448. package/src/scss/utilities/justification/_index.scss +0 -168
  449. package/src/scss/utilities/justification/_variables.scss +0 -6
  450. package/src/scss/utilities/list/_defaults.scss +0 -41
  451. package/src/scss/utilities/list/_index.scss +0 -125
  452. package/src/scss/utilities/list/_variables.scss +0 -6
  453. package/src/scss/utilities/order/_defaults.scss +0 -24
  454. package/src/scss/utilities/order/_index.scss +0 -111
  455. package/src/scss/utilities/order/_variables.scss +0 -6
  456. package/src/scss/utilities/position/_defaults.scss +0 -28
  457. package/src/scss/utilities/position/_index.scss +0 -82
  458. package/src/scss/utilities/position/_variables.scss +0 -6
  459. package/src/scss/utilities/ratio/_defaults.scss +0 -30
  460. package/src/scss/utilities/ratio/_index.scss +0 -91
  461. package/src/scss/utilities/ratio/_variables.scss +0 -9
  462. package/src/scss/utilities/spacing/_defaults.scss +0 -51
  463. package/src/scss/utilities/spacing/_index.scss +0 -382
  464. package/src/scss/utilities/spacing/_variables.scss +0 -6
  465. package/src/scss/utilities/typography/_defaults.scss +0 -46
  466. package/src/scss/utilities/typography/_index.scss +0 -658
  467. package/src/scss/utilities/typography/_variables.scss +0 -6
  468. package/src/scss/utilities/visibility/_defaults.scss +0 -27
  469. package/src/scss/utilities/visibility/_index.scss +0 -82
  470. package/src/scss/utilities/visibility/_variables.scss +0 -6
  471. package/src/scss/utilities/width/_defaults.scss +0 -43
  472. package/src/scss/utilities/width/_index.scss +0 -236
  473. package/src/scss/utilities/width/_variables.scss +0 -6
  474. package/stylelint.config.js +0 -22
  475. package/vite.config.js +0 -57
package/dist/css/base.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/scss/mixins/_layer.scss","../../src/scss/base/button/_index.scss","../../src/scss/base/button/_mixins.scss","../../src/scss/base/button/_variables.scss","base.css","../../src/scss/mixins/_animation.scss","../../src/scss/base/link/_variables.scss","../../src/scss/base/form/_index.scss","../../src/scss/base/form/_variables.scss","../../src/scss/base/link/_index.scss","../../src/scss/base/table/_index.scss","../../src/scss/base/table/_variables.scss"],"names":[],"mappings":"AASI,mBCCJ,QCoCI,kBAAA,CAOA,0KCyFY,CDxFZ,oFC4FmB,CD1FnB,cAAA,CAXA,YAAA,CAUA,2GCrBe,CDaf,sBAAA,CAEA,+CC/BgB,CD8BhB,6CClCe,CDoCf,uNCpBa,CDqBb,6CCKe,CDJf,mVErCF,CF4CI,gCACE,qEEvCN,CF4CI,cACE,mEE1CN,CFyCI,sBACE,mEEvCN,CF4CI,4BACE,mEEvCN,CF4CI,8BACE,2EEvCN,CF+CU,0FAEE,sEAAA,CAEA,kBEvCZ,CFmCU,gDAEE,sEAAA,CAEA,kBEnCZ,CF+BU,6TAEE,sEAAA,CAEA,kBESZ,CFbU,gDAEE,sEAAA,CAEA,kBEaZ,CFjBU,iUAEE,sEAAA,CAEA,kBEyDZ,CF7DU,kDAEE,sEAAA,CAEA,kBE6DZ,CFjEU,kXAEE,sEAAA,CAEA,kBEyGZ,CF7GU,sEAEE,sEAAA,CAEA,kBE6GZ,CFjHU,sUAEE,sEAAA,CAEA,kBE6IZ,CC5NA,uCJDF,QCwFM,sLEyIF,CACF,CACF,CJpOI,oBCCJ,QC8FI,4LCtBgB,CDqBhB,2LCiDkB,CD/ClB,6KE0IF,CFvII,gBAEI,yIAAA,CAAA,gJAAA,CAAA,iJAAA,CAAA,wJAAA,CAAA,+IAAA,CAAA,sJAAA,CAAA,+IAAA,CAAA,oJAAA,CAAA,sJAAA,CAAA,gJAAA,CAAA,qJAAA,CAAA,uJAAA,CAAA,kJAAA,CAAA,yJEqJR,CFvJI,kBAEI,+IAAA,CAAA,sJAAA,CAAA,uJAAA,CAAA,8JAAA,CAAA,qJAAA,CAAA,4JAAA,CAAA,qJAAA,CAAA,0JAAA,CAAA,4JAAA,CAAA,sJAAA,CAAA,2JAAA,CAAA,6JAAA,CAAA,wJAAA,CAAA,+JEqKR,CFvKI,iBAEI,4IAAA,CAAA,mJAAA,CAAA,oJAAA,CAAA,2JAAA,CAAA,kJAAA,CAAA,yJAAA,CAAA,kJAAA,CAAA,uJAAA,CAAA,yJAAA,CAAA,mJAAA,CAAA,wJAAA,CAAA,0JAAA,CAAA,qJAAA,CAAA,4JEqLR,CF5KI,gCACE,mNAAA,CACA,oNAAA,CACA,qMEmLN,CF9KI,cACE,iNAAA,CACA,kNAAA,CACA,mMEgLN,CFnLI,sBACE,iNAAA,CACA,kNAAA,CACA,mMEqLN,CFhLI,4BACE,iNAAA,CACA,oLAAA,CACA,0KEuLN,CFlLI,8BACE,kNAAA,CACA,qLAAA,CACA,2KEyLN,CFjLU,0FAEE,2LAAA,CACA,qNAAA,CACA,6KE4LZ,CFhMU,gDAEE,2LAAA,CACA,qNAAA,CACA,6KEiMZ,CFrMU,6TAEE,2LAAA,CACA,qNAAA,CACA,6KEwPZ,CF5PU,gDAEE,2LAAA,CACA,qNAAA,CACA,6KE6PZ,CFjQU,iUAEE,2LAAA,CACA,qNAAA,CACA,6KEoTZ,CFxTU,kDAEE,2LAAA,CACA,qNAAA,CACA,6KEyTZ,CF7TU,kXAEE,2LAAA,CACA,qNAAA,CACA,6KEgXZ,CFpXU,sEAEE,2LAAA,CACA,qNAAA,CACA,6KEqXZ,CFzXU,sUAEE,2LAAA,CACA,qNAAA,CACA,6KE6ZZ,CACF,CH/iBE,aACE,gOAAA,CACA,oWAAA,CACA,mMAAA,CACA,2DAAA,CACA,2EAAA,CACA,iEAAA,CACA,uEAAA,CACA,yEAAA,CACA,8DAAA,CACA,6FAAA,CACA,mGAAA,CACA,2DAAA,CACA,6DAAA,CACA,iCAAA,CAEA,oEKjBmB,CLiBnB,4DKjBmB,CLmBnB,4EK6ByB,CL7BzB,oEK6ByB,CL9BzB,yGGijBJ,CJtkBI,mBC2BF,aACE,kKAAA,CACA,kLAAA,CACA,8KAAA,CACA,iLAAA,CACA,mLAAA,CACA,oLAAA,CACA,oEAAA,CACA,oFAAA,CACA,gFAAA,CACA,gFAAA,CACA,kFAAA,CACA,sFAAA,CACA,wEAAA,CACA,wFAAA,CACA,oFAAA,CACA,oFAAA,CACA,sFAAA,CACA,0FG+iBF,CH3iBE,oBACE,sOAAA,CACA,oWAAA,CACA,mMAAA,CACA,2DAAA,CACA,2EAAA,CACA,uEAAA,CACA,uEAAA,CACA,gFAAA,CACA,6EAAA,CACA,gGAAA,CACA,6FAAA,CACA,mGAAA,CACA,2DAAA,CACA,6DAAA,CACA,kCAAA,CACA,0CAAA,CACA,wCAAA,CACA,wCAAA,CACA,yCAAA,CACA,2CG6iBJ,CACF,CJnnBI,oBC4EA,oBACE,2LAAA,CACA,2MAAA,CACA,uMAAA,CACA,8KAAA,CACA,gLAAA,CACA,oLAAA,CACA,0MAAA,CACA,0NAAA,CACA,sNAAA,CACA,wLAAA,CACA,0LAAA,CACA,4NAAA,CACA,yMAAA,CACA,yNAAA,CACA,qNAAA,CACA,qNAAA,CACA,uNAAA,CACA,kMG0iBJ,CACF,CJzoBI,mBOFF,sBAIE,wKC8FW,CD7FX,mFCiGkB,CDhGlB,0GCYc,CDfd,oNHipBF,CG5oBE,iDACE,kBHgpBJ,CG5oBA,MACE,wIH8oBF,CG3oBA,SAKE,mPC4Fc,CD3Fd,wHC+FqB,CDpGrB,YAAA,CACA,sDAAA,CAKA,2ICsBiB,CD1BjB,0FCUW,CDTX,yRHgpBF,CG1oBI,4EAGE,kBH4oBN,CACF,CJzqBI,oBOmCF,sBAME,iKCmGiB,CDrGjB,2LCWe,CDZf,uKCoFiB,CDlFjB,mJH0oBF,CGvoBE,4EACE,qKH2oBJ,CG5oBE,6DACE,qKH2oBJ,CGxoBE,iDACE,gLC8EwB,CD7ExB,kKH4oBJ,CG1oBI,uGACE,iNH8oBN,CG/oBI,wFACE,iNH8oBN,CGzoBA,MACE,6KH2oBF,CGzoBE,+DAKE,qMHyoBJ,CGroBA,SAEE,6NCjBkB,CDgBlB,2MC4DoB,CD1DpB,gLHuoBF,CGroBE,kBACE,6NC2D2B,CD1D3B,wMHuoBJ,CGroBI,wBACE,qMHuoBN,CACF,CJvtBI,mBSAF,EAME,mIHyMU,CGxMV,kFH4MiB,CGjNjB,6CHiPc,CGlPd,2CH8Oa,CG5Ob,gNHwJW,CGnJX,oEHLmB,CGKnB,4DHLmB,CGMnB,4EH0CyB,CG1CzB,oEH0CyB,CGzCzB,yGHiB6B,CGvB7B,2CH2Ka,CG1Kb,iVL+tBF,CKxtBE,UACE,kFAAA,CACA,gIAAA,CACA,0FAAA,CACA,iEL0tBJ,CKvtBE,gBACE,gFAAA,CACA,8HAAA,CACA,wFAAA,CACA,+DLytBJ,CKttBE,QACE,gFAAA,CACA,8HAAA,CACA,wFAAA,CACA,+DLwtBJ,CKrtBE,SACE,iFAAA,CACA,+HAAA,CACA,yFAAA,CACA,gELutBJ,CKptBE,uBAEE,kBLqtBJ,CKntBI,yLAKE,mFAAA,CACA,iIAAA,CACA,2FAAA,CACA,kELitBN,CK7sBE,YACE,iBL+sBJ,CK7sBI,mBACE,UAAA,CAEA,OAAA,CADA,iBAAA,CAEA,8CL+sBN,CC5wBA,uCImEE,EACE,kLL4sBF,CACF,CACF,CJpxBI,oBS4EF,EAEE,oDH6Cc,CG9Cd,wDH0IgB,CGxIhB,kJHJS,CGKT,mNHmByB,CGnBzB,2ML2sBF,CKzsBE,UACE,wKAAA,CACA,0EAAA,CACA,8EAAA,CACA,yOL2sBJ,CKxsBE,gBACE,sKAAA,CACA,wEAAA,CACA,4EAAA,CACA,qOL0sBJ,CKvsBE,QACE,yKAAA,CACA,wEAAA,CACA,4EAAA,CACA,wOLysBJ,CKtsBE,SACE,0KAAA,CACA,yEAAA,CACA,6EAAA,CACA,0OLwsBJ,CKnsBI,yLAKE,yKAAA,CACA,2EAAA,CACA,+EAAA,CACA,2OLisBN,CACF,CJ1zBI,mBUCA,cAEE,oDCEe,CDHf,yMN6zBJ,CMzzBE,SAEE,oHCYqB,CDbrB,uMN4zBJ,CMxzBE,wBAEE,mMN0zBJ,CMnzBE,+BAHE,wBN6zBJ,CM1zBE,eAEE,uKNwzBJ,CMtzBI,oBACE,wPNwzBN,CMnzBA,kBACE,aAAA,CAEA,sBAAA,CADA,UNszBF,CMnzBE,wBAEE,eAAA,CADA,UNszBJ,CACF,CJ31BI,oBU6CE,6BAGI,oJAAA,CAAA,+IAAA,CAAA,qJAAA,CAAA,gJAAA,CAAA,mJAAA,CAAA,8IAAA,CAAA,+IAAA,CAAA,uJAAA,CAAA,kJNwzBR,CM3zBI,iCAGI,0JAAA,CAAA,qJAAA,CAAA,2JAAA,CAAA,sJAAA,CAAA,yJAAA,CAAA,oJAAA,CAAA,qJAAA,CAAA,6JAAA,CAAA,wJNo0BR,CMv0BI,+BAGI,uJAAA,CAAA,kJAAA,CAAA,wJAAA,CAAA,mJAAA,CAAA,sJAAA,CAAA,iJAAA,CAAA,kJAAA,CAAA,uJAAA,CAAA,qJNg1BR,CMx0BE,SACE,kMCxBoB,CDyBpB,mLN00BJ,CMv0BE,wBAEE,gMCXkB,CDYlB,iLNy0BJ,CMt0BE,eACE,iKNw0BJ,CMt0BI,oBACE,uMNw0BN,CM1zBI,4FAGE,2KCUmB,CDTnB,iKN8zBN,CMzzBI,iCAGE,yKCWiB,CDVjB,+JNyzBN,CMrzBE,iBACE,iMAAA,CACA,uLAAA,CACA,mMAAA,CACA,yLAAA,CACA,oMAAA,CACA,0LNuzBJ,CACF","file":"base.css"}
1
+ {"version":3,"sourceRoot":null,"mappings":"AESI,mBCiMF,0zEG3KI,qHAAA,uHAAA,+GAAA,yFAAA,+hDFIF,mGGxBF,uCJ+LA,iMAIE,qkEG/KE,wfAAA,ofAAA,sVAAA,0gBAAA,wiECpBJ,uCJmME,oLAQA,4jFGvLE,6IAAA,+IAAA,uIAAA,iHAAA,+oEFIF,mJGxBF,uCJ2ME,6MQd8B,6wDAW5B,2PAO4B,gJAKG,2hFAa7B,uWE7DyB,0jEPhJ3B,keAAA,8dAAA,gUAAA,ofAAA,4+CCpBJ,uCMoK+B,yKAI7B,8BL/GF,uGM+MgC,shBAIU,mTAMD,smCAOF,wyBAQrC,yCAKA,qjCAWuC,w+BAME,w1CAQ3C,kEAMkC,oDZvUhC,oBC8NF,2oBGxMI,wxBAAA,sxBAAA,irBAAA,qyBAAA,ihEISF,ohCAAA,gkCAAA,0iCPmMA,0dG5ME,+oBAAA,yoBAAA,uhBAAA,sqBAAA,suEHoNF,upBGpNE,gzBAAA,8yBAAA,ysBAAA,6zBAAA,ioFISF,giCAAA,4kCAAA,sjCCgN8B,+3BAQ9B,mOAME,qYAIE,0SAJF,wYAIE,6SAJF,saAIE,2UAJF,qYAIE,0SDlOJ,q5BAAA,+7BAAA,06BCmP8B,iOAK5B,seDxPF,qbAAA,ycAAA,+bAAA,q3BAAA,25BAAA,w4BCkRiC,4uBAO/B,ybAIE,8NAJF,0bAIE,+NAJF,ocAIE,yOAJF,ybAIE,8ND7RJ,olBAAA,8mBAAA,imBAAA,wbAAA,4cAAA,kcAAA,w3BAAA,85BAAA,24BGmJ6B,+cP5J3B,ynBAAA,mnBAAA,igBAAA,gpBAAA,0qDISF,wzCAAA,g3CAAA,i1CAAQ,yzCAAA,i3CAAA,k1CIqU+B,6aAMF,wbAQrC,yPAIuC,kSAKE,oSAarC,kdAMA,sdAaA,+cAQA,mdAeA,2bAMA,+bAQJ","sources":["dist/css/base.css","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/theme/typography/_defaults.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/mixins/_layer.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/base/button/_index.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/base/button/_mixins.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/base/button/_variables.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/mixins/_state.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/mixins/_animation.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/base/link/_mixins.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/base/link/_variables.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/mixins/_theme.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/base/form/_index.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/base/form/_variables.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/base/link/_index.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/base/table/_index.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/base/table/_variables.scss"],"sourcesContent":["/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */\n@layer graupl.base {\n .button {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--graupl-button-min-width, 44px);\n min-height: var(--graupl-button-min-height, 44px);\n padding: var(--graupl-button-padding, var(--graupl-button-padding-y, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))) var(--graupl-button-padding-x, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))));\n transform: var(--graupl-button-transform, none);\n transition: var(--graupl-button-transition, background var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease), color var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease), transform var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease));\n border-width: var(--graupl-button-border-width, var(--graupl-button-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))) var(--graupl-button-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))) var(--graupl-button-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))) var(--graupl-button-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem))));\n border-style: var(--graupl-button-border-style, var(--graupl-button-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-button-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-button-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-button-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n border-radius: var(--graupl-button-border-radius, var(--graupl-button-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-button-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-button-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-button-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))));\n font-size: var(--graupl-button-font-size, var(--graupl-font-base, calc(1 * var(--graupl-font-size-base, 1rem))));\n cursor: pointer;\n }\n .button:visited {\n transform: var(--graupl-button-visited-transform, var(--graupl-button-transform, none));\n }\n .button.visited {\n transform: var(--graupl-button-visited-transform, var(--graupl-button-transform, none));\n }\n .button:focus-visible {\n transform: var(--graupl-button-focus-transform, var(--graupl-button-transform, none));\n }\n .button.focus {\n transform: var(--graupl-button-focus-transform, var(--graupl-button-transform, none));\n }\n .button:hover {\n transform: var(--graupl-button-hover-transform, var(--graupl-button-transform, none));\n }\n .button.hover {\n transform: var(--graupl-button-hover-transform, var(--graupl-button-transform, none));\n }\n .button:active {\n transform: var(--graupl-button-active-transform, scale(0.95));\n }\n .button.active {\n transform: var(--graupl-button-active-transform, scale(0.95));\n }\n .button:disabled {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button:disabled:visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button:disabled.visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button:disabled:focus-visible {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button:disabled.focus {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button:disabled:hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button:disabled.hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button:disabled:active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button:disabled.active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button:disabled[aria-selected=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button:disabled.selected {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button:disabled[aria-current=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button:disabled.current {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button[disabled] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button[disabled]:visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button[disabled].visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button[disabled]:focus-visible {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button[disabled].focus {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button[disabled]:hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button[disabled].hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button[disabled]:active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button[disabled].active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button[disabled][aria-selected=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button[disabled].selected {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button[disabled][aria-current=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button[disabled].current {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button[aria-disabled=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button[aria-disabled=true]:visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button[aria-disabled=true].visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button[aria-disabled=true]:focus-visible {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button[aria-disabled=true].focus {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button[aria-disabled=true]:hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button[aria-disabled=true].hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button[aria-disabled=true]:active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button[aria-disabled=true].active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button[aria-disabled=true][aria-selected=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button[aria-disabled=true].selected {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button[aria-disabled=true][aria-current=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button[aria-disabled=true].current {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button.disabled {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button.disabled:visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button.disabled.visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button.disabled:focus-visible {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button.disabled.focus {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button.disabled:hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button.disabled.hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button.disabled:active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button.disabled.active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button.disabled[aria-selected=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button.disabled.selected {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button.disabled[aria-current=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button.disabled.current {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .button:disabled {\n cursor: not-allowed;\n }\n .button[disabled] {\n cursor: not-allowed;\n }\n .button[aria-disabled=true] {\n cursor: not-allowed;\n }\n .button.disabled {\n cursor: not-allowed;\n }\n @media (prefers-reduced-motion: reduce) {\n .button {\n --graupl-button-transition: var(--graupl-button-transition-reduced-motion, background var(--graupl-transition-timing-function, ease), color var(--graupl-transition-timing-function, ease));\n }\n }\n .button.link {\n min-width: var(--graupl-link-min-width, auto);\n min-height: var(--graupl-link-min-height, auto);\n padding: var(--graupl-link-padding, var(--graupl-link-padding-y, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))) var(--graupl-link-padding-x, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))));\n transform: var(--graupl-link-transform, none);\n transition: var(--graupl-link-transition, background var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease), color var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease), transform var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease));\n border-width: var(--graupl-link-border-width, var(--graupl-link-border-top-width, 0) var(--graupl-link-border-right-width, 0) var(--graupl-link-border-bottom-width, 0) var(--graupl-link-border-left-width, 0));\n border-style: var(--graupl-link-border-style, var(--graupl-link-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-link-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-link-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-link-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n border-radius: var(--graupl-link-border-radius, var(--graupl-link-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-link-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-link-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-link-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))));\n text-decoration: var(--graupl-link-text-decoration, underline);\n text-decoration-style: var(--graupl-link-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link:visited {\n transform: var(--graupl-link-visited-transform, var(--graupl-link-transform, none));\n text-decoration: var(--graupl-link-visited-text-decoration, var(--graupl-link-text-decoration, underline));\n text-decoration-style: var(--graupl-link-visited-text-decoration-style, var(--graupl-link-text-decoration-style, solid));\n text-decoration-thickness: var(--graupl-link-visited-text-decoration-thickness, var(--graupl-link-text-decoration-thickness, var(--graupl-border-width, 0.125rem)));\n }\n .button.link.visited {\n transform: var(--graupl-link-visited-transform, var(--graupl-link-transform, none));\n text-decoration: var(--graupl-link-visited-text-decoration, var(--graupl-link-text-decoration, underline));\n text-decoration-style: var(--graupl-link-visited-text-decoration-style, var(--graupl-link-text-decoration-style, solid));\n text-decoration-thickness: var(--graupl-link-visited-text-decoration-thickness, var(--graupl-link-text-decoration-thickness, var(--graupl-border-width, 0.125rem)));\n }\n .button.link:focus-visible {\n transform: var(--graupl-link-focus-transform, var(--graupl-link-transform, none));\n text-decoration: var(--graupl-link-focus-text-decoration, var(--graupl-link-text-decoration, underline));\n text-decoration-style: var(--graupl-link-focus-text-decoration-style, var(--graupl-link-text-decoration-style, solid));\n text-decoration-thickness: var(--graupl-link-focus-text-decoration-thickness, var(--graupl-link-text-decoration-thickness, var(--graupl-border-width, 0.125rem)));\n }\n .button.link.focus {\n transform: var(--graupl-link-focus-transform, var(--graupl-link-transform, none));\n text-decoration: var(--graupl-link-focus-text-decoration, var(--graupl-link-text-decoration, underline));\n text-decoration-style: var(--graupl-link-focus-text-decoration-style, var(--graupl-link-text-decoration-style, solid));\n text-decoration-thickness: var(--graupl-link-focus-text-decoration-thickness, var(--graupl-link-text-decoration-thickness, var(--graupl-border-width, 0.125rem)));\n }\n .button.link:hover {\n transform: var(--graupl-link-hover-transform, none);\n text-decoration: var(--graupl-link-hover-text-decoration, underline);\n text-decoration-style: var(--graupl-link-hover-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-hover-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link.hover {\n transform: var(--graupl-link-hover-transform, none);\n text-decoration: var(--graupl-link-hover-text-decoration, underline);\n text-decoration-style: var(--graupl-link-hover-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-hover-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link:active {\n transform: var(--graupl-link-active-transform, var(--graupl-link-hover-transform, none));\n text-decoration: var(--graupl-link-active-text-decoration, var(--graupl-link-hover-text-decoration, underline));\n text-decoration-style: var(--graupl-link-active-text-decoration-style, var(--graupl-link-hover-text-decoration-style, solid));\n text-decoration-thickness: var(--graupl-link-active-text-decoration-thickness, var(--graupl-link-hover-text-decoration-thickness, var(--graupl-border-width, 0.125rem)));\n }\n .button.link.active {\n transform: var(--graupl-link-active-transform, var(--graupl-link-hover-transform, none));\n text-decoration: var(--graupl-link-active-text-decoration, var(--graupl-link-hover-text-decoration, underline));\n text-decoration-style: var(--graupl-link-active-text-decoration-style, var(--graupl-link-hover-text-decoration-style, solid));\n text-decoration-thickness: var(--graupl-link-active-text-decoration-thickness, var(--graupl-link-hover-text-decoration-thickness, var(--graupl-border-width, 0.125rem)));\n }\n .button.link:disabled {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link:disabled:visited {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link:disabled.visited {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link:disabled:focus-visible {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link:disabled.focus {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link:disabled:hover {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link:disabled.hover {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link:disabled:active {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link:disabled.active {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link:disabled[aria-selected=true] {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link:disabled.selected {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link:disabled[aria-current=true] {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link:disabled.current {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link[disabled] {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link[disabled]:visited {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link[disabled].visited {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link[disabled]:focus-visible {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link[disabled].focus {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link[disabled]:hover {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link[disabled].hover {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link[disabled]:active {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link[disabled].active {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link[disabled][aria-selected=true] {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link[disabled].selected {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link[disabled][aria-current=true] {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link[disabled].current {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link[aria-disabled=true] {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link[aria-disabled=true]:visited {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link[aria-disabled=true].visited {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link[aria-disabled=true]:focus-visible {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link[aria-disabled=true].focus {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link[aria-disabled=true]:hover {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link[aria-disabled=true].hover {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link[aria-disabled=true]:active {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link[aria-disabled=true].active {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link[aria-disabled=true][aria-selected=true] {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link[aria-disabled=true].selected {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link[aria-disabled=true][aria-current=true] {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link[aria-disabled=true].current {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link.disabled {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link.disabled:visited {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link.disabled.visited {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link.disabled:focus-visible {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link.disabled.focus {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link.disabled:hover {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link.disabled.hover {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link.disabled:active {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link.disabled.active {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link.disabled[aria-selected=true] {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link.disabled.selected {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link.disabled[aria-current=true] {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .button.link.disabled.current {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n @media (prefers-reduced-motion: reduce) {\n .button.link {\n transition: var(--graupl-link-transition-reduced-motion, background var(--graupl-transition-timing-function, ease), color var(--graupl-transition-timing-function, ease));\n }\n }\n a.button:not(.link) {\n --graupl-link-text-decoration: none;\n --graupl-link-visited-text-decoration: none;\n --graupl-link-focus-text-decoration: none;\n --graupl-link-hover-text-decoration: none;\n --graupl-link-active-text-decoration: none;\n --graupl-link-disabled-text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--graupl-button-min-width, 44px);\n min-height: var(--graupl-button-min-height, 44px);\n padding: var(--graupl-button-padding, var(--graupl-button-padding-y, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))) var(--graupl-button-padding-x, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))));\n transform: var(--graupl-button-transform, none);\n transition: var(--graupl-button-transition, background var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease), color var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease), transform var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease));\n border-width: var(--graupl-button-border-width, var(--graupl-button-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))) var(--graupl-button-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))) var(--graupl-button-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))) var(--graupl-button-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem))));\n border-style: var(--graupl-button-border-style, var(--graupl-button-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-button-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-button-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-button-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n border-radius: var(--graupl-button-border-radius, var(--graupl-button-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-button-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-button-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-button-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))));\n font-size: var(--graupl-button-font-size, var(--graupl-font-base, calc(1 * var(--graupl-font-size-base, 1rem))));\n cursor: pointer;\n }\n a.button:not(.link):visited {\n transform: var(--graupl-button-visited-transform, var(--graupl-button-transform, none));\n }\n a.button:not(.link).visited {\n transform: var(--graupl-button-visited-transform, var(--graupl-button-transform, none));\n }\n a.button:not(.link):focus-visible {\n transform: var(--graupl-button-focus-transform, var(--graupl-button-transform, none));\n }\n a.button:not(.link).focus {\n transform: var(--graupl-button-focus-transform, var(--graupl-button-transform, none));\n }\n a.button:not(.link):hover {\n transform: var(--graupl-button-hover-transform, var(--graupl-button-transform, none));\n }\n a.button:not(.link).hover {\n transform: var(--graupl-button-hover-transform, var(--graupl-button-transform, none));\n }\n a.button:not(.link):active {\n transform: var(--graupl-button-active-transform, scale(0.95));\n }\n a.button:not(.link).active {\n transform: var(--graupl-button-active-transform, scale(0.95));\n }\n a.button:not(.link):disabled {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link):disabled:visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link):disabled.visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link):disabled:focus-visible {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link):disabled.focus {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link):disabled:hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link):disabled.hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link):disabled:active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link):disabled.active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link):disabled[aria-selected=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link):disabled.selected {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link):disabled[aria-current=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link):disabled.current {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link)[disabled] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link)[disabled]:visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link)[disabled].visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link)[disabled]:focus-visible {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link)[disabled].focus {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link)[disabled]:hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link)[disabled].hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link)[disabled]:active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link)[disabled].active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link)[disabled][aria-selected=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link)[disabled].selected {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link)[disabled][aria-current=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link)[disabled].current {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link)[aria-disabled=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link)[aria-disabled=true]:visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link)[aria-disabled=true].visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link)[aria-disabled=true]:focus-visible {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link)[aria-disabled=true].focus {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link)[aria-disabled=true]:hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link)[aria-disabled=true].hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link)[aria-disabled=true]:active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link)[aria-disabled=true].active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link)[aria-disabled=true][aria-selected=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link)[aria-disabled=true].selected {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link)[aria-disabled=true][aria-current=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link)[aria-disabled=true].current {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link).disabled {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link).disabled:visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link).disabled.visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link).disabled:focus-visible {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link).disabled.focus {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link).disabled:hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link).disabled.hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link).disabled:active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link).disabled.active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link).disabled[aria-selected=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link).disabled.selected {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link).disabled[aria-current=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link).disabled.current {\n transform: var(--graupl-button-disabled-transform, none);\n }\n a.button:not(.link):disabled {\n cursor: not-allowed;\n }\n a.button:not(.link)[disabled] {\n cursor: not-allowed;\n }\n a.button:not(.link)[aria-disabled=true] {\n cursor: not-allowed;\n }\n a.button:not(.link).disabled {\n cursor: not-allowed;\n }\n @media (prefers-reduced-motion: reduce) {\n a.button:not(.link) {\n --graupl-button-transition: var(--graupl-button-transition-reduced-motion, background var(--graupl-transition-timing-function, ease), color var(--graupl-transition-timing-function, ease));\n }\n }\n}\n@layer graupl.theme {\n .button {\n border-color: var(--graupl-button-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n background: var(--graupl-button-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n }\n .button:visited {\n border-color: var(--graupl-button-visited-border-color, var(--graupl-button-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n background: var(--graupl-button-visited-background, var(--graupl-button-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n color: var(--graupl-button-visited-color, var(--graupl-button-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n }\n .button.visited {\n border-color: var(--graupl-button-visited-border-color, var(--graupl-button-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n background: var(--graupl-button-visited-background, var(--graupl-button-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n color: var(--graupl-button-visited-color, var(--graupl-button-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n }\n .button:focus-visible {\n border-color: var(--graupl-button-focus-border-color, var(--graupl-button-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n background: var(--graupl-button-focus-background, var(--graupl-button-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n color: var(--graupl-button-focus-color, var(--graupl-button-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n }\n .button.focus {\n border-color: var(--graupl-button-focus-border-color, var(--graupl-button-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n background: var(--graupl-button-focus-background, var(--graupl-button-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n color: var(--graupl-button-focus-color, var(--graupl-button-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n }\n .button:hover {\n border-color: var(--graupl-button-hover-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n background: var(--graupl-button-hover-background, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n color: var(--graupl-button-hover-color, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n }\n .button.hover {\n border-color: var(--graupl-button-hover-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n background: var(--graupl-button-hover-background, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n color: var(--graupl-button-hover-color, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n }\n .button:active {\n border-color: var(--graupl-button-active-border-color, var(--graupl-button-hover-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n background: var(--graupl-button-active-background, var(--graupl-button-hover-background, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n color: var(--graupl-button-active-color, var(--graupl-button-hover-color, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n }\n .button.active {\n border-color: var(--graupl-button-active-border-color, var(--graupl-button-hover-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n background: var(--graupl-button-active-background, var(--graupl-button-hover-background, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n color: var(--graupl-button-active-color, var(--graupl-button-hover-color, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n }\n .button:disabled {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button:disabled:visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button:disabled.visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button:disabled:focus-visible {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button:disabled.focus {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button:disabled:hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button:disabled.hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button:disabled:active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button:disabled.active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button:disabled[aria-selected=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button:disabled.selected {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button:disabled[aria-current=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button:disabled.current {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button[disabled] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button[disabled]:visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button[disabled].visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button[disabled]:focus-visible {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button[disabled].focus {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button[disabled]:hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button[disabled].hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button[disabled]:active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button[disabled].active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button[disabled][aria-selected=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button[disabled].selected {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button[disabled][aria-current=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button[disabled].current {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button[aria-disabled=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button[aria-disabled=true]:visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button[aria-disabled=true].visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button[aria-disabled=true]:focus-visible {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button[aria-disabled=true].focus {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button[aria-disabled=true]:hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button[aria-disabled=true].hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button[aria-disabled=true]:active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button[aria-disabled=true].active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button[aria-disabled=true][aria-selected=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button[aria-disabled=true].selected {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button[aria-disabled=true][aria-current=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button[aria-disabled=true].current {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button.disabled {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button.disabled:visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button.disabled.visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button.disabled:focus-visible {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button.disabled.focus {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button.disabled:hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button.disabled.hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button.disabled:active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button.disabled.active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button.disabled[aria-selected=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button.disabled.selected {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button.disabled[aria-current=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button.disabled.current {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .button.primary {\n --graupl-button-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-button-border-color: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n --graupl-button-hover-color: var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));\n --graupl-button-hover-background: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n --graupl-button-hover-border-color: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n --graupl-button-disabled-color: var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))));\n --graupl-button-disabled-border-color: var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))));\n }\n .button.secondary {\n --graupl-button-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-button-border-color: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n --graupl-button-hover-color: var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))));\n --graupl-button-hover-background: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n --graupl-button-hover-border-color: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n --graupl-button-disabled-color: var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))));\n --graupl-button-disabled-border-color: var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))));\n }\n .button.tertiary {\n --graupl-button-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-button-border-color: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n --graupl-button-hover-color: var(--graupl-theme-active--tertiary--100, var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%))));\n --graupl-button-hover-background: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n --graupl-button-hover-border-color: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n --graupl-button-disabled-color: var(--graupl-theme-active--tertiary--200, var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%))));\n --graupl-button-disabled-border-color: var(--graupl-theme-active--tertiary--200, var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%))));\n }\n .button.link {\n border-color: var(--graupl-link-border-color, transparent);\n background: var(--graupl-link-background, transparent);\n color: var(--graupl-link-color, var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%)))));\n text-decoration-color: var(--graupl-link-text-decoration-color, var(--graupl-link-color, var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))))));\n }\n .button.link:visited {\n border-color: var(--graupl-link-visited-border-color, var(--graupl-link-border-color, transparent));\n background: var(--graupl-link-visited-background, var(--graupl-link-background, transparent));\n color: var(--graupl-link-visited-color, var(--graupl-link-color, var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))))));\n text-decoration-color: var(--graupl-link-visited-text-decoration-color, var(--graupl-link-visited-color, var(--graupl-link-color, var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%)))))));\n }\n .button.link.visited {\n border-color: var(--graupl-link-visited-border-color, var(--graupl-link-border-color, transparent));\n background: var(--graupl-link-visited-background, var(--graupl-link-background, transparent));\n color: var(--graupl-link-visited-color, var(--graupl-link-color, var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))))));\n text-decoration-color: var(--graupl-link-visited-text-decoration-color, var(--graupl-link-visited-color, var(--graupl-link-color, var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%)))))));\n }\n .button.link:focus-visible {\n border-color: var(--graupl-link-focus-border-color, var(--graupl-link-border-color, transparent));\n background: var(--graupl-link-focus-background, var(--graupl-link-background, transparent));\n color: var(--graupl-link-focus-color, var(--graupl-link-color, var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))))));\n text-decoration-color: var(--graupl-link-focus-text-decoration-color, var(--graupl-link-focus-color, var(--graupl-link-color, var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%)))))));\n }\n .button.link.focus {\n border-color: var(--graupl-link-focus-border-color, var(--graupl-link-border-color, transparent));\n background: var(--graupl-link-focus-background, var(--graupl-link-background, transparent));\n color: var(--graupl-link-focus-color, var(--graupl-link-color, var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))))));\n text-decoration-color: var(--graupl-link-focus-text-decoration-color, var(--graupl-link-focus-color, var(--graupl-link-color, var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%)))))));\n }\n .button.link:hover {\n border-color: var(--graupl-link-hover-border-color, transparent);\n background: var(--graupl-link-hover-background, transparent);\n color: var(--graupl-link-hover-color, var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%)))));\n text-decoration-color: var(--graupl-link-hover-text-decoration-color, var(--graupl-link-hover-color, var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))))));\n }\n .button.link.hover {\n border-color: var(--graupl-link-hover-border-color, transparent);\n background: var(--graupl-link-hover-background, transparent);\n color: var(--graupl-link-hover-color, var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%)))));\n text-decoration-color: var(--graupl-link-hover-text-decoration-color, var(--graupl-link-hover-color, var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))))));\n }\n .button.link:active {\n border-color: var(--graupl-link-active-border-color, var(--graupl-link-hover-border-color, transparent));\n background: var(--graupl-link-active-background, var(--graupl-link-hover-background, transparent));\n color: var(--graupl-link-active-color, var(--graupl-link-hover-color, var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))))));\n text-decoration-color: var(--graupl-link-active-text-decoration-color, var(--graupl-link-active-color, var(--graupl-link-hover-color, var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%)))))));\n }\n .button.link.active {\n border-color: var(--graupl-link-active-border-color, var(--graupl-link-hover-border-color, transparent));\n background: var(--graupl-link-active-background, var(--graupl-link-hover-background, transparent));\n color: var(--graupl-link-active-color, var(--graupl-link-hover-color, var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))))));\n text-decoration-color: var(--graupl-link-active-text-decoration-color, var(--graupl-link-active-color, var(--graupl-link-hover-color, var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%)))))));\n }\n .button.link:disabled {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link:disabled:visited {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link:disabled.visited {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link:disabled:focus-visible {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link:disabled.focus {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link:disabled:hover {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link:disabled.hover {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link:disabled:active {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link:disabled.active {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link:disabled[aria-selected=true] {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link:disabled.selected {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link:disabled[aria-current=true] {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link:disabled.current {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link[disabled] {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link[disabled]:visited {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link[disabled].visited {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link[disabled]:focus-visible {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link[disabled].focus {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link[disabled]:hover {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link[disabled].hover {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link[disabled]:active {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link[disabled].active {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link[disabled][aria-selected=true] {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link[disabled].selected {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link[disabled][aria-current=true] {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link[disabled].current {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link[aria-disabled=true] {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link[aria-disabled=true]:visited {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link[aria-disabled=true].visited {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link[aria-disabled=true]:focus-visible {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link[aria-disabled=true].focus {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link[aria-disabled=true]:hover {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link[aria-disabled=true].hover {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link[aria-disabled=true]:active {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link[aria-disabled=true].active {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link[aria-disabled=true][aria-selected=true] {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link[aria-disabled=true].selected {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link[aria-disabled=true][aria-current=true] {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link[aria-disabled=true].current {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link.disabled {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link.disabled:visited {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link.disabled.visited {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link.disabled:focus-visible {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link.disabled.focus {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link.disabled:hover {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link.disabled.hover {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link.disabled:active {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link.disabled.active {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link.disabled[aria-selected=true] {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link.disabled.selected {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link.disabled[aria-current=true] {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n .button.link.disabled.current {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a.button:not(.link) {\n border-color: var(--graupl-button-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n background: var(--graupl-button-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n }\n a.button:not(.link):visited {\n border-color: var(--graupl-button-visited-border-color, var(--graupl-button-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n background: var(--graupl-button-visited-background, var(--graupl-button-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n color: var(--graupl-button-visited-color, var(--graupl-button-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n }\n a.button:not(.link).visited {\n border-color: var(--graupl-button-visited-border-color, var(--graupl-button-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n background: var(--graupl-button-visited-background, var(--graupl-button-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n color: var(--graupl-button-visited-color, var(--graupl-button-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n }\n a.button:not(.link):focus-visible {\n border-color: var(--graupl-button-focus-border-color, var(--graupl-button-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n background: var(--graupl-button-focus-background, var(--graupl-button-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n color: var(--graupl-button-focus-color, var(--graupl-button-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n }\n a.button:not(.link).focus {\n border-color: var(--graupl-button-focus-border-color, var(--graupl-button-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n background: var(--graupl-button-focus-background, var(--graupl-button-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n color: var(--graupl-button-focus-color, var(--graupl-button-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n }\n a.button:not(.link):hover {\n border-color: var(--graupl-button-hover-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n background: var(--graupl-button-hover-background, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n color: var(--graupl-button-hover-color, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n }\n a.button:not(.link).hover {\n border-color: var(--graupl-button-hover-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n background: var(--graupl-button-hover-background, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n color: var(--graupl-button-hover-color, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n }\n a.button:not(.link):active {\n border-color: var(--graupl-button-active-border-color, var(--graupl-button-hover-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n background: var(--graupl-button-active-background, var(--graupl-button-hover-background, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n color: var(--graupl-button-active-color, var(--graupl-button-hover-color, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n }\n a.button:not(.link).active {\n border-color: var(--graupl-button-active-border-color, var(--graupl-button-hover-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n background: var(--graupl-button-active-background, var(--graupl-button-hover-background, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n color: var(--graupl-button-active-color, var(--graupl-button-hover-color, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n }\n a.button:not(.link):disabled {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link):disabled:visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link):disabled.visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link):disabled:focus-visible {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link):disabled.focus {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link):disabled:hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link):disabled.hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link):disabled:active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link):disabled.active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link):disabled[aria-selected=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link):disabled.selected {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link):disabled[aria-current=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link):disabled.current {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link)[disabled] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link)[disabled]:visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link)[disabled].visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link)[disabled]:focus-visible {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link)[disabled].focus {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link)[disabled]:hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link)[disabled].hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link)[disabled]:active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link)[disabled].active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link)[disabled][aria-selected=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link)[disabled].selected {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link)[disabled][aria-current=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link)[disabled].current {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link)[aria-disabled=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link)[aria-disabled=true]:visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link)[aria-disabled=true].visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link)[aria-disabled=true]:focus-visible {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link)[aria-disabled=true].focus {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link)[aria-disabled=true]:hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link)[aria-disabled=true].hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link)[aria-disabled=true]:active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link)[aria-disabled=true].active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link)[aria-disabled=true][aria-selected=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link)[aria-disabled=true].selected {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link)[aria-disabled=true][aria-current=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link)[aria-disabled=true].current {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link).disabled {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link).disabled:visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link).disabled.visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link).disabled:focus-visible {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link).disabled.focus {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link).disabled:hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link).disabled.hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link).disabled:active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link).disabled.active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link).disabled[aria-selected=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link).disabled.selected {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link).disabled[aria-current=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link).disabled.current {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n a.button:not(.link).primary {\n --graupl-button-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-button-border-color: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n --graupl-button-hover-color: var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));\n --graupl-button-hover-background: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n --graupl-button-hover-border-color: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n --graupl-button-disabled-color: var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))));\n --graupl-button-disabled-border-color: var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))));\n }\n a.button:not(.link).secondary {\n --graupl-button-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-button-border-color: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n --graupl-button-hover-color: var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))));\n --graupl-button-hover-background: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n --graupl-button-hover-border-color: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n --graupl-button-disabled-color: var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))));\n --graupl-button-disabled-border-color: var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))));\n }\n a.button:not(.link).tertiary {\n --graupl-button-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-button-border-color: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n --graupl-button-hover-color: var(--graupl-theme-active--tertiary--100, var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%))));\n --graupl-button-hover-background: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n --graupl-button-hover-border-color: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n --graupl-button-disabled-color: var(--graupl-theme-active--tertiary--200, var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%))));\n --graupl-button-disabled-border-color: var(--graupl-theme-active--tertiary--200, var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%))));\n }\n}\n@layer graupl.base {\n input,\n textarea,\n select {\n padding: var(--graupl-input-padding, var(--graupl-input-padding-y, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))) var(--graupl-input-padding-x, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))));\n border-width: var(--graupl-input-border-width, var(--graupl-input-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))) var(--graupl-input-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))) var(--graupl-input-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))) var(--graupl-input-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem))));\n border-style: var(--graupl-input-border-style, var(--graupl-input-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-input-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-input-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-input-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n border-radius: var(--graupl-input-border-radius, var(--graupl-input-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-input-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-input-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-input-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))));\n font-size: var(--graupl-input-font-size, var(--graupl-font-base, calc(1 * var(--graupl-font-size-base, 1rem))));\n }\n input:disabled,\n textarea:disabled,\n select:disabled {\n cursor: not-allowed;\n }\n input[disabled],\n textarea[disabled],\n select[disabled] {\n cursor: not-allowed;\n }\n input[aria-disabled=true],\n textarea[aria-disabled=true],\n select[aria-disabled=true] {\n cursor: not-allowed;\n }\n input.disabled,\n textarea.disabled,\n select.disabled {\n cursor: not-allowed;\n }\n label {\n font-size: var(--graupl-label-font-size, var(--graupl-input-font-size, var(--graupl-font-base, calc(1 * var(--graupl-font-size-base, 1rem)))));\n }\n fieldset {\n display: flex;\n flex-flow: var(--graupl-fieldset-direction, column) wrap;\n gap: var(--graupl-fieldset-gap, var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))));\n padding: var(--graupl-fieldset-padding, var(--graupl-fieldset-padding-y, var(--graupl-input-padding-y, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem))))) var(--graupl-fieldset-padding-x, var(--graupl-input-padding-x, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n border-width: var(--graupl-fieldset-border-width, var(--graupl-fieldset-border-top-width, var(--graupl-input-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem)))) var(--graupl-fieldset-border-right-width, var(--graupl-input-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem)))) var(--graupl-fieldset-border-bottom-width, var(--graupl-input-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem)))) var(--graupl-fieldset-border-left-width, var(--graupl-input-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem)))));\n border-style: var(--graupl-fieldset-border-style, var(--graupl-fieldset-border-top-style, var(--graupl-input-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid)))) var(--graupl-fieldset-border-right-style, var(--graupl-input-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid)))) var(--graupl-fieldset-border-bottom-style, var(--graupl-input-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid)))) var(--graupl-fieldset-border-left-style, var(--graupl-input-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid)))));\n border-radius: var(--graupl-fieldset-border-radius, var(--graupl-fieldset-border-top-left-radius, var(--graupl-input-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem)))) var(--graupl-fieldset-border-top-right-radius, var(--graupl-input-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem)))) var(--graupl-fieldset-border-bottom-right-radius, var(--graupl-input-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem)))) var(--graupl-fieldset-border-bottom-left-radius, var(--graupl-input-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem)))));\n font-size: var(--graupl-fieldset-font-size, var(--graupl-input-font-size, var(--graupl-font-base, calc(1 * var(--graupl-font-size-base, 1rem)))));\n }\n fieldset:disabled input,\n fieldset:disabled textarea,\n fieldset:disabled select {\n cursor: not-allowed;\n }\n fieldset[disabled] input,\n fieldset[disabled] textarea,\n fieldset[disabled] select {\n cursor: not-allowed;\n }\n fieldset[aria-disabled=true] input,\n fieldset[aria-disabled=true] textarea,\n fieldset[aria-disabled=true] select {\n cursor: not-allowed;\n }\n fieldset.disabled input,\n fieldset.disabled textarea,\n fieldset.disabled select {\n cursor: not-allowed;\n }\n}\n@layer graupl.theme {\n input,\n textarea,\n select {\n border-color: var(--graupl-input-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n background: var(--graupl-input-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-input-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n accent-color: var(--graupl-input-accent-color, var(--graupl-input-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n }\n input::placeholder,\n textarea::placeholder,\n select::placeholder {\n color: var(--graupl-input-placeholder-color, var(--graupl-theme-active--secondary--600, var(--graupl-theme-light--secondary--600, var(--graupl-secondary--600, hsl(235, 15%, 45%)))));\n }\n input:disabled,\n textarea:disabled,\n select:disabled {\n border-color: var(--graupl-input-disabled-border-color, var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%)))));\n color: var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%)))));\n }\n input:disabled::placeholder,\n textarea:disabled::placeholder,\n select:disabled::placeholder {\n color: var(--graupl-input-placeholder-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n input[disabled],\n textarea[disabled],\n select[disabled] {\n border-color: var(--graupl-input-disabled-border-color, var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%)))));\n color: var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%)))));\n }\n input[disabled]::placeholder,\n textarea[disabled]::placeholder,\n select[disabled]::placeholder {\n color: var(--graupl-input-placeholder-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n input[aria-disabled=true],\n textarea[aria-disabled=true],\n select[aria-disabled=true] {\n border-color: var(--graupl-input-disabled-border-color, var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%)))));\n color: var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%)))));\n }\n input[aria-disabled=true]::placeholder,\n textarea[aria-disabled=true]::placeholder,\n select[aria-disabled=true]::placeholder {\n color: var(--graupl-input-placeholder-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n input.disabled,\n textarea.disabled,\n select.disabled {\n border-color: var(--graupl-input-disabled-border-color, var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%)))));\n color: var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%)))));\n }\n input.disabled::placeholder,\n textarea.disabled::placeholder,\n select.disabled::placeholder {\n color: var(--graupl-input-placeholder-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n input.primary,\n textarea.primary,\n select.primary {\n --graupl-input-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-input-background: var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));\n --graupl-input-border-color: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n --graupl-input-placeholder-color: var(--graupl-theme-active--primary--600, var(--graupl-theme-light--primary--600, var(--graupl-primary--600, hsl(219, 75%, 45%))));\n --graupl-input-disabled-color: var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))));\n --graupl-input-disabled-border-color: var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))));\n }\n input.secondary,\n textarea.secondary,\n select.secondary {\n --graupl-input-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-input-background: var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))));\n --graupl-input-border-color: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n --graupl-input-placeholder-color: var(--graupl-theme-active--secondary--600, var(--graupl-theme-light--secondary--600, var(--graupl-secondary--600, hsl(235, 15%, 45%))));\n --graupl-input-disabled-color: var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))));\n --graupl-input-disabled-border-color: var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))));\n }\n input.tertiary,\n textarea.tertiary,\n select.tertiary {\n --graupl-input-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-input-background: var(--graupl-theme-active--tertiary--100, var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%))));\n --graupl-input-border-color: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n --graupl-input-placeholder-color: var(--graupl-theme-active--tertiary--600, var(--graupl-theme-light--tertiary--600, var(--graupl-tertiary--600, hsl(340, 60%, 45%))));\n --graupl-input-disabled-color: var(--graupl-theme-active--tertiary--200, var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%))));\n --graupl-input-disabled-border-color: var(--graupl-theme-active--tertiary--200, var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%))));\n }\n label {\n color: var(--graupl-label-color, var(--graupl-input-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n }\n label:has(+ input:disabled,\n + textarea:disabled,\n + select:disabled) {\n color: var(--graupl-label-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n label:has(+ input[disabled],\n + textarea[disabled],\n + select[disabled]) {\n color: var(--graupl-label-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n label:has(+ input[aria-disabled=true],\n + textarea[aria-disabled=true],\n + select[aria-disabled=true]) {\n color: var(--graupl-label-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n label:has(+ input.disabled,\n + textarea.disabled,\n + select.disabled) {\n color: var(--graupl-label-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n label.primary {\n --graupl-label-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-label-background: var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));\n --graupl-label-border-color: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n }\n label.secondary {\n --graupl-label-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-label-background: var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))));\n --graupl-label-border-color: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n }\n label.tertiary {\n --graupl-label-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-label-background: var(--graupl-theme-active--tertiary--100, var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%))));\n --graupl-label-border-color: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n }\n label.primary {\n --graupl-input-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-input-background: var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));\n --graupl-input-border-color: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n --graupl-input-placeholder-color: var(--graupl-theme-active--primary--600, var(--graupl-theme-light--primary--600, var(--graupl-primary--600, hsl(219, 75%, 45%))));\n --graupl-input-disabled-color: var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))));\n --graupl-input-disabled-border-color: var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))));\n }\n label.secondary {\n --graupl-input-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-input-background: var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))));\n --graupl-input-border-color: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n --graupl-input-placeholder-color: var(--graupl-theme-active--secondary--600, var(--graupl-theme-light--secondary--600, var(--graupl-secondary--600, hsl(235, 15%, 45%))));\n --graupl-input-disabled-color: var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))));\n --graupl-input-disabled-border-color: var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))));\n }\n label.tertiary {\n --graupl-input-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-input-background: var(--graupl-theme-active--tertiary--100, var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%))));\n --graupl-input-border-color: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n --graupl-input-placeholder-color: var(--graupl-theme-active--tertiary--600, var(--graupl-theme-light--tertiary--600, var(--graupl-tertiary--600, hsl(340, 60%, 45%))));\n --graupl-input-disabled-color: var(--graupl-theme-active--tertiary--200, var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%))));\n --graupl-input-disabled-border-color: var(--graupl-theme-active--tertiary--200, var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%))));\n }\n fieldset {\n border-color: var(--graupl-fieldset-border-color, var(--graupl-input-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n background: var(--graupl-fieldset-background, var(--graupl-input-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n color: var(--graupl-fieldset-color, var(--graupl-input-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n }\n fieldset:disabled {\n border-color: var(--graupl-fieldset-disabled-border-color, var(--graupl-input-disabled-border-color, var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))))));\n color: var(--graupl-fieldset-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n fieldset:disabled label {\n color: var(--graupl-label-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n fieldset[disabled] {\n border-color: var(--graupl-fieldset-disabled-border-color, var(--graupl-input-disabled-border-color, var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))))));\n color: var(--graupl-fieldset-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n fieldset[disabled] label {\n color: var(--graupl-label-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n fieldset[aria-disabled=true] {\n border-color: var(--graupl-fieldset-disabled-border-color, var(--graupl-input-disabled-border-color, var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))))));\n color: var(--graupl-fieldset-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n fieldset[aria-disabled=true] label {\n color: var(--graupl-label-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n fieldset.disabled {\n border-color: var(--graupl-fieldset-disabled-border-color, var(--graupl-input-disabled-border-color, var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))))));\n color: var(--graupl-fieldset-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n fieldset.disabled label {\n color: var(--graupl-label-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n fieldset.primary {\n --graupl-fieldset-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-fieldset-background: var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));\n --graupl-fieldset-border-color: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n --graupl-fieldset-accent-color: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n }\n fieldset.secondary {\n --graupl-fieldset-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-fieldset-background: var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))));\n --graupl-fieldset-border-color: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n --graupl-fieldset-accent-color: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n }\n fieldset.tertiary {\n --graupl-fieldset-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-fieldset-background: var(--graupl-theme-active--tertiary--100, var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%))));\n --graupl-fieldset-border-color: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n --graupl-fieldset-accent-color: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n }\n fieldset.primary {\n --graupl-label-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-label-background: var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));\n --graupl-label-border-color: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n }\n fieldset.secondary {\n --graupl-label-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-label-background: var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))));\n --graupl-label-border-color: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n }\n fieldset.tertiary {\n --graupl-label-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-label-background: var(--graupl-theme-active--tertiary--100, var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%))));\n --graupl-label-border-color: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n }\n fieldset.primary {\n --graupl-input-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-input-background: var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));\n --graupl-input-border-color: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n --graupl-input-placeholder-color: var(--graupl-theme-active--primary--600, var(--graupl-theme-light--primary--600, var(--graupl-primary--600, hsl(219, 75%, 45%))));\n --graupl-input-disabled-color: var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))));\n --graupl-input-disabled-border-color: var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))));\n }\n fieldset.secondary {\n --graupl-input-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-input-background: var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))));\n --graupl-input-border-color: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n --graupl-input-placeholder-color: var(--graupl-theme-active--secondary--600, var(--graupl-theme-light--secondary--600, var(--graupl-secondary--600, hsl(235, 15%, 45%))));\n --graupl-input-disabled-color: var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))));\n --graupl-input-disabled-border-color: var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))));\n }\n fieldset.tertiary {\n --graupl-input-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-input-background: var(--graupl-theme-active--tertiary--100, var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%))));\n --graupl-input-border-color: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n --graupl-input-placeholder-color: var(--graupl-theme-active--tertiary--600, var(--graupl-theme-light--tertiary--600, var(--graupl-tertiary--600, hsl(340, 60%, 45%))));\n --graupl-input-disabled-color: var(--graupl-theme-active--tertiary--200, var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%))));\n --graupl-input-disabled-border-color: var(--graupl-theme-active--tertiary--200, var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%))));\n }\n}\n@layer graupl.base {\n a {\n min-width: var(--graupl-link-min-width, auto);\n min-height: var(--graupl-link-min-height, auto);\n padding: var(--graupl-link-padding, var(--graupl-link-padding-y, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))) var(--graupl-link-padding-x, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))));\n transform: var(--graupl-link-transform, none);\n transition: var(--graupl-link-transition, background var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease), color var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease), transform var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease));\n border-width: var(--graupl-link-border-width, var(--graupl-link-border-top-width, 0) var(--graupl-link-border-right-width, 0) var(--graupl-link-border-bottom-width, 0) var(--graupl-link-border-left-width, 0));\n border-style: var(--graupl-link-border-style, var(--graupl-link-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-link-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-link-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-link-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n border-radius: var(--graupl-link-border-radius, var(--graupl-link-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-link-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-link-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-link-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))));\n text-decoration: var(--graupl-link-text-decoration, underline);\n text-decoration-style: var(--graupl-link-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a:visited {\n transform: var(--graupl-link-visited-transform, var(--graupl-link-transform, none));\n text-decoration: var(--graupl-link-visited-text-decoration, var(--graupl-link-text-decoration, underline));\n text-decoration-style: var(--graupl-link-visited-text-decoration-style, var(--graupl-link-text-decoration-style, solid));\n text-decoration-thickness: var(--graupl-link-visited-text-decoration-thickness, var(--graupl-link-text-decoration-thickness, var(--graupl-border-width, 0.125rem)));\n }\n a.visited {\n transform: var(--graupl-link-visited-transform, var(--graupl-link-transform, none));\n text-decoration: var(--graupl-link-visited-text-decoration, var(--graupl-link-text-decoration, underline));\n text-decoration-style: var(--graupl-link-visited-text-decoration-style, var(--graupl-link-text-decoration-style, solid));\n text-decoration-thickness: var(--graupl-link-visited-text-decoration-thickness, var(--graupl-link-text-decoration-thickness, var(--graupl-border-width, 0.125rem)));\n }\n a:focus-visible {\n transform: var(--graupl-link-focus-transform, var(--graupl-link-transform, none));\n text-decoration: var(--graupl-link-focus-text-decoration, var(--graupl-link-text-decoration, underline));\n text-decoration-style: var(--graupl-link-focus-text-decoration-style, var(--graupl-link-text-decoration-style, solid));\n text-decoration-thickness: var(--graupl-link-focus-text-decoration-thickness, var(--graupl-link-text-decoration-thickness, var(--graupl-border-width, 0.125rem)));\n }\n a.focus {\n transform: var(--graupl-link-focus-transform, var(--graupl-link-transform, none));\n text-decoration: var(--graupl-link-focus-text-decoration, var(--graupl-link-text-decoration, underline));\n text-decoration-style: var(--graupl-link-focus-text-decoration-style, var(--graupl-link-text-decoration-style, solid));\n text-decoration-thickness: var(--graupl-link-focus-text-decoration-thickness, var(--graupl-link-text-decoration-thickness, var(--graupl-border-width, 0.125rem)));\n }\n a:hover {\n transform: var(--graupl-link-hover-transform, none);\n text-decoration: var(--graupl-link-hover-text-decoration, underline);\n text-decoration-style: var(--graupl-link-hover-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-hover-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a.hover {\n transform: var(--graupl-link-hover-transform, none);\n text-decoration: var(--graupl-link-hover-text-decoration, underline);\n text-decoration-style: var(--graupl-link-hover-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-hover-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a:active {\n transform: var(--graupl-link-active-transform, var(--graupl-link-hover-transform, none));\n text-decoration: var(--graupl-link-active-text-decoration, var(--graupl-link-hover-text-decoration, underline));\n text-decoration-style: var(--graupl-link-active-text-decoration-style, var(--graupl-link-hover-text-decoration-style, solid));\n text-decoration-thickness: var(--graupl-link-active-text-decoration-thickness, var(--graupl-link-hover-text-decoration-thickness, var(--graupl-border-width, 0.125rem)));\n }\n a.active {\n transform: var(--graupl-link-active-transform, var(--graupl-link-hover-transform, none));\n text-decoration: var(--graupl-link-active-text-decoration, var(--graupl-link-hover-text-decoration, underline));\n text-decoration-style: var(--graupl-link-active-text-decoration-style, var(--graupl-link-hover-text-decoration-style, solid));\n text-decoration-thickness: var(--graupl-link-active-text-decoration-thickness, var(--graupl-link-hover-text-decoration-thickness, var(--graupl-border-width, 0.125rem)));\n }\n a:disabled {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a:disabled:visited {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a:disabled.visited {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a:disabled:focus-visible {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a:disabled.focus {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a:disabled:hover {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a:disabled.hover {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a:disabled:active {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a:disabled.active {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a:disabled[aria-selected=true] {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a:disabled.selected {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a:disabled[aria-current=true] {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a:disabled.current {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a[disabled] {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a[disabled]:visited {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a[disabled].visited {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a[disabled]:focus-visible {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a[disabled].focus {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a[disabled]:hover {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a[disabled].hover {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a[disabled]:active {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a[disabled].active {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a[disabled][aria-selected=true] {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a[disabled].selected {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a[disabled][aria-current=true] {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a[disabled].current {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a[aria-disabled=true] {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a[aria-disabled=true]:visited {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a[aria-disabled=true].visited {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a[aria-disabled=true]:focus-visible {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a[aria-disabled=true].focus {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a[aria-disabled=true]:hover {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a[aria-disabled=true].hover {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a[aria-disabled=true]:active {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a[aria-disabled=true].active {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a[aria-disabled=true][aria-selected=true] {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a[aria-disabled=true].selected {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a[aria-disabled=true][aria-current=true] {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a[aria-disabled=true].current {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a.disabled {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a.disabled:visited {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a.disabled.visited {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a.disabled:focus-visible {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a.disabled.focus {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a.disabled:hover {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a.disabled.hover {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a.disabled:active {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a.disabled.active {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a.disabled[aria-selected=true] {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a.disabled.selected {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a.disabled[aria-current=true] {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n a.disabled.current {\n transform: var(--graupl-link-disabled-transform, none);\n text-decoration: var(--graupl-link-disabled-text-decoration, underline);\n text-decoration-style: var(--graupl-link-disabled-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-link-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n @media (prefers-reduced-motion: reduce) {\n a {\n transition: var(--graupl-link-transition-reduced-motion, background var(--graupl-transition-timing-function, ease), color var(--graupl-transition-timing-function, ease));\n }\n }\n a.stretched {\n isolation: isolate;\n }\n a.stretched::before {\n content: \"\";\n position: absolute;\n inset: 0;\n z-index: var(--graupl-stretched-link-z-index, 5);\n }\n}\n@layer graupl.theme {\n a {\n border-color: var(--graupl-link-border-color, transparent);\n background: var(--graupl-link-background, transparent);\n color: var(--graupl-link-color, var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%)))));\n text-decoration-color: var(--graupl-link-text-decoration-color, var(--graupl-link-color, var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))))));\n }\n a:visited {\n border-color: var(--graupl-link-visited-border-color, var(--graupl-link-border-color, transparent));\n background: var(--graupl-link-visited-background, var(--graupl-link-background, transparent));\n color: var(--graupl-link-visited-color, var(--graupl-link-color, var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))))));\n text-decoration-color: var(--graupl-link-visited-text-decoration-color, var(--graupl-link-visited-color, var(--graupl-link-color, var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%)))))));\n }\n a.visited {\n border-color: var(--graupl-link-visited-border-color, var(--graupl-link-border-color, transparent));\n background: var(--graupl-link-visited-background, var(--graupl-link-background, transparent));\n color: var(--graupl-link-visited-color, var(--graupl-link-color, var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))))));\n text-decoration-color: var(--graupl-link-visited-text-decoration-color, var(--graupl-link-visited-color, var(--graupl-link-color, var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%)))))));\n }\n a:focus-visible {\n border-color: var(--graupl-link-focus-border-color, var(--graupl-link-border-color, transparent));\n background: var(--graupl-link-focus-background, var(--graupl-link-background, transparent));\n color: var(--graupl-link-focus-color, var(--graupl-link-color, var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))))));\n text-decoration-color: var(--graupl-link-focus-text-decoration-color, var(--graupl-link-focus-color, var(--graupl-link-color, var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%)))))));\n }\n a.focus {\n border-color: var(--graupl-link-focus-border-color, var(--graupl-link-border-color, transparent));\n background: var(--graupl-link-focus-background, var(--graupl-link-background, transparent));\n color: var(--graupl-link-focus-color, var(--graupl-link-color, var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))))));\n text-decoration-color: var(--graupl-link-focus-text-decoration-color, var(--graupl-link-focus-color, var(--graupl-link-color, var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%)))))));\n }\n a:hover {\n border-color: var(--graupl-link-hover-border-color, transparent);\n background: var(--graupl-link-hover-background, transparent);\n color: var(--graupl-link-hover-color, var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%)))));\n text-decoration-color: var(--graupl-link-hover-text-decoration-color, var(--graupl-link-hover-color, var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))))));\n }\n a.hover {\n border-color: var(--graupl-link-hover-border-color, transparent);\n background: var(--graupl-link-hover-background, transparent);\n color: var(--graupl-link-hover-color, var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%)))));\n text-decoration-color: var(--graupl-link-hover-text-decoration-color, var(--graupl-link-hover-color, var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))))));\n }\n a:active {\n border-color: var(--graupl-link-active-border-color, var(--graupl-link-hover-border-color, transparent));\n background: var(--graupl-link-active-background, var(--graupl-link-hover-background, transparent));\n color: var(--graupl-link-active-color, var(--graupl-link-hover-color, var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))))));\n text-decoration-color: var(--graupl-link-active-text-decoration-color, var(--graupl-link-active-color, var(--graupl-link-hover-color, var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%)))))));\n }\n a.active {\n border-color: var(--graupl-link-active-border-color, var(--graupl-link-hover-border-color, transparent));\n background: var(--graupl-link-active-background, var(--graupl-link-hover-background, transparent));\n color: var(--graupl-link-active-color, var(--graupl-link-hover-color, var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))))));\n text-decoration-color: var(--graupl-link-active-text-decoration-color, var(--graupl-link-active-color, var(--graupl-link-hover-color, var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%)))))));\n }\n a:disabled {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a:disabled:visited {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a:disabled.visited {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a:disabled:focus-visible {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a:disabled.focus {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a:disabled:hover {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a:disabled.hover {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a:disabled:active {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a:disabled.active {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a:disabled[aria-selected=true] {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a:disabled.selected {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a:disabled[aria-current=true] {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a:disabled.current {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a[disabled] {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a[disabled]:visited {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a[disabled].visited {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a[disabled]:focus-visible {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a[disabled].focus {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a[disabled]:hover {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a[disabled].hover {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a[disabled]:active {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a[disabled].active {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a[disabled][aria-selected=true] {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a[disabled].selected {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a[disabled][aria-current=true] {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a[disabled].current {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a[aria-disabled=true] {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a[aria-disabled=true]:visited {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a[aria-disabled=true].visited {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a[aria-disabled=true]:focus-visible {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a[aria-disabled=true].focus {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a[aria-disabled=true]:hover {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a[aria-disabled=true].hover {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a[aria-disabled=true]:active {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a[aria-disabled=true].active {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a[aria-disabled=true][aria-selected=true] {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a[aria-disabled=true].selected {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a[aria-disabled=true][aria-current=true] {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a[aria-disabled=true].current {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a.disabled {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a.disabled:visited {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a.disabled.visited {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a.disabled:focus-visible {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a.disabled.focus {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a.disabled:hover {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a.disabled.hover {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a.disabled:active {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a.disabled.active {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a.disabled[aria-selected=true] {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a.disabled.selected {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a.disabled[aria-current=true] {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n a.disabled.current {\n border-color: var(--graupl-link-disabled-border-color, transparent);\n background: var(--graupl-link-disabled-background, transparent);\n color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n text-decoration-color: var(--graupl-link-disabled-text-decoration-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n }\n}\n@layer graupl.base {\n table {\n border-radius: var(--graupl-table-border-radius, var(--graupl-table-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-table-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-table-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-table-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))));\n }\n table caption {\n padding: var(--graupl-table-caption-padding, var(--graupl-table-caption-padding-y, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))) var(--graupl-table-caption-padding-x, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))));\n caption-side: var(--graupl-table-caption-side, bottom);\n }\n table th {\n padding: var(--graupl-table-header-padding, var(--graupl-table-header-padding-y, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))) var(--graupl-table-header-padding-x, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))));\n border-radius: var(--graupl-table-header-border-radius, var(--graupl-table-header-border-top-left-radius, var(--graupl-table-cell-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem)))) var(--graupl-table-header-border-top-right-radius, var(--graupl-table-cell-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem)))) var(--graupl-table-header-border-bottom-right-radius, var(--graupl-table-cell-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem)))) var(--graupl-table-header-border-bottom-left-radius, var(--graupl-table-cell-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem)))));\n font-weight: var(--graupl-table-header-font-weight, var(--graupl-font-weight-bold, var(--graupl-font-weight-bold, 700)));\n }\n table td,\n table tbody th {\n padding: var(--graupl-table-cell-padding, var(--graupl-table-cell-padding-y, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))) var(--graupl-table-cell-padding-x, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))));\n border-radius: var(--graupl-table-cell-border-radius, var(--graupl-table-cell-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-table-cell-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-table-cell-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-table-cell-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))));\n }\n table.collapsed {\n border-collapse: collapse;\n }\n table.bordered {\n --graupl-table-border-radius: 0;\n --graupl-table-cell-border-radius: 0;\n --graupl-table-header-border-radius: 0;\n border-collapse: collapse;\n border-width: var(--graupl-table-border-width, var(--graupl-table-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))) var(--graupl-table-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))) var(--graupl-table-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))) var(--graupl-table-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem))));\n border-style: var(--graupl-table-border-style, var(--graupl-table-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-table-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-table-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-table-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n }\n table.bordered td {\n border-width: var(--graupl-table-cell-border-width, var(--graupl-table-cell-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))) var(--graupl-table-cell-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))) var(--graupl-table-cell-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))) var(--graupl-table-cell-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem))));\n border-style: var(--graupl-table-cell-border-style, var(--graupl-table-cell-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-table-cell-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-table-cell-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-table-cell-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n }\n table.bordered th {\n border-width: var(--graupl-table-header-border-width, var(--graupl-table-header-border-top-width, var(--graupl-table-cell-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem)))) var(--graupl-table-header-border-right-width, var(--graupl-table-cell-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem)))) var(--graupl-table-header-border-bottom-width, var(--graupl-table-cell-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem)))) var(--graupl-table-header-border-left-width, var(--graupl-table-cell-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem)))));\n border-style: var(--graupl-table-header-border-style, var(--graupl-table-header-border-top-style, var(--graupl-table-cell-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid)))) var(--graupl-table-header-border-right-style, var(--graupl-table-cell-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid)))) var(--graupl-table-header-border-bottom-style, var(--graupl-table-cell-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid)))) var(--graupl-table-header-border-left-style, var(--graupl-table-cell-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid)))));\n }\n .responsive-table {\n display: block;\n width: 100%;\n overflow: scroll hidden;\n }\n .responsive-table table {\n width: 100%;\n margin-bottom: 0;\n }\n}\n@layer graupl.theme {\n table.primary {\n --graupl-table-header-background: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n --graupl-table-header-color: var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));\n --graupl-table-striped-background: var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))));\n --graupl-table-striped-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-table-hover-background: var(--graupl-theme-active--primary--300, var(--graupl-theme-light--primary--300, var(--graupl-primary--300, hsl(219, 80%, 65%))));\n --graupl-table-hover-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-table-border-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-table-highlight-background: var(--graupl-theme-active--primary--500, var(--graupl-theme-light--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%))));\n --graupl-table-highlight-color: var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));\n }\n table.secondary {\n --graupl-table-header-background: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n --graupl-table-header-color: var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))));\n --graupl-table-striped-background: var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))));\n --graupl-table-striped-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-table-hover-background: var(--graupl-theme-active--secondary--300, var(--graupl-theme-light--secondary--300, var(--graupl-secondary--300, hsl(235, 20%, 65%))));\n --graupl-table-hover-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-table-border-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-table-highlight-background: var(--graupl-theme-active--secondary--500, var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%))));\n --graupl-table-highlight-color: var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))));\n }\n table.tertiary {\n --graupl-table-header-background: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n --graupl-table-header-color: var(--graupl-theme-active--tertiary--100, var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%))));\n --graupl-table-striped-background: var(--graupl-theme-active--tertiary--200, var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%))));\n --graupl-table-striped-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-table-hover-background: var(--graupl-theme-active--tertiary--300, var(--graupl-theme-light--tertiary--300, var(--graupl-tertiary--300, hsl(340, 65%, 65%))));\n --graupl-table-hover-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-table-border-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-table-highlight-background: var(--graupl-theme-active--tertiary--500, var(--graupl-theme-light--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%))));\n --graupl-table-highlight-color: var(--graupl-theme-active--tertiary--100, var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%))));\n }\n table .primary {\n --graupl-table-header-background: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n --graupl-table-header-color: var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));\n --graupl-table-striped-background: var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))));\n --graupl-table-striped-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-table-hover-background: var(--graupl-theme-active--primary--300, var(--graupl-theme-light--primary--300, var(--graupl-primary--300, hsl(219, 80%, 65%))));\n --graupl-table-hover-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-table-border-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-table-highlight-background: var(--graupl-theme-active--primary--500, var(--graupl-theme-light--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%))));\n --graupl-table-highlight-color: var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));\n }\n table .secondary {\n --graupl-table-header-background: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n --graupl-table-header-color: var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))));\n --graupl-table-striped-background: var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))));\n --graupl-table-striped-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-table-hover-background: var(--graupl-theme-active--secondary--300, var(--graupl-theme-light--secondary--300, var(--graupl-secondary--300, hsl(235, 20%, 65%))));\n --graupl-table-hover-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-table-border-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-table-highlight-background: var(--graupl-theme-active--secondary--500, var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%))));\n --graupl-table-highlight-color: var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))));\n }\n table .tertiary {\n --graupl-table-header-background: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n --graupl-table-header-color: var(--graupl-theme-active--tertiary--100, var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%))));\n --graupl-table-striped-background: var(--graupl-theme-active--tertiary--200, var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%))));\n --graupl-table-striped-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-table-hover-background: var(--graupl-theme-active--tertiary--300, var(--graupl-theme-light--tertiary--300, var(--graupl-tertiary--300, hsl(340, 65%, 65%))));\n --graupl-table-hover-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-table-border-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-table-highlight-background: var(--graupl-theme-active--tertiary--500, var(--graupl-theme-light--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%))));\n --graupl-table-highlight-color: var(--graupl-theme-active--tertiary--100, var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%))));\n }\n table th {\n background: var(--graupl-table-header-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-table-header-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n }\n table td,\n table tbody th {\n background: var(--graupl-table-cell-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-table-cell-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n }\n table.bordered {\n border-color: var(--graupl-table-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n }\n table.bordered td {\n border-color: var(--graupl-table-cell-border-color, var(--graupl-table-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n }\n table.bordered th {\n border-color: var(--graupl-table-header-border-color, var(--graupl-table-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n }\n table.striped-columns tbody tr:nth-child(odd) > td {\n background: var(--graupl-table-cell-striped-background, var(--graupl-table-striped-background, var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))))));\n color: var(--graupl-table-cell-striped-color, var(--graupl-table-striped-color, var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))))));\n }\n table.striped-columns tbody tr:nth-child(odd) > th {\n background: var(--graupl-table-header-striped-background, var(--graupl-table-striped-background, var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))))));\n color: var(--graupl-table-header-striped-color, var(--graupl-table-striped-color, var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))))));\n }\n table.striped-rows tbody tr > td:nth-child(odd) {\n background: var(--graupl-table-cell-striped-background, var(--graupl-table-striped-background, var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))))));\n color: var(--graupl-table-cell-striped-color, var(--graupl-table-striped-color, var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))))));\n }\n table.striped-rows tbody tr > th:nth-child(odd) {\n background: var(--graupl-table-header-striped-background, var(--graupl-table-striped-background, var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))))));\n color: var(--graupl-table-header-striped-color, var(--graupl-table-striped-color, var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))))));\n }\n table.hoverable tbody tr:hover > td {\n background: var(--graupl-table-cell-hover-background, var(--graupl-table-hover-background, var(--graupl-theme-active--secondary--300, var(--graupl-theme-light--secondary--300, var(--graupl-secondary--300, hsl(235, 20%, 65%))))));\n color: var(--graupl-table-cell-hover-color, var(--graupl-table-hover-color, var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))))));\n }\n table.hoverable tbody tr:hover > th {\n background: var(--graupl-table-header-hover-background, var(--graupl-table-hover-background, var(--graupl-theme-active--secondary--300, var(--graupl-theme-light--secondary--300, var(--graupl-secondary--300, hsl(235, 20%, 65%))))));\n color: var(--graupl-table-header-hover-color, var(--graupl-table-hover-color, var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))))));\n }\n table .highlight {\n --graupl-table-cell-background: var(--graupl-table-cell-highlight-background, var(--graupl-table-highlight-background, var(--graupl-theme-active--secondary--500, var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%))))));\n --graupl-table-cell-color: var(--graupl-table-cell-highlight-color, var(--graupl-table-highlight-color, var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))))));\n --graupl-table-header-background: var(--graupl-table-header-highlight-background, var(--graupl-table-highlight-background, var(--graupl-theme-active--secondary--500, var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%))))));\n --graupl-table-header-color: var(--graupl-table-header-highlight-color, var(--graupl-table-highlight-color, var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))))));\n --graupl-table-striped-background: var(--graupl-table-highlight-background, var(--graupl-theme-active--secondary--500, var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%)))));\n --graupl-table-striped-color: var(--graupl-table-highlight-color, var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%)))));\n --graupl-table-cell-striped-background: var(--graupl-table-cell-highlight-background, var(--graupl-table-highlight-background, var(--graupl-theme-active--secondary--500, var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%))))));\n --graupl-table-cell-striped-color: var(--graupl-table-cell-highlight-color, var(--graupl-table-highlight-color, var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))))));\n --graupl-table-header-striped-background: var(--graupl-table-header-highlight-background, var(--graupl-table-highlight-background, var(--graupl-theme-active--secondary--500, var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%))))));\n --graupl-table-header-striped-color: var(--graupl-table-header-highlight-color, var(--graupl-table-highlight-color, var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))))));\n }\n}","// @graupl/core typography theme default values.\n//\n// Generally, these should not be used directly when styling components unless a static value is needed.\n// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.\n//\n// They should not be used to define direct property values (i.e. font-size, color, etc.).\n// Those should be defined as custom properties in the `_variables.scss` file.\n\n@use \"../../defaults\" as root-defaults;\n@use \"sass:map\";\n\n// font properties.\n$selector-base: root-defaults.$element-selector-base !default;\n$modifier-selector-base: root-defaults.$modifier-selector-base !default;\n$paragraph-selector-base: $selector-base !default;\n$paragraph-selector: \"p\";\n$small-selector-base: $selector-base !default;\n$small-selector: \"small\";\n$h1-selector-base: $selector-base !default;\n$h1-selector: \"h1\" !default;\n$h2-selector-base: $selector-base !default;\n$h2-selector: \"h2\" !default;\n$h3-selector-base: $selector-base !default;\n$h3-selector: \"h3\" !default;\n$h4-selector-base: $selector-base !default;\n$h4-selector: \"h4\" !default;\n$h5-selector-base: $selector-base !default;\n$h5-selector: \"h5\" !default;\n$h6-selector-base: $selector-base !default;\n$h6-selector: \"h6\" !default;\n$root-selector-base: root-defaults.$root-selector-base !default;\n$root-selector: root-defaults.$root-selector !default;\n$bold-selector-base: $selector-base !default;\n$bold-selector: \"b\" !default;\n$strong-selector-base: $selector-base !default;\n$strong-selector: \"strong\" !default;\n$emphasis-selector-base: $selector-base !default;\n$emphasis-selector: \"em\" !default;\n$italic-selector-base: $selector-base !default;\n$italic-selector: \"i\" !default;\n$generate-base-font-sizes: root-defaults.$generate-base-font-sizes !default;\n$generate-base-font-weights: root-defaults.$generate-base-font-weights !default;\n$font-size-base: 1rem !default;\n$root-font-size: clamp(0.85rem, calc(0.8rem + 0.5vw), 1.25rem) !default;\n$root-line-height: 1.2em !default;\n$root-letter-spacing: normal !default;\n$root-word-spacing: normal !default;\n$root-font-style: normal !default;\n$root-font-variant: normal !default;\n\n// Multipliers for font sizes.\n// This uses a minor third scale.\n// See: https://typescale.com/?size=16&scale=1.250&text=A%20Visual%20Type%20Scale&font=Lato&fontweight=400&bodyfont=body_font_default&bodyfontweight=400&lineheight=1.75&backgroundcolor=%23ffffff&fontcolor=%23000000\n$-font-size-multipliers: (\n xs: 0.694,\n sm: 0.833,\n base: 1,\n lg: 1.2,\n xl: 1.44,\n 2xl: 1.728,\n 3xl: 2.074,\n 4xl: 2.488,\n 5xl: 2.986,\n);\n$font-size-multipliers: () !default;\n\n// Merge the font size multipliers with the default ones.\n@if $generate-base-font-sizes {\n $font-size-multipliers: map.merge(\n $-font-size-multipliers,\n $font-size-multipliers\n );\n}\n\n// Weights.\n$-font-weights: (\n light: 300,\n normal: 400,\n bold: 700,\n);\n$font-weights: () !default;\n\n// Merge the custom font weights with the default ones.\n@if $generate-base-font-weights {\n $font-weights: map.merge($-font-weights, $font-weights);\n}\n\n/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */\n$root-font-family:\n system-ui,\n -apple-system,\n blinkmacsystemfont,\n \"Segoe UI\",\n roboto,\n \"Helvetica Neue\",\n arial,\n sans-serif !default;\n","// @graupl/core layer mixins.\n//\n// These should be used to define the layers of your components to ensure that\n// they are output in the correct order in the final compiled CSS.\n\n@use \"../defaults\" as root-defaults;\n\n@mixin layer($layer) {\n @if root-defaults.$use-layers {\n @layer #{root-defaults.$id}.#{$layer} {\n @content;\n }\n } @else {\n @content;\n }\n}\n","// @graupl/core button base styles.\n//\n// This module provides the base styles for the button component.\n//\n// The button component is meant to be used on <button> or <a> elements, but can be applied to anything.\n//\n// The following selectors are generated by default:\n// - `.button`: The button component.\n// - `.primary`: A component modifier to use the primary colour for the button component.\n// - `.secondary`: A component modifier to use the secondary colour for the button component.\n// - `.tertiary`: A component modifier to use the tertiary colour for the button component.\n// - `.link`: A component modifier to make the button component look like a link component.\n//\n// The following custom properties can be used to customize the button component:\n// | Property | Description | Default Value |\n// | -------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n// | `--graupl-button-min-width` | The minimum width of the button component. | `var(--graupl-interactive-min-width)` |\n// | `--graupl-button-min-height` | The minimum height of the button component. | `var(--graupl-interactive-min-height)` |\n// | `--graupl-button-padding-x` | The horizontal padding of the button component. | `var(--graupl-spacer-5)` |\n// | `--graupl-button-padding-y` | The vertical padding of the button component. | `var(--graupl-spacer-3)` |\n// | `--graupl-button-padding` | The padding of the button component (combines x and y padding). | `var(--graupl-button-padding-y) var(--graupl-button-padding-x)` |\n// | `--graupl-button-font-size` | The font size of the button component. | `var(--graupl-font-size-base)` |\n// | `--graupl-button-transition` | The transition of the button component. | `background var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function), color var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function), transform var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function)` |\n// | `--graupl-button-transition-reduced-motion` | The transition of the button component when reduced motion is enabled. | `background var(--graupl-transition-duration-none) var(--graupl-transition-timing-function), color var(--graupl-transition-duration-none) var(--graupl-transition-timing-function)` |\n// | `--graupl-button-transform` | The transform of the button component. | `none` |\n// | `--graupl-button-visited-transform` | The transform of a visited button component. | `var(--graupl-button-transform)` |\n// | `--graupl-button-focus-transform` | The transform of a focused button component. | `var(--graupl-button-transform)` |\n// | `--graupl-button-hover-transform` | The transform of a hovered button component. | `var(--graupl-button-transform)` |\n// | `--graupl-button-active-transform` | The transform of an active button component. | `scale(0.95)` |\n// | `--graupl-button-disabled-transform` | The transform of a disabled button component. | `none` |\n// | `--graupl-button-background` | The background colour of the button component. | `var(--graupl-background)` |\n// | `--graupl-button-visited-background` | The background colour of a visited button component. | `var(--graupl-button-background)` |\n// | `--graupl-button-focus-background` | The background colour of a focused button component. | `var(--graupl-button-background)` |\n// | `--graupl-button-hover-background` | The background colour of a hovered button component. | `var(--graupl-color)` |\n// | `--graupl-button-active-background` | The background colour of an active button component. | `var(--graupl-button-hover-background)` |\n// | `--graupl-button-disabled-background` | The background colour of a disabled button component. | `var(--graupl-background)` |\n// | `--graupl-button-color` | The text colour of the button component. | `var(--graupl-color)` |\n// | `--graupl-button-visited-color` | The text colour of a visited button component. | `var(--graupl-button-color)` |\n// | `--graupl-button-focus-color` | The text colour of a focused button component. | `var(--graupl-button-color)` |\n// | `--graupl-button-hover-color` | The text colour of a hovered button component. | `var(--graupl-background)` |\n// | `--graupl-button-active-color` | The text colour of an active button component. | `var(--graupl-button-hover-color)` |\n// | `--graupl-button-disabled-color` | The text colour of a disabled button component. | `var(--graupl-theme-active--primary--200)` |\n// | `--graupl-button-border-top-width` | The top border width of the button component. | `var(--graupl-border-top-width)` |\n// | `--graupl-button-border-right-width` | The right border width of the button component. | `var(--graupl-border-right-width)` |\n// | `--graupl-button-border-bottom-width` | The bottom border width of the button component. | `var(--graupl-border-bottom-width)` |\n// | `--graupl-button-border-left-width` | The left border width of the button component. | `var(--graupl-border-left-width)` |\n// | `--graupl-button-border-width` | The border width of the button component (combines top, right, bottom, and left widths). | `var(--graupl-button-border-top-width) var(--graupl-button-border-right-width) var(--graupl-button-border-bottom-width) var(--graupl-button-border-left-width)` |\n// | `--graupl-button-border-top-style` | The top border style of the button component. | `var(--graupl-border-top-style)` |\n// | `--graupl-button-border-right-style` | The right border style of the button component. | `var(--graupl-border-right-style)` |\n// | `--graupl-button-border-bottom-style` | The bottom border style of the button component. | `var(--graupl-border-bottom-style)` |\n// | `--graupl-button-border-left-style` | The left border style of the button component. | `var(--graupl-border-left-style)` |\n// | `--graupl-button-border-style` | The border style of the button component (combines top, right, bottom, and left styles). | `var(--graupl-button-border-top-style) var(--graupl-button-border-right-style) var(--graupl-button-border-bottom-style) var(--graupl-button-border-left-style)` |\n// | `--graupl-button-border-top-left-radius` | The top left border radius of the button component. | `var(--graupl-border-top-left-radius)` |\n// | `--graupl-button-border-top-right-radius` | The top right border radius of the button component. | `var(--graupl-border-top-right-radius)` |\n// | `--graupl-button-border-bottom-right-radius` | The bottom right border radius of the button component. | `var(--graupl-border-bottom-right-radius)` |\n// | `--graupl-button-border-bottom-left-radius` | The bottom left border radius of the button component. | `var(--graupl-border-bottom-left-radius)` |\n// | `--graupl-button-border-radius` | The border radius of the button component (combines top-left, top-right, bottom-right, and bottom-left radii). | `var(--graupl-button-border-top-left-radius) var(--graupl-button-border-top-right-radius) var(--graupl-button-border-bottom-right-radius) var(--graupl-button-border-bottom-left-radius)` |\n// | `--graupl-button-border-color` | The border colour of the button component. | `var(--graupl-border-color)` |\n// | `--graupl-button-visited-border-color` | The border colour of a visited button component. | `var(--graupl-button-border-color)` |\n// | `--graupl-button-focus-border-color` | The border colour of a focused button component. | `var(--graupl-button-border-color)` |\n// | `--graupl-button-hover-border-color` | The border colour of a hovered button component. | `var(--graupl-border-color)` |\n// | `--graupl-button-active-border-color` | The border colour of an active button component. | `var(--graupl-button-hover-border-color)` |\n// | `--graupl-button-disabled-border-color` | The border colour of a disabled button component. | `var(--graupl-theme-active--primary--200)` |\n//\n// The following sass variables can be used to customize the generation of the button component:\n// | Variable | Description | Default Value |\n// | ------------------------------- | --------------------------------------------------------------------------------------- | ------------------------------------------------------- |\n// | `$selector-base` | The selector base for the component. | `\".\"` |\n// | `$modifier-selector-base` | The selector base for component modifiers. | `\".\"` |\n// | `$generate-base-theme-map` | A flag to generate the base theme maps for button variants. | `true` |\n// | `$themeable` | A flag that determines whether theme modifiers are generated. | `true` |\n// | `$button-selector-base` | The selector base for the button component. | `\".\"` |\n// | `$button-selector` | The button component selector. | `\"button\"` |\n// | `$button-link-selector-base` | The selector base for the button link component modifier. | `\".\"` |\n// | `$button-link-selector` | The button link component modifier selector. | `\"link\"` |\n// | `$button-theme-selector-base` | The selector base for the button theme component modifiers. | `\".\"` |\n// | `$button-theme-selector-prefix` | The button theme component modifier selector prefix. | `\"\"` |\n// | `$button-initial-transform` | The initial transform of the button. | `none` |\n// | `$button-final-transform` | The final transform of the button. | `scale(0.95)` |\n// | `$button-disabled-transform` | The disabled transform of the button. | `none` |\n// | `$button-theme-mappings` | A map of properties and color shades used generate all button variants. | `()` |\n// | `$button-theme-map` | A map of all properties, colors, and color shades used to generate all button variants. | `map.deep-merge($-button-theme-map, $button-theme-map)` |\n//\n// ## Using `$button-theme-mappings`\n//\n// `$button-theme-mappings` is a 1-level map of properties and shade values.\n//\n// e.g.\n// ```scss\n// $button-theme-mappings: (\n// border-color: 700,\n// )\n// ```\n//\n// This directly[1] maps to all button variants, telling them what shade to use for said property.\n// All button variants will use the following based on the example above:\n// - Primary buttons will have their `--graupl-button-border-color` property set to `--graupl-theme-active--primary--700`,\n// - Secondary buttons will have their `--graupl-button-border-color` property set to `--graupl-theme-active--secondary--700`, and\n// - Tertiary buttons will have their `--graupl-button-border-color` property set to `--graupl-theme-active--tertiary--700`.\n//\n// You can use this to customize _all_ buttons variants in the same way.\n//\n// For example, if you use the following map:\n// ```scss\n// $button-theme-mappings: (\n// border-color: 500,\n// )\n// ```\n//\n// All button variants will use the following:\n// - Primary buttons will have their `--graupl-button-border-color` property set to `--graupl-theme-active--primary--500`,\n// - Secondary buttons will have their `--graupl-button-border-color` property set to `--graupl-theme-active--secondary--500`, and\n// - Tertiary buttons will have their `--graupl-button-border-color` property set to `--graupl-theme-active--tertiary--500`.\n//\n// [1] `$button-theme-mappings` gets parsed into a larger, more explicit map: `$button-theme-map`.\n//\n// Using `$button-theme-map`\n//\n// `$button-theme-map` is a multi-level map of properties, colors, and shade values.\n//\n// e.g.\n// ```scss\n// $button-theme-map: (\n// primary: (\n// border-color: (\n// color: primary,\n// shade: 700\n// ),\n// ),\n// secondary: (\n// border-color: (\n// color: secondary,\n// shade: 700\n// ),\n// ),\n// tertiary: (\n// border-color: (\n// color: tertiary,\n// shade: 700\n// ),\n// ),\n// )\n// ```\n//\n// This directly maps to all button variants, telling them what shade to use for said property.\n// The button variants will use the following based on the example above:\n// - Primary buttons will have their `--graupl-button-border-color` property set to `--graupl-theme-active--primary--700`,\n// - Secondary buttons will have their `--graupl-button-border-color` property set to `--graupl-theme-active--secondary--700`, and\n// - Tertiary buttons will have their `--graupl-button-border-color` property set to `--graupl-theme-active--tertiary--700`.\n//\n// You can use this to customize button variants individually.\n//\n// For example, if you use the following map:\n//\n// ```scss\n// $button-theme-map: (\n// primary: (\n// border-color: (\n// color: secondary,\n// shade: 700\n// ),\n// ),\n// secondary: (\n// border-color: (\n// color: secondary,\n// shade: 700\n// ),\n// ),\n// tertiary: (\n// border-color: (\n// color: secondary,\n// shade: 700\n// ),\n// ),\n// )\n// ```\n//\n// The button variants will use the following:\n// - Primary buttons will have their `--graupl-button-border-color` property set to `--graupl-theme-active--secondary--700`,\n// - Secondary buttons will have their `--graupl-button-border-color` property set to `--graupl-theme-active--secondary--700`, and\n// - Tertiary buttons will have their `--graupl-button-border-color` property set to `--graupl-theme-active--secondary--700`.\n//\n// @example\n// <button class=\"button primary\">Primary Button</button>\n//\n// @example\n// <a class=\"button secondary\" href=\"#\">Secondary Button</a>\n//\n// @example\n// <button class=\"button link\">Link Button</button>\n\n@use \"../../base/link/variables\" as link;\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/layer\" as *;\n@use \"../link/defaults\" as link-defaults;\n@use \"defaults\";\n@use \"mixins\" as *;\n@use \"../link/mixins\" as link-mixins;\n@use \"variables\" as *;\n\n@include layer(base) {\n // .button\n #{defaults.$button-selector-base}#{defaults.$button-selector} {\n @include apply-base;\n\n // &.link\n &#{defaults.$button-link-selector-base}#{defaults.$button-link-selector} {\n @include link-mixins.apply-base;\n }\n }\n\n // a\n #{link-defaults.$link-selector-base}#{link-defaults.$link-selector} {\n // &.button:not(.link)\n &#{defaults.$button-selector-base}#{defaults.$button-selector}:not(\n #{defaults.$button-link-selector-base}#{defaults.$button-link-selector}\n ) {\n --#{root-defaults.$prefix}link-text-decoration: none;\n --#{root-defaults.$prefix}link-visited-text-decoration: none;\n --#{root-defaults.$prefix}link-focus-text-decoration: none;\n --#{root-defaults.$prefix}link-hover-text-decoration: none;\n --#{root-defaults.$prefix}link-active-text-decoration: none;\n --#{root-defaults.$prefix}link-disabled-text-decoration: none;\n\n @include apply-base;\n }\n }\n}\n\n@include layer(theme) {\n // .button\n #{defaults.$button-selector-base}#{defaults.$button-selector} {\n @include apply-theme;\n\n // &.link\n &#{defaults.$button-link-selector-base}#{defaults.$button-link-selector} {\n @include link-mixins.apply-theme;\n }\n }\n\n // a\n #{link-defaults.$link-selector-base}#{link-defaults.$link-selector} {\n // &.button:not(.link)\n &#{defaults.$button-selector-base}#{defaults.$button-selector}:not(\n #{defaults.$button-link-selector-base}#{defaults.$button-link-selector}\n ) {\n @include apply-theme;\n }\n }\n}\n","// @graupl/core button base mixins.\n\n@use \"defaults\";\n@use \"../../defaults\" as root-defaults;\n@use \"../../theme/color/variables\" as color;\n@use \"variables\" as *;\n@use \"../../mixins/layer\" as *;\n@use \"../../mixins/animation\";\n@use \"../../mixins/state\";\n@use \"../../mixins/theme\";\n@use \"sass:map\";\n\n/// Mixin to apply base styles for buttons.\n@mixin apply-base() {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: $button-min-width;\n min-height: $button-min-height;\n padding: $button-padding;\n transform: $button-transform;\n transition: $button-transition;\n border-width: $button-border-width;\n border-style: $button-border-style;\n border-radius: $button-border-radius;\n font-size: $button-font-size;\n cursor: pointer;\n\n @include state.generate-modifiers(\n (\n transform: $button-transform-states,\n )\n );\n\n @each $selector in map.get(root-defaults.$state-selectors, \"disabled\") {\n &#{$selector} {\n cursor: not-allowed;\n }\n }\n\n @include animation.off {\n --#{root-defaults.$prefix}button-transition: #{$button-transition-reduced-motion};\n }\n}\n\n/// Mixin to apply theme styles for buttons.\n@mixin apply-theme() {\n border-color: $button-border-color;\n background: $button-background;\n color: $button-color;\n\n @include state.generate-modifiers(\n (\n border-color: $button-border-color-states,\n background: $button-background-states,\n color: $button-color-states,\n )\n );\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$button-theme-map,\n defaults.$button-theme-selector-base,\n defaults.$button-theme-selector-prefix,\n \"button-\"\n );\n }\n}\n\n@mixin apply() {\n @include apply-base;\n @include apply-theme;\n}\n","// @graupl/core button base variables.\n//\n// These values are to be used to directly style bases and provide a\n// cleaner way to reference custom properties.\n\n// Custom property defaults:\n// | Custom property | Default |\n// | ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | --graupl-button-min-width | 44px |\n// | --graupl-button-min-height | 44px |\n// | --graupl-button-padding-x | var(--graupl-spacer-5) |\n// | --graupl-button-padding-y | var(--graupl-spacer-3) |\n// | --graupl-button-padding | var(--graupl-button-padding-y) var(--graupl-button-padding-x) |\n// | --graupl-button-font-size | var(--graupl-font-base) |\n// | --graupl-button-transition | background var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function), color var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function), transform var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function) |\n// | --graupl-button-transition-reduced-motion | background var(--graupl-transition-duration-none) var(--graupl-transition-timing-function), color var(--graupl-transition-duration-none) var(--graupl-transition-timing-function) |\n// | --graupl-button-transform | none |\n// | --graupl-button-visited-transform | var(--graupl-button-transform) |\n// | --graupl-button-focus-transform | var(--graupl-button-transform) |\n// | --graupl-button-hover-transform | var(--graupl-button-transform) |\n// | --graupl-button-active-transform | scale(0.95) |\n// | --graupl-button-disabled-transform | none |\n// | --graupl-button-background | var(--graupl-background) |\n// | --graupl-button-visited-background | var(--graupl-button-background) |\n// | --graupl-button-focus-background | var(--graupl-button-background) |\n// | --graupl-button-hover-background | var(--graupl-color) |\n// | --graupl-button-active-background | var(--graupl-button-hover-background) |\n// | --graupl-button-disabled-background | var(--graupl-background) |\n// | --graupl-button-color | var(--graupl-color) |\n// | --graupl-button-visited-color | var(--graupl-button-color) |\n// | --graupl-button-focus-color | var(--graupl-button-color) |\n// | --graupl-button-hover-color | var(--graupl-background) |\n// | --graupl-button-active-color | var(--graupl-button-hover-color) |\n// | --graupl-button-disabled-color | var(--graupl-theme-active--primary--200) |\n// | --graupl-button-border-top-width | var(--graupl-border-top-width) |\n// | --graupl-button-border-right-width | var(--graupl-border-right-width) |\n// | --graupl-button-border-bottom-width | var(--graupl-border-bottom-width) |\n// | --graupl-button-border-left-width | var(--graupl-border-left-width) |\n// | --graupl-button-border-width | var(--graupl-button-border-top-width) var(--graupl-button-border-right-width) var(--graupl-button-border-bottom-width) var(--graupl-button-border-left-width) |\n// | --graupl-button-border-top-style | var(--graupl-border-top-style) |\n// | --graupl-button-border-right-style | var(--graupl-border-right-style) |\n// | --graupl-button-border-bottom-style | var(--graupl-border-bottom-style) |\n// | --graupl-button-border-left-style | var(--graupl-border-left-style) |\n// | --graupl-button-border-style | var(--graupl-button-border-top-style) var(--graupl-button-border-right-style) var(--graupl-button-border-bottom-style) var(--graupl-button-border-left-style) |\n// | --graupl-button-border-top-left-radius | var(--graupl-border-top-left-radius) |\n// | --graupl-button-border-top-right-radius | var(--graupl-border-top-right-radius) |\n// | --graupl-button-border-bottom-right-radius | var(--graupl-border-bottom-right-radius) |\n// | --graupl-button-border-bottom-left-radius | var(--graupl-border-bottom-left-radius) |\n// | --graupl-button-border-radius | var(--graupl-button-border-top-left-radius) var(--graupl-button-border-top-right-radius) var(--graupl-button-border-bottom-right-radius) var(--graupl-button-border-bottom-left-radius) |\n// | --graupl-button-border-color | var(--graupl-border-color) |\n// | --graupl-button-visited-border-color | var(--graupl-button-border-color) |\n// | --graupl-button-focus-border-color | var(--graupl-button-border-color) |\n// | --graupl-button-hover-border-color | var(--graupl-border-color) |\n// | --graupl-button-active-border-color | var(--graupl-button-hover-border-color) |\n// | --graupl-button-disabled-border-color | var(--graupl-theme-active--primary--200) |\n\n@use \"defaults\";\n@use \"../../variables\" as root-variables;\n@use \"../../defaults\" as root-defaults;\n@use \"../../theme/color/variables\" as color;\n@use \"../../theme/typography/variables\" as typography;\n@use \"../../functions/theme\";\n@use \"sass:map\";\n\n// Button properties.\n// --graupl-button-min-width\n$button-min-width: var(\n --#{root-defaults.$prefix}button-min-width,\n #{root-defaults.$interactive-min-width}\n);\n\n// --graupl-button-min-height\n$button-min-height: var(\n --#{root-defaults.$prefix}button-min-height,\n #{root-defaults.$interactive-min-height}\n);\n\n// --graupl-button-padding-x\n$button-padding-x: var(\n --#{root-defaults.$prefix}button-padding-x,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-button-padding-y\n$button-padding-y: var(\n --#{root-defaults.$prefix}button-padding-y,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-button-padding\n$button-padding: var(\n --#{root-defaults.$prefix}button-padding,\n #{$button-padding-y} #{$button-padding-x}\n);\n\n// --graupl-button-font-size\n$button-font-size: var(\n --#{root-defaults.$prefix}button-font-size,\n #{map.get(typography.$font-sizes, base)}\n);\n\n// --graupl-button-transition\n$button-transition: var(\n --#{root-defaults.$prefix}button-transition,\n background #{map.get(root-variables.$transition-durations, fast)}\n #{root-variables.$transition-timing-function},\n color #{map.get(root-variables.$transition-durations, fast)}\n #{root-variables.$transition-timing-function},\n transform #{map.get(root-variables.$transition-durations, fast)}\n #{root-variables.$transition-timing-function}\n);\n\n// --graupl-button-transition-reduced-motion\n$button-transition-reduced-motion: var(\n --#{root-defaults.$prefix}button-transition-reduced-motion,\n background #{map.get(root-variables.$transition-durations, none)}\n #{root-variables.$transition-timing-function},\n color #{map.get(root-variables.$transition-durations, none)}\n #{root-variables.$transition-timing-function}\n);\n\n// Transform properties.\n// --graupl-button-transform\n$button-transform: var(\n --#{root-defaults.$prefix}button-transform,\n #{defaults.$button-initial-transform}\n);\n\n// --graupl-button-visited-transform\n$button-visited-transform: var(\n --#{root-defaults.$prefix}button-visited-transform,\n #{$button-transform}\n);\n\n// --graupl-button-focus-transform\n$button-focus-transform: var(\n --#{root-defaults.$prefix}button-focus-transform,\n #{$button-transform}\n);\n\n// --graupl-button-hover-transform\n$button-hover-transform: var(\n --#{root-defaults.$prefix}button-hover-transform,\n #{$button-transform}\n);\n\n// --graupl-button-active-transform\n$button-active-transform: var(\n --#{root-defaults.$prefix}button-active-transform,\n #{defaults.$button-final-transform}\n);\n\n// --graupl-button-disabled-transform\n$button-disabled-transform: var(\n --#{root-defaults.$prefix}button-disabled-transform,\n #{defaults.$button-disabled-transform}\n);\n$button-transform-states: (\n default: $button-transform,\n visited: $button-visited-transform,\n focus: $button-focus-transform,\n hover: $button-hover-transform,\n active: $button-active-transform,\n disabled: $button-disabled-transform,\n);\n\n// Background properties.\n// --graupl-button-background\n$button-background: var(\n --#{root-defaults.$prefix}button-background,\n #{color.$background}\n);\n\n// --graupl-button-visited-background\n$button-visited-background: var(\n --#{root-defaults.$prefix}button-visited-background,\n #{$button-background}\n);\n\n// --graupl-button-focus-background\n$button-focus-background: var(\n --#{root-defaults.$prefix}button-focus-background,\n #{$button-background}\n);\n\n// --graupl-button-hover-background\n$button-hover-background: var(\n --#{root-defaults.$prefix}button-hover-background,\n #{color.$color}\n);\n\n// --graupl-button-active-background\n$button-active-background: var(\n --#{root-defaults.$prefix}button-active-background,\n #{$button-hover-background}\n);\n\n// --graupl-button-disabled-background\n$button-disabled-background: var(\n --#{root-defaults.$prefix}button-disabled-background,\n #{color.$background}\n);\n$button-background-states: (\n default: $button-background,\n visited: $button-visited-background,\n focus: $button-focus-background,\n hover: $button-hover-background,\n active: $button-active-background,\n disabled: $button-disabled-background,\n);\n\n// Text properties.\n// --graupl-button-color\n$button-color: var(--#{root-defaults.$prefix}button-color, #{color.$color});\n\n// --graupl-button-visited-color\n$button-visited-color: var(\n --#{root-defaults.$prefix}button-visited-color,\n #{$button-color}\n);\n\n// --graupl-button-focus-color\n$button-focus-color: var(\n --#{root-defaults.$prefix}button-focus-color,\n #{$button-color}\n);\n\n// --graupl-button-hover-color\n$button-hover-color: var(\n --#{root-defaults.$prefix}button-hover-color,\n #{color.$background}\n);\n\n// --graupl-button-active-color\n$button-active-color: var(\n --#{root-defaults.$prefix}button-active-color,\n #{$button-hover-color}\n);\n\n// --graupl-button-disabled-color\n$button-disabled-color: var(\n --#{root-defaults.$prefix}button-disabled-color,\n #{theme.get(primary, 200)}\n);\n$button-color-states: (\n default: $button-color,\n visited: $button-visited-color,\n focus: $button-focus-color,\n hover: $button-hover-color,\n active: $button-active-color,\n disabled: $button-disabled-color,\n);\n\n// Border properties.\n// --graupl-button-border-top-width\n$button-border-top-width: var(\n --#{root-defaults.$prefix}button-border-top-width,\n #{root-variables.$border-top-width}\n);\n\n// --graupl-button-border-right-width\n$button-border-right-width: var(\n --#{root-defaults.$prefix}button-border-right-width,\n #{root-variables.$border-right-width}\n);\n\n// --graupl-button-border-bottom-width\n$button-border-bottom-width: var(\n --#{root-defaults.$prefix}button-border-bottom-width,\n #{root-variables.$border-bottom-width}\n);\n\n// --graupl-button-border-left-width\n$button-border-left-width: var(\n --#{root-defaults.$prefix}button-border-left-width,\n #{root-variables.$border-left-width}\n);\n\n// --graupl-button-border-width\n$button-border-width: var(\n --#{root-defaults.$prefix}button-border-width,\n #{$button-border-top-width} #{$button-border-right-width}\n #{$button-border-bottom-width} #{$button-border-left-width}\n);\n\n// --graupl-button-border-top-style\n$button-border-top-style: var(\n --#{root-defaults.$prefix}button-border-top-style,\n #{root-variables.$border-top-style}\n);\n\n// --graupl-button-border-right-style\n$button-border-right-style: var(\n --#{root-defaults.$prefix}button-border-right-style,\n #{root-variables.$border-right-style}\n);\n\n// --graupl-button-border-bottom-style\n$button-border-bottom-style: var(\n --#{root-defaults.$prefix}button-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n\n// --graupl-button-border-left-style\n$button-border-left-style: var(\n --#{root-defaults.$prefix}button-border-left-style,\n #{root-variables.$border-left-style}\n);\n\n// --graupl-button-border-style\n$button-border-style: var(\n --#{root-defaults.$prefix}button-border-style,\n #{$button-border-top-style} #{$button-border-right-style}\n #{$button-border-bottom-style} #{$button-border-left-style}\n);\n\n// --graupl-button-border-top-left-radius\n$button-border-top-left-radius: var(\n --#{root-defaults.$prefix}button-border-top-left-radius,\n #{root-variables.$border-top-left-radius}\n);\n\n// --graupl-button-border-top-right-radius\n$button-border-top-right-radius: var(\n --#{root-defaults.$prefix}button-border-top-right-radius,\n #{root-variables.$border-top-right-radius}\n);\n\n// --graupl-button-border-bottom-right-radius\n$button-border-bottom-right-radius: var(\n --#{root-defaults.$prefix}button-border-bottom-right-radius,\n #{root-variables.$border-bottom-right-radius}\n);\n\n// --graupl-button-border-bottom-left-radius\n$button-border-bottom-left-radius: var(\n --#{root-defaults.$prefix}button-border-bottom-left-radius,\n #{root-variables.$border-bottom-left-radius}\n);\n\n// --graupl-button-border-radius\n$button-border-radius: var(\n --#{root-defaults.$prefix}button-border-radius,\n #{$button-border-top-left-radius} #{$button-border-top-right-radius}\n #{$button-border-bottom-right-radius} #{$button-border-bottom-left-radius}\n);\n\n// Border colour properties.\n// --graupl-button-border-color\n$button-border-color: var(\n --#{root-defaults.$prefix}button-border-color,\n #{color.$border-color}\n);\n\n// --graupl-button-visited-border-color\n$button-visited-border-color: var(\n --#{root-defaults.$prefix}button-visited-border-color,\n #{$button-border-color}\n);\n\n// --graupl-button-focus-border-color\n$button-focus-border-color: var(\n --#{root-defaults.$prefix}button-focus-border-color,\n #{$button-border-color}\n);\n\n// --graupl-button-hover-border-color\n$button-hover-border-color: var(\n --#{root-defaults.$prefix}button-hover-border-color,\n #{color.$border-color}\n);\n\n// --graupl-button-active-border-color\n$button-active-border-color: var(\n --#{root-defaults.$prefix}button-active-border-color,\n #{$button-hover-border-color}\n);\n\n// --graupl-button-disabled-border-color\n$button-disabled-border-color: var(\n --#{root-defaults.$prefix}button-disabled-border-color,\n #{theme.get(primary, 200)}\n);\n$button-border-color-states: (\n default: $button-border-color,\n visited: $button-visited-border-color,\n focus: $button-focus-border-color,\n hover: $button-hover-border-color,\n active: $button-active-border-color,\n disabled: $button-disabled-border-color,\n);\n","// @graupl/core state mixins.\n//\n// A series of mixins to tie styles to a state.\n\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n\n/// Applies styles to a specific state.\n///\n/// @param {string} $state\n/// The name of the state to apply the styles to.\n@mixin state($state) {\n @each $selector in map.get(root-defaults.$state-selectors, $state) {\n &#{$selector} {\n @content;\n }\n }\n}\n\n/// Generates state modifiers with properties.\n///\n/// @param {map} $state-map\n/// The map of props and states.\n/// @param {string} $selector-base\n/// The selector base for the state modifier.\n/// @param {string} $selector-prefix\n/// The selector prefix for the state modifer.\n@mixin generate-modifiers($state-map) {\n @each $state, $selectors in root-defaults.$state-selectors {\n @each $selector in $selectors {\n // e.g &:visited, &:focus-visible, &:hover, &:active, &:disabled\n &#{$selector} {\n @each $prop, $map in $state-map {\n #{$prop}: map.get($map, $state);\n }\n\n // If the state is disabled, we want that to supersede all other states.\n @if $state == \"disabled\" {\n @each $sub-state, $sub-selectors in root-defaults.$state-selectors {\n @if $sub-state != $state {\n @each $sub-selector in $sub-selectors {\n // e.g &:visited, &:focus-visible, &:hover, &:active\n &#{$sub-selector} {\n @each $prop, $map in $state-map {\n #{$prop}: map.get($map, $state);\n }\n }\n }\n }\n }\n }\n }\n }\n }\n}\n","// @graupl/core animation media query mixins.\n\n// A media query for targeting users who have not requested reduced motion.\n@mixin on {\n @media (prefers-reduced-motion: no-preference) {\n @content;\n }\n}\n\n// A media query for targeting users who have requested reduced motion.\n@mixin off {\n @media (prefers-reduced-motion: reduce) {\n @content;\n }\n}\n","// @graupl/core link base mixins.\n\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/animation\";\n@use \"../../mixins/state\";\n@use \"../../mixins/theme\";\n@use \"defaults\";\n@use \"variables\" as *;\n\n/// Mixin to apply base styles for links.\n@mixin apply-base() {\n min-width: $link-min-width;\n min-height: $link-min-height;\n padding: $link-padding;\n transform: $link-transform;\n transition: $link-transition;\n border-width: $link-border-width;\n border-style: $link-border-style;\n border-radius: $link-border-radius;\n text-decoration: $link-text-decoration;\n text-decoration-style: $link-text-decoration-style;\n text-decoration-thickness: $link-text-decoration-thickness;\n\n @include state.generate-modifiers(\n (\n transform: $link-transform-states,\n text-decoration: $link-text-decoration-states,\n text-decoration-style: $link-text-decoration-style-states,\n text-decoration-thickness: $link-text-decoration-thickness-states,\n )\n );\n\n @include animation.off {\n transition: #{$link-transition-reduced-motion};\n }\n}\n\n/// Mixin to apply theme styles for links.\n@mixin apply-theme() {\n border-color: $link-border-color;\n background: $link-background;\n color: $link-color;\n text-decoration-color: $link-text-decoration-color;\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$link-theme-map,\n defaults.$link-theme-prefix-selector-base,\n defaults.$link-theme-prefix-selector,\n \"link-\"\n );\n }\n\n @include state.generate-modifiers(\n (\n border-color: $link-border-color-states,\n background: $link-background-states,\n color: $link-color-states,\n text-decoration-color: $link-text-decoration-color-states,\n )\n );\n}\n\n/// Mixin to apply stretched link styles.\n@mixin apply-stretched() {\n isolation: isolate;\n\n // &::after\n &::#{defaults.$stretched-link-pseudo-selector} {\n content: \"\";\n position: absolute;\n inset: 0;\n z-index: $stretched-link-z-index;\n }\n}\n\n/// Mixin to apply all link styles.\n@mixin apply() {\n @include apply-base;\n @include apply-theme;\n}\n","// @graupl/core link base variables.\n//\n// These values are to be used to directly style bases and provide a\n// cleaner way to reference custom properties.\n\n// Custom property defaults:\n// | Custom property | Default |\n// | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | --graupl-link-text-decoration | underline |\n// | --graupl-link-visited-text-decoration | var(--graupl-link-text-decoration) |\n// | --graupl-link-focus-text-decoration | var(--graupl-link-text-decoration) |\n// | --graupl-link-hover-text-decoration | underline |\n// | --graupl-link-active-text-decoration | var(--graupl-link-hover-text-decoration) |\n// | --graupl-link-disabled-text-decoration | underline |\n// | --graupl-link-text-decoration-thickness | var(--graupl-border-width) |\n// | --graupl-link-visited-text-decoration-thickness | var(--graupl-link-text-decoration-thickness) |\n// | --graupl-link-focus-text-decoration-thickness | var(--graupl-link-text-decoration-thickness) |\n// | --graupl-link-hover-text-decoration-thickness | var(--graupl-border-width) |\n// | --graupl-link-active-text-decoration-thickness | var(--graupl-link-hover-text-decoration-thickness) |\n// | --graupl-link-disabled-text-decoration-thickness | var(--graupl-border-width) |\n// | --graupl-link-text-decoration-style | solid |\n// | --graupl-link-visited-text-decoration-style | var(--graupl-link-text-decoration-style) |\n// | --graupl-link-focus-text-decoration-style | var(--graupl-link-text-decoration-style) |\n// | --graupl-link-hover-text-decoration-style | solid |\n// | --graupl-link-active-text-decoration-style | var(--graupl-link-hover-text-decoration-style) |\n// | --graupl-link-disabled-text-decoration-style | solid |\n// | --graupl-link-color | var(--graupl-theme-active--primary--700) |\n// | --graupl-link-visited-color | var(--graupl-link-color) |\n// | --graupl-link-focus-color | var(--graupl-link-color) |\n// | --graupl-link-hover-color | theme.get(tertiary, 700) |\n// | --graupl-link-active-color | var(--graupl-link-hover-color) |\n// | --graupl-link-disabled-color | var(--graupl-theme-active--primary--200) |\n// | --graupl-link-text-decoration-color | var(--graupl-link-color) |\n// | --graupl-link-visited-text-decoration-color | var(--graupl-link-visited-color) |\n// | --graupl-link-focus-text-decoration-color | var(--graupl-link-focus-color) |\n// | --graupl-link-hover-text-decoration-color | var(--graupl-link-hover-color) |\n// | --graupl-link-active-text-decoration-color | var(--graupl-link-active-color) |\n// | --graupl-link-disabled-text-decoration-color | var(--graupl-link-disabled-color) |\n// | --graupl-link-background | theme.get(transparent) |\n// | --graupl-link-visited-background | var(--graupl-link-background) |\n// | --graupl-link-focus-background | var(--graupl-link-background) |\n// | --graupl-link-hover-background | theme.get(transparent) |\n// | --graupl-link-active-background | var(--graupl-link-hover-background) |\n// | --graupl-link-disabled-background | theme.get(transparent) |\n// | --graupl-link-padding-x | var(--graupl-spacer-0) |\n// | --graupl-link-padding-y | var(--graupl-spacer-0) |\n// | --graupl-link-padding | var(--graupl-link-padding-y) var(--graupl-link-padding-x) |\n// | --graupl-link-transition | background var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function), color var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function), transform var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function) |\n// | --graupl-link-transition-reduced-motion | background var(--graupl-transition-duration-none) var(--graupl-transition-timing-function), color var(--graupl-transition-duration-none) var(--graupl-transition-timing-function) |\n// | --graupl-link-transform | var(--graupl-link-initial-transform) |\n// | --graupl-link-visited-transform | var(--graupl-link-transform) |\n// | --graupl-link-focus-transform | var(--graupl-link-transform) |\n// | --graupl-link-hover-transform | var(--graupl-link-final-transform) |\n// | --graupl-link-active-transform | var(--graupl-link-hover-transform) |\n// | --graupl-link-disabled-transform | var(--graupl-link-disabled-transform) |\n// | --graupl-link-border-top-width | 0 |\n// | --graupl-link-border-right-width | 0 |\n// | --graupl-link-border-bottom-width | 0 |\n// | --graupl-link-border-left-width | 0 |\n// | --graupl-link-border-width | var(--graupl-link-border-top-width) var(--graupl-link-border-right-width) var(--graupl-link-border-bottom-width) var(--graupl-link-border-left-width) |\n// | --graupl-link-border-top-style | var(--graupl-border-top-style) |\n// | --graupl-link-border-right-style | var(--graupl-border-right-style) |\n// | --graupl-link-border-bottom-style | var(--graupl-border-bottom-style) |\n// | --graupl-link-border-left-style | var(--graupl-border-left-style) |\n// | --graupl-link-border-style | var(--graupl-link-border-top-style) var(--graupl-link-border-right-style) var(--graupl-link-border-bottom-style) var(--graupl-link-border-left-style) |\n// | --graupl-link-border-top-left-radius | var(--graupl-border-top-left-radius) |\n// | --graupl-link-border-top-right-radius | var(--graupl-border-top-right-radius) |\n// | --graupl-link-border-bottom-right-radius | var(--graupl-border-bottom-right-radius) |\n// | --graupl-link-border-bottom-left-radius | var(--graupl-border-bottom-left-radius) |\n// | --graupl-link-border-radius | var(--graupl-link-border-top-left-radius) var(--graupl-link-border-top-right-radius) var(--graupl-link-border-bottom-right-radius) var(--graupl-link-border-bottom-left-radius) |\n// | --graupl-link-border-color | theme.get(transparent) |\n// | --graupl-link-visited-border-color | var(--graupl-link-border-color) |\n// | --graupl-link-focus-border-color | var(--graupl-link-border-color) |\n// | --graupl-link-hover-border-color | theme.get(transparent) |\n// | --graupl-link-active-border-color | var(--graupl-link-hover-border-color) |\n// | --graupl-link-disabled-border-color | theme.get(transparent) |\n// | --graupl-link-min-width | var(--graupl-link-min-width) |\n// | --graupl-link-min-height | var(--graupl-link-min-height) |\n// | --graupl-stretched-link-z-index | var(--graupl-stretched-link-z-index) |\n\n@use \"defaults\";\n@use \"../../variables\" as root-variables;\n@use \"../../defaults\" as root-defaults;\n@use \"../../functions/theme\";\n@use \"sass:map\";\n\n// Link properties.\n// --graupl-link-text-decoration\n$link-text-decoration: var(\n --#{root-defaults.$prefix}link-text-decoration,\n #{defaults.$link-initial-text-decoration}\n);\n\n// --graupl-link-visited-text-decoration\n$link-visited-text-decoration: var(\n --#{root-defaults.$prefix}link-visited-text-decoration,\n #{$link-text-decoration}\n);\n\n// --graupl-link-focus-text-decoration\n$link-focus-text-decoration: var(\n --#{root-defaults.$prefix}link-focus-text-decoration,\n #{$link-text-decoration}\n);\n\n// --graupl-link-hover-text-decoration\n$link-hover-text-decoration: var(\n --#{root-defaults.$prefix}link-hover-text-decoration,\n #{defaults.$link-final-text-decoration}\n);\n\n// --graupl-link-active-text-decoration\n$link-active-text-decoration: var(\n --#{root-defaults.$prefix}link-active-text-decoration,\n #{$link-hover-text-decoration}\n);\n\n// --graupl-link-disabled-text-decoration\n$link-disabled-text-decoration: var(\n --#{root-defaults.$prefix}link-disabled-text-decoration,\n #{defaults.$link-disabled-text-decoration}\n);\n$link-text-decoration-states: (\n default: $link-text-decoration,\n visited: $link-visited-text-decoration,\n focus: $link-focus-text-decoration,\n hover: $link-hover-text-decoration,\n active: $link-active-text-decoration,\n disabled: $link-disabled-text-decoration,\n);\n\n// --graupl-link-text-decoration-thickness\n$link-text-decoration-thickness: var(\n --#{root-defaults.$prefix}link-text-decoration-thickness,\n #{root-variables.$border-width}\n);\n\n// --graupl-link-visited-text-decoration-thickness\n$link-visited-text-decoration-thickness: var(\n --#{root-defaults.$prefix}link-visited-text-decoration-thickness,\n #{$link-text-decoration-thickness}\n);\n\n// --graupl-link-focus-text-decoration-thickness\n$link-focus-text-decoration-thickness: var(\n --#{root-defaults.$prefix}link-focus-text-decoration-thickness,\n #{$link-text-decoration-thickness}\n);\n\n// --graupl-link-hover-text-decoration-thickness\n$link-hover-text-decoration-thickness: var(\n --#{root-defaults.$prefix}link-hover-text-decoration-thickness,\n #{root-variables.$border-width}\n);\n\n// --graupl-link-active-text-decoration-thickness\n$link-active-text-decoration-thickness: var(\n --#{root-defaults.$prefix}link-active-text-decoration-thickness,\n #{$link-hover-text-decoration-thickness}\n);\n\n// --graupl-link-disabled-text-decoration-thickness\n$link-disabled-text-decoration-thickness: var(\n --#{root-defaults.$prefix}link-disabled-text-decoration-thickness,\n #{root-variables.$border-width}\n);\n$link-text-decoration-thickness-states: (\n default: $link-text-decoration-thickness,\n visited: $link-visited-text-decoration-thickness,\n focus: $link-focus-text-decoration-thickness,\n hover: $link-hover-text-decoration-thickness,\n active: $link-active-text-decoration-thickness,\n disabled: $link-disabled-text-decoration-thickness,\n);\n\n// --graupl-link-text-decoration-style\n$link-text-decoration-style: var(\n --#{root-defaults.$prefix}link-text-decoration-style,\n #{defaults.$link-initial-text-decoration-style}\n);\n\n// --graupl-link-visited-text-decoration-style\n$link-visited-text-decoration-style: var(\n --#{root-defaults.$prefix}link-visited-text-decoration-style,\n #{$link-text-decoration-style}\n);\n\n// --graupl-link-focus-text-decoration-style\n$link-focus-text-decoration-style: var(\n --#{root-defaults.$prefix}link-focus-text-decoration-style,\n #{$link-text-decoration-style}\n);\n\n// --graupl-link-hover-text-decoration-style\n$link-hover-text-decoration-style: var(\n --#{root-defaults.$prefix}link-hover-text-decoration-style,\n #{defaults.$link-final-text-decoration-style}\n);\n\n// --graupl-link-active-text-decoration-style\n$link-active-text-decoration-style: var(\n --#{root-defaults.$prefix}link-active-text-decoration-style,\n #{$link-hover-text-decoration-style}\n);\n\n// --graupl-link-disabled-text-decoration-style\n$link-disabled-text-decoration-style: var(\n --#{root-defaults.$prefix}link-disabled-text-decoration-style,\n #{defaults.$link-disabled-text-decoration-style}\n);\n$link-text-decoration-style-states: (\n default: $link-text-decoration-style,\n visited: $link-visited-text-decoration-style,\n focus: $link-focus-text-decoration-style,\n hover: $link-hover-text-decoration-style,\n active: $link-active-text-decoration-style,\n disabled: $link-disabled-text-decoration-style,\n);\n\n// --graupl-link-color\n$link-color: var(\n --#{root-defaults.$prefix}link-color,\n #{theme.get(primary, 700)}\n);\n\n// --graupl-link-visited-color\n$link-visited-color: var(\n --#{root-defaults.$prefix}link-visited-color,\n #{$link-color}\n);\n\n// --graupl-link-focus-color\n$link-focus-color: var(\n --#{root-defaults.$prefix}link-focus-color,\n #{$link-color}\n);\n\n// --graupl-link-hover-color\n$link-hover-color: var(\n --#{root-defaults.$prefix}link-hover-color,\n #{theme.get(tertiary, 700)}\n);\n\n// --graupl-link-active-color\n$link-active-color: var(\n --#{root-defaults.$prefix}link-active-color,\n #{$link-hover-color}\n);\n\n// --graupl-link-disabled-color\n$link-disabled-color: var(\n --#{root-defaults.$prefix}link-disabled-color,\n #{theme.get(primary, 200)}\n);\n$link-color-states: (\n default: $link-color,\n visited: $link-visited-color,\n focus: $link-focus-color,\n hover: $link-hover-color,\n active: $link-active-color,\n disabled: $link-disabled-color,\n);\n\n// --graupl-link-text-decoration-color\n$link-text-decoration-color: var(\n --#{root-defaults.$prefix}link-text-decoration-color,\n #{$link-color}\n);\n\n// --graupl-link-visited-text-decoration-color\n$link-visited-text-decoration-color: var(\n --#{root-defaults.$prefix}link-visited-text-decoration-color,\n #{$link-visited-color}\n);\n\n// --graupl-link-focus-text-decoration-color\n$link-focus-text-decoration-color: var(\n --#{root-defaults.$prefix}link-focus-text-decoration-color,\n #{$link-focus-color}\n);\n\n// --graupl-link-hover-text-decoration-color\n$link-hover-text-decoration-color: var(\n --#{root-defaults.$prefix}link-hover-text-decoration-color,\n #{$link-hover-color}\n);\n\n// --graupl-link-active-text-decoration-color\n$link-active-text-decoration-color: var(\n --#{root-defaults.$prefix}link-active-text-decoration-color,\n #{$link-active-color}\n);\n\n// --graupl-link-disabled-text-decoration-color\n$link-disabled-text-decoration-color: var(\n --#{root-defaults.$prefix}link-disabled-text-decoration-color,\n #{$link-disabled-color}\n);\n$link-text-decoration-color-states: (\n default: $link-text-decoration-color,\n visited: $link-visited-text-decoration-color,\n focus: $link-focus-text-decoration-color,\n hover: $link-hover-text-decoration-color,\n active: $link-active-text-decoration-color,\n disabled: $link-disabled-text-decoration-color,\n);\n\n// --graupl-link-background\n$link-background: var(\n --#{root-defaults.$prefix}link-background,\n #{theme.get(transparent)}\n);\n\n// --graupl-link-visited-background\n$link-visited-background: var(\n --#{root-defaults.$prefix}link-visited-background,\n #{$link-background}\n);\n\n// --graupl-link-focus-background\n$link-focus-background: var(\n --#{root-defaults.$prefix}link-focus-background,\n #{$link-background}\n);\n\n// --graupl-link-hover-background\n$link-hover-background: var(\n --#{root-defaults.$prefix}link-hover-background,\n #{theme.get(transparent)}\n);\n\n// --graupl-link-active-background\n$link-active-background: var(\n --#{root-defaults.$prefix}link-active-background,\n #{$link-hover-background}\n);\n\n// --graupl-link-disabled-background\n$link-disabled-background: var(\n --#{root-defaults.$prefix}link-disabled-background,\n #{theme.get(transparent)}\n);\n$link-background-states: (\n default: $link-background,\n visited: $link-visited-background,\n focus: $link-focus-background,\n hover: $link-hover-background,\n active: $link-active-background,\n disabled: $link-disabled-background,\n);\n\n// --graupl-link-padding-x\n$link-padding-x: var(\n --#{root-defaults.$prefix}link-padding-x,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-link-padding-y\n$link-padding-y: var(\n --#{root-defaults.$prefix}link-padding-y,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-link-padding\n$link-padding: var(\n --#{root-defaults.$prefix}link-padding,\n #{$link-padding-y} #{$link-padding-x}\n);\n\n// --graupl-link-transition\n$link-transition: var(\n --#{root-defaults.$prefix}link-transition,\n background #{map.get(root-variables.$transition-durations, fast)}\n #{root-variables.$transition-timing-function},\n color #{map.get(root-variables.$transition-durations, fast)}\n #{root-variables.$transition-timing-function},\n transform #{map.get(root-variables.$transition-durations, fast)}\n #{root-variables.$transition-timing-function}\n);\n\n// --graupl-link-transition-reduced-motion\n$link-transition-reduced-motion: var(\n --#{root-defaults.$prefix}link-transition-reduced-motion,\n background #{map.get(root-variables.$transition-durations, none)}\n #{root-variables.$transition-timing-function},\n color #{map.get(root-variables.$transition-durations, none)}\n #{root-variables.$transition-timing-function}\n);\n\n// --graupl-link-transform\n$link-transform: var(\n --#{root-defaults.$prefix}link-transform,\n #{defaults.$link-initial-transform}\n);\n\n// --graupl-link-visited-transform\n$link-visited-transform: var(\n --#{root-defaults.$prefix}link-visited-transform,\n #{$link-transform}\n);\n\n// --graupl-link-focus-transform\n$link-focus-transform: var(\n --#{root-defaults.$prefix}link-focus-transform,\n #{$link-transform}\n);\n\n// --graupl-link-hover-transform\n$link-hover-transform: var(\n --#{root-defaults.$prefix}link-hover-transform,\n #{defaults.$link-final-transform}\n);\n\n// --graupl-link-active-transform\n$link-active-transform: var(\n --#{root-defaults.$prefix}link-active-transform,\n #{$link-hover-transform}\n);\n\n// --graupl-link-disabled-transform\n$link-disabled-transform: var(\n --#{root-defaults.$prefix}link-disabled-transform,\n #{defaults.$link-disabled-transform}\n);\n$link-transform-states: (\n default: $link-transform,\n visited: $link-visited-transform,\n focus: $link-focus-transform,\n hover: $link-hover-transform,\n active: $link-active-transform,\n disabled: $link-disabled-transform,\n);\n\n// --graupl-link-border-top-width\n$link-border-top-width: var(--#{root-defaults.$prefix}link-border-top-width, 0);\n\n// --graupl-link-border-right-width\n$link-border-right-width: var(\n --#{root-defaults.$prefix}link-border-right-width,\n 0\n);\n\n// --graupl-link-border-bottom-width\n$link-border-bottom-width: var(\n --#{root-defaults.$prefix}link-border-bottom-width,\n 0\n);\n\n// --graupl-link-border-left-width\n$link-border-left-width: var(\n --#{root-defaults.$prefix}link-border-left-width,\n 0\n);\n\n// --graupl-link-border-width\n$link-border-width: var(\n --#{root-defaults.$prefix}link-border-width,\n #{$link-border-top-width} #{$link-border-right-width}\n #{$link-border-bottom-width} #{$link-border-left-width}\n);\n\n// --graupl-link-border-top-style\n$link-border-top-style: var(\n --#{root-defaults.$prefix}link-border-top-style,\n #{root-variables.$border-top-style}\n);\n\n// --graupl-link-border-right-style\n$link-border-right-style: var(\n --#{root-defaults.$prefix}link-border-right-style,\n #{root-variables.$border-right-style}\n);\n\n// --graupl-link-border-bottom-style\n$link-border-bottom-style: var(\n --#{root-defaults.$prefix}link-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n\n// --graupl-link-border-left-style\n$link-border-left-style: var(\n --#{root-defaults.$prefix}link-border-left-style,\n #{root-variables.$border-left-style}\n);\n\n// --graupl-link-border-style\n$link-border-style: var(\n --#{root-defaults.$prefix}link-border-style,\n #{$link-border-top-style} #{$link-border-right-style}\n #{$link-border-bottom-style} #{$link-border-left-style}\n);\n\n// --graupl-link-border-top-left-radius\n$link-border-top-left-radius: var(\n --#{root-defaults.$prefix}link-border-top-left-radius,\n #{root-variables.$border-top-left-radius}\n);\n\n// --graupl-link-border-top-right-radius\n$link-border-top-right-radius: var(\n --#{root-defaults.$prefix}link-border-top-right-radius,\n #{root-variables.$border-top-right-radius}\n);\n\n// --graupl-link-border-bottom-right-radius\n$link-border-bottom-right-radius: var(\n --#{root-defaults.$prefix}link-border-bottom-right-radius,\n #{root-variables.$border-bottom-right-radius}\n);\n\n// --graupl-link-border-bottom-left-radius\n$link-border-bottom-left-radius: var(\n --#{root-defaults.$prefix}link-border-bottom-left-radius,\n #{root-variables.$border-bottom-left-radius}\n);\n\n// --graupl-link-border-radius\n$link-border-radius: var(\n --#{root-defaults.$prefix}link-border-radius,\n #{$link-border-top-left-radius} #{$link-border-top-right-radius}\n #{$link-border-bottom-right-radius} #{$link-border-bottom-left-radius}\n);\n\n// --graupl-link-border-color\n$link-border-color: var(\n --#{root-defaults.$prefix}link-border-color,\n #{theme.get(transparent)}\n);\n\n// --graupl-link-visited-border-color\n$link-visited-border-color: var(\n --#{root-defaults.$prefix}link-visited-border-color,\n #{$link-border-color}\n);\n\n// --graupl-link-focus-border-color\n$link-focus-border-color: var(\n --#{root-defaults.$prefix}link-focus-border-color,\n #{$link-border-color}\n);\n\n// --graupl-link-hover-border-color\n$link-hover-border-color: var(\n --#{root-defaults.$prefix}link-hover-border-color,\n #{theme.get(transparent)}\n);\n\n// --graupl-link-active-border-color\n$link-active-border-color: var(\n --#{root-defaults.$prefix}link-active-border-color,\n #{$link-hover-border-color}\n);\n\n// --graupl-link-disabled-border-color\n$link-disabled-border-color: var(\n --#{root-defaults.$prefix}link-disabled-border-color,\n #{theme.get(transparent)}\n);\n$link-border-color-states: (\n default: $link-border-color,\n visited: $link-visited-border-color,\n focus: $link-focus-border-color,\n hover: $link-hover-border-color,\n active: $link-active-border-color,\n disabled: $link-disabled-border-color,\n);\n\n// --graupl-link-min-width\n$link-min-width: var(\n --#{root-defaults.$prefix}link-min-width,\n defaults.$link-min-width\n);\n\n// --graupl-link-min-height\n$link-min-height: var(\n --#{root-defaults.$prefix}link-min-height,\n defaults.$link-min-height\n);\n\n// Stretched link properties.\n// --graupl-stretched-link-z-index\n$stretched-link-z-index: var(\n --#{root-defaults.$prefix}stretched-link-z-index,\n #{defaults.$stretched-link-z-index}\n);\n","// @graupl/core theme mixins.\n//\n// A series of mixins to tie styles to a theme-mode.\n\n@use \"../functions/theme\";\n@use \"../theme/color/defaults\" as color-defaults;\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n\n/// Applies styles to a specific theme mode.\n///\n/// @param {string} $theme-name\n/// The name of the theme mode to apply the styles to.\n@mixin theme($theme-name) {\n #{color-defaults.$theme-selector-base}#{color-defaults.$theme-selector-prefix}#{$theme-name}#{color-defaults.$theme-selector-suffix} {\n @content;\n }\n}\n\n/// Generates a theme modifiers with custom props.\n///\n/// @param {map} $theme-map\n/// The map of custom props.\n/// @param {string} $selector-base\n/// The selector base for the theme modifier.\n/// @param {string} $selector-prefix\n/// The selector prefix for the theme modifer.\n/// @param {string} $scope\n/// The scope of the custom properties.\n/// @param {string} $base\n/// The base selector to append the theme modifier to.\n@mixin generate-modifiers(\n $theme-map,\n $selector-base,\n $selector-prefix,\n $scope: \"\",\n $base: \"&\"\n) {\n @each $color, $map in $theme-map {\n // e.g. &.primary, &.secondary, &.tertiary\n #{$base}#{$selector-base}#{$selector-prefix}#{$color} {\n @each $prop, $value in $map {\n --#{root-defaults.$prefix}#{$scope}#{$prop}: #{theme.get(\n map.get($value, color),\n map.get($value, shade)\n )};\n }\n }\n }\n}\n","// @graupl/core form base styles.\n//\n// This module provides the base styles for form components such as inputs, textareas, selects, labels, and fieldsets.\n//\n// The following selectors are generated by default:\n// - `input`: The input component.\n// - `textarea`: The textarea component.\n// - `select`: The select component.\n// - `label`: The label component.\n// - `fieldset`: The fieldset component.\n//\n// The following custom properties can be used to customize the form components:\n// | Property | Description | Default Value |\n// | ---------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | `--graupl-input-padding-x` | The horizontal padding for input components. | `var(--graupl-spacer-5)` |\n// | `--graupl-input-padding-y` | The vertical padding for input components. | `var(--graupl-spacer-3)` |\n// | `--graupl-input-padding` | The padding for input components (combines x and y padding). | `var(--graupl-input-padding-y) var(--graupl-input-padding-x)` |\n// | `--graupl-input-font-size` | The font size for input components. | `var(--graupl-font-size-base)` |\n// | `--graupl-label-font-size` | The font size for label components. | `var(--graupl-input-font-size)` |\n// | `--graupl-fieldset-direction` | The direction of fieldset items- controls the `flex-direction` property. | `column` |\n// | `--graupl-fieldset-gap` | The gap between fieldset items. | `var(--graupl-spacer-2)` |\n// | `--graupl-fieldset-padding-x` | The horizontal padding for fieldset components. | `var(--graupl-input-padding-x)` |\n// | `--graupl-fieldset-padding-y` | The vertical padding for fieldset components. | `var(--graupl-input-padding-y)` |\n// | `--graupl-fieldset-padding` | The padding for fieldset components (combines x and y padding). | `var(--graupl-fieldset-padding-y) var(--graupl-fieldset-padding-x)` |\n// | `--graupl-fieldset-font-size` | The font size for fieldset components. | `var(--graupl-input-font-size)` |\n// | `--graupl-input-background` | The background color for input components. | `var(--graupl-background)` |\n// | `--graupl-fieldset-background` | The background color for fieldset components. | `var(--graupl-input-background)` |\n// | `--graupl-input-color` | The text color for input components. | `var(--graupl-color)` |\n// | `--graupl-input-placeholder-color` | The placeholder text color for input components. | `var(--graupl-theme-active--secondary--600)` |\n// | `--graupl-label-color` | The text color for label components. | `var(--graupl-input-color)` |\n// | `--graupl-fieldset-color` | The text color for fieldset components. | `var(--graupl-input-color)` |\n// | `--graupl-input-disabled-color` | The text color for disabled input components. | `var(--graupl-theme-active--secondary--400)` |\n// | `--graupl-input-placeholder-disabled-color` | The placeholder text color for disabled input components. | `var(--graupl-input-disabled-color)` |\n// | `--graupl-label-disabled-color` | The text color for labels for disabled components. | `var(--graupl-input-disabled-color)` |\n// | `--graupl-fieldset-disabled-color` | The text color for disabled fieldset components. | `var(--graupl-input-disabled-color)` |\n// | `--graupl-input-border-top-width` | The top border width for input components. | `var(--graupl-border-top-width)` |\n// | `--graupl-input-border-right-width` | The right border width for input components. | `var(--graupl-border-right-width)` |\n// | `--graupl-input-border-bottom-width` | The bottom border width for input components. | `var(--graupl-border-bottom-width)` |\n// | `--graupl-input-border-left-width` | The left border width for input components. | `var(--graupl-border-left-width)` |\n// | `--graupl-input-border-width` | The border width for input components (combines top, right, bottom, and left widths). | `var(--graupl-input-border-top-width) var(--graupl-input-border-right-width) var(--graupl-input-border-bottom-width) var(--graupl-input-border-left-width)` |\n// | `--graupl-input-border-top-style` | The top border style for input components. | `var(--graupl-border-top-style)` |\n// | `--graupl-input-border-right-style` | The right border style for input components. | `var(--graupl-border-right-style)` |\n// | `--graupl-input-border-bottom-style` | The bottom border style for input components. | `var(--graupl-border-bottom-style)` |\n// | `--graupl-input-border-left-style` | The left border style for input components. | `var(--graupl-border-left-style)` |\n// | `--graupl-input-border-style` | The border style for input components (combines top, right, bottom, and left styles). | `var(--graupl-input-border-top-style) var(--graupl-input-border-right-style) var(--graupl-input-border-bottom-style) var(--graupl-input-border-left-style)` |\n// | `--graupl-input-border-top-left-radius` | The top-left border radius for input components. | `var(--graupl-border-top-left-radius)` |\n// | `--graupl-input-border-top-right-radius` | The top-right border radius for input components. | `var(--graupl-border-top-right-radius)` |\n// | `--graupl-input-border-bottom-right-radius` | The bottom-right border radius for input components. | `var(--graupl-border-bottom-right-radius)` |\n// | `--graupl-input-border-bottom-left-radius` | The bottom-left border radius for input components. | `var(--graupl-border-bottom-left-radius)` |\n// | `--graupl-input-border-radius` | The border radius for input components (combines top-left, top-right, bottom-right, and bottom-left radii). | `var(--graupl-input-border-top-left-radius) var(--graupl-input-border-top-right-radius) var(--graupl-input-border-bottom-right-radius) var(--graupl-input-border-bottom-left-radius)` |\n// | `--graupl-fieldset-border-top-width` | The top border width for fieldset components. | `var(--graupl-input-border-top-width)` |\n// | `--graupl-fieldset-border-right-width` | The right border width for fieldset components. | `var(--graupl-input-border-right-width)` |\n// | `--graupl-fieldset-border-bottom-width` | The bottom border width for fieldset components. | `var(--graupl-input-border-bottom-width)` |\n// | `--graupl-fieldset-border-left-width` | The left border width for fieldset components. | `var(--graupl-input-border-left-width)` |\n// | `--graupl-fieldset-border-width` | The border width for fieldset components (combines top, right, bottom, and left widths). | `var(--graupl-fieldset-border-top-width) var(--graupl-fieldset-border-right-width) var(--graupl-fieldset-border-bottom-width) var(--graupl-fieldset-border-left-width)` |\n// | `--graupl-fieldset-border-top-style` | The top border style for fieldset components. | `var(--graupl-input-border-top-style)` |\n// | `--graupl-fieldset-border-right-style` | The right border style for fieldset components. | `var(--graupl-input-border-right-style)` |\n// | `--graupl-fieldset-border-bottom-style` | The bottom border style for fieldset components. | `var(--graupl-input-border-bottom-style)` |\n// | `--graupl-fieldset-border-left-style` | The left border style for fieldset components. | `var(--graupl-input-border-left-style)` |\n// | `--graupl-fieldset-border-style` | The border style for fieldset components (combines top, right, bottom, and left styles). | `var(--graupl-fieldset-border-top-style) var(--graupl-fieldset-border-right-style) var(--graupl-fieldset-border-bottom-style) var(--graupl-fieldset-border-left-style)` |\n// | `--graupl-fieldset-border-top-left-radius` | The top-left border radius for fieldset components. | `var(--graupl-input-border-top-left-radius)` |\n// | `--graupl-fieldset-border-top-right-radius` | The top-right border radius for fieldset components. | `var(--graupl-input-border-top-right-radius)` |\n// | `--graupl-fieldset-border-bottom-right-radius` | The bottom-right border radius for fieldset components. | `var(--graupl-input-border-bottom-right-radius)` |\n// | `--graupl-fieldset-border-bottom-left-radius` | The bottom-left border radius for fieldset components. | `var(--graupl-input-border-bottom-left-radius)` |\n// | `--graupl-fieldset-border-radius` | The border radius for fieldset components (combines top-left, top-right, bottom-right, and bottom-left radii). | `var(--graupl-fieldset-border-top-left-radius) var(--graupl-fieldset-border-top-right-radius) var(--graupl-fieldset-border-bottom-right-radius) var(--graupl-fieldset-border-bottom-left-radius)` |\n// | `--graupl-input-border-color` | The border color for input components. | `var(--graupl-border-color)` |\n// | `--graupl-input-disabled-border-color` | The border color for disabled input components. | `var(--graupl-theme-active--secondary--200)` |\n// | `--graupl-fieldset-border-color` | The border color for fieldset components. | `var(--graupl-input-border-color)` |\n// | `--graupl-fieldset-disabled-border-color` | The border color for disabled fieldset components. | `var(--graupl-input-disabled-border-color)` |\n// | `--graupl-input-accent-color` | The accent color for input components. | `var(--graupl-input-color)` |\n//\n// The following sass variables can be used to customize the generation of the form components:\n// | Variable | Description | Default Value |\n// | -------------------------------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------- |\n// | `$selector-base` | The selector base for the component. | `\"\"` |\n// | `$modifier-selector-base` | The selector base for component modifiers. | `\".\"` |\n// | `$generate-base-theme-map` | Flag to generate the base theme maps for form elements. | `true` |\n// | `$themeable` | Flag to generate theme modifiers. | `true` |\n// | `$input-selector-base` | The base selector for the input component. | `\"\"` |\n// | `$input-selector` | The input component selector. | `\"input\"` |\n// | `$input-theme-prefix-selector-base` | Selector base used for input theme modifiers. | `\".\"` |\n// | `$input-theme-prefix-selector` | Selector prefix used for input theme modifiers. | `\"\"` |\n// | `$textarea-selector-base` | The base selector for the textarea component. | `\"\"` |\n// | `$textarea-selector` | The textarea component selector. | `\"textarea\"` |\n// | `$select-selector-base` | The base selector for the select component. | `\"\"` |\n// | `$select-selector` | The select component selector. | `\"select\"` |\n// | `$label-selector-base` | The base selector for the label component. | `\"\"` |\n// | `$label-selector` | The label component selector. | `\"label\"` |\n// | `$label-theme-prefix-selector-base` | Selector base used for label theme modifiers. | `\".\"` |\n// | `$label-theme-prefix-selector` | Selector prefix used for label theme modifiers. | `\"\"` |\n// | `$fieldset-selector-base` | The base selector for the fieldset component. | `\"\"` |\n// | `$fieldset-selector` | The fieldset component selector. | `\"fieldset\"` |\n// | `$fieldset-theme-prefix-selector-base` | Selector base used for fieldset theme modifiers. | `\".\"` |\n// | `$fieldset-theme-prefix-selector` | Selector prefix used for fieldset theme modifiers. | `\"\"` |\n// | `$fieldset-direction` | The direction of fieldset component items. | `column` |\n// | `$input-theme-mappings` | Map of properties and shade values applied to themed input variants. | `()` |\n// | `$input-theme-map` | Fully expanded property map used to generate themed input variants. | `map.deep-merge($-input-theme-map, $input-theme-map)` |\n// | `$label-theme-mappings` | Map of properties and shade values applied to themed label variants. | `()` |\n// | `$label-theme-map` | Fully expanded property map used to generate themed label variants. | `map.deep-merge($-label-theme-map, $label-theme-map)` |\n// | `$fieldset-theme-mappings` | Map of properties and shade values applied to themed fieldset variants. | `()` |\n// | `$fieldset-theme-map` | Fully expanded property map used to generate themed fieldset variants. | `map.deep-merge($-fieldset-theme-map, $fieldset-theme-map)` |\n//\n// ## Using `$input-theme-mappings`, `$label-theme-mappings`, and `$fieldset-theme-mappings`\n//\n// Each of these variables is a single-level map of properties and shade values.\n//\n// e.g.\n// ```scss\n// $input-theme-mappings: (\n// color: 900,\n// background: 100,\n// border-color: 700,\n// );\n// ```\n//\n// This directly[1] informs all input variants what shade to use for each property key.\n// Based on the example above:\n// - Primary inputs expose `--graupl-input-color`, `--graupl-input-background`, and `--graupl-input-border-color` as `var(--graupl-theme-active--primary--900/100/700)`,\n// - Secondary inputs expose those properties via the secondary palette, and\n// - Tertiary inputs expose those properties via the tertiary palette.\n//\n// The same pattern applies to `$label-theme-mappings` and `$fieldset-theme-mappings`, ensuring every form element stays in sync across variants.\n//\n// ```scss\n// $label-theme-mappings: (\n// color: 800,\n// );\n// $fieldset-theme-mappings: (\n// background: 50,\n// border-color: 600,\n// );\n// ```\n//\n// - Primary labels use `--graupl-theme-active--primary--800` for `--graupl-label-color`,\n// - Primary fieldsets use `--graupl-theme-active--primary--50` / `--graupl-theme-active--primary--600` for their background/border colours, and other variants follow suit using their palettes.\n//\n// [1] Each `*-theme-mappings` map gets parsed into a larger, more explicit map: the corresponding `*-theme-map`.\n//\n// ## Using `$input-theme-map`, `$label-theme-map`, and `$fieldset-theme-map`\n//\n// These variables are multi-level maps of properties, colours, and shade values, allowing you to override individual variants without affecting the others.\n//\n// e.g.\n// ```scss\n// $input-theme-map: (\n// primary: (\n// border-color: (\n// color: primary,\n// shade: 950,\n// ),\n// ),\n// secondary: (\n// background: (\n// color: secondary,\n// shade: 200,\n// ),\n// ),\n// );\n// ```\n//\n// This example deepens the primary input border colour while lightening the secondary input background. You can mix and match overrides for labels and fieldsets in their respective maps to target variants independently.\n//\n// @example\n// <label for=\"input-id\">Input Label</label>\n// <input id=\"input-id\" type=\"text\" placeholder=\"Enter text\" />\n//\n// @example\n// <label for=\"textarea-id\">Textarea Label</label>\n// <textarea id=\"textarea-id\" placeholder=\"Enter text\"></textarea>\n//\n// @example\n// <label for=\"select-id\">Select Label</label>\n// <select id=\"select-id\">\n// <option value=\"1\">Option 1</option>\n// <option value=\"2\">Option 2</option>\n// </select>\n//\n// @example\n// <fieldset>\n// <legend>Fieldset Legend</legend>\n// <label for=\"input-id\">Input Label</label>\n// <input id=\"input-id\" type=\"text\" placeholder=\"Enter text\" />\n// <label for=\"textarea-id\">Textarea Label</label>\n// <textarea id=\"textarea-id\" placeholder=\"Enter text\"></textarea>\n// <label for=\"select-id\">Select Label</label>\n// <select id=\"select-id\">\n// <option value=\"1\">Option 1</option>\n// <option value=\"2\">Option 2</option>\n// </select>\n// </fieldset>\n\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/layer\" as *;\n@use \"../../mixins/theme\";\n@use \"defaults\";\n@use \"sass:map\";\n@use \"variables\" as *;\n\n@include layer(base) {\n // input, textarea, select\n #{defaults.$input-selector-base}#{defaults.$input-selector},\n #{defaults.$textarea-selector-base}#{defaults.$textarea-selector},\n #{defaults.$select-selector-base}#{defaults.$select-selector} {\n padding: $input-padding;\n border-width: $input-border-width;\n border-style: $input-border-style;\n border-radius: $input-border-radius;\n font-size: $input-font-size;\n\n @each $selector in map.get(root-defaults.$state-selectors, \"disabled\") {\n // e.g :disabled, .disabled\n &#{$selector} {\n cursor: not-allowed;\n }\n }\n }\n\n // label\n #{defaults.$label-selector-base}#{defaults.$label-selector} {\n font-size: $label-font-size;\n }\n\n // fieldset\n #{defaults.$fieldset-selector-base}#{defaults.$fieldset-selector} {\n display: flex;\n flex-flow: $fieldset-direction wrap;\n gap: $fieldset-gap;\n padding: $fieldset-padding;\n border-width: $fieldset-border-width;\n border-style: $fieldset-border-style;\n border-radius: $fieldset-border-radius;\n font-size: $fieldset-font-size;\n\n @each $selector in map.get(root-defaults.$state-selectors, \"disabled\") {\n // e.g :disabled, .disabled\n &#{$selector} {\n #{defaults.$input-selector},\n #{defaults.$textarea-selector},\n #{defaults.$select-selector} {\n cursor: not-allowed;\n }\n }\n }\n }\n}\n\n@include layer(theme) {\n // input, textarea, select\n #{defaults.$input-selector-base}#{defaults.$input-selector},\n #{defaults.$textarea-selector-base}#{defaults.$textarea-selector},\n #{defaults.$select-selector-base}#{defaults.$select-selector} {\n border-color: $input-border-color;\n background: $input-background;\n color: $input-color;\n accent-color: $input-accent-color;\n\n &::placeholder {\n color: $input-placeholder-color;\n }\n\n @each $selector in map.get(root-defaults.$state-selectors, \"disabled\") {\n // e.g :disabled, .disabled\n &#{$selector} {\n border-color: $input-disabled-border-color;\n color: $input-disabled-color;\n\n &::placeholder {\n color: $input-placeholder-disabled-color;\n }\n }\n }\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$input-theme-map,\n defaults.$input-theme-prefix-selector-base,\n defaults.$input-theme-prefix-selector,\n \"input-\"\n );\n }\n }\n\n // label\n #{defaults.$label-selector-base}#{defaults.$label-selector} {\n color: $label-color;\n\n @each $selector in map.get(root-defaults.$state-selectors, \"disabled\") {\n // &:has(:disabled, .disabled)\n &:has(\n + #{defaults.$input-selector-base}#{defaults.$input-selector}#{$selector},\n + #{defaults.$textarea-selector-base}#{defaults.$textarea-selector}#{$selector},\n + #{defaults.$select-selector-base}#{defaults.$select-selector}#{$selector}\n ) {\n color: $label-disabled-color;\n }\n }\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$label-theme-map,\n defaults.$label-theme-prefix-selector-base,\n defaults.$label-theme-prefix-selector,\n \"label-\"\n );\n @include theme.generate-modifiers(\n defaults.$input-theme-map,\n defaults.$input-theme-prefix-selector-base,\n defaults.$input-theme-prefix-selector,\n \"input-\"\n );\n }\n }\n\n // fieldset\n #{defaults.$fieldset-selector-base}#{defaults.$fieldset-selector} {\n border-color: $fieldset-border-color;\n background: $fieldset-background;\n color: $fieldset-color;\n\n @each $selector in map.get(root-defaults.$state-selectors, \"disabled\") {\n // e.g :disabled, .disabled\n &#{$selector} {\n border-color: $fieldset-disabled-border-color;\n color: $fieldset-disabled-color;\n\n #{defaults.$label-selector} {\n color: $label-disabled-color;\n }\n }\n }\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$fieldset-theme-map,\n defaults.$fieldset-theme-prefix-selector-base,\n defaults.$fieldset-theme-prefix-selector,\n \"fieldset-\"\n );\n @include theme.generate-modifiers(\n defaults.$label-theme-map,\n defaults.$label-theme-prefix-selector-base,\n defaults.$label-theme-prefix-selector,\n \"label-\"\n );\n @include theme.generate-modifiers(\n defaults.$input-theme-map,\n defaults.$input-theme-prefix-selector-base,\n defaults.$input-theme-prefix-selector,\n \"input-\"\n );\n }\n }\n}\n","// @graupl/core form base variables.\n//\n// These values are to be used to directly style bases and provide a\n// cleaner way to reference custom properties.\n\n// Custom property defaults:\n// | Custom property | Default |\n// | -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | --graupl-input-padding-x | var(--graupl-spacer-5) |\n// | --graupl-input-padding-y | var(--graupl-spacer-3) |\n// | --graupl-input-padding | var(--graupl-input-padding-y) var(--graupl-input-padding-x) |\n// | --graupl-input-font-size | var(--graupl-font-base) |\n// | --graupl-label-font-size | var(--graupl-input-font-size) |\n// | --graupl-fieldset-direction | column |\n// | --graupl-fieldset-gap | var(--graupl-spacer-2) |\n// | --graupl-fieldset-padding-x | var(--graupl-input-padding-x) |\n// | --graupl-fieldset-padding-y | var(--graupl-input-padding-y) |\n// | --graupl-fieldset-padding | var(--graupl-fieldset-padding-y) var(--graupl-fieldset-padding-x) |\n// | --graupl-fieldset-font-size | var(--graupl-input-font-size) |\n// | --graupl-input-background | var(--graupl-background) |\n// | --graupl-fieldset-background | var(--graupl-input-background) |\n// | --graupl-input-color | var(--graupl-color) |\n// | --graupl-input-placeholder-color | var(--graupl-theme-active--secondary--600) |\n// | --graupl-label-color | var(--graupl-input-color) |\n// | --graupl-fieldset-color | var(--graupl-input-color) |\n// | --graupl-input-disabled-color | var(--graupl-theme-active--secondary--400) |\n// | --graupl-input-placeholder-disabled-color | var(--graupl-input-disabled-color) |\n// | --graupl-label-disabled-color | var(--graupl-input-disabled-color) |\n// | --graupl-fieldset-disabled-color | var(--graupl-input-disabled-color) |\n// | --graupl-input-border-top-width | var(--graupl-border-top-width) |\n// | --graupl-input-border-right-width | var(--graupl-border-right-width) |\n// | --graupl-input-border-bottom-width | var(--graupl-border-bottom-width) |\n// | --graupl-input-border-left-width | var(--graupl-border-left-width) |\n// | --graupl-input-border-width | var(--graupl-input-border-top-width) var(--graupl-input-border-right-width) var(--graupl-input-border-bottom-width) var(--graupl-input-border-left-width) |\n// | --graupl-input-border-top-style | var(--graupl-border-top-style) |\n// | --graupl-input-border-right-style | var(--graupl-border-right-style) |\n// | --graupl-input-border-bottom-style | var(--graupl-border-bottom-style) |\n// | --graupl-input-border-left-style | var(--graupl-border-left-style) |\n// | --graupl-input-border-style | var(--graupl-input-border-top-style) var(--graupl-input-border-right-style) var(--graupl-input-border-bottom-style) var(--graupl-input-border-left-style) |\n// | --graupl-input-border-top-left-radius | var(--graupl-border-top-left-radius) |\n// | --graupl-input-border-top-right-radius | var(--graupl-border-top-right-radius) |\n// | --graupl-input-border-bottom-left-radius | var(--graupl-border-bottom-left-radius) |\n// | --graupl-input-border-bottom-right-radius | var(--graupl-border-bottom-right-radius) |\n// | --graupl-input-border-radius | var(--graupl-input-border-top-left-radius) var(--graupl-input-border-top-right-radius) var(--graupl-input-border-bottom-right-radius) var(--graupl-input-border-bottom-left-radius) |\n// | --graupl-fieldset-border-top-width | var(--graupl-input-border-top-width) |\n// | --graupl-fieldset-border-right-width | var(--graupl-input-border-right-width) |\n// | --graupl-fieldset-border-bottom-width | var(--graupl-input-border-bottom-width) |\n// | --graupl-fieldset-border-left-width | var(--graupl-input-border-left-width) |\n// | --graupl-fieldset-border-width | var(--graupl-fieldset-border-top-width) var(--graupl-fieldset-border-right-width) var(--graupl-fieldset-border-bottom-width) var(--graupl-fieldset-border-left-width) |\n// | --graupl-fieldset-border-top-style | var(--graupl-input-border-top-style) |\n// | --graupl-fieldset-border-right-style | var(--graupl-input-border-right-style) |\n// | --graupl-fieldset-border-bottom-style | var(--graupl-input-border-bottom-style) |\n// | --graupl-fieldset-border-left-style | var(--graupl-input-border-left-style) |\n// | --graupl-fieldset-border-style | var(--graupl-fieldset-border-top-style) var(--graupl-fieldset-border-right-style) var(--graupl-fieldset-border-bottom-style) var(--graupl-fieldset-border-left-style) |\n// | --graupl-fieldset-border-top-left-radius | var(--graupl-input-border-top-left-radius) |\n// | --graupl-fieldset-border-top-right-radius | var(--graupl-input-border-top-right-radius) |\n// | --graupl-fieldset-border-bottom-left-radius | var(--graupl-input-border-bottom-left-radius) |\n// | --graupl-fieldset-border-bottom-right-radius | var(--graupl-input-border-bottom-right-radius) |\n// | --graupl-fieldset-border-radius | var(--graupl-fieldset-border-top-left-radius) var(--graupl-fieldset-border-top-right-radius) var(--graupl-fieldset-border-bottom-right-radius) var(--graupl-fieldset-border-bottom-left-radius) |\n// | --graupl-input-border-color | var(--graupl-border-color) |\n// | --graupl-input-disabled-border-color | var(--graupl-theme-active--secondary--200) |\n// | --graupl-fieldset-border-color | var(--graupl-input-border-color) |\n// | --graupl-fieldset-disabled-border-color | var(--graupl-input-disabled-border-color) |\n// | --graupl-input-accent-color | var(--graupl-input-color) |\n\n@use \"defaults\";\n@use \"../../variables\" as root-variables;\n@use \"../../defaults\" as root-defaults;\n@use \"../../theme/typography/variables\" as typography;\n@use \"../../theme/color/variables\" as color;\n@use \"../../functions/theme\";\n@use \"sass:map\";\n\n// --graupl-input-padding-x\n$input-padding-x: var(\n --#{root-defaults.$prefix}input-padding-x,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-input-padding-y\n$input-padding-y: var(\n --#{root-defaults.$prefix}input-padding-y,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-input-padding\n$input-padding: var(\n --#{root-defaults.$prefix}input-padding,\n #{$input-padding-y} #{$input-padding-x}\n);\n\n// --graupl-input-font-size\n$input-font-size: var(\n --#{root-defaults.$prefix}input-font-size,\n #{map.get(typography.$font-sizes, base)}\n);\n\n// --graupl-label-font-size\n$label-font-size: var(\n --#{root-defaults.$prefix}label-font-size,\n #{$input-font-size}\n);\n\n// --graupl-fieldset-direction\n$fieldset-direction: var(\n --#{root-defaults.$prefix}fieldset-direction,\n #{defaults.$fieldset-direction}\n);\n\n// --graupl-fieldset-gap\n$fieldset-gap: var(\n --#{root-defaults.$prefix}fieldset-gap,\n map.get(root-variables.$spacers, 2)\n);\n\n// --graupl-fieldset-padding-x\n$fieldset-padding-x: var(\n --#{root-defaults.$prefix}fieldset-padding-x,\n #{$input-padding-x}\n);\n\n// --graupl-fieldset-padding-y\n$fieldset-padding-y: var(\n --#{root-defaults.$prefix}fieldset-padding-y,\n #{$input-padding-y}\n);\n\n// --graupl-fieldset-padding\n$fieldset-padding: var(\n --#{root-defaults.$prefix}fieldset-padding,\n #{$fieldset-padding-y} #{$fieldset-padding-x}\n);\n\n// --graupl-fieldset-font-size\n$fieldset-font-size: var(\n --#{root-defaults.$prefix}fieldset-font-size,\n #{$input-font-size}\n);\n\n// Background properties.\n// --graupl-input-background\n$input-background: var(\n --#{root-defaults.$prefix}input-background,\n #{color.$background}\n);\n\n// --graupl-fieldset-background\n$fieldset-background: var(\n --#{root-defaults.$prefix}fieldset-background,\n #{$input-background}\n);\n\n// Text properties.\n// --graupl-input-color\n$input-color: var(--#{root-defaults.$prefix}input-color, #{color.$color});\n\n// --graupl-input-placeholder-color\n$input-placeholder-color: var(\n --#{root-defaults.$prefix}input-placeholder-color,\n #{theme.get(secondary, 600)}\n);\n\n// --graupl-label-color\n$label-color: var(--#{root-defaults.$prefix}label-color, #{$input-color});\n\n// --graupl-fieldset-color\n$fieldset-color: var(--#{root-defaults.$prefix}fieldset-color, #{$input-color});\n\n// --graupl-input-disabled-color\n$input-disabled-color: var(\n --#{root-defaults.$prefix}input-disabled-color,\n #{theme.get(secondary, 400)}\n);\n\n// --graupl-input-placeholder-disabled-color\n$input-placeholder-disabled-color: var(\n --#{root-defaults.$prefix}input-placeholder-disabled-color,\n #{$input-disabled-color}\n);\n\n// --graupl-label-disabled-color\n$label-disabled-color: var(\n --#{root-defaults.$prefix}label-disabled-color,\n #{$input-disabled-color}\n);\n\n// --graupl-fieldset-disabled-color\n$fieldset-disabled-color: var(\n --#{root-defaults.$prefix}fieldset-disabled-color,\n #{$input-disabled-color}\n);\n\n// Border properties.\n// --graupl-input-border-top-width\n$input-border-top-width: var(\n --#{root-defaults.$prefix}input-border-top-width,\n #{root-variables.$border-top-width}\n);\n\n// --graupl-input-border-right-width\n$input-border-right-width: var(\n --#{root-defaults.$prefix}input-border-right-width,\n #{root-variables.$border-right-width}\n);\n\n// --graupl-input-border-bottom-width\n$input-border-bottom-width: var(\n --#{root-defaults.$prefix}input-border-bottom-width,\n #{root-variables.$border-bottom-width}\n);\n\n// --graupl-input-border-left-width\n$input-border-left-width: var(\n --#{root-defaults.$prefix}input-border-left-width,\n #{root-variables.$border-left-width}\n);\n\n// --graupl-input-border-width\n$input-border-width: var(\n --#{root-defaults.$prefix}input-border-width,\n #{$input-border-top-width} #{$input-border-right-width}\n #{$input-border-bottom-width} #{$input-border-left-width}\n);\n\n// --graupl-input-border-top-style\n$input-border-top-style: var(\n --#{root-defaults.$prefix}input-border-top-style,\n #{root-variables.$border-top-style}\n);\n\n// --graupl-input-border-right-style\n$input-border-right-style: var(\n --#{root-defaults.$prefix}input-border-right-style,\n #{root-variables.$border-right-style}\n);\n\n// --graupl-input-border-bottom-style\n$input-border-bottom-style: var(\n --#{root-defaults.$prefix}input-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n\n// --graupl-input-border-left-style\n$input-border-left-style: var(\n --#{root-defaults.$prefix}input-border-left-style,\n #{root-variables.$border-left-style}\n);\n\n// --graupl-input-border-style\n$input-border-style: var(\n --#{root-defaults.$prefix}input-border-style,\n #{$input-border-top-style} #{$input-border-right-style}\n #{$input-border-bottom-style} #{$input-border-left-style}\n);\n\n// --graupl-input-border-top-left-radius\n$input-border-top-left-radius: var(\n --#{root-defaults.$prefix}input-border-top-left-radius,\n #{root-variables.$border-top-left-radius}\n);\n\n// --graupl-input-border-top-right-radius\n$input-border-top-right-radius: var(\n --#{root-defaults.$prefix}input-border-top-right-radius,\n #{root-variables.$border-top-right-radius}\n);\n\n// --graupl-input-border-bottom-left-radius\n$input-border-bottom-left-radius: var(\n --#{root-defaults.$prefix}input-border-bottom-left-radius,\n #{root-variables.$border-bottom-left-radius}\n);\n\n// --graupl-input-border-bottom-right-radius\n$input-border-bottom-right-radius: var(\n --#{root-defaults.$prefix}input-border-bottom-right-radius,\n #{root-variables.$border-bottom-right-radius}\n);\n\n// --graupl-input-border-radius\n$input-border-radius: var(\n --#{root-defaults.$prefix}input-border-radius,\n #{$input-border-top-left-radius} #{$input-border-top-right-radius}\n #{$input-border-bottom-right-radius} #{$input-border-bottom-left-radius}\n);\n\n// --graupl-fieldset-border-top-width\n$fieldset-border-top-width: var(\n --#{root-defaults.$prefix}fieldset-border-top-width,\n #{$input-border-top-width}\n);\n\n// --graupl-fieldset-border-right-width\n$fieldset-border-right-width: var(\n --#{root-defaults.$prefix}fieldset-border-right-width,\n #{$input-border-right-width}\n);\n\n// --graupl-fieldset-border-bottom-width\n$fieldset-border-bottom-width: var(\n --#{root-defaults.$prefix}fieldset-border-bottom-width,\n #{$input-border-bottom-width}\n);\n\n// --graupl-fieldset-border-left-width\n$fieldset-border-left-width: var(\n --#{root-defaults.$prefix}fieldset-border-left-width,\n #{$input-border-left-width}\n);\n\n// --graupl-fieldset-border-width\n$fieldset-border-width: var(\n --#{root-defaults.$prefix}fieldset-border-width,\n #{$fieldset-border-top-width} #{$fieldset-border-right-width}\n #{$fieldset-border-bottom-width} #{$fieldset-border-left-width}\n);\n\n// --graupl-fieldset-border-top-style\n$fieldset-border-top-style: var(\n --#{root-defaults.$prefix}fieldset-border-top-style,\n #{$input-border-top-style}\n);\n\n// --graupl-fieldset-border-right-style\n$fieldset-border-right-style: var(\n --#{root-defaults.$prefix}fieldset-border-right-style,\n #{$input-border-right-style}\n);\n\n// --graupl-fieldset-border-bottom-style\n$fieldset-border-bottom-style: var(\n --#{root-defaults.$prefix}fieldset-border-bottom-style,\n #{$input-border-bottom-style}\n);\n\n// --graupl-fieldset-border-left-style\n$fieldset-border-left-style: var(\n --#{root-defaults.$prefix}fieldset-border-left-style,\n #{$input-border-left-style}\n);\n\n// --graupl-fieldset-border-style\n$fieldset-border-style: var(\n --#{root-defaults.$prefix}fieldset-border-style,\n #{$fieldset-border-top-style} #{$fieldset-border-right-style}\n #{$fieldset-border-bottom-style} #{$fieldset-border-left-style}\n);\n\n// --graupl-fieldset-border-top-left-radius\n$fieldset-border-top-left-radius: var(\n --#{root-defaults.$prefix}fieldset-border-top-left-radius,\n #{$input-border-top-left-radius}\n);\n\n// --graupl-fieldset-border-top-right-radius\n$fieldset-border-top-right-radius: var(\n --#{root-defaults.$prefix}fieldset-border-top-right-radius,\n #{$input-border-top-right-radius}\n);\n\n// --graupl-fieldset-border-bottom-left-radius\n$fieldset-border-bottom-left-radius: var(\n --#{root-defaults.$prefix}fieldset-border-bottom-left-radius,\n #{$input-border-bottom-left-radius}\n);\n\n// --graupl-fieldset-border-bottom-right-radius\n$fieldset-border-bottom-right-radius: var(\n --#{root-defaults.$prefix}fieldset-border-bottom-right-radius,\n #{$input-border-bottom-right-radius}\n);\n\n// --graupl-fieldset-border-radius\n$fieldset-border-radius: var(\n --#{root-defaults.$prefix}fieldset-border-radius,\n #{$fieldset-border-top-left-radius} #{$fieldset-border-top-right-radius}\n #{$fieldset-border-bottom-right-radius}\n #{$fieldset-border-bottom-left-radius}\n);\n\n// Border colour properties.\n// --graupl-input-border-color\n$input-border-color: var(\n --#{root-defaults.$prefix}input-border-color,\n #{color.$border-color}\n);\n\n// --graupl-input-disabled-border-color\n$input-disabled-border-color: var(\n --#{root-defaults.$prefix}input-disabled-border-color,\n #{theme.get(secondary, 200)}\n);\n\n// --graupl-fieldset-border-color\n$fieldset-border-color: var(\n --#{root-defaults.$prefix}fieldset-border-color,\n #{$input-border-color}\n);\n\n// --graupl-fieldset-disabled-border-color\n$fieldset-disabled-border-color: var(\n --#{root-defaults.$prefix}fieldset-disabled-border-color,\n #{$input-disabled-border-color}\n);\n\n// Accent color properties.\n// --graupl-input-accent-color\n$input-accent-color: var(\n --#{root-defaults.$prefix}input-accent-color,\n #{$input-color}\n);\n","// @graupl/core link base styles.\n//\n// This module provides the base styles for the link component.\n//\n// The link component is a styled anchor element that provides a consistent look and feel for links.\n//\n// The following selectors are generated by default:\n// - `a`: The link component.\n// - `.stretched`: A component modifier that makes the link component stretch to fill nearest relative container.\n//\n// The following custom properties can be used to customize the link component:\n// | Property | Description | Default Value |\n// | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n// | `--graupl-link-text-decoration` | The text decoration for the link component. | `underline` |\n// | `--graupl-link-visited-text-decoration` | The text decoration for a visited link component. | `var(--graupl-link-text-decoration)` |\n// | `--graupl-link-focus-text-decoration` | The text decoration for a focused link component. | `var(--graupl-link-text-decoration)` |\n// | `--graupl-link-hover-text-decoration` | The text decoration for a hovered link component. | `underline` |\n// | `--graupl-link-active-text-decoration` | The text decoration for an active link component. | `var(--graupl-link-hover-text-decoration)` |\n// | `--graupl-link-disabled-text-decoration` | The text decoration for a disabled link component. | `underline` |\n// | `--graupl-link-text-decoration-thickness` | The text decoration thickness for the link component. | `var(--graupl-border-width)` |\n// | `--graupl-link-visited-text-decoration-thickness` | The text decoration thickness for a visited link component. | `var(--graupl-link-text-decoration-thickness)` |\n// | `--graupl-link-focus-text-decoration-thickness` | The text decoration thickness for a focused link component. | `var(--graupl-link-text-decoration-thickness)` |\n// | `--graupl-link-hover-text-decoration-thickness` | The text decoration thickness for a hovered link component. | `var(--graupl-border-width)` |\n// | `--graupl-link-active-text-decoration-thickness` | The text decoration thickness for an active link component. | `var(--graupl-link-hover-text-decoration-thickness)` |\n// | `--graupl-link-disabled-text-decoration-thickness` | The text decoration thickness for a disabled link component. | `var(--graupl-border-width)` |\n// | `--graupl-link-text-decoration-style` | The text decoration style for the link component. | `solid` |\n// | `--graupl-link-visited-text-decoration-style` | The text decoration style for a visited link component. | `var(--graupl-link-text-decoration-style)` |\n// | `--graupl-link-focus-text-decoration-style` | The text decoration style for a focused link component. | `var(--graupl-link-text-decoration-style)` |\n// | `--graupl-link-hover-text-decoration-style` | The text decoration style for a hovered link component. | `solid` |\n// | `--graupl-link-active-text-decoration-style` | The text decoration style for an active link component. | `var(--graupl-link-hover-text-decoration-style)` |\n// | `--graupl-link-disabled-text-decoration-style` | The text decoration style for a disabled link component. | `solid` |\n// | `--graupl-link-color` | The color for the link component. | `var(--graupl-theme-active--primary--700)` |\n// | `--graupl-link-visited-color` | The color for a visited link component. | `var(--graupl-link-color)` |\n// | `--graupl-link-focus-color` | The color for a focused link component. | `var(--graupl-link-color)` |\n// | `--graupl-link-hover-color` | The color for a hovered link component. | `var(--graupl-theme-active--tertiary--700)` |\n// | `--graupl-link-active-color` | The color for an active link component. | `var(--graupl-link-hover-color)` |\n// | `--graupl-link-disabled-color` | The color for a disabled link component. | `var(--graupl-theme-active--primary--200)` |\n// | `--graupl-link-text-decoration-color` | The text decoration color for the link component. | `var(--graupl-link-color)` |\n// | `--graupl-link-visited-text-decoration-color` | The text decoration color for a visited link component. | `var(--graupl-link-visited-color)` |\n// | `--graupl-link-focus-text-decoration-color` | The text decoration color for a focused link component. | `var(--graupl-link-focus-color)` |\n// | `--graupl-link-hover-text-decoration-color` | The text decoration color for a hovered link component. | `var(--graupl-link-hover-color)` |\n// | `--graupl-link-active-text-decoration-color` | The text decoration color for an active link component. | `var(--graupl-link-active-color)` |\n// | `--graupl-link-disabled-text-decoration-color` | The text decoration color for a disabled link component. | `var(--graupl-link-disabled-color)` |\n// | `--graupl-link-background` | The background color for the link component. | `transparent` |\n// | `--graupl-link-visited-background` | The background color for a visited link component. | `var(--graupl-link-background)` |\n// | `--graupl-link-focus-background` | The background color for a focused link component. | `var(--graupl-link-background)` |\n// | `--graupl-link-hover-background` | The background color for a hovered link component. | `transparent` |\n// | `--graupl-link-active-background` | The background color for an active link component. | `var(--graupl-link-hover-background)` |\n// | `--graupl-link-disabled-background` | The background color for a disabled link component. | `transparent` |\n// | `--graupl-link-padding-x` | The horizontal padding for the link component. | `var(--graupl-spacer-0)` |\n// | `--graupl-link-padding-y` | The vertical padding for the link component. | `var(--graupl-spacer-0)` |\n// | `--graupl-link-padding` | The padding for the link component (combines x and y padding). | `var(--graupl-link-padding-y) var(--graupl-link-padding-x)` |\n// | `--graupl-link-transition` | The transition for the link component. | `background var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function), color var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function), transform var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function)` |\n// | `--graupl-link-transition-reduced-motion` | The transition for the link component when reduced motion is enabled. | `background var(--graupl-transition-duration-none) var(--graupl-transition-timing-function), color var(--graupl-transition-duration-none) var(--graupl-transition-timing-function)` |\n// | `--graupl-link-transform` | The transform for the link component. | `none` |\n// | `--graupl-link-visited-transform` | The transform for a visited link component. | `var(--graupl-link-transform)` |\n// | `--graupl-link-focus-transform` | The transform for a focused link component. | `var(--graupl-link-transform)` |\n// | `--graupl-link-hover-transform` | The transform for a hovered link component. | `none` |\n// | `--graupl-link-active-transform` | The transform for an active link component. | `var(--graupl-link-hover-transform)` |\n// | `--graupl-link-disabled-transform` | The transform for a disabled link component. | `none` |\n// | `--graupl-link-border-top-width` | The top border width for the link component. | `0` |\n// | `--graupl-link-border-right-width` | The right border width for the link component. | `0` |\n// | `--graupl-link-border-bottom-width` | The bottom border width for the link component. | `0` |\n// | `--graupl-link-border-left-width` | The left border width for the link component. | `0` |\n// | `--graupl-link-border-width` | The border width for the link component (combines top, right, bottom, and left widths). | `var(--graupl-link-border-top-width) var(--graupl-link-border-right-width) var(--graupl-link-border-bottom-width) var(--graupl-link-border-left-width)` |\n// | `--graupl-link-border-top-style` | The top border style for the link component. | `var(--graupl-border-top-style)` |\n// | `--graupl-link-border-right-style` | The right border style for the link component. | `var(--graupl-border-right-style)` |\n// | `--graupl-link-border-bottom-style` | The bottom border style for the link component. | `var(--graupl-border-bottom-style)` |\n// | `--graupl-link-border-left-style` | The left border style for the link component. | `var(--graupl-border-left-style)` |\n// | `--graupl-link-border-style` | The border style for the link component (combines top, right, bottom, and left styles). | `var(--graupl-link-border-top-style) var(--graupl-link-border-right-style) var(--graupl-link-border-bottom-style) var(--graupl-link-border-left-style)` |\n// | `--graupl-link-border-top-left-radius` | The top left border radius for the link component. | `var(--graupl-border-top-left-radius)` |\n// | `--graupl-link-border-top-right-radius` | The top right border radius for the link component. | `var(--graupl-border-top-right-radius)` |\n// | `--graupl-link-border-bottom-right-radius` | The bottom right border radius for the link component. | `var(--graupl-border-bottom-right-radius)` |\n// | `--graupl-link-border-bottom-left-radius` | The bottom left border radius for the link component. | `var(--graupl-border-bottom-left-radius)` |\n// | `--graupl-link-border-radius` | The border radius for the link component (combines top-left, top-right, bottom-right, and bottom-left radii). | `var(--graupl-link-border-top-left-radius) var(--graupl-link-border-top-right-radius) var(--graupl-link-border-bottom-right-radius) var(--graupl-link-border-bottom-left-radius)` |\n// | `--graupl-link-border-color` | The border color for the link component. | `transparent` |\n// | `--graupl-link-visited-border-color` | The border color for a visited link component. | `var(--graupl-link-border-color)` |\n// | `--graupl-link-focus-border-color` | The border color for a focused link component. | `var(--graupl-link-border-color)` |\n// | `--graupl-link-hover-border-color` | The border color for a hovered link component. | `transparent` |\n// | `--graupl-link-active-border-color` | The border color for an active link component. | `var(--graupl-link-hover-border-color)` |\n// | `--graupl-link-disabled-border-color` | The border color for a disabled link component. | `transparent` |\n// | `--graupl-link-min-width` | The minimum width for the link component. | `auto` |\n// | `--graupl-link-min-height` | The minimum height for the link component. | `auto` |\n// | `--graupl-stretched-link-z-index` | The z-index for the stretched link component modifier. | `5` |\n//\n// The following sass variables can be used to customize the generation of the link component:\n// | Variable | Description | Default Value |\n// | -------------------------------------- | -------------------------------------------------------------- | -------------------------------------------------------- |\n// | `$selector-base` | The selector base for the component. | `\"\"` |\n// | `$modifier-selector-base` | The selector base for component modifiers. | `\".\"` |\n// | `$generate-base-theme-map` | Flag to generate the base theme maps for link variants. | `true` |\n// | `$themeable` | Flag to generate theme modifiers. | `false` |\n// | `$link-selector-base` | The base selector for the link component. | `\"\"` |\n// | `$link-selector` | The selector for the link component. | `\"a\"` |\n// | `$link-theme-prefix-selector-base` | Selector base used for link theme modifiers. | `\".\"` |\n// | `$link-theme-prefix-selector` | Selector prefix used for link theme modifiers. | `\"\"` |\n// | `$stretched-link-selector-base` | The base selector for the stretched link component modifier. | `\".\"` |\n// | `$stretched-link-selector` | The selector for the stretched link component modifier. | `\"stretched\"` |\n// | `$stretched-link-pseudo-selector` | The pseudo selector for the stretched link component modifier. | `\"before\"` |\n// | `$link-initial-text-decoration` | The initial text decoration for the link component. | `underline` |\n// | `$link-final-text-decoration` | The final text decoration for the link component. | `underline` |\n// | `$link-disabled-text-decoration` | The disabled text decoration for the link component. | `underline` |\n// | `$link-initial-text-decoration-style` | The initial text decoration style for the link component. | `solid` |\n// | `$link-final-text-decoration-style` | The final text decoration style for the link component. | `solid` |\n// | `$link-disabled-text-decoration-style` | The disabled text decoration style for the link component. | `solid` |\n// | `$link-initial-transform` | The initial transform for the link component. | `none` |\n// | `$link-final-transform` | The final transform for the link component. | `none` |\n// | `$link-disabled-transform` | The disabled transform for the link component. | `none` |\n// | `$link-border-width` | The border width for the link component. | `0` |\n// | `$link-min-width` | The minimum width for the link component. | `auto` |\n// | `$link-min-height` | The minimum height for the link component. | `auto` |\n// | `$stretched-link-z-index` | The z-index for the stretched link component modifier. | `5` |\n// | `$link-theme-mappings` | Map of properties and shade values applied to themed links. | `map.merge($-link-theme-mappings, $link-theme-mappings)` |\n// | `$link-theme-map` | Fully expanded property map used to generate themed links. | `map.deep-merge($-link-theme-map, $link-theme-map)` |\n//\n// ## Using `$link-theme-mappings`\n//\n// `$link-theme-mappings` is a single-level map of properties and shade values.\n//\n// e.g.\n// ```scss\n// $link-theme-mappings: (\n// color: 700,\n// hover-color: 400,\n// disabled-color: 200,\n// );\n// ```\n//\n// This directly[1] informs all link variants what shade to use for each property key.\n// Based on the example above:\n// - Primary links expose `--graupl-link-color`, `--graupl-link-hover-color`, and `--graupl-link-disabled-color` as `var(--graupl-theme-active--primary--700/400/200)`,\n// - Secondary links expose those properties via the secondary palette, and\n// - Tertiary links expose those properties via the tertiary palette.\n//\n// You can tailor the behaviour by specifying additional properties (e.g. `text-decoration-color`, `background`) to keep variants in sync.\n//\n// [1] `$link-theme-mappings` gets parsed into a larger, more explicit map: `$link-theme-map`.\n//\n// ## Using `$link-theme-map`\n//\n// `$link-theme-map` is a multi-level map of properties, colours, and shade values, allowing you to override individual variants without affecting the others.\n//\n// e.g.\n// ```scss\n// $link-theme-map: (\n// primary: (\n// color: (\n// color: primary,\n// shade: 900,\n// ),\n// ),\n// secondary: (\n// hover-color: (\n// color: secondary,\n// shade: 300,\n// ),\n// ),\n// );\n// ```\n//\n// This example deepens the primary link colour while lightening the secondary hover colour, leaving other variants untouched.\n//\n// @example\n// <a href=\"#\">Link</a>\n//\n// @example\n// <a href=\"#\" class=\"stretched\">Stretched Link</a>\n\n@use \"../../mixins/layer\" as *;\n@use \"defaults\";\n@use \"mixins\" as *;\n@use \"variables\" as *;\n\n@include layer(base) {\n // a\n #{defaults.$link-selector-base}#{defaults.$link-selector} {\n @include apply-base;\n\n // &.stretched\n &#{defaults.$stretched-link-selector-base}#{defaults.$stretched-link-selector} {\n @include apply-stretched;\n }\n }\n}\n\n@include layer(theme) {\n // a\n #{defaults.$link-selector-base}#{defaults.$link-selector} {\n @include apply-theme;\n }\n}\n","// @graupl/core table base styles.\n//\n// This module provides the base styles for tables.\n//\n// The following selectors are generated by default:\n// - `table`: The table component.\n// - `caption`: The table caption component.\n// - `th`: The table header cell component.\n// - `td`: The table cell component.\n// - `tr`: The table row component.\n// - `tbody`: The table body component.\n// - `.bordered`: A component modifier to make the table component bordered.\n// - `.collapsed`: A component modifier to make the table component's border collapsed.\n// - `.striped-columns`: A component modifier to make the table component's columns striped.\n// - `.striped-rows`: A component modifier to make the table component's rows striped.\n// - `.hoverable`: A component modifier to make the table component's rows change colour on hover.\n// - `.highlight`: A component modifier to highlight table components.\n// - `.responsive-table`: A component modifier to make the table component responsive.\n// - `.primary`: A component modifier to apply the primary colour to the table component.\n// - `.secondary`: A component modifier to apply the secondary colour to the table component.\n// - `.tertiary`: A component modifier to apply the tertiary colour to the table component.\n//\n// The following custom properties can be used to customize the table component:\n// | Property | Description | Default Value |\n// | -------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | `--graupl-table-caption-side` | The caption side of the table component. | `bottom` |\n// | `--graupl-table-caption-padding-x` | The horizontal padding of the table caption component. | `var(--graupl-spacer-3)` |\n// | `--graupl-table-caption-padding-y` | The vertical padding of the table caption component. | `var(--graupl-spacer-3)` |\n// | `--graupl-table-caption-padding` | The padding of the table caption component (combines x and y padding). | `var(--graupl-table-caption-padding-y) var(--graupl-table-caption-padding-x)` |\n// | `--graupl-table-header-font-weight` | The font weight of the table header component. | `var(--graupl-font-weight-bold)` |\n// | `--graupl-table-header-padding-x` | The horizontal padding of the table header component. | `var(--graupl-spacer-3)` |\n// | `--graupl-table-header-padding-y` | The vertical padding of the table header component. | `var(--graupl-spacer-3)` |\n// | `--graupl-table-header-padding` | The padding of the table header component (combines x and y padding). | `var(--graupl-table-header-padding-y) var(--graupl-table-header-padding-x)` |\n// | `--graupl-table-header-background` | The background colour of the table header component. | `var(--graupl-background)` |\n// | `--graupl-table-header-color` | The text colour of the table header component. | `var(--graupl-color)` |\n// | `--graupl-table-cell-padding-x` | The horizontal padding of the table cell component. | `var(--graupl-spacer-3)` |\n// | `--graupl-table-cell-padding-y` | The vertical padding of the table cell component. | `var(--graupl-spacer-3)` |\n// | `--graupl-table-cell-padding` | The padding of the table cell component (combines x and y padding). | `var(--graupl-table-cell-padding-y) var(--graupl-table-cell-padding-x)` |\n// | `--graupl-table-cell-background` | The background colour of the table cell component. | `var(--graupl-background)` |\n// | `--graupl-table-cell-color` | The text colour of the table cell component. | `var(--graupl-color)` |\n// | `--graupl-table-border-top-width` | The top border width of the table component. | `var(--graupl-border-top-width)` |\n// | `--graupl-table-border-right-width` | The right border width of the table component. | `var(--graupl-border-right-width)` |\n// | `--graupl-table-border-bottom-width` | The bottom border width of the table component. | `var(--graupl-border-bottom-width)` |\n// | `--graupl-table-border-left-width` | The left border width of the table component. | `var(--graupl-border-left-width)` |\n// | `--graupl-table-border-width` | The border width of the table component (combines top, right, bottom, and left widths). | `var(--graupl-table-border-top-width) var(--graupl-table-border-right-width) var(--graupl-table-border-bottom-width) var(--graupl-table-border-left-width)` |\n// | `--graupl-table-border-top-style` | The top border style of the table component. | `var(--graupl-border-top-style)` |\n// | `--graupl-table-border-right-style` | The right border style of the table component. | `var(--graupl-border-right-style)` |\n// | `--graupl-table-border-bottom-style` | The bottom border style of the table component. | `var(--graupl-border-bottom-style)` |\n// | `--graupl-table-border-left-style` | The left border style of the table component. | `var(--graupl-border-left-style)` |\n// | `--graupl-table-border-style` | The border style of the table component (combines top, right, bottom, and left styles). | `var(--graupl-table-border-top-style) var(--graupl-table-border-right-style) var(--graupl-table-border-bottom-style) var(--graupl-table-border-left-style)` |\n// | `--graupl-table-border-top-left-radius` | The top left border radius of the table component. | `var(--graupl-border-top-left-radius)` |\n// | `--graupl-table-border-top-right-radius` | The top right border radius of the table component. | `var(--graupl-border-top-right-radius)` |\n// | `--graupl-table-border-bottom-right-radius` | The bottom right border radius of the table component. | `var(--graupl-border-bottom-right-radius)` |\n// | `--graupl-table-border-bottom-left-radius` | The bottom left border radius of the table component. | `var(--graupl-border-bottom-left-radius)` |\n// | `--graupl-table-border-radius` | The border radius of the table component (combines top left, top right, bottom right, and bottom left radii). | `var(--graupl-table-border-top-left-radius) var(--graupl-table-border-top-right-radius) var(--graupl-table-border-bottom-right-radius) var(--graupl-table-border-bottom-left-radius)` |\n// | `--graupl-table-border-color` | The border colour of the table component. | `var(--graupl-border-color)` |\n// | `--graupl-table-cell-border-top-width` | The top border width of the table cell component. | `var(--graupl-border-top-width)` |\n// | `--graupl-table-cell-border-right-width` | The right border width of the table cell component. | `var(--graupl-border-right-width)` |\n// | `--graupl-table-cell-border-bottom-width` | The bottom border width of the table cell component. | `var(--graupl-border-bottom-width)` |\n// | `--graupl-table-cell-border-left-width` | The left border width of the table cell component. | `var(--graupl-border-left-width)` |\n// | `--graupl-table-cell-border-width` | The border width of the table cell component (combines top, right, bottom, and left widths). | `var(--graupl-table-cell-border-top-width) var(--graupl-table-cell-border-right-width) var(--graupl-table-cell-border-bottom-width) var(--graupl-table-cell-border-left-width)` |\n// | `--graupl-table-cell-border-top-style` | The top border style of the table cell component. | `var(--graupl-border-top-style)` |\n// | `--graupl-table-cell-border-right-style` | The right border style of the table cell component. | `var(--graupl-border-right-style)` |\n// | `--graupl-table-cell-border-bottom-style` | The bottom border style of the table cell component. | `var(--graupl-border-bottom-style)` |\n// | `--graupl-table-cell-border-left-style` | The left border style of the table cell component. | `var(--graupl-border-left-style)` |\n// | `--graupl-table-cell-border-style` | The border style of the table cell component (combines top, right, bottom, and left styles). | `var(--graupl-table-cell-border-top-style) var(--graupl-table-cell-border-right-style) var(--graupl-table-cell-border-bottom-style) var(--graupl-table-cell-border-left-style)` |\n// | `--graupl-table-cell-border-top-left-radius` | The top left border radius of the table cell component. | `var(--graupl-border-top-left-radius)` |\n// | `--graupl-table-cell-border-top-right-radius` | The top right border radius of the table cell component. | `var(--graupl-border-top-right-radius)` |\n// | `--graupl-table-cell-border-bottom-right-radius` | The bottom right border radius of the table cell component. | `var(--graupl-border-bottom-right-radius)` |\n// | `--graupl-table-cell-border-bottom-left-radius` | The bottom left border radius of the table cell component. | `var(--graupl-border-bottom-left-radius)` |\n// | `--graupl-table-cell-border-radius` | The border radius of the table cell component (combines top left, top right, bottom right, and bottom left radii). | `var(--graupl-table-cell-border-top-left-radius) var(--graupl-table-cell-border-top-right-radius) var(--graupl-table-cell-border-bottom-right-radius) var(--graupl-table-cell-border-bottom-left-radius)` |\n// | `--graupl-table-cell-border-color` | The border colour of the table cell component. | `var(--graupl-table-border-color)` |\n// | `--graupl-table-header-border-top-width` | The top border width of the table header component. | `var(--graupl-table-cell-border-top-width)` |\n// | `--graupl-table-header-border-right-width` | The right border width of the table header component. | `var(--graupl-table-cell-border-right-width)` |\n// | `--graupl-table-header-border-bottom-width` | The bottom border width of the table header component. | `var(--graupl-table-cell-border-bottom-width)` |\n// | `--graupl-table-header-border-left-width` | The left border width of the table header component. | `var(--graupl-table-cell-border-left-width)` |\n// | `--graupl-table-header-border-width` | The border width of the table header component (combines top, right, bottom, and left widths). | `var(--graupl-table-header-border-top-width) var(--graupl-table-header-border-right-width) var(--graupl-table-header-border-bottom-width) var(--graupl-table-header-border-left-width)` |\n// | `--graupl-table-header-border-top-style` | The top border style of the table header component. | `var(--graupl-table-cell-border-top-style)` |\n// | `--graupl-table-header-border-right-style` | The right border style of the table header component. | `var(--graupl-table-cell-border-right-style)` |\n// | `--graupl-table-header-border-bottom-style` | The bottom border style of the table header component. | `var(--graupl-table-cell-border-bottom-style)` |\n// | `--graupl-table-header-border-left-style` | The left border style of the table header component. | `var(--graupl-table-cell-border-left-style)` |\n// | `--graupl-table-header-border-style` | The border style of the table header component (combines top, right, bottom, and left styles). | `var(--graupl-table-header-border-top-style) var(--graupl-table-header-border-right-style) var(--graupl-table-header-border-bottom-style) var(--graupl-table-header-border-left-style)` |\n// | `--graupl-table-header-border-top-left-radius` | The top left border radius of the table header component. | `var(--graupl-table-cell-border-top-left-radius)` |\n// | `--graupl-table-header-border-top-right-radius` | The top right border radius of the table header component. | `var(--graupl-table-cell-border-top-right-radius)` |\n// | `--graupl-table-header-border-bottom-right-radius` | The bottom right border radius of the table header component. | `var(--graupl-table-cell-border-bottom-right-radius)` |\n// | `--graupl-table-header-border-bottom-left-radius` | The bottom left border radius of the table header component. | `var(--graupl-table-cell-border-bottom-left-radius)` |\n// | `--graupl-table-header-border-radius` | The border radius of the table header component (combines top left, top right, bottom right, and bottom left radii). | `var(--graupl-table-header-border-top-left-radius) var(--graupl-table-header-border-top-right-radius) var(--graupl-table-header-border-bottom-right-radius) var(--graupl-table-header-border-bottom-left-radius)` |\n// | `--graupl-table-header-border-color` | The border colour of the table header component. | `var(--graupl-table-border-color)` |\n// | `--graupl-table-striped-background` | The background colour of the striped table component modifier. | `var(--graupl-theme-active--secondary--200)` |\n// | `--graupl-table-cell-striped-background` | The background colour of striped table cell components. | `var(--graupl-table-striped-background)` |\n// | `--graupl-table-header-striped-background` | The background colour of striped table header components. | `var(--graupl-table-striped-background)` |\n// | `--graupl-table-striped-color` | The text colour of the striped table component modifier. | `var(--graupl-theme-active--secondary--900)` |\n// | `--graupl-table-cell-striped-color` | The text colour of striped table cell components. | `var(--graupl-table-striped-color)` |\n// | `--graupl-table-header-striped-color` | The text colour of striped table header components. | `var(--graupl-table-striped-color)` |\n// | `--graupl-table-hover-background` | The background colour of the hoverable table component modifier. | `var(--graupl-theme-active--secondary--300)` |\n// | `--graupl-table-cell-hover-background` | The background colour of hoverable table cell components. | `var(--graupl-table-hover-background)` |\n// | `--graupl-table-header-hover-background` | The background colour of hoverable table header components. | `var(--graupl-table-hover-background)` |\n// | `--graupl-table-hover-color` | The text colour of the hoverable table component modifier. | `var(--graupl-theme-active--secondary--900)` |\n// | `--graupl-table-cell-hover-color` | The text colour of hoverable table cell components. | `var(--graupl-table-hover-color)` |\n// | `--graupl-table-header-hover-color` | The text colour of hoverable table header components. | `var(--graupl-table-hover-color)` |\n// | `--graupl-table-highlight-background` | The background colour of the highlighted table component modifier. | `var(--graupl-theme-active--secondary--500)` |\n// | `--graupl-table-cell-highlight-background` | The background colour of highlighted table cell components. | `var(--graupl-table-highlight-background)` |\n// | `--graupl-table-header-highlight-background` | The background colour of highlighted table header components. | `var(--graupl-table-highlight-background)` |\n// | `--graupl-table-highlight-color` | The text colour of the highlighted table component modifier. | `var(--graupl-theme-active--secondary--100)` |\n// | `--graupl-table-cell-highlight-color` | The text colour of highlighted table cell components. | `var(--graupl-table-highlight-color)` |\n// | `--graupl-table-header-highlight-color` | The text colour of highlighted table header components. | `var(--graupl-table-highlight-color)` |\n//\n// The following sass variables can be used to customize the generation of the table component:\n// | Variable | Description | Default Value |\n// | -------------------------------------- | -------------------------------------------------------------------------------------- | ----------------------------------------------------- |\n// | `$selector-base` | The selector base for the component. | `\"\"` |\n// | `$modifier-selector-base` | The selector base for component modifiers. | `\".\"` |\n// | `$generate-base-theme-map` | A flag to generate the base theme maps for table variants. | `true` |\n// | `$themeable` | A flag that determines whether theme modifiers are generated. | `true` |\n// | `$table-selector-base` | The selector base for the table component. | `\"\"` |\n// | `$table-selector` | The selector for the table component. | `\"table\"` |\n// | `$table-caption-selector-base` | The selector base for the table caption component. | `\"\"` |\n// | `$table-caption-selector` | The selector for the table caption component. | `\"caption\"` |\n// | `$table-header-selector-base` | The selector base for the table header cell component. | `\"\"` |\n// | `$table-header-selector` | The selector for the table header cell component. | `\"th\"` |\n// | `$table-cell-selector-base` | The selector base for the table cell component. | `\"\"` |\n// | `$table-cell-selector` | The selector for the table cell component. | `\"td\"` |\n// | `$table-row-selector-base` | The selector base for the table row component. | `\"\"` |\n// | `$table-row-selector` | The selector for the table row component. | `\"tr\"` |\n// | `$table-body-selector-base` | The selector base for the table body component. | `\"\"` |\n// | `$table-body-selector` | The selector for the table body component. | `\"tbody\"` |\n// | `$table-theme-prefix-selector-base` | The selector base for the themed table component modifiers. | `\".\"` |\n// | `$table-theme-prefix-selector` | The selector prefix for the themed table component modifiers. | `\"\"` |\n// | `$table-bordered-selector-base` | The selector base for the bordered table component modifier. | `\".\"` |\n// | `$table-bordered-selector` | The selector for the bordered table component modifier. | `\"bordered\"` |\n// | `$table-collapsed-selector-base` | The selector base for the collapsed table component modifier. | `\".\"` |\n// | `$table-collapsed-selector` | The selector for the collapsed table component modifier. | `\"collapsed\"` |\n// | `$table-striped-columns-selector-base` | The selector base for the striped columns table component modifier. | `\".\"` |\n// | `$table-striped-columns-selector` | The selector for the striped columns table component modifier. | `\"striped-columns\"` |\n// | `$table-striped-rows-selector-base` | The selector base for the striped rows table component modifier. | `\".\"` |\n// | `$table-striped-rows-selector` | The selector for the striped rows table component modifier. | `\"striped-rows\"` |\n// | `$table-hoverable-selector-base` | The selector base for the hoverable table component modifier. | `\".\"` |\n// | `$table-hoverable-selector` | The selector for the hoverable table component modifier. | `\"hoverable\"` |\n// | `$table-highlight-selector-base` | The selector base for the highlighted table component modifier. | `\".\"` |\n// | `$table-highlight-selector` | The selector for the highlighted table component modifier. | `\"highlight\"` |\n// | `$table-responsive-selector-base` | The selector base for the responsive table component modifier. | `\".\"` |\n// | `$table-responsive-selector` | The selector for the responsive table component modifier. | `\"responsive-table\"` |\n// | `$table-caption-side` | The side of the table used to render `<caption>`. | `bottom` |\n// | `$table-theme-mappings` | A map of properties and color shades used generate all table variants. | `()` |\n// | `$table-theme-map` | A map of all properties, colors, and color shades used to generate all table variants. | `map.deep-merge($-table-theme-map, $table-theme-map)` |\n//\n// ## Using `$table-theme-mappings`\n//\n// `$table-theme-mappings` is a 1-level map of properties and shade values.\n//\n// e.g.\n// ```scss\n// $table-theme-mappings: (\n// header-background: 700,\n// )\n// ```\n//\n// This directly[1] maps to all table variants, telling them what shade to use for said property.\n// All table variants will use the following based on the example above:\n// - Primary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--primary--700`,\n// - Secondary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--secondary--700`, and\n// - Tertiary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--tertiary--700`.\n//\n// You can use this to customize _all_ tables variants in the same way.\n//\n// For example, if you use the following map:\n// ```scss\n// $table-theme-mappings: (\n// header-background: 500,\n// )\n// ```\n//\n// All table variants will use the following:\n// - Primary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--primary--500`,\n// - Secondary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--secondary--500`, and\n// - Tertiary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--tertiary--500`.\n//\n// [1] `$table-theme-mappings` gets parsed into a larger, more explicit map: `$table-theme-map`.\n//\n// Using `$table-theme-map`\n//\n// `$table-theme-map` is a multi-level map of properties, colors, and shade values.\n//\n// e.g.\n// ```scss\n// $table-theme-map: (\n// primary: (\n// header-background: (\n// color: primary,\n// shade: 700\n// ),\n// ),\n// secondary: (\n// header-background: (\n// color: secondary,\n// shade: 700\n// ),\n// ),\n// tertiary: (\n// header-background: (\n// color: tertiary,\n// shade: 700\n// ),\n// ),\n// )\n// ```\n//\n// This directly maps to all table variants, telling them what shade to use for said property.\n// The table variants will use the following based on the example above:\n// - Primary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--primary--700`,\n// - Secondary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--secondary--700`, and\n// - Tertiary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--tertiary--700`.\n//\n// You can use this to customize table variants individually.\n//\n// For example, if you use the following map:\n//\n// ```scss\n// $table-theme-map: (\n// primary: (\n// header-background: (\n// color: secondary,\n// shade: 700\n// ),\n// ),\n// secondary: (\n// header-background: (\n// color: secondary,\n// shade: 700\n// ),\n// ),\n// tertiary: (\n// header-background: (\n// color: secondary,\n// shade: 700\n// ),\n// ),\n// )\n// ```\n//\n// The table variants will use the following:\n// - Primary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--secondary--700`,\n// - Secondary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--secondary--700`, and\n// - Tertiary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--secondary--700`.\n//\n// @example\n// <table class=\"table bordered\">\n// <caption>Table Caption</caption>\n// <thead>\n// <tr>\n// <th>Header 1</th>\n// <th>Header 2</th>\n// </tr>\n// </thead>\n// <tbody>\n// <tr>\n// <td>Cell 1</td>\n// <td>Cell 2</td>\n// </tr>\n// <tr>\n// <td>Cell 3</td>\n// <td>Cell 4</td>\n// </tr>\n// </tbody>\n// </table>\n\n@use \"defaults\";\n@use \"variables\" as *;\n@use \"../../mixins/layer\" as *;\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/state\";\n@use \"../../mixins/theme\";\n\n@include layer(base) {\n // table\n #{defaults.$table-selector-base}#{defaults.$table-selector} {\n border-radius: $table-border-radius;\n\n // caption\n #{defaults.$table-caption-selector-base}#{defaults.$table-caption-selector} {\n padding: $table-caption-padding;\n caption-side: $table-caption-side;\n }\n\n // th\n #{defaults.$table-header-selector-base}#{defaults.$table-header-selector} {\n padding: $table-header-padding;\n border-radius: $table-header-border-radius;\n font-weight: $table-header-font-weight;\n }\n\n // td, tbody th\n #{defaults.$table-cell-selector-base}#{defaults.$table-cell-selector},\n #{defaults.$table-body-selector-base}#{defaults.$table-body-selector}\n #{defaults.$table-header-selector-base}#{defaults.$table-header-selector} {\n padding: $table-cell-padding;\n border-radius: $table-cell-border-radius;\n }\n\n // &.collapsed\n &#{defaults.$table-collapsed-selector-base}#{defaults.$table-collapsed-selector} {\n border-collapse: collapse;\n }\n\n // &.bordered\n &#{defaults.$table-bordered-selector-base}#{defaults.$table-bordered-selector} {\n // A bordered table can't actually have rounded corners.\n --#{root-defaults.$prefix}table-border-radius: 0;\n --#{root-defaults.$prefix}table-cell-border-radius: 0;\n --#{root-defaults.$prefix}table-header-border-radius: 0;\n\n border-collapse: collapse;\n border-width: $table-border-width;\n border-style: $table-border-style;\n\n // td\n #{defaults.$table-cell-selector-base}#{defaults.$table-cell-selector} {\n border-width: $table-cell-border-width;\n border-style: $table-cell-border-style;\n }\n\n // th\n #{defaults.$table-header-selector-base}#{defaults.$table-header-selector} {\n border-width: $table-header-border-width;\n border-style: $table-header-border-style;\n }\n }\n }\n\n // .responsive-table\n #{defaults.$table-responsive-selector-base}#{defaults.$table-responsive-selector} {\n display: block;\n width: 100%;\n overflow: scroll hidden;\n\n // table\n #{defaults.$table-selector-base}#{defaults.$table-selector} {\n width: 100%;\n margin-bottom: 0;\n }\n }\n}\n\n@include layer(theme) {\n // table\n #{defaults.$table-selector-base}#{defaults.$table-selector} {\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$table-theme-map,\n defaults.$table-theme-prefix-selector-base,\n defaults.$table-theme-prefix-selector,\n \"table-\"\n );\n\n // Apply theme modifiers when used without the parent reference.\n @include theme.generate-modifiers(\n defaults.$table-theme-map,\n defaults.$table-theme-prefix-selector-base,\n defaults.$table-theme-prefix-selector,\n \"table-\",\n \"\"\n );\n }\n\n // th\n #{defaults.$table-header-selector-base}#{defaults.$table-header-selector} {\n background: $table-header-background;\n color: $table-header-color;\n }\n\n // td, tbody th\n #{defaults.$table-cell-selector-base}#{defaults.$table-cell-selector},\n #{defaults.$table-body-selector-base}#{defaults.$table-body-selector}\n #{defaults.$table-header-selector-base}#{defaults.$table-header-selector} {\n background: $table-cell-background;\n color: $table-cell-color;\n }\n\n // &.bordered\n &#{defaults.$table-bordered-selector-base}#{defaults.$table-bordered-selector} {\n border-color: $table-border-color;\n\n // td\n #{defaults.$table-cell-selector-base}#{defaults.$table-cell-selector} {\n border-color: $table-cell-border-color;\n }\n\n // th\n #{defaults.$table-header-selector-base}#{defaults.$table-header-selector} {\n border-color: $table-header-border-color;\n }\n }\n\n // &.striped-columns\n &#{defaults.$table-striped-columns-selector-base}#{defaults.$table-striped-columns-selector} {\n // tbody tr:nth-child(odd)\n #{defaults.$table-body-selector-base}#{defaults.$table-body-selector}\n #{defaults.$table-row-selector-base}#{defaults.$table-row-selector}:nth-child(\n odd\n ) {\n // > td\n > #{defaults.$table-cell-selector-base}#{defaults.$table-cell-selector} {\n background: $table-cell-striped-background;\n color: $table-cell-striped-color;\n }\n\n // > th\n > #{defaults.$table-header-selector-base}#{defaults.$table-header-selector} {\n background: $table-header-striped-background;\n color: $table-header-striped-color;\n }\n }\n }\n\n // &.striped-rows\n &#{defaults.$table-striped-rows-selector-base}#{defaults.$table-striped-rows-selector} {\n // tbody tr\n #{defaults.$table-body-selector-base}#{defaults.$table-body-selector}\n #{defaults.$table-row-selector-base}#{defaults.$table-row-selector} {\n // > td:nth-child(odd)\n > #{defaults.$table-cell-selector-base}#{defaults.$table-cell-selector}:nth-child(\n odd\n ) {\n background: $table-cell-striped-background;\n color: $table-cell-striped-color;\n }\n\n // > th:nth-child(odd)\n > #{defaults.$table-header-selector-base}#{defaults.$table-header-selector}:nth-child(\n odd\n ) {\n background: $table-header-striped-background;\n color: $table-header-striped-color;\n }\n }\n }\n\n // &.hoverable\n &#{defaults.$table-hoverable-selector-base}#{defaults.$table-hoverable-selector} {\n // tbody tr:hover\n #{defaults.$table-body-selector-base}#{defaults.$table-body-selector}\n #{defaults.$table-row-selector-base}#{defaults.$table-row-selector}:hover {\n // > td\n > #{defaults.$table-cell-selector-base}#{defaults.$table-cell-selector} {\n background: $table-cell-hover-background;\n color: $table-cell-hover-color;\n }\n\n // > th\n > #{defaults.$table-header-selector-base}#{defaults.$table-header-selector} {\n background: $table-header-hover-background;\n color: $table-header-hover-color;\n }\n }\n }\n\n // &.highlight\n #{defaults.$table-highlight-selector-base}#{defaults.$table-highlight-selector} {\n --#{root-defaults.$prefix}table-cell-background: #{$table-cell-highlight-background};\n --#{root-defaults.$prefix}table-cell-color: #{$table-cell-highlight-color};\n --#{root-defaults.$prefix}table-header-background: #{$table-header-highlight-background};\n --#{root-defaults.$prefix}table-header-color: #{$table-header-highlight-color};\n --#{root-defaults.$prefix}table-striped-background: #{$table-highlight-background};\n --#{root-defaults.$prefix}table-striped-color: #{$table-highlight-color};\n --#{root-defaults.$prefix}table-cell-striped-background: #{$table-cell-highlight-background};\n --#{root-defaults.$prefix}table-cell-striped-color: #{$table-cell-highlight-color};\n --#{root-defaults.$prefix}table-header-striped-background: #{$table-header-highlight-background};\n --#{root-defaults.$prefix}table-header-striped-color: #{$table-header-highlight-color};\n }\n }\n}\n","// @graupl/core table base variables.\n//\n// These values are to be used to directly style bases and provide a\n// cleaner way to reference custom properties.\n\n// Custom property defaults:\n// | Custom property | Default |\n// | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | --graupl-table-caption-side | var(--graupl-table-caption-side) |\n// | --graupl-table-caption-padding-x | var(--graupl-spacer-3) |\n// | --graupl-table-caption-padding-y | var(--graupl-spacer-3) |\n// | --graupl-table-caption-padding | var(--graupl-table-caption-padding-y) var(--graupl-table-caption-padding-x) |\n// | --graupl-table-header-font-weight | typography.var(--graupl-font-weight-bold) |\n// | --graupl-table-header-padding-x | var(--graupl-spacer-3) |\n// | --graupl-table-header-padding-y | var(--graupl-spacer-3) |\n// | --graupl-table-header-padding | var(--graupl-table-header-padding-y) var(--graupl-table-header-padding-x) |\n// | --graupl-table-header-background | var(--graupl-background) |\n// | --graupl-table-header-color | var(--graupl-color) |\n// | --graupl-table-cell-padding-x | var(--graupl-spacer-3) |\n// | --graupl-table-cell-padding-y | var(--graupl-spacer-3) |\n// | --graupl-table-cell-padding | var(--graupl-table-cell-padding-y) var(--graupl-table-cell-padding-x) |\n// | --graupl-table-cell-background | var(--graupl-background) |\n// | --graupl-table-cell-color | var(--graupl-color) |\n// | --graupl-table-border-top-width | var(--graupl-border-top-width) |\n// | --graupl-table-border-right-width | var(--graupl-border-right-width) |\n// | --graupl-table-border-bottom-width | var(--graupl-border-bottom-width) |\n// | --graupl-table-border-left-width | var(--graupl-border-left-width) |\n// | --graupl-table-border-width | var(--graupl-table-border-top-width) var(--graupl-table-border-right-width) var(--graupl-table-border-bottom-width) var(--graupl-table-border-left-width) |\n// | --graupl-table-border-top-style | var(--graupl-border-top-style) |\n// | --graupl-table-border-right-style | var(--graupl-border-right-style) |\n// | --graupl-table-border-bottom-style | var(--graupl-border-bottom-style) |\n// | --graupl-table-border-left-style | var(--graupl-border-left-style) |\n// | --graupl-table-border-style | var(--graupl-table-border-top-style) var(--graupl-table-border-right-style) var(--graupl-table-border-bottom-style) var(--graupl-table-border-left-style) |\n// | --graupl-table-border-top-left-radius | var(--graupl-border-top-left-radius) |\n// | --graupl-table-border-top-right-radius | var(--graupl-border-top-right-radius) |\n// | --graupl-table-border-bottom-right-radius | var(--graupl-border-bottom-right-radius) |\n// | --graupl-table-border-bottom-left-radius | var(--graupl-border-bottom-left-radius) |\n// | --graupl-table-border-radius | var(--graupl-table-border-top-left-radius) var(--graupl-table-border-top-right-radius) var(--graupl-table-border-bottom-right-radius) var(--graupl-table-border-bottom-left-radius) |\n// | --graupl-table-border-color | var(--graupl-border-color) |\n// | --graupl-table-cell-border-top-width | var(--graupl-border-top-width) |\n// | --graupl-table-cell-border-right-width | var(--graupl-border-right-width) |\n// | --graupl-table-cell-border-bottom-width | var(--graupl-border-bottom-width) |\n// | --graupl-table-cell-border-left-width | var(--graupl-border-left-width) |\n// | --graupl-table-cell-border-width | var(--graupl-table-cell-border-top-width) var(--graupl-table-cell-border-right-width) var(--graupl-table-cell-border-bottom-width) var(--graupl-table-cell-border-left-width) |\n// | --graupl-table-cell-border-top-style | var(--graupl-border-top-style) |\n// | --graupl-table-cell-border-right-style | var(--graupl-border-right-style) |\n// | --graupl-table-cell-border-bottom-style | var(--graupl-border-bottom-style) |\n// | --graupl-table-cell-border-left-style | var(--graupl-border-left-style) |\n// | --graupl-table-cell-border-style | var(--graupl-table-cell-border-top-style) var(--graupl-table-cell-border-right-style) var(--graupl-table-cell-border-bottom-style) var(--graupl-table-cell-border-left-style) |\n// | --graupl-table-cell-border-top-left-radius | var(--graupl-border-top-left-radius) |\n// | --graupl-table-cell-border-top-right-radius | var(--graupl-border-top-right-radius) |\n// | --graupl-table-cell-border-bottom-right-radius | var(--graupl-border-bottom-right-radius) |\n// | --graupl-table-cell-border-bottom-left-radius | var(--graupl-border-bottom-left-radius) |\n// | --graupl-table-cell-border-radius | var(--graupl-table-cell-border-top-left-radius) var(--graupl-table-cell-border-top-right-radius) var(--graupl-table-cell-border-bottom-right-radius) var(--graupl-table-cell-border-bottom-left-radius) |\n// | --graupl-table-cell-border-color | var(--graupl-table-border-color) |\n// | --graupl-table-header-border-top-width | var(--graupl-table-cell-border-top-width) |\n// | --graupl-table-header-border-right-width | var(--graupl-table-cell-border-right-width) |\n// | --graupl-table-header-border-bottom-width | var(--graupl-table-cell-border-bottom-width) |\n// | --graupl-table-header-border-left-width | var(--graupl-table-cell-border-left-width) |\n// | --graupl-table-header-border-width | var(--graupl-table-header-border-top-width) var(--graupl-table-header-border-right-width) var(--graupl-table-header-border-bottom-width) var(--graupl-table-header-border-left-width) |\n// | --graupl-table-header-border-top-style | var(--graupl-table-cell-border-top-style) |\n// | --graupl-table-header-border-right-style | var(--graupl-table-cell-border-right-style) |\n// | --graupl-table-header-border-bottom-style | var(--graupl-table-cell-border-bottom-style) |\n// | --graupl-table-header-border-left-style | var(--graupl-table-cell-border-left-style) |\n// | --graupl-table-header-border-style | var(--graupl-table-header-border-top-style) var(--graupl-table-header-border-right-style) var(--graupl-table-header-border-bottom-style) var(--graupl-table-header-border-left-style) |\n// | --graupl-table-header-border-top-left-radius | var(--graupl-table-cell-border-top-left-radius) |\n// | --graupl-table-header-border-top-right-radius | var(--graupl-table-cell-border-top-right-radius) |\n// | --graupl-table-header-border-bottom-right-radius | var(--graupl-table-cell-border-bottom-right-radius) |\n// | --graupl-table-header-border-bottom-left-radius | var(--graupl-table-cell-border-bottom-left-radius) |\n// | --graupl-table-header-border-radius | var(--graupl-table-header-border-top-left-radius) var(--graupl-table-header-border-top-right-radius) var(--graupl-table-header-border-bottom-right-radius) var(--graupl-table-header-border-bottom-left-radius) |\n// | --graupl-table-header-border-color | var(--graupl-table-border-color) |\n// | --graupl-table-striped-background | var(--graupl-theme-active--secondary--200) |\n// | --graupl-table-cell-striped-background | var(--graupl-table-striped-background) |\n// | --graupl-table-header-striped-background | var(--graupl-table-striped-background) |\n// | --graupl-table-striped-color | var(--graupl-theme-active--secondary--900) |\n// | --graupl-table-cell-striped-color | var(--graupl-table-striped-color) |\n// | --graupl-table-header-striped-color | var(--graupl-table-striped-color) |\n// | --graupl-table-hover-background | var(--graupl-theme-active--secondary--300) |\n// | --graupl-table-cell-hover-background | var(--graupl-table-hover-background) |\n// | --graupl-table-header-hover-background | var(--graupl-table-hover-background) |\n// | --graupl-table-hover-color | var(--graupl-theme-active--secondary--900) |\n// | --graupl-table-cell-hover-color | var(--graupl-table-hover-color) |\n// | --graupl-table-header-hover-color | var(--graupl-table-hover-color) |\n// | --graupl-table-highlight-background | var(--graupl-theme-active--secondary--500) |\n// | --graupl-table-cell-highlight-background | var(--graupl-table-highlight-background) |\n// | --graupl-table-header-highlight-background | var(--graupl-table-highlight-background) |\n// | --graupl-table-highlight-color | var(--graupl-theme-active--secondary--100) |\n// | --graupl-table-cell-highlight-color | var(--graupl-table-highlight-color) |\n// | --graupl-table-header-highlight-color | var(--graupl-table-highlight-color) |\n\n@use \"defaults\";\n@use \"../../defaults\" as root-defaults;\n@use \"../../variables\" as root-variables;\n@use \"../../theme/typography/variables\" as typography;\n@use \"../../theme/color/variables\" as color;\n@use \"../../functions/theme\";\n@use \"sass:map\";\n\n// Table caption properties.\n// --graupl-table-caption-side\n$table-caption-side: var(\n --#{root-defaults.$prefix}table-caption-side,\n #{defaults.$table-caption-side}\n);\n\n// --graupl-table-caption-padding-x\n$table-caption-padding-x: var(\n --#{root-defaults.$prefix}table-caption-padding-x,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-table-caption-padding-y\n$table-caption-padding-y: var(\n --#{root-defaults.$prefix}table-caption-padding-y,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-table-caption-padding\n$table-caption-padding: var(\n --#{root-defaults.$prefix}table-caption-padding,\n #{$table-caption-padding-y} #{$table-caption-padding-x}\n);\n\n// Table header properties.\n// --graupl-table-header-font-weight\n$table-header-font-weight: var(\n --#{root-defaults.$prefix}table-header-font-weight,\n #{typography.$font-weight-bold}\n);\n\n// --graupl-table-header-padding-x\n$table-header-padding-x: var(\n --#{root-defaults.$prefix}table-header-padding-x,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-table-header-padding-y\n$table-header-padding-y: var(\n --#{root-defaults.$prefix}table-header-padding-y,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-table-header-padding\n$table-header-padding: var(\n --#{root-defaults.$prefix}table-header-padding,\n #{$table-header-padding-y} #{$table-header-padding-x}\n);\n\n// --graupl-table-header-background\n$table-header-background: var(\n --#{root-defaults.$prefix}table-header-background,\n #{color.$background}\n);\n\n// --graupl-table-header-color\n$table-header-color: var(\n --#{root-defaults.$prefix}table-header-color,\n #{color.$color}\n);\n\n// Table cell properties.\n// --graupl-table-cell-padding-x\n$table-cell-padding-x: var(\n --#{root-defaults.$prefix}table-cell-padding-x,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-table-cell-padding-y\n$table-cell-padding-y: var(\n --#{root-defaults.$prefix}table-cell-padding-y,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-table-cell-padding\n$table-cell-padding: var(\n --#{root-defaults.$prefix}table-cell-padding,\n #{$table-cell-padding-y} #{$table-cell-padding-x}\n);\n\n// --graupl-table-cell-background\n$table-cell-background: var(\n --#{root-defaults.$prefix}table-cell-background,\n #{color.$background}\n);\n\n// --graupl-table-cell-color\n$table-cell-color: var(\n --#{root-defaults.$prefix}table-cell-color,\n #{color.$color}\n);\n\n// Table border properties.\n// --graupl-table-border-top-width\n$table-border-top-width: var(\n --#{root-defaults.$prefix}table-border-top-width,\n #{root-variables.$border-top-width}\n);\n\n// --graupl-table-border-right-width\n$table-border-right-width: var(\n --#{root-defaults.$prefix}table-border-right-width,\n #{root-variables.$border-right-width}\n);\n\n// --graupl-table-border-bottom-width\n$table-border-bottom-width: var(\n --#{root-defaults.$prefix}table-border-bottom-width,\n #{root-variables.$border-bottom-width}\n);\n\n// --graupl-table-border-left-width\n$table-border-left-width: var(\n --#{root-defaults.$prefix}table-border-left-width,\n #{root-variables.$border-left-width}\n);\n\n// --graupl-table-border-width\n$table-border-width: var(\n --#{root-defaults.$prefix}table-border-width,\n #{$table-border-top-width} #{$table-border-right-width}\n #{$table-border-bottom-width} #{$table-border-left-width}\n);\n\n// --graupl-table-border-top-style\n$table-border-top-style: var(\n --#{root-defaults.$prefix}table-border-top-style,\n #{root-variables.$border-top-style}\n);\n\n// --graupl-table-border-right-style\n$table-border-right-style: var(\n --#{root-defaults.$prefix}table-border-right-style,\n #{root-variables.$border-right-style}\n);\n\n// --graupl-table-border-bottom-style\n$table-border-bottom-style: var(\n --#{root-defaults.$prefix}table-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n\n// --graupl-table-border-left-style\n$table-border-left-style: var(\n --#{root-defaults.$prefix}table-border-left-style,\n #{root-variables.$border-left-style}\n);\n\n// --graupl-table-border-style\n$table-border-style: var(\n --#{root-defaults.$prefix}table-border-style,\n #{$table-border-top-style} #{$table-border-right-style}\n #{$table-border-bottom-style} #{$table-border-left-style}\n);\n\n// --graupl-table-border-top-left-radius\n$table-border-top-left-radius: var(\n --#{root-defaults.$prefix}table-border-top-left-radius,\n #{root-variables.$border-top-left-radius}\n);\n\n// --graupl-table-border-top-right-radius\n$table-border-top-right-radius: var(\n --#{root-defaults.$prefix}table-border-top-right-radius,\n #{root-variables.$border-top-right-radius}\n);\n\n// --graupl-table-border-bottom-right-radius\n$table-border-bottom-right-radius: var(\n --#{root-defaults.$prefix}table-border-bottom-right-radius,\n #{root-variables.$border-bottom-right-radius}\n);\n\n// --graupl-table-border-bottom-left-radius\n$table-border-bottom-left-radius: var(\n --#{root-defaults.$prefix}table-border-bottom-left-radius,\n #{root-variables.$border-bottom-left-radius}\n);\n\n// --graupl-table-border-radius\n$table-border-radius: var(\n --#{root-defaults.$prefix}table-border-radius,\n #{$table-border-top-left-radius} #{$table-border-top-right-radius}\n #{$table-border-bottom-right-radius} #{$table-border-bottom-left-radius}\n);\n\n// --graupl-table-border-color\n$table-border-color: var(\n --#{root-defaults.$prefix}table-border-color,\n #{color.$border-color}\n);\n\n// Table cell border properties.\n// --graupl-table-cell-border-top-width\n$table-cell-border-top-width: var(\n --#{root-defaults.$prefix}table-cell-border-top-width,\n #{root-variables.$border-top-width}\n);\n\n// --graupl-table-cell-border-right-width\n$table-cell-border-right-width: var(\n --#{root-defaults.$prefix}table-cell-border-right-width,\n #{root-variables.$border-right-width}\n);\n\n// --graupl-table-cell-border-bottom-width\n$table-cell-border-bottom-width: var(\n --#{root-defaults.$prefix}table-cell-border-bottom-width,\n #{root-variables.$border-bottom-width}\n);\n\n// --graupl-table-cell-border-left-width\n$table-cell-border-left-width: var(\n --#{root-defaults.$prefix}table-cell-border-left-width,\n #{root-variables.$border-left-width}\n);\n\n// --graupl-table-cell-border-width\n$table-cell-border-width: var(\n --#{root-defaults.$prefix}table-cell-border-width,\n #{$table-cell-border-top-width} #{$table-cell-border-right-width}\n #{$table-cell-border-bottom-width} #{$table-cell-border-left-width}\n);\n\n// --graupl-table-cell-border-top-style\n$table-cell-border-top-style: var(\n --#{root-defaults.$prefix}table-cell-border-top-style,\n #{root-variables.$border-top-style}\n);\n\n// --graupl-table-cell-border-right-style\n$table-cell-border-right-style: var(\n --#{root-defaults.$prefix}table-cell-border-right-style,\n #{root-variables.$border-right-style}\n);\n\n// --graupl-table-cell-border-bottom-style\n$table-cell-border-bottom-style: var(\n --#{root-defaults.$prefix}table-cell-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n\n// --graupl-table-cell-border-left-style\n$table-cell-border-left-style: var(\n --#{root-defaults.$prefix}table-cell-border-left-style,\n #{root-variables.$border-left-style}\n);\n\n// --graupl-table-cell-border-style\n$table-cell-border-style: var(\n --#{root-defaults.$prefix}table-cell-border-style,\n #{$table-cell-border-top-style} #{$table-cell-border-right-style}\n #{$table-cell-border-bottom-style} #{$table-cell-border-left-style}\n);\n\n// --graupl-table-cell-border-top-left-radius\n$table-cell-border-top-left-radius: var(\n --#{root-defaults.$prefix}table-cell-border-top-left-radius,\n #{root-variables.$border-top-left-radius}\n);\n\n// --graupl-table-cell-border-top-right-radius\n$table-cell-border-top-right-radius: var(\n --#{root-defaults.$prefix}table-cell-border-top-right-radius,\n #{root-variables.$border-top-right-radius}\n);\n\n// --graupl-table-cell-border-bottom-right-radius\n$table-cell-border-bottom-right-radius: var(\n --#{root-defaults.$prefix}table-cell-border-bottom-right-radius,\n #{root-variables.$border-bottom-right-radius}\n);\n\n// --graupl-table-cell-border-bottom-left-radius\n$table-cell-border-bottom-left-radius: var(\n --#{root-defaults.$prefix}table-cell-border-bottom-left-radius,\n #{root-variables.$border-bottom-left-radius}\n);\n\n// --graupl-table-cell-border-radius\n$table-cell-border-radius: var(\n --#{root-defaults.$prefix}table-cell-border-radius,\n #{$table-cell-border-top-left-radius} #{$table-cell-border-top-right-radius}\n #{$table-cell-border-bottom-right-radius}\n #{$table-cell-border-bottom-left-radius}\n);\n\n// --graupl-table-cell-border-color\n$table-cell-border-color: var(\n --#{root-defaults.$prefix}table-cell-border-color,\n #{$table-border-color}\n);\n\n// Table header border properties.\n// --graupl-table-header-border-top-width\n$table-header-border-top-width: var(\n --#{root-defaults.$prefix}table-header-border-top-width,\n #{$table-cell-border-top-width}\n);\n\n// --graupl-table-header-border-right-width\n$table-header-border-right-width: var(\n --#{root-defaults.$prefix}table-header-border-right-width,\n #{$table-cell-border-right-width}\n);\n\n// --graupl-table-header-border-bottom-width\n$table-header-border-bottom-width: var(\n --#{root-defaults.$prefix}table-header-border-bottom-width,\n #{$table-cell-border-bottom-width}\n);\n\n// --graupl-table-header-border-left-width\n$table-header-border-left-width: var(\n --#{root-defaults.$prefix}table-header-border-left-width,\n #{$table-cell-border-left-width}\n);\n\n// --graupl-table-header-border-width\n$table-header-border-width: var(\n --#{root-defaults.$prefix}table-header-border-width,\n #{$table-header-border-top-width} #{$table-header-border-right-width}\n #{$table-header-border-bottom-width} #{$table-header-border-left-width}\n);\n\n// --graupl-table-header-border-top-style\n$table-header-border-top-style: var(\n --#{root-defaults.$prefix}table-header-border-top-style,\n #{$table-cell-border-top-style}\n);\n\n// --graupl-table-header-border-right-style\n$table-header-border-right-style: var(\n --#{root-defaults.$prefix}table-header-border-right-style,\n #{$table-cell-border-right-style}\n);\n\n// --graupl-table-header-border-bottom-style\n$table-header-border-bottom-style: var(\n --#{root-defaults.$prefix}table-header-border-bottom-style,\n #{$table-cell-border-bottom-style}\n);\n\n// --graupl-table-header-border-left-style\n$table-header-border-left-style: var(\n --#{root-defaults.$prefix}table-header-border-left-style,\n #{$table-cell-border-left-style}\n);\n\n// --graupl-table-header-border-style\n$table-header-border-style: var(\n --#{root-defaults.$prefix}table-header-border-style,\n #{$table-header-border-top-style} #{$table-header-border-right-style}\n #{$table-header-border-bottom-style} #{$table-header-border-left-style}\n);\n\n// --graupl-table-header-border-top-left-radius\n$table-header-border-top-left-radius: var(\n --#{root-defaults.$prefix}table-header-border-top-left-radius,\n #{$table-cell-border-top-left-radius}\n);\n\n// --graupl-table-header-border-top-right-radius\n$table-header-border-top-right-radius: var(\n --#{root-defaults.$prefix}table-header-border-top-right-radius,\n #{$table-cell-border-top-right-radius}\n);\n\n// --graupl-table-header-border-bottom-right-radius\n$table-header-border-bottom-right-radius: var(\n --#{root-defaults.$prefix}table-header-border-bottom-right-radius,\n #{$table-cell-border-bottom-right-radius}\n);\n\n// --graupl-table-header-border-bottom-left-radius\n$table-header-border-bottom-left-radius: var(\n --#{root-defaults.$prefix}table-header-border-bottom-left-radius,\n #{$table-cell-border-bottom-left-radius}\n);\n\n// --graupl-table-header-border-radius\n$table-header-border-radius: var(\n --#{root-defaults.$prefix}table-header-border-radius,\n #{$table-header-border-top-left-radius}\n #{$table-header-border-top-right-radius}\n #{$table-header-border-bottom-right-radius}\n #{$table-header-border-bottom-left-radius}\n);\n\n// --graupl-table-header-border-color\n$table-header-border-color: var(\n --#{root-defaults.$prefix}table-header-border-color,\n #{$table-border-color}\n);\n\n// Table striped properties.\n// --graupl-table-striped-background\n$table-striped-background: var(\n --#{root-defaults.$prefix}table-striped-background,\n #{theme.get(secondary, 200)}\n);\n\n// --graupl-table-cell-striped-background\n$table-cell-striped-background: var(\n --#{root-defaults.$prefix}table-cell-striped-background,\n #{$table-striped-background}\n);\n\n// --graupl-table-header-striped-background\n$table-header-striped-background: var(\n --#{root-defaults.$prefix}table-header-striped-background,\n #{$table-striped-background}\n);\n\n// --graupl-table-striped-color\n$table-striped-color: var(\n --#{root-defaults.$prefix}table-striped-color,\n #{theme.get(secondary, 900)}\n);\n\n// --graupl-table-cell-striped-color\n$table-cell-striped-color: var(\n --#{root-defaults.$prefix}table-cell-striped-color,\n #{$table-striped-color}\n);\n\n// --graupl-table-header-striped-color\n$table-header-striped-color: var(\n --#{root-defaults.$prefix}table-header-striped-color,\n #{$table-striped-color}\n);\n\n// Table hover properties.\n// --graupl-table-hover-background\n$table-hover-background: var(\n --#{root-defaults.$prefix}table-hover-background,\n #{theme.get(secondary, 300)}\n);\n\n// --graupl-table-cell-hover-background\n$table-cell-hover-background: var(\n --#{root-defaults.$prefix}table-cell-hover-background,\n #{$table-hover-background}\n);\n\n// --graupl-table-header-hover-background\n$table-header-hover-background: var(\n --#{root-defaults.$prefix}table-header-hover-background,\n #{$table-hover-background}\n);\n\n// --graupl-table-hover-color\n$table-hover-color: var(\n --#{root-defaults.$prefix}table-hover-color,\n #{theme.get(secondary, 900)}\n);\n\n// --graupl-table-cell-hover-color\n$table-cell-hover-color: var(\n --#{root-defaults.$prefix}table-cell-hover-color,\n #{$table-hover-color}\n);\n\n// --graupl-table-header-hover-color\n$table-header-hover-color: var(\n --#{root-defaults.$prefix}table-header-hover-color,\n #{$table-hover-color}\n);\n\n// Table highlight properties.\n// --graupl-table-highlight-background\n$table-highlight-background: var(\n --#{root-defaults.$prefix}table-highlight-background,\n #{theme.get(secondary, 500)}\n);\n\n// --graupl-table-cell-highlight-background\n$table-cell-highlight-background: var(\n --#{root-defaults.$prefix}table-cell-highlight-background,\n #{$table-highlight-background}\n);\n\n// --graupl-table-header-highlight-background\n$table-header-highlight-background: var(\n --#{root-defaults.$prefix}table-header-highlight-background,\n #{$table-highlight-background}\n);\n\n// --graupl-table-highlight-color\n$table-highlight-color: var(\n --#{root-defaults.$prefix}table-highlight-color,\n #{theme.get(secondary, 100)}\n);\n\n// --graupl-table-cell-highlight-color\n$table-cell-highlight-color: var(\n --#{root-defaults.$prefix}table-cell-highlight-color,\n #{$table-highlight-color}\n);\n\n// --graupl-table-header-highlight-color\n$table-header-highlight-color: var(\n --#{root-defaults.$prefix}table-header-highlight-color,\n #{$table-highlight-color}\n);\n"],"names":[]}