@graupl/core 1.0.0-beta.22 → 1.0.0-beta.24

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 (273) hide show
  1. package/dist/css/base/button.css +2 -2
  2. package/dist/css/base/button.css.map +1 -1
  3. package/dist/css/base/form.css +2 -2
  4. package/dist/css/base/form.css.map +1 -1
  5. package/dist/css/base/link.css +2 -2
  6. package/dist/css/base/link.css.map +1 -1
  7. package/dist/css/base/table.css +2 -2
  8. package/dist/css/base/table.css.map +1 -1
  9. package/dist/css/base.css +2 -2
  10. package/dist/css/base.css.map +1 -1
  11. package/dist/css/component/accordion.css +2 -5
  12. package/dist/css/component/accordion.css.map +1 -1
  13. package/dist/css/component/alert.css +2 -2
  14. package/dist/css/component/alert.css.map +1 -1
  15. package/dist/css/component/badge.css +2 -2
  16. package/dist/css/component/badge.css.map +1 -1
  17. package/dist/css/component/card.css +2 -2
  18. package/dist/css/component/card.css.map +1 -1
  19. package/dist/css/component/carousel.css +2 -2
  20. package/dist/css/component/carousel.css.map +1 -1
  21. package/dist/css/component/disclosure.css +2 -2
  22. package/dist/css/component/disclosure.css.map +1 -1
  23. package/dist/css/component/input-group.css +2 -2
  24. package/dist/css/component/input-group.css.map +1 -1
  25. package/dist/css/component/list.css +2 -2
  26. package/dist/css/component/list.css.map +1 -1
  27. package/dist/css/component/menu.css +2 -2
  28. package/dist/css/component/menu.css.map +1 -1
  29. package/dist/css/component/navigation.css +2 -2
  30. package/dist/css/component/navigation.css.map +1 -1
  31. package/dist/css/component.css +2 -5
  32. package/dist/css/component.css.map +1 -1
  33. package/dist/css/graupl.css +2 -5
  34. package/dist/css/graupl.css.map +1 -1
  35. package/dist/css/init.css +2 -2
  36. package/dist/css/init.css.map +1 -1
  37. package/dist/css/layout/columns.css +2 -2
  38. package/dist/css/layout/columns.css.map +1 -1
  39. package/dist/css/layout/container.css +2 -2
  40. package/dist/css/layout/container.css.map +1 -1
  41. package/dist/css/layout/flex-columns.css +2 -2
  42. package/dist/css/layout/flex-columns.css.map +1 -1
  43. package/dist/css/layout.css +2 -5
  44. package/dist/css/layout.css.map +1 -1
  45. package/dist/css/normalize.css +2 -2
  46. package/dist/css/normalize.css.map +1 -1
  47. package/dist/css/state/focus.css +2 -2
  48. package/dist/css/state/focus.css.map +1 -1
  49. package/dist/css/state.css +2 -2
  50. package/dist/css/state.css.map +1 -1
  51. package/dist/css/theme/color.css +2 -2
  52. package/dist/css/theme/color.css.map +1 -1
  53. package/dist/css/theme/typography.css +2 -2
  54. package/dist/css/theme/typography.css.map +1 -1
  55. package/dist/css/theme.css +2 -2
  56. package/dist/css/theme.css.map +1 -1
  57. package/dist/css/utilities/alignment.css +1 -1
  58. package/dist/css/utilities/alignment.css.map +1 -1
  59. package/dist/css/utilities/background.css +2 -2
  60. package/dist/css/utilities/background.css.map +1 -1
  61. package/dist/css/utilities/border.css +2 -2
  62. package/dist/css/utilities/border.css.map +1 -1
  63. package/dist/css/utilities/color.css +2 -2
  64. package/dist/css/utilities/color.css.map +1 -1
  65. package/dist/css/utilities/container.css +1 -1
  66. package/dist/css/utilities/container.css.map +1 -1
  67. package/dist/css/utilities/display.css +2 -2
  68. package/dist/css/utilities/display.css.map +1 -1
  69. package/dist/css/utilities/flex.css +2 -2
  70. package/dist/css/utilities/flex.css.map +1 -1
  71. package/dist/css/utilities/gradient.css +2 -2
  72. package/dist/css/utilities/gradient.css.map +1 -1
  73. package/dist/css/utilities/height.css +2 -2
  74. package/dist/css/utilities/height.css.map +1 -1
  75. package/dist/css/utilities/inset.css +2 -2
  76. package/dist/css/utilities/inset.css.map +1 -1
  77. package/dist/css/utilities/justification.css +1 -1
  78. package/dist/css/utilities/justification.css.map +1 -1
  79. package/dist/css/utilities/list.css +1 -1
  80. package/dist/css/utilities/list.css.map +1 -1
  81. package/dist/css/utilities/order.css +2 -2
  82. package/dist/css/utilities/order.css.map +1 -1
  83. package/dist/css/utilities/position.css +2 -2
  84. package/dist/css/utilities/position.css.map +1 -1
  85. package/dist/css/utilities/ratio.css +2 -2
  86. package/dist/css/utilities/ratio.css.map +1 -1
  87. package/dist/css/utilities/spacing.css +2 -2
  88. package/dist/css/utilities/spacing.css.map +1 -1
  89. package/dist/css/utilities/typography.css +2 -2
  90. package/dist/css/utilities/typography.css.map +1 -1
  91. package/dist/css/utilities/visibility.css +2 -2
  92. package/dist/css/utilities/visibility.css.map +1 -1
  93. package/dist/css/utilities/visually-hidden.css +2 -2
  94. package/dist/css/utilities/visually-hidden.css.map +1 -1
  95. package/dist/css/utilities/width.css +2 -2
  96. package/dist/css/utilities/width.css.map +1 -1
  97. package/dist/css/utilities/z-index.css +1 -1
  98. package/dist/css/utilities/z-index.css.map +1 -1
  99. package/dist/css/utilities.css +2 -2
  100. package/dist/css/utilities.css.map +1 -1
  101. package/dist/js/accordion.js.map +1 -1
  102. package/dist/js/alert.js.map +1 -1
  103. package/dist/js/carousel.js.map +1 -1
  104. package/dist/js/component/accordion.cjs.js.map +1 -1
  105. package/dist/js/component/accordion.es.js.map +1 -1
  106. package/dist/js/component/accordion.iife.js.map +1 -1
  107. package/dist/js/component/alert.cjs.js.map +1 -1
  108. package/dist/js/component/alert.es.js.map +1 -1
  109. package/dist/js/component/alert.iife.js.map +1 -1
  110. package/dist/js/component/carousel.cjs.js.map +1 -1
  111. package/dist/js/component/carousel.es.js.map +1 -1
  112. package/dist/js/component/carousel.iife.js.map +1 -1
  113. package/dist/js/component/disclosure.cjs.js +2 -2
  114. package/dist/js/component/disclosure.cjs.js.map +1 -1
  115. package/dist/js/component/disclosure.es.js +2 -2
  116. package/dist/js/component/disclosure.es.js.map +1 -1
  117. package/dist/js/component/disclosure.iife.js +2 -2
  118. package/dist/js/component/disclosure.iife.js.map +1 -1
  119. package/dist/js/component/tabs.cjs.js +5 -0
  120. package/dist/js/component/tabs.cjs.js.map +1 -0
  121. package/dist/js/component/tabs.es.js +5 -0
  122. package/dist/js/component/tabs.es.js.map +1 -0
  123. package/dist/js/component/tabs.iife.js +5 -0
  124. package/dist/js/component/tabs.iife.js.map +1 -0
  125. package/dist/js/disclosure.js +2 -2
  126. package/dist/js/disclosure.js.map +1 -1
  127. package/dist/js/generator/accordion.cjs.js.map +1 -1
  128. package/dist/js/generator/accordion.es.js.map +1 -1
  129. package/dist/js/generator/accordion.iife.js.map +1 -1
  130. package/dist/js/generator/alert.cjs.js.map +1 -1
  131. package/dist/js/generator/alert.es.js.map +1 -1
  132. package/dist/js/generator/alert.iife.js.map +1 -1
  133. package/dist/js/generator/carousel.cjs.js.map +1 -1
  134. package/dist/js/generator/carousel.es.js.map +1 -1
  135. package/dist/js/generator/carousel.iife.js.map +1 -1
  136. package/dist/js/generator/disclosure.cjs.js +2 -2
  137. package/dist/js/generator/disclosure.cjs.js.map +1 -1
  138. package/dist/js/generator/disclosure.es.js +2 -2
  139. package/dist/js/generator/disclosure.es.js.map +1 -1
  140. package/dist/js/generator/disclosure.iife.js +2 -2
  141. package/dist/js/generator/disclosure.iife.js.map +1 -1
  142. package/dist/js/generator/navigation.cjs.js.map +1 -1
  143. package/dist/js/generator/navigation.es.js.map +1 -1
  144. package/dist/js/generator/navigation.iife.js.map +1 -1
  145. package/dist/js/generator/tabs.cjs.js +5 -0
  146. package/dist/js/generator/tabs.cjs.js.map +1 -0
  147. package/dist/js/generator/tabs.es.js +5 -0
  148. package/dist/js/generator/tabs.es.js.map +1 -0
  149. package/dist/js/generator/tabs.iife.js +5 -0
  150. package/dist/js/generator/tabs.iife.js.map +1 -0
  151. package/dist/js/graupl.js +5 -5
  152. package/dist/js/graupl.js.map +1 -1
  153. package/dist/js/navigation.js.map +1 -1
  154. package/dist/js/tabs.js +5 -0
  155. package/dist/js/tabs.js.map +1 -0
  156. package/package.json +4 -3
  157. package/src/js/disclosure/Disclosure.js +25 -45
  158. package/src/js/domHelpers.js +39 -22
  159. package/src/js/tabs/TabToggle.js +378 -0
  160. package/src/js/tabs/Tabs.js +1091 -0
  161. package/src/js/tabs/generator.js +32 -0
  162. package/src/js/tabs/index.js +5 -0
  163. package/src/scss/_defaults.scss +21 -88
  164. package/src/scss/_variables.scss +70 -0
  165. package/src/scss/base/button/_defaults.scss +2 -24
  166. package/src/scss/base/button/_index.scss +53 -52
  167. package/src/scss/base/button/_mixins.scss +24 -58
  168. package/src/scss/base/button/_variables.scss +139 -0
  169. package/src/scss/base/form/_defaults.scss +72 -2
  170. package/src/scss/base/form/_index.scss +196 -70
  171. package/src/scss/base/form/_variables.scss +166 -0
  172. package/src/scss/base/link/_defaults.scss +31 -0
  173. package/src/scss/base/link/_index.scss +177 -172
  174. package/src/scss/base/link/_variables.scss +215 -0
  175. package/src/scss/base/table/_defaults.scss +1 -11
  176. package/src/scss/base/table/_index.scss +126 -117
  177. package/src/scss/base/table/_variables.scss +214 -3
  178. package/src/scss/component/_index.scss +1 -0
  179. package/src/scss/component/accordion/_defaults.scss +73 -22
  180. package/src/scss/component/accordion/_index.scss +437 -62
  181. package/src/scss/component/accordion/_variables.scss +527 -101
  182. package/src/scss/component/alert/_defaults.scss +23 -32
  183. package/src/scss/component/alert/_index.scss +236 -30
  184. package/src/scss/component/alert/_variables.scss +155 -6
  185. package/src/scss/component/badge/_defaults.scss +1 -0
  186. package/src/scss/component/badge/_index.scss +25 -28
  187. package/src/scss/component/badge/_variables.scss +66 -2
  188. package/src/scss/component/card/_defaults.scss +64 -13
  189. package/src/scss/component/card/_index.scss +276 -30
  190. package/src/scss/component/card/_variables.scss +132 -0
  191. package/src/scss/component/carousel/_defaults.scss +73 -15
  192. package/src/scss/component/carousel/_index.scss +357 -41
  193. package/src/scss/component/carousel/_variables.scss +391 -0
  194. package/src/scss/component/disclosure/_index.scss +4 -4
  195. package/src/scss/component/disclosure/_variables.scss +127 -2
  196. package/src/scss/component/input-group/_defaults.scss +10 -3
  197. package/src/scss/component/input-group/_index.scss +72 -4
  198. package/src/scss/component/input-group/_variables.scss +37 -0
  199. package/src/scss/component/list/_defaults.scss +35 -2
  200. package/src/scss/component/list/_index.scss +159 -5
  201. package/src/scss/component/list/_variables.scss +152 -0
  202. package/src/scss/component/menu/_defaults.scss +49 -7
  203. package/src/scss/component/menu/_index.scss +325 -99
  204. package/src/scss/component/menu/_variables.scss +484 -1
  205. package/src/scss/component/navigation/_defaults.scss +45 -3
  206. package/src/scss/component/navigation/_index.scss +249 -98
  207. package/src/scss/component/navigation/_variables.scss +334 -5
  208. package/src/scss/component/tabs/_defaults.scss +82 -0
  209. package/src/scss/component/tabs/_index.scss +497 -0
  210. package/src/scss/component/tabs/_variables.scss +974 -0
  211. package/src/scss/layout/columns/_defaults.scss +5 -3
  212. package/src/scss/layout/columns/_index.scss +27 -21
  213. package/src/scss/layout/columns/_variables.scss +13 -0
  214. package/src/scss/layout/container/_defaults.scss +28 -11
  215. package/src/scss/layout/container/_index.scss +305 -161
  216. package/src/scss/layout/container/_variables.scss +148 -15
  217. package/src/scss/layout/flex-columns/_defaults.scss +5 -3
  218. package/src/scss/layout/flex-columns/_index.scss +28 -20
  219. package/src/scss/layout/flex-columns/_variables.scss +9 -0
  220. package/src/scss/mixins/_state.scss +37 -0
  221. package/src/scss/mixins/_theme.scss +36 -1
  222. package/src/scss/state/focus/_index.scss +17 -12
  223. package/src/scss/state/focus/_variables.scss +30 -4
  224. package/src/scss/theme/color/_defaults.scss +6 -35
  225. package/src/scss/theme/color/_index.scss +167 -1
  226. package/src/scss/theme/color/_variables.scss +155 -0
  227. package/src/scss/theme/typography/_defaults.scss +26 -19
  228. package/src/scss/theme/typography/_index.scss +176 -20
  229. package/src/scss/theme/typography/_variables.scss +186 -0
  230. package/src/scss/utilities/_template/_index.scss +0 -1
  231. package/src/scss/utilities/alignment/_defaults.scss +0 -33
  232. package/src/scss/utilities/alignment/_index.scss +24 -25
  233. package/src/scss/utilities/background/_defaults.scss +0 -77
  234. package/src/scss/utilities/background/_index.scss +32 -37
  235. package/src/scss/utilities/border/_defaults.scss +0 -33
  236. package/src/scss/utilities/border/_index.scss +25 -26
  237. package/src/scss/utilities/color/_defaults.scss +0 -19
  238. package/src/scss/utilities/color/_index.scss +22 -22
  239. package/src/scss/utilities/container/_defaults.scss +0 -11
  240. package/src/scss/utilities/container/_index.scss +20 -19
  241. package/src/scss/utilities/display/_defaults.scss +0 -11
  242. package/src/scss/utilities/display/_index.scss +20 -19
  243. package/src/scss/utilities/flex/_defaults.scss +0 -55
  244. package/src/scss/utilities/flex/_index.scss +28 -31
  245. package/src/scss/utilities/gradient/_defaults.scss +0 -28
  246. package/src/scss/utilities/gradient/_index.scss +27 -28
  247. package/src/scss/utilities/gradient/_variables.scss +15 -0
  248. package/src/scss/utilities/height/_defaults.scss +0 -8
  249. package/src/scss/utilities/height/_index.scss +22 -21
  250. package/src/scss/utilities/inset/_defaults.scss +0 -16
  251. package/src/scss/utilities/inset/_index.scss +20 -20
  252. package/src/scss/utilities/justification/_defaults.scss +0 -33
  253. package/src/scss/utilities/justification/_index.scss +24 -25
  254. package/src/scss/utilities/list/_defaults.scss +0 -22
  255. package/src/scss/utilities/list/_index.scss +22 -22
  256. package/src/scss/utilities/order/_defaults.scss +0 -8
  257. package/src/scss/utilities/order/_index.scss +20 -19
  258. package/src/scss/utilities/position/_defaults.scss +0 -11
  259. package/src/scss/utilities/position/_index.scss +20 -19
  260. package/src/scss/utilities/ratio/_defaults.scss +0 -8
  261. package/src/scss/utilities/ratio/_index.scss +22 -21
  262. package/src/scss/utilities/ratio/_variables.scss +6 -0
  263. package/src/scss/utilities/spacing/_defaults.scss +0 -11
  264. package/src/scss/utilities/spacing/_index.scss +18 -17
  265. package/src/scss/utilities/typography/_defaults.scss +0 -22
  266. package/src/scss/utilities/typography/_index.scss +27 -26
  267. package/src/scss/utilities/visibility/_defaults.scss +0 -11
  268. package/src/scss/utilities/visibility/_index.scss +19 -18
  269. package/src/scss/utilities/visually-hidden/_index.scss +19 -17
  270. package/src/scss/utilities/width/_defaults.scss +0 -8
  271. package/src/scss/utilities/width/_index.scss +21 -20
  272. package/src/scss/utilities/z-index/_defaults.scss +0 -11
  273. package/src/scss/utilities/z-index/_index.scss +19 -18
package/dist/css/component/accordion.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/scss/mixins/_layer.scss","accordion.css","../../../src/scss/component/accordion/_index.scss","../../../src/scss/base/button/_mixins.scss","../../../src/scss/base/button/_variables.scss","../../../src/scss/mixins/_animation.scss","../../../src/scss/component/accordion/_variables.scss","../../../src/scss/component/accordion/_defaults.scss"],"names":[],"mappings":"AASI,gBC2QJ,CD3QI,mBEEF,uBCGA,kBAAA,CASA,ohBC8LqB,CD/LrB,kdC0KoB,CD3KpB,0dCsJoB,CDlJpB,cAAA,CAZA,YAAA,CAWA,2GCUiB,CDnBjB,sBAAA,CAEA,+CCCkB,CDFlB,6CCFiB,CDIjB,uNCYe,CDXf,6CCqCiB,CDpCjB,mVFDA,CEWI,8DACE,oFFNN,CEKI,qCACE,kFFHN,CEEI,6BACE,kFFAN,CEDI,0DACE,kFFMN,CEPI,4DACE,0DFYN,CEbI,gCAKI,kBFYR,CENc,gHACE,sDFWhB,CEZc,8CACE,sDFchB,CE1BI,iOAYY,sDFiChB,CE7CI,iCAKI,kBFwCR,CElCc,kFACE,sDFuChB,CExCc,+CACE,sDF0ChB,CEtDI,gPAYY,sDF6DhB,CEzEI,2CAKI,kBFoER,CE9Dc,sGACE,sDFmEhB,CEpEc,yDACE,sDFsEhB,CElFI,uRAYY,sDFyFhB,CErGI,gCAKI,kBFgGR,CE1Fc,gFACE,sDF+FhB,CEhGc,8CACE,sDFkGhB,CEnGc,gMACE,sDFiHhB,CIhJA,uCHAA,uBC0CE,sLF0GA,CACF,CACF,CDxJI,wBEQF,WACE,YAAA,CACA,uBAAA,CAEA,sNIgBY,CJjBZ,+NDoJF,CChJI,6CAEE,uQDmJN,CCvIA,gBAKE,4jBI8B2B,CJ/B3B,0fI2E0B,CJ5E1B,kgBIuD0B,CJpD1B,iBAAA,CALA,eAAA,CACA,6ID6IF,CCvIE,6CAEE,YDwIJ,CCrIE,6CAGE,SAAA,CADA,2EDuIJ,CCnIE,sDAEE,YDoIJ,CChIA,uBAEE,mQI2D4B,CJ1D5B,4DIgE8B,CJ/D9B,kWIuF+B,CJ1F/B,SDqIF,CC/HI,8DACE,mGDoIN,CC/HI,qCACE,iGDiIN,CClII,6BACE,iGDoIN,CC/HI,0DACE,iGDoIN,CC/HI,4DACE,kGDoIN,CC/HI,4IACE,oGD0IN,CCtIE,6BAGE,kBAAA,CAFA,WKjEiC,CLkEjC,YAAA,CAEA,sBAAA,CACA,gBAAA,CACA,mEImPmC,CJlPnC,gJDwIJ,CCpII,iDACE,mFDsIN,CCjIA,uBACE,4hBIoE2B,CJnE3B,mQDmIF,CChIA,sBACE,4PIkG0B,CJjG1B,gQDkIF,CChIE,mEAGE,kBAAA,CADA,YAAA,CAEA,0BAAA,CACA,UDkIJ,CC9HA,wBACE,YAAA,CACA,uBAAA,CAKA,8PI6HyB,CJ9HzB,SAAA,CAHA,sQIqH6B,CJpH7B,0EI0M+B,CJzM/B,iPDkIF,CC7HA,qBACE,6PD+HF,CC5HA,uBACE,mQD8HF,CACF,CD3QI,oBEkJA,uCAEE;;;0MDwIJ,CACF,CD7RI,oBEsKF,WACE,wNIjImB,CJkInB,oMD0HF,CCvHA,gBACE,qPDyHF,CCtHA,uBC5HA,qNC8BkB,CD/BlB,0OCiKoB,CD/JpB,iMFsPA,CElPE,+BAEI,yIAAA,CAAA,gJAAA,CAAA,+IAAA,CAAA,oJAAA,CAAA,sJAAA,CAAA,kJAAA,CAAA,yJFyPN,CE3PE,iCAEI,+IAAA,CAAA,sJAAA,CAAA,qJAAA,CAAA,0JAAA,CAAA,4JAAA,CAAA,wJAAA,CAAA,+JFkQN,CEpQE,gCAEI,4IAAA,CAAA,mJAAA,CAAA,kJAAA,CAAA,uJAAA,CAAA,yJAAA,CAAA,qJAAA,CAAA,4JF2QN,CEhQI,8DAEE,6PAAA,CADA,oRAAA,CAEA,oOFuQN,CE1QI,qCAEE,2PAAA,CADA,kRAAA,CAEA,kOF4QN,CE/QI,6BAEE,2PAAA,CADA,kRAAA,CAEA,kOFiRN,CEpRI,0DAEE,iNAAA,CADA,gPAAA,CAEA,iNF2RN,CE9RI,4DAEE,wPAAA,CADA,yRAAA,CAEA,mPFqSN,CE7Rc,gHAEE,8NAAA,CADA,2KAAA,CAEA,6JFyShB,CE5Sc,8CAEE,8NAAA,CADA,2KAAA,CAEA,6JF8ShB,CEjTc,mTAEE,8NAAA,CADA,2KAAA,CAEA,6JFsVhB,CEzVc,+CAEE,8NAAA,CADA,2KAAA,CAEA,6JF2VhB,CE9Vc,sVAEE,8NAAA,CADA,2KAAA,CAEA,6JFmYhB,CEtYc,yDAEE,8NAAA,CADA,2KAAA,CAEA,6JFwYhB,CE3Yc,uWAEE,8NAAA,CADA,2KAAA,CAEA,6JFgbhB,CEnbc,8CAEE,8NAAA,CADA,2KAAA,CAEA,6JFqbhB,CExbc,gMAEE,8NAAA,CADA,2KAAA,CAEA,6JF8chB,CC7WE,mEAEE,8OI6CwB,CJ5CxB,gJIoCsB,CJnCtB,sLIuCwB,CJtCxB,oJD+WJ,CACF","file":"accordion.css"}
1
+ {"version":3,"sourceRoot":null,"mappings":"AGSI,mBCyTF,ozEGnSI,mJAAA,qJAAA,6IAAA,uHAAA,2yEFIF,+JGxBF,uCJuTA,gNDzTE,wBCgUF,0dAQI,4SAeJ,q1DAQE,0DAKA,mIAMA,mEAOF,whCG3VI,iLAAA,mLAAA,2KAAA,gIAAA,0zEHwWF,ybAYE,qIAOJ,oyBAMA,8gBAIE,yIAUF,qkCAWA,gRAKA,wRInbA,uCJybE,uFAKA,+dAIE,kHAKA,0TDzcF,oBCodA,kmBDpdA,oBCyeF,0pBA0BA,oxBAOA,4lBGpfI,szBAAA,ozBAAA,+sBAAA,m0BAAA,6xFGSF,miCAAA,+kCAAA,yjCNifF,01BG1fI,miCAAA,iiCAAA,+4BAAA,gjCAAA,62FH2gBJ,8/BAOE","sources":["dist/css/component/accordion.css","var/www/html/packages/core/src/scss/theme/typography/_defaults.scss","var/www/html/packages/core/src/scss/component/accordion/_variables.scss","var/www/html/packages/core/src/scss/mixins/_layer.scss","var/www/html/packages/core/src/scss/component/accordion/_index.scss","var/www/html/packages/core/src/scss/base/button/_mixins.scss","var/www/html/packages/core/src/scss/base/button/_variables.scss","var/www/html/packages/core/src/scss/mixins/_state.scss","var/www/html/packages/core/src/scss/mixins/_animation.scss","var/www/html/packages/core/src/scss/component/accordion/_defaults.scss","var/www/html/packages/core/src/scss/mixins/_theme.scss"],"sourcesContent":["@charset \"UTF-8\";\n/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */\n/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n/* stylelint-enable scss/operator-no-newline-after */\n@layer graupl.base {\n .accordion-item-toggle {\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 .accordion-item-toggle:visited {\n transform: var(--graupl-button-visited-transform, var(--graupl-button-transform, none));\n }\n .accordion-item-toggle.visited {\n transform: var(--graupl-button-visited-transform, var(--graupl-button-transform, none));\n }\n .accordion-item-toggle:focus-visible {\n transform: var(--graupl-button-focus-transform, var(--graupl-button-transform, none));\n }\n .accordion-item-toggle.focus {\n transform: var(--graupl-button-focus-transform, var(--graupl-button-transform, none));\n }\n .accordion-item-toggle:hover {\n transform: var(--graupl-button-hover-transform, var(--graupl-button-transform, none));\n }\n .accordion-item-toggle.hover {\n transform: var(--graupl-button-hover-transform, var(--graupl-button-transform, none));\n }\n .accordion-item-toggle:active {\n transform: var(--graupl-button-active-transform, scale(0.95));\n }\n .accordion-item-toggle.active {\n transform: var(--graupl-button-active-transform, scale(0.95));\n }\n .accordion-item-toggle:disabled {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle:disabled:visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle:disabled.visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle:disabled:focus-visible {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle:disabled.focus {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle:disabled:hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle:disabled.hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle:disabled:active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle:disabled.active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle:disabled[aria-selected=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle:disabled.selected {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle:disabled[aria-current=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle:disabled.current {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle[disabled] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle[disabled]:visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle[disabled].visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle[disabled]:focus-visible {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle[disabled].focus {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle[disabled]:hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle[disabled].hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle[disabled]:active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle[disabled].active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle[disabled][aria-selected=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle[disabled].selected {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle[disabled][aria-current=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle[disabled].current {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle[aria-disabled=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle[aria-disabled=true]:visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle[aria-disabled=true].visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle[aria-disabled=true]:focus-visible {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle[aria-disabled=true].focus {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle[aria-disabled=true]:hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle[aria-disabled=true].hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle[aria-disabled=true]:active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle[aria-disabled=true].active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle[aria-disabled=true][aria-selected=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle[aria-disabled=true].selected {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle[aria-disabled=true][aria-current=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle[aria-disabled=true].current {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle.disabled {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle.disabled:visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle.disabled.visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle.disabled:focus-visible {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle.disabled.focus {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle.disabled:hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle.disabled.hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle.disabled:active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle.disabled.active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle.disabled[aria-selected=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle.disabled.selected {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle.disabled[aria-current=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle.disabled.current {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .accordion-item-toggle:disabled {\n cursor: not-allowed;\n }\n .accordion-item-toggle[disabled] {\n cursor: not-allowed;\n }\n .accordion-item-toggle[aria-disabled=true] {\n cursor: not-allowed;\n }\n .accordion-item-toggle.disabled {\n cursor: not-allowed;\n }\n @media (prefers-reduced-motion: reduce) {\n .accordion-item-toggle {\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.component {\n .accordion {\n display: flex;\n flex-flow: column nowrap;\n padding: var(--graupl-accordion-padding, var(--graupl-accordion-padding-y, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))) var(--graupl-accordion-padding-x, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))));\n gap: var(--graupl-accordion-gap, var(--graupl-accordion-column-gap, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))) var(--graupl-accordion-row-gap, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))));\n }\n .accordion > .accordion-item:not(:first-child) {\n /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n margin-top: calc(-1 * min(var(--graupl-accordion-item-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))), var(--graupl-accordion-item-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem)))));\n /* stylelint-enable scss/operator-no-newline-after */\n }\n .accordion-item {\n overflow: hidden;\n transition: var(--graupl-accordion-item-transition, height var(--graupl-accordion-transition-duration, var(--graupl-transition-duration-slow, 300ms)) var(--graupl-accordion-transition-timing-function, var(--graupl-transition-timing-function, ease)));\n border-width: var(--graupl-accordion-item-border-width, var(--graupl-accordion-item-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))) var(--graupl-accordion-item-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))) var(--graupl-accordion-item-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))) var(--graupl-accordion-item-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem))));\n border-style: var(--graupl-accordion-item-border-style, var(--graupl-accordion-item-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-accordion-item-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-accordion-item-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-accordion-item-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n border-radius: var(--graupl-accordion-item-border-radius, var(--graupl-accordion-item-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-accordion-item-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-accordion-item-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-accordion-item-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))));\n isolation: isolate;\n }\n .accordion-item.hide .accordion-item-content {\n display: none;\n }\n .accordion-item.show .accordion-item-content {\n transform: var(--graupl-accordion-item-content-open-transform, translateY(0));\n opacity: 1;\n }\n .accordion-item.transitioning .accordion-item-content {\n display: flex;\n }\n .accordion-item-toggle {\n z-index: 2;\n padding: var(--graupl-accordion-item-toggle-padding, var(--graupl-accordion-item-toggle-padding-y, var(--graupl-button-padding-y, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem))))) var(--graupl-accordion-item-toggle-padding-x, var(--graupl-button-padding-x, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n transform: var(--graupl-accordion-item-toggle-transform, none);\n transition: var(--graupl-accordion-item-toggle-transition, background var(--graupl-accordion-transition-duration, var(--graupl-transition-duration-slow, 300ms)) var(--graupl-accordion-transition-timing-function, var(--graupl-transition-timing-function, ease)), color var(--graupl-accordion-transition-duration, var(--graupl-transition-duration-slow, 300ms)) var(--graupl-accordion-transition-timing-function, var(--graupl-transition-timing-function, ease)), transform var(--graupl-accordion-transition-duration, var(--graupl-transition-duration-slow, 300ms)) var(--graupl-accordion-transition-timing-function, var(--graupl-transition-timing-function, ease)));\n }\n .accordion-item-toggle:visited {\n transform: var(--graupl-accordion-item-toggle-visited-transform, var(--graupl-accordion-item-toggle-transform, none));\n }\n .accordion-item-toggle.visited {\n transform: var(--graupl-accordion-item-toggle-visited-transform, var(--graupl-accordion-item-toggle-transform, none));\n }\n .accordion-item-toggle:focus-visible {\n transform: var(--graupl-accordion-item-toggle-focus-transform, var(--graupl-accordion-item-toggle-transform, none));\n }\n .accordion-item-toggle.focus {\n transform: var(--graupl-accordion-item-toggle-focus-transform, var(--graupl-accordion-item-toggle-transform, none));\n }\n .accordion-item-toggle:hover {\n transform: var(--graupl-accordion-item-toggle-hover-transform, var(--graupl-accordion-item-toggle-transform, none));\n }\n .accordion-item-toggle.hover {\n transform: var(--graupl-accordion-item-toggle-hover-transform, var(--graupl-accordion-item-toggle-transform, none));\n }\n .accordion-item-toggle:active {\n transform: var(--graupl-accordion-item-toggle-active-transform, none);\n }\n .accordion-item-toggle.active {\n transform: var(--graupl-accordion-item-toggle-active-transform, none);\n }\n .accordion-item-toggle:disabled {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle:disabled:visited {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle:disabled.visited {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle:disabled:focus-visible {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle:disabled.focus {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle:disabled:hover {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle:disabled.hover {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle:disabled:active {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle:disabled.active {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle:disabled[aria-selected=true] {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle:disabled.selected {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle:disabled[aria-current=true] {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle:disabled.current {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle[disabled] {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle[disabled]:visited {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle[disabled].visited {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle[disabled]:focus-visible {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle[disabled].focus {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle[disabled]:hover {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle[disabled].hover {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle[disabled]:active {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle[disabled].active {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle[disabled][aria-selected=true] {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle[disabled].selected {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle[disabled][aria-current=true] {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle[disabled].current {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle[aria-disabled=true] {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle[aria-disabled=true]:visited {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle[aria-disabled=true].visited {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle[aria-disabled=true]:focus-visible {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle[aria-disabled=true].focus {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle[aria-disabled=true]:hover {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle[aria-disabled=true].hover {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle[aria-disabled=true]:active {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle[aria-disabled=true].active {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle[aria-disabled=true][aria-selected=true] {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle[aria-disabled=true].selected {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle[aria-disabled=true][aria-current=true] {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle[aria-disabled=true].current {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle.disabled {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle.disabled:visited {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle.disabled.visited {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle.disabled:focus-visible {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle.disabled.focus {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle.disabled:hover {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle.disabled.hover {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle.disabled:active {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle.disabled.active {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle.disabled[aria-selected=true] {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle.disabled.selected {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle.disabled[aria-current=true] {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle.disabled.current {\n transform: var(--graupl-accordion-item-toggle-disabled-transform, none);\n }\n .accordion-item-toggle::after {\n content: \"▼\";\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: auto;\n transform: var(--graupl-accordion-item-toggle-pseudo-transform, none);\n transition: var(--graupl-accordion-item-toggle-pseudo-transition, transform var(--graupl-accordion-transition-duration, var(--graupl-transition-duration-slow, 300ms)) var(--graupl-accordion-transition-timing-function, var(--graupl-transition-timing-function, ease)));\n }\n .accordion-item-toggle[aria-expanded=true]::after {\n transform: var(--graupl-accordion-item-toggle-pseudo-open-transform, rotate(-180deg));\n }\n .accordion-item-header {\n margin: var(--graupl-accordion-item-header-margin, calc(-1 * min(var(--graupl-accordion-item-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))), var(--graupl-accordion-item-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))), var(--graupl-accordion-item-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem))), var(--graupl-accordion-item-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))))));\n padding: var(--graupl-accordion-item-header-padding, var(--graupl-accordion-item-header-padding-y, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))) var(--graupl-accordion-item-header-padding-x, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))));\n }\n .accordion-item-title {\n margin: var(--graupl-accordion-item-title-margin, var(--graupl-accordion-item-title-margin-y, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))) var(--graupl-accordion-item-title-margin-x, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))));\n padding: var(--graupl-accordion-item-title-padding, var(--graupl-accordion-item-title-padding-y, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))) var(--graupl-accordion-item-title-padding-x, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))));\n }\n .accordion-item-title,\n .accordion-item-title .accordion-item-toggle {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n }\n .accordion-item-content {\n display: flex;\n flex-flow: column nowrap;\n padding: var(--graupl-accordion-item-content-padding, var(--graupl-accordion-item-content-padding-y, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) var(--graupl-accordion-item-content-padding-x, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))));\n transform: var(--graupl-accordion-item-content-transform, translateY(-100%));\n transition: var(--graupl-accordion-item-content-transition, opacity var(--graupl-accordion-transition-duration, var(--graupl-transition-duration-slow, 300ms)) var(--graupl-accordion-transition-timing-function, var(--graupl-transition-timing-function, ease)) transform var(--graupl-accordion-transition-duration, var(--graupl-transition-duration-slow, 300ms)) var(--graupl-accordion-transition-timing-function, var(--graupl-transition-timing-function, ease)));\n opacity: 0;\n gap: var(--graupl-accordion-item-content-gap, var(--graupl-accordion-item-content-column-gap, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))) var(--graupl-accordion-item-content-row-gap, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))));\n }\n .accordion-item-body {\n padding: var(--graupl-accordion-item-body-padding, var(--graupl-accordion-item-body-padding-y, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))) var(--graupl-accordion-item-body-padding-x, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))));\n }\n .accordion-item-footer {\n padding: var(--graupl-accordion-item-footer-padding, var(--graupl-accordion-item-footer-padding-y, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))) var(--graupl-accordion-item-footer-padding-x, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))));\n }\n @media (prefers-reduced-motion: reduce) {\n .accordion-item {\n transition: var(--graupl-accordion-item-transition-reduced-motion, none);\n }\n .accordion-item-toggle {\n transition: var(--graupl-accordion-item-toggle-transition-reduced-motion, background var(--graupl-accordion-transition-duration, var(--graupl-transition-duration-slow, 300ms)) var(--graupl-accordion-transition-timing-function, var(--graupl-transition-timing-function, ease)), color var(--graupl-accordion-transition-duration, var(--graupl-transition-duration-slow, 300ms)) var(--graupl-accordion-transition-timing-function, var(--graupl-transition-timing-function, ease)));\n }\n .accordion-item-toggle::after {\n transition: var(--graupl-accordion-item-toggle-pseudo-transition-reduced-motion, none);\n }\n .accordion-item-toggle .accordion-item-content {\n transition: var(--graupl-accordion-item-content-transition-reduced-motion, opacity var(--graupl-accordion-transition-duration, var(--graupl-transition-duration-slow, 300ms)) var(--graupl-accordion-transition-timing-function, var(--graupl-transition-timing-function, ease)));\n }\n }\n}\n@layer graupl.state {\n .accordion-item .accordion-item-toggle {\n /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n --graupl-focus-outline-offset: calc(\n -1 *\n (\n min(\n var(--graupl-accordion-item-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))),\n var(--graupl-accordion-item-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))),\n var(--graupl-accordion-item-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem))),\n var(--graupl-accordion-item-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem)))\n ) +\n var(--graupl-focus-width, var(--graupl-border-width, 0.125rem))\n )\n );\n /* stylelint-enable scss/operator-no-newline-after */\n }\n}\n@layer graupl.theme {\n .accordion {\n border-color: var(--graupl-accordion-border-color, var(--graupl-accordion-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-accordion-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-accordion-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 .accordion-item {\n border-color: var(--graupl-accordion-item-border-color, var(--graupl-accordion-border-color, var(--graupl-accordion-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-accordion-item-background, var(--graupl-accordion-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-accordion-item-color, var(--graupl-accordion-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 .accordion-item-content {\n background: var(--graupl-accordion-item-content-background, var(--graupl-accordion-item-background, var(--graupl-accordion-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-accordion-item-content-color, var(--graupl-accordion-item-color, var(--graupl-accordion-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 .accordion-item-toggle {\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 .accordion-item-toggle: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 .accordion-item-toggle.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 .accordion-item-toggle: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 .accordion-item-toggle.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 .accordion-item-toggle: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 .accordion-item-toggle.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 .accordion-item-toggle: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 .accordion-item-toggle.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 .accordion-item-toggle: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 .accordion-item-toggle: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 .accordion-item-toggle: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 .accordion-item-toggle: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 .accordion-item-toggle: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 .accordion-item-toggle: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 .accordion-item-toggle: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 .accordion-item-toggle: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 .accordion-item-toggle: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 .accordion-item-toggle: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 .accordion-item-toggle: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 .accordion-item-toggle: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 .accordion-item-toggle: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 .accordion-item-toggle[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 .accordion-item-toggle[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 .accordion-item-toggle[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 .accordion-item-toggle[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 .accordion-item-toggle[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 .accordion-item-toggle[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 .accordion-item-toggle[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 .accordion-item-toggle[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 .accordion-item-toggle[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 .accordion-item-toggle[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 .accordion-item-toggle[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 .accordion-item-toggle[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 .accordion-item-toggle[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 .accordion-item-toggle[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 .accordion-item-toggle[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 .accordion-item-toggle[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 .accordion-item-toggle[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 .accordion-item-toggle[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 .accordion-item-toggle[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 .accordion-item-toggle[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 .accordion-item-toggle[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 .accordion-item-toggle[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 .accordion-item-toggle[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 .accordion-item-toggle[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 .accordion-item-toggle[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 .accordion-item-toggle[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 .accordion-item-toggle.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 .accordion-item-toggle.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 .accordion-item-toggle.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 .accordion-item-toggle.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 .accordion-item-toggle.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 .accordion-item-toggle.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 .accordion-item-toggle.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 .accordion-item-toggle.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 .accordion-item-toggle.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 .accordion-item-toggle.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 .accordion-item-toggle.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 .accordion-item-toggle.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 .accordion-item-toggle.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 .accordion-item-toggle.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 .accordion-item-toggle.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 .accordion-item-toggle.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 .accordion-item-toggle {\n border-color: var(--graupl-accordion-item-toggle-border-color, var(--graupl-accordion-item-border-color, var(--graupl-accordion-border-color, var(--graupl-accordion-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-accordion-item-toggle-background, var(--graupl-accordion-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-accordion-item-toggle-color, var(--graupl-accordion-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 .accordion-item-toggle:visited {\n border-color: var(--graupl-accordion-item-toggle-visited-border-color, var(--graupl-accordion-item-toggle-border-color, var(--graupl-accordion-item-border-color, var(--graupl-accordion-border-color, var(--graupl-accordion-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 color: var(--graupl-accordion-item-toggle-visited-color, var(--graupl-accordion-item-toggle-color, var(--graupl-accordion-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-accordion-item-toggle-visited-background, var(--graupl-accordion-item-toggle-background, var(--graupl-accordion-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 }\n .accordion-item-toggle.visited {\n border-color: var(--graupl-accordion-item-toggle-visited-border-color, var(--graupl-accordion-item-toggle-border-color, var(--graupl-accordion-item-border-color, var(--graupl-accordion-border-color, var(--graupl-accordion-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 color: var(--graupl-accordion-item-toggle-visited-color, var(--graupl-accordion-item-toggle-color, var(--graupl-accordion-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-accordion-item-toggle-visited-background, var(--graupl-accordion-item-toggle-background, var(--graupl-accordion-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 }\n .accordion-item-toggle:focus-visible {\n border-color: var(--graupl-accordion-item-toggle-focus-border-color, var(--graupl-accordion-item-toggle-border-color, var(--graupl-accordion-item-border-color, var(--graupl-accordion-border-color, var(--graupl-accordion-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 color: var(--graupl-accordion-item-toggle-focus-color, var(--graupl-accordion-item-toggle-color, var(--graupl-accordion-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-accordion-item-toggle-focus-background, var(--graupl-accordion-item-toggle-background, var(--graupl-accordion-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 }\n .accordion-item-toggle.focus {\n border-color: var(--graupl-accordion-item-toggle-focus-border-color, var(--graupl-accordion-item-toggle-border-color, var(--graupl-accordion-item-border-color, var(--graupl-accordion-border-color, var(--graupl-accordion-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 color: var(--graupl-accordion-item-toggle-focus-color, var(--graupl-accordion-item-toggle-color, var(--graupl-accordion-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-accordion-item-toggle-focus-background, var(--graupl-accordion-item-toggle-background, var(--graupl-accordion-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 }\n .accordion-item-toggle:hover {\n border-color: var(--graupl-accordion-item-toggle-hover-border-color, var(--graupl-accordion-item-border-color, var(--graupl-accordion-border-color, var(--graupl-accordion-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 color: var(--graupl-accordion-item-toggle-hover-color, var(--graupl-accordion-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 background: var(--graupl-accordion-item-toggle-hover-background, var(--graupl-accordion-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 .accordion-item-toggle.hover {\n border-color: var(--graupl-accordion-item-toggle-hover-border-color, var(--graupl-accordion-item-border-color, var(--graupl-accordion-border-color, var(--graupl-accordion-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 color: var(--graupl-accordion-item-toggle-hover-color, var(--graupl-accordion-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 background: var(--graupl-accordion-item-toggle-hover-background, var(--graupl-accordion-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 .accordion-item-toggle:active {\n border-color: var(--graupl-accordion-item-toggle-active-border-color, var(--graupl-accordion-item-toggle-hover-border-color, var(--graupl-accordion-item-border-color, var(--graupl-accordion-border-color, var(--graupl-accordion-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 color: var(--graupl-accordion-item-toggle-active-color, var(--graupl-accordion-item-toggle-hover-color, var(--graupl-accordion-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 background: var(--graupl-accordion-item-toggle-active-background, var(--graupl-accordion-item-toggle-hover-background, var(--graupl-accordion-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 .accordion-item-toggle.active {\n border-color: var(--graupl-accordion-item-toggle-active-border-color, var(--graupl-accordion-item-toggle-hover-border-color, var(--graupl-accordion-item-border-color, var(--graupl-accordion-border-color, var(--graupl-accordion-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 color: var(--graupl-accordion-item-toggle-active-color, var(--graupl-accordion-item-toggle-hover-color, var(--graupl-accordion-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 background: var(--graupl-accordion-item-toggle-active-background, var(--graupl-accordion-item-toggle-hover-background, var(--graupl-accordion-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 .accordion-item-toggle:disabled {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle:disabled:visited {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle:disabled.visited {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle:disabled:focus-visible {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle:disabled.focus {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle:disabled:hover {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle:disabled.hover {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle:disabled:active {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle:disabled.active {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle:disabled[aria-selected=true] {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle:disabled.selected {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle:disabled[aria-current=true] {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle:disabled.current {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle[disabled] {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle[disabled]:visited {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle[disabled].visited {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle[disabled]:focus-visible {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle[disabled].focus {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle[disabled]:hover {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle[disabled].hover {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle[disabled]:active {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle[disabled].active {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle[disabled][aria-selected=true] {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle[disabled].selected {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle[disabled][aria-current=true] {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle[disabled].current {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle[aria-disabled=true] {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle[aria-disabled=true]:visited {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle[aria-disabled=true].visited {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle[aria-disabled=true]:focus-visible {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle[aria-disabled=true].focus {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle[aria-disabled=true]:hover {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle[aria-disabled=true].hover {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle[aria-disabled=true]:active {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle[aria-disabled=true].active {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle[aria-disabled=true][aria-selected=true] {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle[aria-disabled=true].selected {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle[aria-disabled=true][aria-current=true] {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle[aria-disabled=true].current {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle.disabled {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle.disabled:visited {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle.disabled.visited {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle.disabled:focus-visible {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle.disabled.focus {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle.disabled:hover {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle.disabled.hover {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle.disabled:active {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle.disabled.active {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle.disabled[aria-selected=true] {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle.disabled.selected {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle.disabled[aria-current=true] {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-toggle.disabled.current {\n border-color: var(--graupl-accordion-item-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n color: var(--graupl-accordion-item-toggle-disabled-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-accordion-item-toggle-disabled-background, var(--graupl-accordion-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 }\n .accordion-item-title {\n --graupl-accordion-item-toggle-color: var(--graupl-accordion-item-title-color, var(--graupl-accordion-item-color, var(--graupl-accordion-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 --graupl-accordion-item-toggle-background: var(--graupl-accordion-item-title-background, var(--graupl-accordion-item-background, var(--graupl-accordion-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 --graupl-accordion-item-toggle-border-color: var(--graupl-accordion-item-title-border-color, var(--graupl-accordion-item-border-color, var(--graupl-accordion-border-color, var(--graupl-accordion-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 .accordion-item-title,\n .accordion-item-title .accordion-item-toggle {\n border-color: var(--graupl-accordion-item-title-border-color, var(--graupl-accordion-item-border-color, var(--graupl-accordion-border-color, var(--graupl-accordion-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-accordion-item-title-background, var(--graupl-accordion-item-background, var(--graupl-accordion-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-accordion-item-title-color, var(--graupl-accordion-item-color, var(--graupl-accordion-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 font-family: var(--graupl-accordion-item-title-font-family, var(--graupl-h5-font-family, var(--graupl-heading-font-family, var(--graupl-root-font-family, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif))));\n font-size: var(--graupl-accordion-item-title-font-size, var(--graupl-h5-font-size, var(--graupl-font-xl, calc(1.44 * var(--graupl-font-size-base, 1rem)))));\n font-weight: var(--graupl-accordion-item-title-font-weight, var(--graupl-h5-font-weight, var(--graupl-heading-font-weight, var(--graupl-font-weight-bold, var(--graupl-font-weight-bold, 700)))));\n line-height: var(--graupl-accordion-item-title-line-height, var(--graupl-h5-line-height, var(--graupl-heading-line-height, var(--graupl-line-height, 1.2em))));\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: \":\" !default;\n$root-selector: \"root\" !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$body-selector-base: $selector-base !default;\n$body-selector: \"body\" !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$line-height: 1.2em !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 accordion component variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n\n// Custom property defaults:\n// | Property | Description | Default |\n// | --------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | --graupl-accordion-padding-x | Horizontal padding on the accordion container. | var(--graupl-spacer-0) |\n// | --graupl-accordion-padding-y | Vertical padding on the accordion container. | var(--graupl-spacer-0) |\n// | --graupl-accordion-padding | Shorthand padding for the accordion container. | var(--graupl-accordion-padding-y) var(--graupl-accordion-padding-x) |\n// | --graupl-accordion-column-gap | Column gap between accordion items. | var(--graupl-spacer-0) |\n// | --graupl-accordion-row-gap | Row gap between accordion items. | var(--graupl-spacer-0) |\n// | --graupl-accordion-gap | Gap between accordion items (column/row). | var(--graupl-accordion-column-gap) var(--graupl-accordion-row-gap) |\n// | --graupl-accordion-color | Text colour of the accordion container. | var(--graupl-color) |\n// | --graupl-accordion-background | Background colour of the accordion container. | var(--graupl-background) |\n// | --graupl-accordion-border-color | Border colour of the accordion container. | var(--graupl-accordion-color) |\n// | --graupl-accordion-item-color | Text colour of the accordion item. | var(--graupl-accordion-color) |\n// | --graupl-accordion-item-background | Background colour of the accordion item. | var(--graupl-accordion-background) |\n// | --graupl-accordion-item-border-color | Border colour of the accordion item. | var(--graupl-accordion-border-color) |\n// | --graupl-accordion-item-border-top-left-radius | Top-left border radius of an accordion item. | var(--graupl-border-top-left-radius) |\n// | --graupl-accordion-item-border-top-right-radius | Top-right border radius of an accordion item. | var(--graupl-border-top-right-radius) |\n// | --graupl-accordion-item-border-bottom-right-radius | Bottom-right border radius of an accordion item. | var(--graupl-border-bottom-right-radius) |\n// | --graupl-accordion-item-border-bottom-left-radius | Bottom-left border radius of an accordion item. | var(--graupl-border-bottom-left-radius) |\n// | --graupl-accordion-item-border-radius | Border radius of an accordion item. | var(--graupl-accordion-item-border-top-left-radius) var(--graupl-accordion-item-border-top-right-radius) var(--graupl-accordion-item-border-bottom-right-radius) var(--graupl-accordion-item-border-bottom-left-radius) |\n// | --graupl-accordion-item-border-top-width | Top border width of an accordion item. | var(--graupl-border-top-width) |\n// | --graupl-accordion-item-border-right-width | Right border width of an accordion item. | var(--graupl-border-right-width) |\n// | --graupl-accordion-item-border-bottom-width | Bottom border width of an accordion item. | var(--graupl-border-bottom-width) |\n// | --graupl-accordion-item-border-left-width | Left border width of an accordion item. | var(--graupl-border-left-width) |\n// | --graupl-accordion-item-border-width | Border width of an accordion item. | var(--graupl-accordion-item-border-top-width) var(--graupl-accordion-item-border-right-width) var(--graupl-accordion-item-border-bottom-width) var(--graupl-accordion-item-border-left-width) |\n// | --graupl-accordion-item-border-top-style | Top border style of an accordion item. | var(--graupl-border-top-style) |\n// | --graupl-accordion-item-border-right-style | Right border style of an accordion item. | var(--graupl-border-right-style) |\n// | --graupl-accordion-item-border-bottom-style | Bottom border style of an accordion item. | var(--graupl-border-bottom-style) |\n// | --graupl-accordion-item-border-left-style | Left border style of an accordion item. | var(--graupl-border-left-style) |\n// | --graupl-accordion-item-border-style | Border style of an accordion item. | var(--graupl-accordion-item-border-top-style) var(--graupl-accordion-item-border-right-style) var(--graupl-accordion-item-border-bottom-style) var(--graupl-accordion-item-border-left-style) |\n// | --graupl-accordion-item-header-padding-x | Horizontal padding for the accordion item header. | var(--graupl-spacer-0) |\n// | --graupl-accordion-item-header-padding-y | Vertical padding for the accordion item header. | var(--graupl-spacer-0) |\n// | --graupl-accordion-item-header-padding | Padding for the accordion item header. | var(--graupl-accordion-item-header-padding-y) var(--graupl-accordion-item-header-padding-x) |\n// | --graupl-accordion-item-header-margin | Margin for the accordion item header (pulls content over borders). | calc(-1 * min(var(--graupl-accordion-item-border-top-width), var(--graupl-accordion-item-border-bottom-width), var(--graupl-accordion-item-border-left-width), var(--graupl-accordion-item-border-right-width))) |\n// | --graupl-accordion-item-title-padding-x | Horizontal padding for the accordion item title row. | var(--graupl-spacer-0) |\n// | --graupl-accordion-item-title-padding-y | Vertical padding for the accordion item title row. | var(--graupl-spacer-0) |\n// | --graupl-accordion-item-title-padding | Padding for the accordion item title row. | var(--graupl-accordion-item-title-padding-y) var(--graupl-accordion-item-title-padding-x) |\n// | --graupl-accordion-item-title-margin-x | Horizontal margin for the accordion item title row. | var(--graupl-spacer-0) |\n// | --graupl-accordion-item-title-margin-y | Vertical margin for the accordion item title row. | var(--graupl-spacer-0) |\n// | --graupl-accordion-item-title-margin | Margin for the accordion item title row. | var(--graupl-accordion-item-title-margin-y) var(--graupl-accordion-item-title-margin-x) |\n// | --graupl-accordion-item-title-color | Text colour for accordion item titles. | var(--graupl-accordion-item-color) |\n// | --graupl-accordion-item-title-background | Background colour for accordion item titles. | var(--graupl-accordion-item-background) |\n// | --graupl-accordion-item-title-border-color | Border colour for accordion item titles. | var(--graupl-accordion-item-border-color) |\n// | --graupl-accordion-item-title-font-size | Font size for accordion item titles. | var(--graupl-h5-font-size) |\n// | --graupl-accordion-item-title-font-weight | Font weight for accordion item titles. | var(--graupl-h5-font-weight) |\n// | --graupl-accordion-item-title-font-family | Font family for accordion item titles. | var(--graupl-h5-font-family) |\n// | --graupl-accordion-item-title-line-height | Line height for accordion item titles. | var(--graupl-h5-line-height) |\n// | --graupl-accordion-item-content-color | Text colour for accordion item content. | var(--graupl-accordion-item-color) |\n// | --graupl-accordion-item-content-background | Background colour for accordion item content. | var(--graupl-accordion-item-background) |\n// | --graupl-accordion-item-content-padding-x | Horizontal padding for the accordion item content area. | var(--graupl-spacer-5) |\n// | --graupl-accordion-item-content-padding-y | Vertical padding for the accordion item content area. | var(--graupl-spacer-5) |\n// | --graupl-accordion-item-content-padding | Padding for the accordion item content area. | var(--graupl-accordion-item-content-padding-y) var(--graupl-accordion-item-content-padding-x) |\n// | --graupl-accordion-item-content-column-gap | Column gap inside the accordion content. | var(--graupl-spacer-3) |\n// | --graupl-accordion-item-content-row-gap | Row gap inside the accordion content. | var(--graupl-spacer-0) |\n// | --graupl-accordion-item-content-gap | Gap inside the accordion content (column/row). | var(--graupl-accordion-item-content-column-gap) var(--graupl-accordion-item-content-row-gap) |\n// | --graupl-accordion-item-body-padding-x | Horizontal padding for the accordion item body. | var(--graupl-spacer-0) |\n// | --graupl-accordion-item-body-padding-y | Vertical padding for the accordion item body. | var(--graupl-spacer-0) |\n// | --graupl-accordion-item-body-padding | Padding for the accordion item body. | var(--graupl-accordion-item-body-padding-y) var(--graupl-accordion-item-body-padding-x) |\n// | --graupl-accordion-item-footer-padding-x | Horizontal padding for the accordion item footer. | var(--graupl-spacer-0) |\n// | --graupl-accordion-item-footer-padding-y | Vertical padding for the accordion item footer. | var(--graupl-spacer-0) |\n// | --graupl-accordion-item-footer-padding | Padding for the accordion item footer. | var(--graupl-accordion-item-footer-padding-y) var(--graupl-accordion-item-footer-padding-x) |\n// | --graupl-accordion-item-content-transform | Base transform for accordion content. | translateY(-100%) |\n// | --graupl-accordion-item-content-open-transform | Transform when accordion content is open. | translateY(0) |\n// | --graupl-accordion-item-toggle-padding-x | Horizontal padding applied to the toggle control. | var(--graupl-button-padding-x) |\n// | --graupl-accordion-item-toggle-padding-y | Vertical padding applied to the toggle control. | var(--graupl-button-padding-y) |\n// | --graupl-accordion-item-toggle-padding | Shorthand padding applied to the toggle control. | var(--graupl-accordion-item-toggle-padding-y) var(--graupl-accordion-item-toggle-padding-x) |\n// | --graupl-accordion-item-toggle-transform | Base transform for the toggle control. | none |\n// | --graupl-accordion-item-toggle-visited-transform | Transform for a visited toggle. | var(--graupl-accordion-item-toggle-transform) |\n// | --graupl-accordion-item-toggle-focus-transform | Transform for a focused toggle. | var(--graupl-accordion-item-toggle-transform) |\n// | --graupl-accordion-item-toggle-hover-transform | Transform for a hovered toggle. | var(--graupl-accordion-item-toggle-transform) |\n// | --graupl-accordion-item-toggle-active-transform | Transform for an active toggle. | none |\n// | --graupl-accordion-item-toggle-disabled-transform | Transform for a disabled toggle. | none |\n// | --graupl-accordion-item-toggle-pseudo-transform | Transform for the toggle indicator pseudo-element. | none |\n// | --graupl-accordion-item-toggle-pseudo-open-transform | Transform for the toggle indicator when open. | rotate(-180deg) |\n// | --graupl-accordion-transition-duration | Duration used for accordion transitions. | var(--graupl-transition-duration-slow) |\n// | --graupl-accordion-transition-timing-function | Timing function used for accordion transitions. | var(--graupl-transition-timing-function) |\n// | --graupl-accordion-item-transition | Transition applied to accordion item height. | height var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function) |\n// | --graupl-accordion-item-transition-reduced-motion | Transition used when reduced motion is enabled. | none |\n// | --graupl-accordion-item-toggle-pseudo-transition | Transition for the toggle indicator pseudo-element. | transform var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function) |\n// | --graupl-accordion-item-toggle-pseudo-transition-reduced-motion | Transition for the toggle indicator when reduced motion is enabled. | none |\n// | --graupl-accordion-item-content-transition | Transition applied to accordion content. | opacity var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function) transform var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function) |\n// | --graupl-accordion-item-content-transition-reduced-motion | Transition for content when reduced motion is enabled. | opacity var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function) |\n// | --graupl-accordion-item-toggle-transition | Transition for toggle state changes. | background var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function), color var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function), transform var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function) |\n// | --graupl-accordion-item-toggle-transition-reduced-motion | Transition used when reduced motion is enabled. | background var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function), color var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function) |\n// | --graupl-accordion-item-toggle-color | Text colour of the accordion item toggle. | var(--graupl-accordion-color) |\n// | --graupl-accordion-item-toggle-visited-color | Text colour of a visited accordion item toggle. | var(--graupl-accordion-item-toggle-color) |\n// | --graupl-accordion-item-toggle-focus-color | Text colour of a focused accordion item toggle. | var(--graupl-accordion-item-toggle-color) |\n// | --graupl-accordion-item-toggle-hover-color | Text colour of a hovered accordion item toggle. | var(--graupl-accordion-background) |\n// | --graupl-accordion-item-toggle-active-color | Text colour of an active accordion item toggle. | var(--graupl-accordion-item-toggle-hover-color) |\n// | --graupl-accordion-item-toggle-disabled-color | Text colour of a disabled accordion item toggle. | var(--graupl-theme-active--primary--200) |\n// | --graupl-accordion-item-toggle-background | Background colour of the accordion item toggle. | var(--graupl-accordion-background) |\n// | --graupl-accordion-item-toggle-visited-background | Background colour of a visited accordion item toggle. | var(--graupl-accordion-item-toggle-background) |\n// | --graupl-accordion-item-toggle-focus-background | Background colour of a focused accordion item toggle. | var(--graupl-accordion-item-toggle-background) |\n// | --graupl-accordion-item-toggle-hover-background | Background colour of a hovered accordion item toggle. | var(--graupl-accordion-color) |\n// | --graupl-accordion-item-toggle-active-background | Background colour of an active accordion item toggle. | var(--graupl-accordion-item-toggle-hover-background) |\n// | --graupl-accordion-item-toggle-disabled-background | Background colour of a disabled accordion item toggle. | var(--graupl-accordion-background) |\n// | --graupl-accordion-item-toggle-border-color | Border colour of the accordion item toggle. | var(--graupl-accordion-item-border-color) |\n// | --graupl-accordion-item-toggle-visited-border-color | Border colour of a visited accordion item toggle. | var(--graupl-accordion-item-toggle-border-color) |\n// | --graupl-accordion-item-toggle-focus-border-color | Border colour of a focused accordion item toggle. | var(--graupl-accordion-item-toggle-border-color) |\n// | --graupl-accordion-item-toggle-hover-border-color | Border colour of a hovered accordion item toggle. | var(--graupl-accordion-item-border-color) |\n// | --graupl-accordion-item-toggle-active-border-color | Border colour of an active accordion item toggle. | var(--graupl-accordion-item-toggle-hover-border-color) |\n// | --graupl-accordion-item-toggle-disabled-border-color | Border colour of a disabled accordion item toggle. | var(--graupl-theme-active--primary--200) |\n\n@use \"../../base/button/variables\" as button;\n@use \"../../defaults\" as root-defaults;\n@use \"../../functions/theme\";\n@use \"../../theme/color/variables\" as color;\n@use \"../../theme/typography/variables\" as typography;\n@use \"../../variables\" as root-variables;\n@use \"defaults\";\n@use \"sass:map\";\n\n// Accordion properties.\n// --graupl-accordion-padding-x\n$accordion-padding-x: var(\n --#{root-defaults.$prefix}accordion-padding-x,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-accordion-padding-y\n$accordion-padding-y: var(\n --#{root-defaults.$prefix}accordion-padding-y,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-accordion-padding\n$accordion-padding: var(\n --#{root-defaults.$prefix}accordion-padding,\n #{$accordion-padding-y} #{$accordion-padding-x}\n);\n\n// Accordion gap properties.\n// --graupl-accordion-column-gap\n$accordion-column-gap: var(\n --#{root-defaults.$prefix}accordion-column-gap,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-accordion-row-gap\n$accordion-row-gap: var(\n --#{root-defaults.$prefix}accordion-row-gap,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-accordion-gap\n$accordion-gap: var(\n --#{root-defaults.$prefix}accordion-gap,\n #{$accordion-column-gap} #{$accordion-row-gap}\n);\n\n// Accordion color properties.\n// --graupl-accordion-color\n$accordion-color: var(\n --#{root-defaults.$prefix}accordion-color,\n #{color.$color}\n);\n\n// --graupl-accordion-background\n$accordion-background: var(\n --#{root-defaults.$prefix}accordion-background,\n #{color.$background}\n);\n\n// --graupl-accordion-border-color\n$accordion-border-color: var(\n --#{root-defaults.$prefix}accordion-border-color,\n #{$accordion-color}\n);\n\n// --graupl-accordion-item-color\n$accordion-item-color: var(\n --#{root-defaults.$prefix}accordion-item-color,\n #{$accordion-color}\n);\n\n// --graupl-accordion-item-background\n$accordion-item-background: var(\n --#{root-defaults.$prefix}accordion-item-background,\n #{$accordion-background}\n);\n\n// Accordion item border properties.\n// --graupl-accordion-item-border-color\n$accordion-item-border-color: var(\n --#{root-defaults.$prefix}accordion-item-border-color,\n #{$accordion-border-color}\n);\n\n// --graupl-accordion-item-border-top-left-radius\n$accordion-item-border-top-left-radius: var(\n --#{root-defaults.$prefix}accordion-item-border-top-left-radius,\n #{root-variables.$border-top-left-radius}\n);\n\n// --graupl-accordion-item-border-top-right-radius\n$accordion-item-border-top-right-radius: var(\n --#{root-defaults.$prefix}accordion-item-border-top-right-radius,\n #{root-variables.$border-top-right-radius}\n);\n\n// --graupl-accordion-item-border-bottom-left-radius\n$accordion-item-border-bottom-left-radius: var(\n --#{root-defaults.$prefix}accordion-item-border-bottom-left-radius,\n #{root-variables.$border-bottom-left-radius}\n);\n\n// --graupl-accordion-item-border-bottom-right-radius\n$accordion-item-border-bottom-right-radius: var(\n --#{root-defaults.$prefix}accordion-item-border-bottom-right-radius,\n #{root-variables.$border-bottom-right-radius}\n);\n\n// --graupl-accordion-item-border-radius\n$accordion-item-border-radius: var(\n --#{root-defaults.$prefix}accordion-item-border-radius,\n #{$accordion-item-border-top-left-radius}\n #{$accordion-item-border-top-right-radius}\n #{$accordion-item-border-bottom-right-radius}\n #{$accordion-item-border-bottom-left-radius}\n);\n\n// --graupl-accordion-item-border-top-width\n$accordion-item-border-top-width: var(\n --#{root-defaults.$prefix}accordion-item-border-top-width,\n #{root-variables.$border-top-width}\n);\n\n// --graupl-accordion-item-border-right-width\n$accordion-item-border-right-width: var(\n --#{root-defaults.$prefix}accordion-item-border-right-width,\n #{root-variables.$border-right-width}\n);\n\n// --graupl-accordion-item-border-bottom-width\n$accordion-item-border-bottom-width: var(\n --#{root-defaults.$prefix}accordion-item-border-bottom-width,\n #{root-variables.$border-bottom-width}\n);\n\n// --graupl-accordion-item-border-left-width\n$accordion-item-border-left-width: var(\n --#{root-defaults.$prefix}accordion-item-border-left-width,\n #{root-variables.$border-left-width}\n);\n\n// --graupl-accordion-item-border-width\n$accordion-item-border-width: var(\n --#{root-defaults.$prefix}accordion-item-border-width,\n #{$accordion-item-border-top-width} #{$accordion-item-border-right-width}\n #{$accordion-item-border-bottom-width} #{$accordion-item-border-left-width}\n);\n\n// --graupl-accordion-item-border-top-style\n$accordion-item-border-top-style: var(\n --#{root-defaults.$prefix}accordion-item-border-top-style,\n #{root-variables.$border-top-style}\n);\n\n// --graupl-accordion-item-border-right-style\n$accordion-item-border-right-style: var(\n --#{root-defaults.$prefix}accordion-item-border-right-style,\n #{root-variables.$border-right-style}\n);\n\n// --graupl-accordion-item-border-bottom-style\n$accordion-item-border-bottom-style: var(\n --#{root-defaults.$prefix}accordion-item-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n\n// --graupl-accordion-item-border-left-style\n$accordion-item-border-left-style: var(\n --#{root-defaults.$prefix}accordion-item-border-left-style,\n #{root-variables.$border-left-style}\n);\n\n// --graupl-accordion-item-border-style\n$accordion-item-border-style: var(\n --#{root-defaults.$prefix}accordion-item-border-style,\n #{$accordion-item-border-top-style} #{$accordion-item-border-right-style}\n #{$accordion-item-border-bottom-style} #{$accordion-item-border-left-style}\n);\n\n// Accordion item header properties.\n// --graupl-accordion-item-header-padding-x\n$accordion-item-header-padding-x: var(\n --#{root-defaults.$prefix}accordion-item-header-padding-x,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-accordion-item-header-padding-y\n$accordion-item-header-padding-y: var(\n --#{root-defaults.$prefix}accordion-item-header-padding-y,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-accordion-item-header-padding\n$accordion-item-header-padding: var(\n --#{root-defaults.$prefix}accordion-item-header-padding,\n #{$accordion-item-header-padding-y} #{$accordion-item-header-padding-x}\n);\n/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n// --graupl-accordion-item-header-margin\n$accordion-item-header-margin: var(\n --#{root-defaults.$prefix}accordion-item-header-margin,\n calc(\n -1 *\n min(\n #{$accordion-item-border-top-width},\n #{$accordion-item-border-bottom-width},\n #{$accordion-item-border-left-width},\n #{$accordion-item-border-right-width}\n )\n )\n);\n/* stylelint-enable scss/operator-no-newline-after */\n\n// Accordion item title properties.\n// --graupl-accordion-item-title-padding-x\n$accordion-item-title-padding-x: var(\n --#{root-defaults.$prefix}accordion-item-title-padding-x,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-accordion-item-title-padding-y\n$accordion-item-title-padding-y: var(\n --#{root-defaults.$prefix}accordion-item-title-padding-y,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-accordion-item-title-padding\n$accordion-item-title-padding: var(\n --#{root-defaults.$prefix}accordion-item-title-padding,\n #{$accordion-item-title-padding-y} #{$accordion-item-title-padding-x}\n);\n\n// --graupl-accordion-item-title-margin-x\n$accordion-item-title-margin-x: var(\n --#{root-defaults.$prefix}accordion-item-title-margin-x,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-accordion-item-title-margin-y\n$accordion-item-title-margin-y: var(\n --#{root-defaults.$prefix}accordion-item-title-margin-y,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-accordion-item-title-margin\n$accordion-item-title-margin: var(\n --#{root-defaults.$prefix}accordion-item-title-margin,\n #{$accordion-item-title-margin-y} #{$accordion-item-title-margin-x}\n);\n\n// --graupl-accordion-item-title-color\n$accordion-item-title-color: var(\n --#{root-defaults.$prefix}accordion-item-title-color,\n #{$accordion-item-color}\n);\n\n// --graupl-accordion-item-title-background\n$accordion-item-title-background: var(\n --#{root-defaults.$prefix}accordion-item-title-background,\n #{$accordion-item-background}\n);\n\n// --graupl-accordion-item-title-border-color\n$accordion-item-title-border-color: var(\n --#{root-defaults.$prefix}accordion-item-title-border-color,\n #{$accordion-item-border-color}\n);\n\n// --graupl-accordion-item-title-font-size\n$accordion-item-title-font-size: var(\n --#{root-defaults.$prefix}accordion-item-title-font-size,\n #{typography.$h5-font-size}\n);\n\n// --graupl-accordion-item-title-font-weight\n$accordion-item-title-font-weight: var(\n --#{root-defaults.$prefix}accordion-item-title-font-weight,\n #{typography.$h5-font-weight}\n);\n\n// --graupl-accordion-item-title-font-family\n$accordion-item-title-font-family: var(\n --#{root-defaults.$prefix}accordion-item-title-font-family,\n #{typography.$h5-font-family}\n);\n\n// --graupl-accordion-item-title-line-height\n$accordion-item-title-line-height: var(\n --#{root-defaults.$prefix}accordion-item-title-line-height,\n #{typography.$h5-line-height}\n);\n\n// --graupl-accordion-item-content-color\n$accordion-item-content-color: var(\n --#{root-defaults.$prefix}accordion-item-content-color,\n #{$accordion-item-color}\n);\n\n// --graupl-accordion-item-content-background\n$accordion-item-content-background: var(\n --#{root-defaults.$prefix}accordion-item-content-background,\n #{$accordion-item-background}\n);\n\n// Accordion item content properties.\n// --graupl-accordion-item-content-padding-x\n$accordion-item-content-padding-x: var(\n --#{root-defaults.$prefix}accordion-item-content-padding-x,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-accordion-item-content-padding-y\n$accordion-item-content-padding-y: var(\n --#{root-defaults.$prefix}accordion-item-content-padding-y,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-accordion-item-content-padding\n$accordion-item-content-padding: var(\n --#{root-defaults.$prefix}accordion-item-content-padding,\n #{$accordion-item-content-padding-y} #{$accordion-item-content-padding-x}\n);\n\n// --graupl-accordion-item-content-column-gap\n$accordion-item-content-column-gap: var(\n --#{root-defaults.$prefix}accordion-item-content-column-gap,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-accordion-item-content-row-gap\n$accordion-item-content-row-gap: var(\n --#{root-defaults.$prefix}accordion-item-content-row-gap,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-accordion-item-content-gap\n$accordion-item-content-gap: var(\n --#{root-defaults.$prefix}accordion-item-content-gap,\n #{$accordion-item-content-column-gap} #{$accordion-item-content-row-gap}\n);\n\n// Accordion item body properties.\n// --graupl-accordion-item-body-padding-x\n$accordion-item-body-padding-x: var(\n --#{root-defaults.$prefix}accordion-item-body-padding-x,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-accordion-item-body-padding-y\n$accordion-item-body-padding-y: var(\n --#{root-defaults.$prefix}accordion-item-body-padding-y,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-accordion-item-body-padding\n$accordion-item-body-padding: var(\n --#{root-defaults.$prefix}accordion-item-body-padding,\n #{$accordion-item-body-padding-y} #{$accordion-item-body-padding-x}\n);\n\n// Accordion item footer properties.\n// --graupl-accordion-item-footer-padding-x\n$accordion-item-footer-padding-x: var(\n --#{root-defaults.$prefix}accordion-item-footer-padding-x,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-accordion-item-footer-padding-y\n$accordion-item-footer-padding-y: var(\n --#{root-defaults.$prefix}accordion-item-footer-padding-y,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-accordion-item-footer-padding\n$accordion-item-footer-padding: var(\n --#{root-defaults.$prefix}accordion-item-footer-padding,\n #{$accordion-item-footer-padding-y} #{$accordion-item-footer-padding-x}\n);\n\n// Accordion content transform properties.\n// --graupl-accordion-item-content-transform\n$accordion-item-content-transform: var(\n --#{root-defaults.$prefix}accordion-item-content-transform,\n #{defaults.$accordion-item-content-initial-transform}\n);\n\n// --graupl-accordion-item-content-open-transform\n$accordion-item-content-open-transform: var(\n --#{root-defaults.$prefix}accordion-item-content-open-transform,\n #{defaults.$accordion-item-content-final-transform}\n);\n\n// Accordion toggle layout and transform properties.\n// --graupl-accordion-item-toggle-padding-x\n$accordion-item-toggle-padding-x: var(\n --#{root-defaults.$prefix}accordion-item-toggle-padding-x,\n #{button.$button-padding-x}\n);\n\n// --graupl-accordion-item-toggle-padding-y\n$accordion-item-toggle-padding-y: var(\n --#{root-defaults.$prefix}accordion-item-toggle-padding-y,\n #{button.$button-padding-y}\n);\n\n// --graupl-accordion-item-toggle-padding\n$accordion-item-toggle-padding: var(\n --#{root-defaults.$prefix}accordion-item-toggle-padding,\n #{$accordion-item-toggle-padding-y} #{$accordion-item-toggle-padding-x}\n);\n\n// --graupl-accordion-item-toggle-transform\n$accordion-item-toggle-transform: var(\n --#{root-defaults.$prefix}accordion-item-toggle-transform,\n #{defaults.$accordion-item-toggle-initial-transform}\n);\n\n// --graupl-accordion-item-toggle-visited-transform\n$accordion-item-toggle-visited-transform: var(\n --#{root-defaults.$prefix}accordion-item-toggle-visited-transform,\n #{$accordion-item-toggle-transform}\n);\n\n// --graupl-accordion-item-toggle-focus-transform\n$accordion-item-toggle-focus-transform: var(\n --#{root-defaults.$prefix}accordion-item-toggle-focus-transform,\n #{$accordion-item-toggle-transform}\n);\n\n// --graupl-accordion-item-toggle-hover-transform\n$accordion-item-toggle-hover-transform: var(\n --#{root-defaults.$prefix}accordion-item-toggle-hover-transform,\n #{$accordion-item-toggle-transform}\n);\n\n// --graupl-accordion-item-toggle-active-transform\n$accordion-item-toggle-active-transform: var(\n --#{root-defaults.$prefix}accordion-item-toggle-active-transform,\n #{defaults.$accordion-item-toggle-final-transform}\n);\n\n// --graupl-accordion-item-toggle-disabled-transform\n$accordion-item-toggle-disabled-transform: var(\n --#{root-defaults.$prefix}accordion-item-toggle-disabled-transform,\n #{defaults.$accordion-item-toggle-disabled-transform}\n);\n$accordion-item-toggle-transform-states: (\n _default: $accordion-item-toggle-transform,\n visited: $accordion-item-toggle-visited-transform,\n focus: $accordion-item-toggle-focus-transform,\n hover: $accordion-item-toggle-hover-transform,\n active: $accordion-item-toggle-active-transform,\n disabled: $accordion-item-toggle-disabled-transform,\n);\n\n// --graupl-accordion-item-toggle-pseudo-transform\n$accordion-item-toggle-pseudo-transform: var(\n --#{root-defaults.$prefix}accordion-item-toggle-pseudo-transform,\n #{defaults.$accordion-item-toggle-pseudo-initial-transform}\n);\n\n// --graupl-accordion-item-toggle-pseudo-open-transform\n$accordion-item-toggle-pseudo-open-transform: var(\n --#{root-defaults.$prefix}accordion-item-toggle-pseudo-open-transform,\n #{defaults.$accordion-item-toggle-pseudo-final-transform}\n);\n\n// Accordion item toggle color properties.\n// --graupl-accordion-item-toggle-color\n$accordion-item-toggle-color: var(\n --#{root-defaults.$prefix}accordion-item-toggle-color,\n #{$accordion-color}\n);\n\n// --graupl-accordion-item-toggle-visited-color\n$accordion-item-toggle-visited-color: var(\n --#{root-defaults.$prefix}accordion-item-toggle-visited-color,\n #{$accordion-item-toggle-color}\n);\n\n// --graupl-accordion-item-toggle-focus-color\n$accordion-item-toggle-focus-color: var(\n --#{root-defaults.$prefix}accordion-item-toggle-focus-color,\n #{$accordion-item-toggle-color}\n);\n\n// --graupl-accordion-item-toggle-hover-color\n$accordion-item-toggle-hover-color: var(\n --#{root-defaults.$prefix}accordion-item-toggle-hover-color,\n #{$accordion-background}\n);\n\n// --graupl-accordion-item-toggle-active-color\n$accordion-item-toggle-active-color: var(\n --#{root-defaults.$prefix}accordion-item-toggle-active-color,\n #{$accordion-item-toggle-hover-color}\n);\n\n// --graupl-accordion-item-toggle-disabled-color\n$accordion-item-toggle-disabled-color: var(\n --#{root-defaults.$prefix}accordion-item-toggle-disabled-color,\n #{theme.get(primary, 200)}\n);\n$accordion-item-toggle-color-states: (\n default: $accordion-item-toggle-color,\n visited: $accordion-item-toggle-visited-color,\n focus: $accordion-item-toggle-focus-color,\n hover: $accordion-item-toggle-hover-color,\n active: $accordion-item-toggle-active-color,\n disabled: $accordion-item-toggle-disabled-color,\n);\n\n// --graupl-accordion-item-toggle-background\n$accordion-item-toggle-background: var(\n --#{root-defaults.$prefix}accordion-item-toggle-background,\n #{$accordion-background}\n);\n\n// --graupl-accordion-item-toggle-visited-background\n$accordion-item-toggle-visited-background: var(\n --#{root-defaults.$prefix}accordion-item-toggle-visited-background,\n #{$accordion-item-toggle-background}\n);\n\n// --graupl-accordion-item-toggle-focus-background\n$accordion-item-toggle-focus-background: var(\n --#{root-defaults.$prefix}accordion-item-toggle-focus-background,\n #{$accordion-item-toggle-background}\n);\n\n// --graupl-accordion-item-toggle-hover-background\n$accordion-item-toggle-hover-background: var(\n --#{root-defaults.$prefix}accordion-item-toggle-hover-background,\n #{$accordion-color}\n);\n\n// --graupl-accordion-item-toggle-active-background\n$accordion-item-toggle-active-background: var(\n --#{root-defaults.$prefix}accordion-item-toggle-active-background,\n #{$accordion-item-toggle-hover-background}\n);\n\n// --graupl-accordion-item-toggle-disabled-background\n$accordion-item-toggle-disabled-background: var(\n --#{root-defaults.$prefix}accordion-item-toggle-disabled-background,\n #{$accordion-background}\n);\n$accordion-item-toggle-background-states: (\n default: $accordion-item-toggle-background,\n visited: $accordion-item-toggle-visited-background,\n focus: $accordion-item-toggle-focus-background,\n hover: $accordion-item-toggle-hover-background,\n active: $accordion-item-toggle-active-background,\n disabled: $accordion-item-toggle-disabled-background,\n);\n\n// --graupl-accordion-item-toggle-border-color\n$accordion-item-toggle-border-color: var(\n --#{root-defaults.$prefix}accordion-item-toggle-border-color,\n #{$accordion-item-border-color}\n);\n\n// --graupl-accordion-item-toggle-visited-border-color\n$accordion-item-toggle-visited-border-color: var(\n --#{root-defaults.$prefix}accordion-item-toggle-visited-border-color,\n #{$accordion-item-toggle-border-color}\n);\n\n// --graupl-accordion-item-toggle-focus-border-color\n$accordion-item-toggle-focus-border-color: var(\n --#{root-defaults.$prefix}accordion-item-toggle-focus-border-color,\n #{$accordion-item-toggle-border-color}\n);\n\n// --graupl-accordion-item-toggle-hover-border-color\n$accordion-item-toggle-hover-border-color: var(\n --#{root-defaults.$prefix}accordion-item-toggle-hover-border-color,\n #{$accordion-item-border-color}\n);\n\n// --graupl-accordion-item-toggle-active-border-color\n$accordion-item-toggle-active-border-color: var(\n --#{root-defaults.$prefix}accordion-item-toggle-active-border-color,\n #{$accordion-item-toggle-hover-border-color}\n);\n\n// --graupl-accordion-item-toggle-disabled-border-color\n$accordion-item-toggle-disabled-border-color: var(\n --#{root-defaults.$prefix}accordion-item-toggle-disabled-border-color,\n #{theme.get(primary, 200)}\n);\n$accordion-item-toggle-border-color-states: (\n default: $accordion-item-toggle-border-color,\n visited: $accordion-item-toggle-visited-border-color,\n focus: $accordion-item-toggle-focus-border-color,\n hover: $accordion-item-toggle-hover-border-color,\n active: $accordion-item-toggle-active-border-color,\n disabled: $accordion-item-toggle-disabled-border-color,\n);\n\n// Accordion motion properties.\n// --graupl-accordion-transition-duration\n$accordion-transition-duration: var(\n --#{root-defaults.$prefix}accordion-transition-duration,\n #{map.get(root-variables.$transition-durations, slow)}\n);\n\n// --graupl-accordion-transition-timing-function.\n$accordion-transition-timing-function: var(\n --#{root-defaults.$prefix}accordion-transition-timing-function,\n #{root-variables.$transition-timing-function}\n);\n\n// --graupl-accordion-item-transition\n$accordion-item-transition: var(\n --#{root-defaults.$prefix}accordion-item-transition,\n height #{$accordion-transition-duration}\n #{$accordion-transition-timing-function}\n);\n\n// --graupl-accordion-item-transition-reduced-motion\n$accordion-item-transition-reduced-motion: var(\n --#{root-defaults.$prefix}accordion-item-transition-reduced-motion,\n none\n);\n\n// --graupl-accordion-item-toggle-pseudo-transition\n$accordion-item-toggle-pseudo-transition: var(\n --#{root-defaults.$prefix}accordion-item-toggle-pseudo-transition,\n transform #{$accordion-transition-duration}\n #{$accordion-transition-timing-function}\n);\n\n// --graupl-accordion-item-toggle-pseudo-transition-reduced-motion\n$accordion-item-toggle-pseudo-transition-reduced-motion: var(\n --#{root-defaults.$prefix}accordion-item-toggle-pseudo-transition-reduced-motion,\n none\n);\n\n// --graupl-accordion-item-content-transition\n$accordion-item-content-transition: var(\n --#{root-defaults.$prefix}accordion-item-content-transition,\n opacity #{$accordion-transition-duration}\n #{$accordion-transition-timing-function} transform\n #{$accordion-transition-duration} #{$accordion-transition-timing-function}\n);\n\n// --graupl-accordion-item-content-transition-reduced-motion\n$accordion-item-content-transition-reduced-motion: var(\n --#{root-defaults.$prefix}accordion-item-content-transition-reduced-motion,\n opacity #{$accordion-transition-duration}\n #{$accordion-transition-timing-function}\n);\n\n// --graupl-accordion-item-toggle-transition\n$accordion-item-toggle-transition: var(\n --#{root-defaults.$prefix}accordion-item-toggle-transition,\n background #{$accordion-transition-duration}\n #{$accordion-transition-timing-function},\n color #{$accordion-transition-duration}\n #{$accordion-transition-timing-function},\n transform #{$accordion-transition-duration}\n #{$accordion-transition-timing-function}\n);\n\n// --graupl-accordion-item-toggle-transition-reduced-motion\n$accordion-item-toggle-transition-reduced-motion: var(\n --#{root-defaults.$prefix}accordion-item-toggle-transition-reduced-motion,\n background #{$accordion-transition-duration}\n #{$accordion-transition-timing-function},\n color #{$accordion-transition-duration}\n #{$accordion-transition-timing-function}\n);\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 accordion component styles.\n//\n// This module provides the accordion component styles, combining button-like toggles with collapsible content panels.\n//\n// The following selectors are generated by default:\n// - `.accordion`: The accordion container.\n// - `.accordion-item`: The accordion item wrapper.\n// - `.accordion-item-header`: The accordion item header.\n// - `.accordion-item-title`: The accordion item title row.\n// - `.accordion-item-toggle`: The accordion item toggle control.\n// - `.accordion-item-content`: The collapsible content wrapper.\n// - `.accordion-item-body`: The main body region inside the content wrapper.\n// - `.accordion-item-footer`: The footer region inside the content wrapper.\n// - `.show`: Modifier applied to an item when open.\n// - `.hide`: Modifier applied to an item when closed.\n// - `.transitioning`: Modifier applied while an item is transitioning.\n//\n// The following custom properties can be used to customize the accordion component:\n// | Property | Description | Default Value |\n// | ----------------------------------------------------------------- | ------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | `--graupl-accordion-padding-x` | Horizontal padding on the accordion container. | `var(--graupl-spacer-0)` |\n// | `--graupl-accordion-padding-y` | Vertical padding on the accordion container. | `var(--graupl-spacer-0)` |\n// | `--graupl-accordion-padding` | Shorthand padding for the accordion container. | `var(--graupl-accordion-padding-y) var(--graupl-accordion-padding-x)` |\n// | `--graupl-accordion-column-gap` | Column gap between accordion items. | `var(--graupl-spacer-0)` |\n// | `--graupl-accordion-row-gap` | Row gap between accordion items. | `var(--graupl-spacer-0)` |\n// | `--graupl-accordion-gap` | Gap between accordion items (column/row). | `var(--graupl-accordion-column-gap) var(--graupl-accordion-row-gap)` |\n// | `--graupl-accordion-color` | Text colour of the accordion container. | `var(--graupl-color)` |\n// | `--graupl-accordion-background` | Background colour of the accordion container. | `var(--graupl-background)` |\n// | `--graupl-accordion-border-color` | Border colour of the accordion container. | `var(--graupl-accordion-color)` |\n// | `--graupl-accordion-item-color` | Text colour of the accordion item. | `var(--graupl-accordion-color)` |\n// | `--graupl-accordion-item-background` | Background colour of the accordion item. | `var(--graupl-accordion-background)` |\n// | `--graupl-accordion-item-border-color` | Border colour of the accordion item. | `var(--graupl-accordion-border-color)` |\n// | `--graupl-accordion-item-border-top-left-radius` | Top-left border radius of an accordion item. | `var(--graupl-border-top-left-radius)` |\n// | `--graupl-accordion-item-border-top-right-radius` | Top-right border radius of an accordion item. | `var(--graupl-border-top-right-radius)` |\n// | `--graupl-accordion-item-border-bottom-right-radius` | Bottom-right border radius of an accordion item. | `var(--graupl-border-bottom-right-radius)` |\n// | `--graupl-accordion-item-border-bottom-left-radius` | Bottom-left border radius of an accordion item. | `var(--graupl-border-bottom-left-radius)` |\n// | `--graupl-accordion-item-border-radius` | Border radius of an accordion item. | `var(--graupl-accordion-item-border-top-left-radius) var(--graupl-accordion-item-border-top-right-radius) var(--graupl-accordion-item-border-bottom-right-radius) var(--graupl-accordion-item-border-bottom-left-radius)` |\n// | `--graupl-accordion-item-border-top-width` | Top border width of an accordion item. | `var(--graupl-border-top-width)` |\n// | `--graupl-accordion-item-border-right-width` | Right border width of an accordion item. | `var(--graupl-border-right-width)` |\n// | `--graupl-accordion-item-border-bottom-width` | Bottom border width of an accordion item. | `var(--graupl-border-bottom-width)` |\n// | `--graupl-accordion-item-border-left-width` | Left border width of an accordion item. | `var(--graupl-border-left-width)` |\n// | `--graupl-accordion-item-border-width` | Border width of an accordion item. | `var(--graupl-accordion-item-border-top-width) var(--graupl-accordion-item-border-right-width) var(--graupl-accordion-item-border-bottom-width) var(--graupl-accordion-item-border-left-width)` |\n// | `--graupl-accordion-item-border-top-style` | Top border style of an accordion item. | `var(--graupl-border-top-style)` |\n// | `--graupl-accordion-item-border-right-style` | Right border style of an accordion item. | `var(--graupl-border-right-style)` |\n// | `--graupl-accordion-item-border-bottom-style` | Bottom border style of an accordion item. | `var(--graupl-border-bottom-style)` |\n// | `--graupl-accordion-item-border-left-style` | Left border style of an accordion item. | `var(--graupl-border-left-style)` |\n// | `--graupl-accordion-item-border-style` | Border style of an accordion item. | `var(--graupl-accordion-item-border-top-style) var(--graupl-accordion-item-border-right-style) var(--graupl-accordion-item-border-bottom-style) var(--graupl-accordion-item-border-left-style)` |\n// | `--graupl-accordion-item-header-padding-x` | Horizontal padding for the accordion item header. | `var(--graupl-spacer-0)` |\n// | `--graupl-accordion-item-header-padding-y` | Vertical padding for the accordion item header. | `var(--graupl-spacer-0)` |\n// | `--graupl-accordion-item-header-padding` | Padding for the accordion item header. | `var(--graupl-accordion-item-header-padding-y) var(--graupl-accordion-item-header-padding-x)` |\n// | `--graupl-accordion-item-header-margin` | Margin for the accordion item header (pulls content over borders). | `calc(-1 * min(var(--graupl-accordion-item-border-top-width), var(--graupl-accordion-item-border-bottom-width), var(--graupl-accordion-item-border-left-width), var(--graupl-accordion-item-border-right-width)))` |\n// | `--graupl-accordion-item-title-padding-x` | Horizontal padding for the accordion item title row. | `var(--graupl-spacer-0)` |\n// | `--graupl-accordion-item-title-padding-y` | Vertical padding for the accordion item title row. | `var(--graupl-spacer-0)` |\n// | `--graupl-accordion-item-title-padding` | Padding for the accordion item title row. | `var(--graupl-accordion-item-title-padding-y) var(--graupl-accordion-item-title-padding-x)` |\n// | `--graupl-accordion-item-title-margin-x` | Horizontal margin for the accordion item title row. | `var(--graupl-spacer-0)` |\n// | `--graupl-accordion-item-title-margin-y` | Vertical margin for the accordion item title row. | `var(--graupl-spacer-0)` |\n// | `--graupl-accordion-item-title-margin` | Margin for the accordion item title row. | `var(--graupl-accordion-item-title-margin-y) var(--graupl-accordion-item-title-margin-x)` |\n// | `--graupl-accordion-item-title-color` | Text colour for accordion item titles. | `var(--graupl-accordion-item-color)` |\n// | `--graupl-accordion-item-title-background` | Background colour for accordion item titles. | `var(--graupl-accordion-item-background)` |\n// | `--graupl-accordion-item-title-border-color` | Border colour for accordion item titles. | `var(--graupl-accordion-item-border-color)` |\n// | `--graupl-accordion-item-title-font-size` | Font size for accordion item titles. | `var(--graupl-h5-font-size)` |\n// | `--graupl-accordion-item-title-font-weight` | Font weight for accordion item titles. | `var(--graupl-h5-font-weight)` |\n// | `--graupl-accordion-item-title-font-family` | Font family for accordion item titles. | `var(--graupl-h5-font-family)` |\n// | `--graupl-accordion-item-title-line-height` | Line height for accordion item titles. | `var(--graupl-h5-line-height)` |\n// | `--graupl-accordion-item-content-color` | Text colour for accordion item content. | `var(--graupl-accordion-item-color)` |\n// | `--graupl-accordion-item-content-background` | Background colour for accordion item content. | `var(--graupl-accordion-item-background)` |\n// | `--graupl-accordion-item-content-padding-x` | Horizontal padding for the accordion item content area. | `var(--graupl-spacer-5)` |\n// | `--graupl-accordion-item-content-padding-y` | Vertical padding for the accordion item content area. | `var(--graupl-spacer-5)` |\n// | `--graupl-accordion-item-content-padding` | Padding for the accordion item content area. | `var(--graupl-accordion-item-content-padding-y) var(--graupl-accordion-item-content-padding-x)` |\n// | `--graupl-accordion-item-content-column-gap` | Column gap inside the accordion content. | `var(--graupl-spacer-3)` |\n// | `--graupl-accordion-item-content-row-gap` | Row gap inside the accordion content. | `var(--graupl-spacer-0)` |\n// | `--graupl-accordion-item-content-gap` | Gap inside the accordion content (column/row). | `var(--graupl-accordion-item-content-column-gap) var(--graupl-accordion-item-content-row-gap)` |\n// | `--graupl-accordion-item-body-padding-x` | Horizontal padding for the accordion item body. | `var(--graupl-spacer-0)` |\n// | `--graupl-accordion-item-body-padding-y` | Vertical padding for the accordion item body. | `var(--graupl-spacer-0)` |\n// | `--graupl-accordion-item-body-padding` | Padding for the accordion item body. | `var(--graupl-accordion-item-body-padding-y) var(--graupl-accordion-item-body-padding-x)` |\n// | `--graupl-accordion-item-footer-padding-x` | Horizontal padding for the accordion item footer. | `var(--graupl-spacer-0)` |\n// | `--graupl-accordion-item-footer-padding-y` | Vertical padding for the accordion item footer. | `var(--graupl-spacer-0)` |\n// | `--graupl-accordion-item-footer-padding` | Padding for the accordion item footer. | `var(--graupl-accordion-item-footer-padding-y) var(--graupl-accordion-item-footer-padding-x)` |\n// | `--graupl-accordion-item-content-transform` | Base transform for accordion content. | `translateY(-100%)` |\n// | `--graupl-accordion-item-content-open-transform` | Transform when accordion content is open. | `translateY(0)` |\n// | `--graupl-accordion-item-toggle-padding-x` | Horizontal padding applied to the toggle control. | `var(--graupl-button-padding-x)` |\n// | `--graupl-accordion-item-toggle-padding-y` | Vertical padding applied to the toggle control. | `var(--graupl-button-padding-y)` |\n// | `--graupl-accordion-item-toggle-padding` | Shorthand padding applied to the toggle control. | `var(--graupl-accordion-item-toggle-padding-y) var(--graupl-accordion-item-toggle-padding-x)` |\n// | `--graupl-accordion-item-toggle-transform` | Base transform for the toggle control. | `none` |\n// | `--graupl-accordion-item-toggle-visited-transform` | Transform for a visited toggle. | `var(--graupl-accordion-item-toggle-transform)` |\n// | `--graupl-accordion-item-toggle-focus-transform` | Transform for a focused toggle. | `var(--graupl-accordion-item-toggle-transform)` |\n// | `--graupl-accordion-item-toggle-hover-transform` | Transform for a hovered toggle. | `var(--graupl-accordion-item-toggle-transform)` |\n// | `--graupl-accordion-item-toggle-active-transform` | Transform for an active toggle. | `var(--graupl-accordion-item-toggle-transform)` |\n// | `--graupl-accordion-item-toggle-disabled-transform` | Transform for a disabled toggle. | `var(--graupl-accordion-item-toggle-transform)` |\n// | `--graupl-accordion-item-toggle-pseudo-transform` | Transform for the toggle indicator pseudo-element. | `none` |\n// | `--graupl-accordion-item-toggle-pseudo-open-transform` | Transform for the toggle indicator when open. | `rotate(-180deg)` |\n// | `--graupl-accordion-transition-duration` | Duration used for accordion transitions. | `var(--graupl-transition-duration-slow)` |\n// | `--graupl-accordion-transition-timing-function` | Timing function used for accordion transitions. | `var(--graupl-transition-timing-function)` |\n// | `--graupl-accordion-item-transition` | Transition applied to accordion item height. | `height var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function)` |\n// | `--graupl-accordion-item-transition-reduced-motion` | Transition used when reduced motion is enabled. | `none` |\n// | `--graupl-accordion-item-toggle-pseudo-transition` | Transition for the toggle indicator pseudo-element. | `transform var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function)` |\n// | `--graupl-accordion-item-toggle-pseudo-transition-reduced-motion` | Transition for the toggle indicator when reduced motion is enabled. | `none` |\n// | `--graupl-accordion-item-content-transition` | Transition applied to accordion content. | `opacity var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function) transform var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function)` |\n// | `--graupl-accordion-item-content-transition-reduced-motion` | Transition for content when reduced motion is enabled. | `opacity var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function)` |\n// | `--graupl-accordion-item-toggle-transition` | Transition for toggle state changes. | `background var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function), color var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function), transform var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function)` |\n// | `--graupl-accordion-item-toggle-transition-reduced-motion` | Transition used when reduced motion is enabled. | `background var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function), color var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function)` |\n// | `--graupl-accordion-item-toggle-color` | Text colour of the accordion item toggle. | `var(--graupl-accordion-color)` |\n// | `--graupl-accordion-item-toggle-visited-color` | Text colour of a visited accordion item toggle. | `var(--graupl-accordion-item-toggle-color)` |\n// | `--graupl-accordion-item-toggle-focus-color` | Text colour of a focused accordion item toggle. | `var(--graupl-accordion-item-toggle-color)` |\n// | `--graupl-accordion-item-toggle-hover-color` | Text colour of a hovered accordion item toggle. | `var(--graupl-accordion-background)` |\n// | `--graupl-accordion-item-toggle-active-color` | Text colour of an active accordion item toggle. | `var(--graupl-accordion-item-toggle-hover-color)` |\n// | `--graupl-accordion-item-toggle-disabled-color` | Text colour of a disabled accordion item toggle. | `var(--graupl-theme-active--primary--200)` |\n// | `--graupl-accordion-item-toggle-background` | Background colour of the accordion item toggle. | `var(--graupl-accordion-background)` |\n// | `--graupl-accordion-item-toggle-visited-background` | Background colour of a visited accordion item toggle. | `var(--graupl-accordion-item-toggle-background)` |\n// | `--graupl-accordion-item-toggle-focus-background` | Background colour of a focused accordion item toggle. | `var(--graupl-accordion-item-toggle-background)` |\n// | `--graupl-accordion-item-toggle-hover-background` | Background colour of a hovered accordion item toggle. | `var(--graupl-accordion-color)` |\n// | `--graupl-accordion-item-toggle-active-background` | Background colour of an active accordion item toggle. | `var(--graupl-accordion-item-toggle-hover-background)` |\n// | `--graupl-accordion-item-toggle-disabled-background` | Background colour of a disabled accordion item toggle. | `var(--graupl-accordion-background)` |\n// | `--graupl-accordion-item-toggle-border-color` | Border colour of the accordion item toggle. | `var(--graupl-accordion-item-border-color)` |\n// | `--graupl-accordion-item-toggle-visited-border-color` | Border colour of a visited accordion item toggle. | `var(--graupl-accordion-item-toggle-border-color)` |\n// | `--graupl-accordion-item-toggle-focus-border-color` | Border colour of a focused accordion item toggle. | `var(--graupl-accordion-item-toggle-border-color)` |\n// | `--graupl-accordion-item-toggle-hover-border-color` | Border colour of a hovered accordion item toggle. | `var(--graupl-accordion-item-border-color)` |\n// | `--graupl-accordion-item-toggle-active-border-color` | Border colour of an active accordion item toggle. | `var(--graupl-accordion-item-toggle-hover-border-color)` |\n// | `--graupl-accordion-item-toggle-disabled-border-color` | Border colour of a disabled accordion item toggle. | `var(--graupl-theme-active--primary--200)` |\n//\n// The following sass variables can be used to customize the generation of the accordion component:\n// | Variable | Description | Default Value |\n// | ------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------ |\n// | `$selector-base` | Selector base for the component. | `\".\"` |\n// | `$modifier-selector-base` | Selector base for component modifiers. | `\".\"` |\n// | `$generate-base-theme-map` | A flag to generate the base theme maps for accordion variants. | `true` |\n// | `$themeable` | Flag to generate theme modifiers. | `false` |\n// | `$accordion-selector-base` | Selector base for the accordion container. | `$selector-base` |\n// | `$accordion-selector` | Selector for the accordion container. | `\"accordion\"` |\n// | `$accordion-item-selector-base` | Selector base for items. | `$selector-base` |\n// | `$accordion-item-selector` | Selector for items. | `\"accordion-item\"` |\n// | `$accordion-item-header-selector-base` | Selector base for item headers. | `$selector-base` |\n// | `$accordion-item-header-selector` | Selector for item headers. | `\"accordion-item-header\"` |\n// | `$accordion-item-title-selector-base` | Selector base for item titles. | `$selector-base` |\n// | `$accordion-item-title-selector` | Selector for item titles. | `\"accordion-item-title\"` |\n// | `$accordion-item-toggle-selector-base` | Selector base for item toggles. | `$selector-base` |\n// | `$accordion-item-toggle-selector` | Selector for item toggles. | `\"accordion-item-toggle\"` |\n// | `$accordion-item-content-selector-base` | Selector base for item content. | `$selector-base` |\n// | `$accordion-item-content-selector` | Selector for item content. | `\"accordion-item-content\"` |\n// | `$accordion-item-body-selector-base` | Selector base for item bodies. | `$selector-base` |\n// | `$accordion-item-body-selector` | Selector for item bodies. | `\"accordion-item-body\"` |\n// | `$accordion-item-footer-selector-base` | Selector base for item footers. | `$selector-base` |\n// | `$accordion-item-footer-selector` | Selector for item footers. | `\"accordion-item-footer\"` |\n// | `$accordion-item-open-selector-base` | Selector base applied to the open modifier. | `\".\"` |\n// | `$accordion-item-open-selector` | Selector applied to the open modifier. | `\"show\"` |\n// | `$accordion-item-close-selector-base` | Selector base applied to the closed modifier. | `\".\"` |\n// | `$accordion-item-close-selector` | Selector applied to the closed modifier. | `\"hide\"` |\n// | `$accordion-item-transition-selector-base` | Selector base applied to the transitioning modifier. | `\".\"` |\n// | `$accordion-item-transition-selector` | Selector applied to the transitioning modifier. | `\"transitioning\"` |\n// | `$accordion-item-toggle-pseudo-selector` | Pseudo-element used for the toggle indicator. | `\"after\"` |\n// | `$accordion-item-toggle-initial-transform` | The initial transform of the accordion item toggle. | `none` |\n// | `$accordion-item-toggle-final-transform` | The final transform of the accordion item toggle. | `$accordion-item-toggle-initial-transform` |\n// | `$accordion-item-toggle-disabled-transform` | The disabled transform of the accordion item toggle. | `$accordion-item-toggle-initial-transform` |\n// | `$accordion-item-toggle-pseudo-initial-transform` | The initial transform of the accordion item toggle pseudo element. | `none` |\n// | `$accordion-item-toggle-pseudo-final-transform` | The final transform of the accordion item toggle pseudo element. | `rotate(-180deg)` |\n// | `$accordion-item-toggle-pseudo-content` | Content for the accordion item toggle pseudo element. | `\"▼\"` |\n// | `$accordion-item-content-initial-transform` | The initial transform of the accordion item content. | `translateY(-100%)' |\n// | `$accordion-item-content-final-transform` | The final transform of the accordion item content. | `translateY(0)` |\n// | `$accordion-theme-mappings` | A map of properties and color shades used generate all accordion variants. | `()` |\n// | `$accordion-theme-map` | A map of all properties, colors, and color shades used to generate all accordion variants. | `()` |\n//\n// ## Using `$accordion-theme-mappings`\n//\n// `$accordion-theme-mappings` is a 1-level map of properties and shade values.\n//\n// e.g.\n// ```scss\n// $accordion-theme-mappings: (\n// border-color: 700,\n// )\n// ```\n//\n// This directly[1] maps to all accordion variants, telling them what shade to use for said property.\n// All accordion variants will use the following based on the example above:\n// - Primary accordions will have their `--graupl-accordion-border-color` property set to `--graupl-theme-active--primary--700`,\n// - Secondary accordions will have their `--graupl-accordion-border-color` property set to `--graupl-theme-active--secondary--700`, and\n// - Tertiary accordions will have their `--graupl-accordion-border-color` property set to `--graupl-theme-active--tertiary--700`.\n//\n// You can use this to customize _all_ accordions variants in the same way.\n//\n// For example, if you use the following map:\n// ```scss\n// $accordion-theme-mappings: (\n// border-color: 500,\n// )\n// ```\n//\n// All accordion variants will use the following:\n// - Primary accordions will have their `--graupl-accordion-border-color` property set to `--graupl-theme-active--primary--500`,\n// - Secondary accordions will have their `--graupl-accordion-border-color` property set to `--graupl-theme-active--secondary--500`, and\n// - Tertiary accordions will have their `--graupl-accordion-border-color` property set to `--graupl-theme-active--tertiary--500`.\n//\n// [1] `$accordion-theme-mappings` gets parsed into a larger, more explicit map: `$accordion-theme-map`.\n//\n// Using `$accordion-theme-map`\n//\n// `$accordion-theme-map` is a multi-level map of properties, colors, and shade values.\n//\n// e.g.\n// ```scss\n// $accordion-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 accordion variants, telling them what shade to use for said property.\n// The accordion variants will use the following based on the example above:\n// - Primary accordions will have their `--graupl-accordion-border-color` property set to `--graupl-theme-active--primary--700`,\n// - Secondary accordions will have their `--graupl-accordion-border-color` property set to `--graupl-theme-active--secondary--700`, and\n// - Tertiary accordions will have their `--graupl-accordion-border-color` property set to `--graupl-theme-active--tertiary--700`.\n//\n// You can use this to customize accordion variants individually.\n//\n// For example, if you use the following map:\n//\n// ```scss\n// $accordion-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 accordion variants will use the following:\n// - Primary accordions will have their `--graupl-accordion-border-color` property set to `--graupl-theme-active--secondary--700`,\n// - Secondary accordions will have their `--graupl-accordion-border-color` property set to `--graupl-theme-active--secondary--700`, and\n// - Tertiary accordions will have their `--graupl-accordion-border-color` property set to `--graupl-theme-active--secondary--700`.\n//\n// @example\n// <div class=\"accordion\">\n// <div class=\"accordion-item show\">\n// <div class=\"accordion-item-header\">\n// <h3 class=\"accordion-item-title\">\n// <button aria-expanded=\"true\" class=\"accordion-item-toggle\">Accordion item 1</button>\n// </h3>\n// </div>\n// <div class=\"accordion-item-content\">\n// <div class=\"accordion-item-body\">\n// // Content here.\n// </div>\n// <div class=\"accordion-item-footer\">\n// // Footer content here.\n// </div>\n// </div>\n// </div>\n// <div class=\"accordion-item hide\">\n// <div class=\"accordion-item-header\">\n// <h3 class=\"accordion-item-title\">\n// <button aria-expanded=\"false\" class=\"accordion-item-toggle\">Accordion item 2</button>\n// </h3>\n// </div>\n// <div class=\"accordion-item-content\">\n// <div class=\"accordion-item-body\">\n// // Content here.\n// </div>\n// <div class=\"accordion-item-footer\">\n// // Footer content here.\n// </div>\n// </div>\n// </div>\n// <div class=\"accordion-item hide\">\n// <div class=\"accordion-item-header\">\n// <h3 class=\"accordion-item-title\">\n// <button aria-expanded=\"false\" class=\"accordion-item-toggle\">Accordion item 3</button>\n// </h3>\n// </div>\n// <div class=\"accordion-item-content\">\n// <div class=\"accordion-item-body\">\n// // Content here.\n// </div>\n// <div class=\"accordion-item-footer\">\n// // Footer content here.\n// </div>\n// </div>\n// </div>\n// </div>\n\n@use \"../../base/button/mixins\" as button-mixins;\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/animation\";\n@use \"../../mixins/layer\" as *;\n@use \"../../mixins/state\";\n@use \"../../mixins/theme\";\n@use \"../../state/focus/variables\" as focus;\n@use \"defaults\";\n@use \"sass:map\";\n@use \"variables\" as *;\n\n@include layer(base) {\n // .accordion-item-toggle\n #{defaults.$accordion-item-toggle-selector-base}#{defaults.$accordion-item-toggle-selector} {\n @include button-mixins.apply-base;\n }\n}\n\n@include layer(component) {\n // .accordion\n #{defaults.$accordion-selector-base}#{defaults.$accordion-selector} {\n display: flex;\n flex-flow: column nowrap;\n padding: $accordion-padding;\n gap: $accordion-gap;\n\n // > .accordion-item\n > #{defaults.$accordion-item-selector-base}#{defaults.$accordion-item-selector} {\n &:not(:first-child) {\n /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n margin-top: calc(\n -1 *\n min(\n #{$accordion-item-border-top-width},\n #{$accordion-item-border-bottom-width}\n )\n );\n /* stylelint-enable scss/operator-no-newline-after */\n }\n }\n }\n\n // .accordion-item\n #{defaults.$accordion-item-selector-base}#{defaults.$accordion-item-selector} {\n overflow: hidden;\n transition: $accordion-item-transition;\n border-width: $accordion-item-border-width;\n border-style: $accordion-item-border-style;\n border-radius: $accordion-item-border-radius;\n isolation: isolate;\n\n &#{defaults.$accordion-item-close-selector-base}#{defaults.$accordion-item-close-selector}\n #{defaults.$accordion-item-content-selector-base}#{defaults.$accordion-item-content-selector} {\n display: none;\n }\n\n &#{defaults.$accordion-item-open-selector-base}#{defaults.$accordion-item-open-selector}\n #{defaults.$accordion-item-content-selector-base}#{defaults.$accordion-item-content-selector} {\n transform: $accordion-item-content-open-transform;\n opacity: 1;\n }\n\n &#{defaults.$accordion-item-transition-selector-base}#{defaults.$accordion-item-transition-selector}\n #{defaults.$accordion-item-content-selector-base}#{defaults.$accordion-item-content-selector} {\n display: flex;\n }\n }\n\n // .accordion-item-toggle\n #{defaults.$accordion-item-toggle-selector-base}#{defaults.$accordion-item-toggle-selector} {\n z-index: 2;\n padding: $accordion-item-toggle-padding;\n transform: $accordion-item-toggle-transform;\n transition: $accordion-item-toggle-transition;\n\n @include state.generate-modifiers(\n (\n transform: $accordion-item-toggle-transform-states,\n )\n );\n\n // ::after\n &::#{defaults.$accordion-item-toggle-pseudo-selector} {\n content: defaults.$accordion-item-toggle-pseudo-content;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: auto;\n transform: $accordion-item-toggle-pseudo-transform;\n transition: $accordion-item-toggle-pseudo-transition;\n }\n\n &[aria-expanded=\"true\"] {\n // &::after\n &::#{defaults.$accordion-item-toggle-pseudo-selector} {\n transform: $accordion-item-toggle-pseudo-open-transform;\n }\n }\n }\n\n // .accordion-item-header\n #{defaults.$accordion-item-header-selector-base}#{defaults.$accordion-item-header-selector} {\n margin: $accordion-item-header-margin;\n padding: $accordion-item-header-padding;\n }\n\n // .accordion-item-title\n #{defaults.$accordion-item-title-selector-base}#{defaults.$accordion-item-title-selector} {\n margin: $accordion-item-title-margin;\n padding: $accordion-item-title-padding;\n\n &,\n #{defaults.$accordion-item-toggle-selector-base}#{defaults.$accordion-item-toggle-selector} {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n }\n }\n\n // .accordion-item-content\n #{defaults.$accordion-item-content-selector-base}#{defaults.$accordion-item-content-selector} {\n display: flex;\n flex-flow: column nowrap;\n padding: $accordion-item-content-padding;\n transform: $accordion-item-content-transform;\n transition: $accordion-item-content-transition;\n opacity: 0;\n gap: $accordion-item-content-gap;\n }\n\n // .accordion-item-body\n #{defaults.$accordion-item-body-selector-base}#{defaults.$accordion-item-body-selector} {\n padding: $accordion-item-body-padding;\n }\n\n // .accordion-item-footer\n #{defaults.$accordion-item-footer-selector-base}#{defaults.$accordion-item-footer-selector} {\n padding: $accordion-item-footer-padding;\n }\n\n @include animation.off {\n // .accordion-item\n #{defaults.$accordion-item-selector-base}#{defaults.$accordion-item-selector} {\n transition: $accordion-item-transition-reduced-motion;\n }\n\n // .accordion-item-toggle\n #{defaults.$accordion-item-toggle-selector-base}#{defaults.$accordion-item-toggle-selector} {\n transition: $accordion-item-toggle-transition-reduced-motion;\n\n // ::after\n &::#{defaults.$accordion-item-toggle-pseudo-selector} {\n transition: $accordion-item-toggle-pseudo-transition-reduced-motion;\n }\n\n // .accordion-item-content\n #{defaults.$accordion-item-content-selector-base}#{defaults.$accordion-item-content-selector} {\n transition: $accordion-item-content-transition-reduced-motion;\n }\n }\n }\n}\n\n@include layer(state) {\n // .accordion-item\n #{defaults.$accordion-item-selector-base}#{defaults.$accordion-item-selector} {\n // .accordion-item-toggle\n #{defaults.$accordion-item-toggle-selector-base}#{defaults.$accordion-item-toggle-selector} {\n /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n --#{root-defaults.$prefix}focus-outline-offset: calc(\n -1 *\n (\n min(\n #{$accordion-item-border-top-width},\n #{$accordion-item-border-bottom-width},\n #{$accordion-item-border-left-width},\n #{$accordion-item-border-right-width}\n ) +\n #{focus.$focus-width}\n )\n );\n /* stylelint-enable scss/operator-no-newline-after */\n }\n }\n}\n\n@include layer(theme) {\n // .accordion\n #{defaults.$accordion-selector-base}#{defaults.$accordion-selector} {\n border-color: $accordion-border-color;\n background: $accordion-background;\n color: $accordion-color;\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$accordion-theme-map,\n defaults.$accordion-theme-selector-base,\n defaults.$accordion-theme-selector-prefix,\n \"accordion-\"\n );\n }\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$accordion-theme-map,\n defaults.$accordion-theme-selector-base,\n defaults.$accordion-theme-selector-prefix,\n \"accordion-\",\n \"\"\n );\n }\n }\n\n // .accordion-item\n #{defaults.$accordion-item-selector-base}#{defaults.$accordion-item-selector} {\n border-color: $accordion-item-border-color;\n background: $accordion-item-background;\n color: $accordion-item-color;\n }\n\n // .accordion-item-content\n #{defaults.$accordion-item-content-selector-base}#{defaults.$accordion-item-content-selector} {\n background: $accordion-item-content-background;\n color: $accordion-item-content-color;\n }\n\n // .accordion-item-toggle\n #{defaults.$accordion-item-toggle-selector-base}#{defaults.$accordion-item-toggle-selector} {\n @include button-mixins.apply-theme;\n\n border-color: $accordion-item-toggle-border-color;\n background: $accordion-item-toggle-background;\n color: $accordion-item-toggle-color;\n\n @include state.generate-modifiers(\n (\n border-color: $accordion-item-toggle-border-color-states,\n color: $accordion-item-toggle-color-states,\n background: $accordion-item-toggle-background-states,\n )\n );\n }\n\n // .accordion-item-title\n #{defaults.$accordion-item-title-selector-base}#{defaults.$accordion-item-title-selector} {\n --#{root-defaults.$prefix}accordion-item-toggle-color: #{$accordion-item-title-color};\n --#{root-defaults.$prefix}accordion-item-toggle-background: #{$accordion-item-title-background};\n --#{root-defaults.$prefix}accordion-item-toggle-border-color: #{$accordion-item-title-border-color};\n\n // &,\n // .accordion-item-toggle\n &,\n #{defaults.$accordion-item-toggle-selector-base}#{defaults.$accordion-item-toggle-selector} {\n border-color: $accordion-item-title-border-color;\n background: $accordion-item-title-background;\n color: $accordion-item-title-color;\n font-family: $accordion-item-title-font-family;\n font-size: $accordion-item-title-font-size;\n font-weight: $accordion-item-title-font-weight;\n line-height: $accordion-item-title-line-height;\n }\n }\n}\n","// @graupl/core button base styles.\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 accordion component 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 \"../../functions/theme\";\n@use \"sass:map\";\n\n// Accordion selectors.\n$selector-base: root-defaults.$component-selector-base !default;\n$modifier-selector-base: root-defaults.$modifier-selector-base !default;\n$generate-base-theme-map: root-defaults.$generate-base-theme-maps !default;\n$themeable: false !default;\n$accordion-selector-base: $selector-base !default;\n$accordion-selector: \"accordion\" !default;\n$accordion-theme-selector-base: $modifier-selector-base !default;\n$accordion-theme-selector-prefix: \"\" !default;\n$accordion-item-selector-base: $selector-base !default;\n$accordion-item-selector: \"accordion-item\" !default;\n$accordion-item-header-selector-base: $selector-base !default;\n$accordion-item-header-selector: \"accordion-item-header\" !default;\n$accordion-item-title-selector-base: $selector-base !default;\n$accordion-item-title-selector: \"accordion-item-title\" !default;\n$accordion-item-toggle-selector-base: $selector-base !default;\n$accordion-item-toggle-selector: \"accordion-item-toggle\" !default;\n$accordion-item-content-selector-base: $selector-base !default;\n$accordion-item-content-selector: \"accordion-item-content\" !default;\n$accordion-item-body-selector-base: $selector-base !default;\n$accordion-item-body-selector: \"accordion-item-body\" !default;\n$accordion-item-footer-selector-base: $selector-base !default;\n$accordion-item-footer-selector: \"accordion-item-footer\" !default;\n$accordion-item-open-selector-base: $modifier-selector-base !default;\n$accordion-item-open-selector: \"show\" !default;\n$accordion-item-close-selector-base: $modifier-selector-base !default;\n$accordion-item-close-selector: \"hide\" !default;\n$accordion-item-transition-selector-base: $modifier-selector-base !default;\n$accordion-item-transition-selector: \"transitioning\" !default;\n$accordion-item-toggle-pseudo-selector: \"after\" !default;\n\n// Toggle transform properties.\n$accordion-item-toggle-initial-transform: none !default;\n$accordion-item-toggle-final-transform: $accordion-item-toggle-initial-transform !default;\n$accordion-item-toggle-disabled-transform: $accordion-item-toggle-initial-transform !default;\n$accordion-item-toggle-pseudo-initial-transform: none !default;\n$accordion-item-toggle-pseudo-final-transform: rotate(-180deg);\n\n// Toggle properties.\n$accordion-item-toggle-pseudo-content: \"▼\" !default;\n\n// Accordion transform properties.\n$accordion-item-content-initial-transform: translateY(-100%) !default;\n$accordion-item-content-final-transform: translateY(0) !default;\n\n// Accordion state theme defaults.\n// This map is used to define the default colour shades for the\n// themed accordion bases.\n//\n// e.g.\n// Primary accordions will use primary--900 as the text colour and primary--700 as the border colour.\n//\n// Secondary/tertiary accordions will use the same shade for their respective colours.\n$-accordion-theme-mappings: (\n color: 900,\n border-color: 700,\n item-background: 100,\n item-toggle-hover-color: 100,\n item-toggle-hover-background: 700,\n item-toggle-hover-border-color: 700,\n item-toggle-disabled-color: 200,\n item-toggle-disabled-border-color: 200,\n);\n$accordion-theme-mappings: () !default;\n\n// Merge the custom accordion state theme map with the default one.\n@if $generate-base-theme-map {\n $accordion-theme-mappings: map.merge(\n $-accordion-theme-mappings,\n $accordion-theme-mappings\n );\n}\n\n$-accordion-theme-map: theme.generate-property-map($accordion-theme-mappings);\n$accordion-theme-map: () !default;\n$accordion-theme-map: map.deep-merge(\n $-accordion-theme-map,\n $accordion-theme-map\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"],"names":[]}