@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/base/table.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/scss/mixins/_layer.scss","../../../src/scss/base/table/_index.scss","table.css","../../../src/scss/base/table/_variables.scss"],"names":[],"mappings":"AASI,mBCwP8B,MAC9B,+gBC9PF,CDiQ0C,cAEtC,oDEzPe,CFwPf,yMC9PJ,CDmQyC,SAErC,0vBEDuB,CFEvB,oHEjPqB,CF+OrB,uMC/PJ,CDqQuC,wBAInC,wiBEhFqB,CF+ErB,mMCnQJ,CD6QE,+BAJE,wBC9PJ,CDkQE,eAEE,8BAAA,CACA,mCAAA,CACA,qCAAA,CAIA,6cE3Le,CF0Lf,qdCzQJ,CD6QyC,kBAEnC,seE3HkB,CF0HlB,8eC1QN,CD+Q2C,kBAErC,8pBE3DoB,CF0DpB,sqBC5QN,CDmRA,kBACE,aAAA,CAEA,sBAAA,CADA,UChRF,CDoRkC,wBAE9B,eAAA,CADA,UCjRJ,CACF,CFtCI,oBCkUE,6BAGI,oJAAA,CAAA,+IAAA,CAAA,qJAAA,CAAA,gJAAA,CAAA,mJAAA,CAAA,8IAAA,CAAA,+IAAA,CAAA,uJAAA,CAAA,kJClRR,CD+QI,iCAGI,0JAAA,CAAA,qJAAA,CAAA,2JAAA,CAAA,sJAAA,CAAA,yJAAA,CAAA,oJAAA,CAAA,qJAAA,CAAA,6JAAA,CAAA,wJCtQR,CDmQI,+BAGI,uJAAA,CAAA,kJAAA,CAAA,wJAAA,CAAA,mJAAA,CAAA,sJAAA,CAAA,iJAAA,CAAA,kJAAA,CAAA,uJAAA,CAAA,qJC1PR,CDmQyC,SACrC,2NE9SoB,CF+SpB,uMCjQJ,CDqQuC,wBAGnC,yNEnSkB,CFoSlB,qMCpQJ,CDwQE,eACE,yOCtQJ,CDyQyC,kBACnC,+QCvQN,CD2Q2C,kBACrC,iRCzQN,CD6RyC,4FAGnC,2KE7GmB,CF8GnB,iKCzRN,CDgSyC,iCAGnC,yKE9GiB,CF+GjB,+JChSN,CDqSE,iBACE,iMAAA,CACA,uLAAA,CACA,mMAAA,CACA,yLAAA,CACA,oMAAA,CACA,0LCnSJ,CACF","file":"table.css"}
1
+ {"version":3,"sourceRoot":null,"mappings":"AESI,mBC6P8B,mhBAIU,8SAMD,8lCAOF,gyBAQrC,yCAKA,+iCAWuC,k+BAME,k1CAQ3C,kEAMkC,oDD1ThC,oBG+BA,wzCAAA,g3CAAA,i1CAAQ,yzCAAA,i3CAAA,k1CFwT+B,6aAMF,wbAQrC,yPAIuC,kSAKE,oSAQF,0aAwBA,2WASvC","sources":["dist/css/base/table.css","var/www/html/packages/core/src/scss/theme/typography/_defaults.scss","var/www/html/packages/core/src/scss/mixins/_layer.scss","var/www/html/packages/core/src/scss/base/table/_index.scss","var/www/html/packages/core/src/scss/base/table/_variables.scss","var/www/html/packages/core/src/scss/mixins/_theme.scss"],"sourcesContent":["/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */\n@layer graupl.base {\n table {\n border-radius: var(--graupl-table-border-radius, var(--graupl-table-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-table-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-table-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-table-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))));\n }\n table caption {\n padding: var(--graupl-table-caption-padding, var(--graupl-table-caption-padding-y, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))) var(--graupl-table-caption-padding-x, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))));\n caption-side: var(--graupl-table-caption-side, bottom);\n }\n table th {\n padding: var(--graupl-table-header-padding, var(--graupl-table-header-padding-y, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))) var(--graupl-table-header-padding-x, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))));\n border-radius: var(--graupl-table-header-border-radius, var(--graupl-table-header-border-top-left-radius, var(--graupl-table-cell-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem)))) var(--graupl-table-header-border-top-right-radius, var(--graupl-table-cell-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem)))) var(--graupl-table-header-border-bottom-right-radius, var(--graupl-table-cell-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem)))) var(--graupl-table-header-border-bottom-left-radius, var(--graupl-table-cell-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem)))));\n font-weight: var(--graupl-table-header-font-weight, var(--graupl-font-weight-bold, var(--graupl-font-weight-bold, 700)));\n }\n table td,\n table tbody th {\n padding: var(--graupl-table-cell-padding, var(--graupl-table-cell-padding-y, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))) var(--graupl-table-cell-padding-x, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))));\n border-radius: var(--graupl-table-cell-border-radius, var(--graupl-table-cell-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-table-cell-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-table-cell-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-table-cell-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))));\n }\n table.collapsed {\n border-collapse: collapse;\n }\n table.bordered {\n --graupl-table-border-radius: 0;\n --graupl-table-cell-border-radius: 0;\n --graupl-table-header-border-radius: 0;\n border-collapse: collapse;\n border-width: var(--graupl-table-border-width, var(--graupl-table-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))) var(--graupl-table-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))) var(--graupl-table-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))) var(--graupl-table-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem))));\n border-style: var(--graupl-table-border-style, var(--graupl-table-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-table-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-table-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-table-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n }\n table.bordered td {\n border-width: var(--graupl-table-cell-border-width, var(--graupl-table-cell-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))) var(--graupl-table-cell-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))) var(--graupl-table-cell-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))) var(--graupl-table-cell-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem))));\n border-style: var(--graupl-table-cell-border-style, var(--graupl-table-cell-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-table-cell-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-table-cell-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-table-cell-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n }\n table.bordered th {\n border-width: var(--graupl-table-header-border-width, var(--graupl-table-header-border-top-width, var(--graupl-table-cell-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem)))) var(--graupl-table-header-border-right-width, var(--graupl-table-cell-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem)))) var(--graupl-table-header-border-bottom-width, var(--graupl-table-cell-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem)))) var(--graupl-table-header-border-left-width, var(--graupl-table-cell-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem)))));\n border-style: var(--graupl-table-header-border-style, var(--graupl-table-header-border-top-style, var(--graupl-table-cell-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid)))) var(--graupl-table-header-border-right-style, var(--graupl-table-cell-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid)))) var(--graupl-table-header-border-bottom-style, var(--graupl-table-cell-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid)))) var(--graupl-table-header-border-left-style, var(--graupl-table-cell-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid)))));\n }\n .responsive-table {\n display: block;\n width: 100%;\n overflow: scroll hidden;\n }\n .responsive-table table {\n width: 100%;\n margin-bottom: 0;\n }\n}\n@layer graupl.theme {\n table.primary {\n --graupl-table-header-background: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n --graupl-table-header-color: var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));\n --graupl-table-striped-background: var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))));\n --graupl-table-striped-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-table-hover-background: var(--graupl-theme-active--primary--300, var(--graupl-theme-light--primary--300, var(--graupl-primary--300, hsl(219, 80%, 65%))));\n --graupl-table-hover-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-table-border-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-table-highlight-background: var(--graupl-theme-active--primary--500, var(--graupl-theme-light--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%))));\n --graupl-table-highlight-color: var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));\n }\n table.secondary {\n --graupl-table-header-background: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n --graupl-table-header-color: var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))));\n --graupl-table-striped-background: var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))));\n --graupl-table-striped-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-table-hover-background: var(--graupl-theme-active--secondary--300, var(--graupl-theme-light--secondary--300, var(--graupl-secondary--300, hsl(235, 20%, 65%))));\n --graupl-table-hover-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-table-border-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-table-highlight-background: var(--graupl-theme-active--secondary--500, var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%))));\n --graupl-table-highlight-color: var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))));\n }\n table.tertiary {\n --graupl-table-header-background: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n --graupl-table-header-color: var(--graupl-theme-active--tertiary--100, var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%))));\n --graupl-table-striped-background: var(--graupl-theme-active--tertiary--200, var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%))));\n --graupl-table-striped-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-table-hover-background: var(--graupl-theme-active--tertiary--300, var(--graupl-theme-light--tertiary--300, var(--graupl-tertiary--300, hsl(340, 65%, 65%))));\n --graupl-table-hover-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-table-border-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-table-highlight-background: var(--graupl-theme-active--tertiary--500, var(--graupl-theme-light--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%))));\n --graupl-table-highlight-color: var(--graupl-theme-active--tertiary--100, var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%))));\n }\n table .primary {\n --graupl-table-header-background: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n --graupl-table-header-color: var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));\n --graupl-table-striped-background: var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))));\n --graupl-table-striped-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-table-hover-background: var(--graupl-theme-active--primary--300, var(--graupl-theme-light--primary--300, var(--graupl-primary--300, hsl(219, 80%, 65%))));\n --graupl-table-hover-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-table-border-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-table-highlight-background: var(--graupl-theme-active--primary--500, var(--graupl-theme-light--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%))));\n --graupl-table-highlight-color: var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));\n }\n table .secondary {\n --graupl-table-header-background: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n --graupl-table-header-color: var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))));\n --graupl-table-striped-background: var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))));\n --graupl-table-striped-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-table-hover-background: var(--graupl-theme-active--secondary--300, var(--graupl-theme-light--secondary--300, var(--graupl-secondary--300, hsl(235, 20%, 65%))));\n --graupl-table-hover-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-table-border-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-table-highlight-background: var(--graupl-theme-active--secondary--500, var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%))));\n --graupl-table-highlight-color: var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))));\n }\n table .tertiary {\n --graupl-table-header-background: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n --graupl-table-header-color: var(--graupl-theme-active--tertiary--100, var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%))));\n --graupl-table-striped-background: var(--graupl-theme-active--tertiary--200, var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%))));\n --graupl-table-striped-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-table-hover-background: var(--graupl-theme-active--tertiary--300, var(--graupl-theme-light--tertiary--300, var(--graupl-tertiary--300, hsl(340, 65%, 65%))));\n --graupl-table-hover-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-table-border-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-table-highlight-background: var(--graupl-theme-active--tertiary--500, var(--graupl-theme-light--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%))));\n --graupl-table-highlight-color: var(--graupl-theme-active--tertiary--100, var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%))));\n }\n table th {\n background: var(--graupl-table-header-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-table-header-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n }\n table td,\n table tbody th {\n background: var(--graupl-table-cell-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-table-cell-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n }\n table.bordered {\n border-color: var(--graupl-table-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n }\n table.bordered td {\n border-color: var(--graupl-table-cell-border-color, var(--graupl-table-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n }\n table.bordered th {\n border-color: var(--graupl-table-header-border-color, var(--graupl-table-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n }\n table.striped-columns tbody tr:nth-child(odd) > * {\n background: var(--graupl-table-striped-background, var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%)))));\n color: var(--graupl-table-striped-color, var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%)))));\n }\n table.striped-rows tbody tr > :nth-child(odd) {\n background: var(--graupl-table-striped-background, var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%)))));\n color: var(--graupl-table-striped-color, var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%)))));\n }\n table.hoverable tbody tr:hover > * {\n background: var(--graupl-table-hover-background, var(--graupl-theme-active--secondary--300, var(--graupl-theme-light--secondary--300, var(--graupl-secondary--300, hsl(235, 20%, 65%)))));\n color: var(--graupl-table-hover-color, var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%)))));\n }\n table .highlight {\n --graupl-table-cell-background: var(--graupl-table-highlight-background, var(--graupl-theme-active--secondary--500, var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%)))));\n --graupl-table-cell-color: var(--graupl-table-highlight-color, var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%)))));\n --graupl-table-header-background: var(--graupl-table-highlight-background, var(--graupl-theme-active--secondary--500, var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%)))));\n --graupl-table-header-color: var(--graupl-table-highlight-color, var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%)))));\n --graupl-table-striped-background: var(--graupl-table-highlight-background, var(--graupl-theme-active--secondary--500, var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%)))));\n --graupl-table-striped-color: var(--graupl-table-highlight-color, var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%)))));\n }\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 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 table base styles.\n//\n// This module provides the base styles for tables.\n//\n// The following selectors are generated by default:\n// - `table`: The table component.\n// - `caption`: The table caption component.\n// - `th`: The table header cell component.\n// - `td`: The table cell component.\n// - `tr`: The table row component.\n// - `tbody`: The table body component.\n// - `.bordered`: A component modifier to make the table component bordered.\n// - `.collapsed`: A component modifier to make the table component's border collapsed.\n// - `.striped-columns`: A component modifier to make the table component's columns striped.\n// - `.striped-rows`: A component modifier to make the table component's rows striped.\n// - `.hoverable`: A component modifier to make the table component's rows change colour on hover.\n// - `.highlight`: A component modifier to highlight table components.\n// - `.responsive-table`: A component modifier to make the table component responsive.\n// - `.primary`: A component modifier to apply the primary colour to the table component.\n// - `.secondary`: A component modifier to apply the secondary colour to the table component.\n// - `.tertiary`: A component modifier to apply the tertiary colour to the table component.\n//\n// The following custom properties can be used to customize the table component:\n// | Property | Description | Default Value |\n// | --- | --- | --- |\n// | `--graupl-table-caption-side` | The caption side of the table component. | `bottom` |\n// | `--graupl-table-caption-padding-x` | The horizontal padding of the table caption component. | `var(--graupl-spacer-3)` |\n// | `--graupl-table-caption-padding-y` | The vertical padding of the table caption component. | `var(--graupl-spacer-3)` |\n// | `--graupl-table-caption-padding` | The padding of the table caption component (combines x and y padding). | `var(--graupl-table-caption-padding-y) var(--graupl-table-caption-padding-x)` |\n// | `--graupl-table-header-font-weight` | The font weight of the table header component. | `var(--graupl-font-weight-bold)` |\n// | `--graupl-table-header-padding-x` | The horizontal padding of the table header component. | `var(--graupl-spacer-3)` |\n// | `--graupl-table-header-padding-y` | The vertical padding of the table header component. | `var(--graupl-spacer-3)` |\n// | `--graupl-table-header-padding` | The padding of the table header component (combines x and y padding). | `var(--graupl-table-header-padding-y) var(--graupl-table-header-padding-x)` |\n// | `--graupl-table-header-background` | The background colour of the table header component. | `var(--graupl-background)` |\n// | `--graupl-table-header-color` | The text colour of the table header component. | `var(--graupl-color)` |\n// | `--graupl-table-cell-padding-x` | The horizontal padding of the table cell component. | `var(--graupl-spacer-3)` |\n// | `--graupl-table-cell-padding-y` | The vertical padding of the table cell component. | `var(--graupl-spacer-3)` |\n// | `--graupl-table-cell-padding` | The padding of the table cell component (combines x and y padding). | `var(--graupl-table-cell-padding-y) var(--graupl-table-cell-padding-x)` |\n// | `--graupl-table-cell-background` | The background colour of the table cell component. | `var(--graupl-background)` |\n// | `--graupl-table-cell-color` | The text colour of the table cell component. | `var(--graupl-color)` |\n// | `--graupl-table-border-top-width` | The top border width of the table component. | `var(--graupl-border-top-width)` |\n// | `--graupl-table-border-right-width` | The right border width of the table component. | `var(--graupl-border-right-width)` |\n// | `--graupl-table-border-bottom-width` | The bottom border width of the table component. | `var(--graupl-border-bottom-width)` |\n// | `--graupl-table-border-left-width` | The left border width of the table component. | `var(--graupl-border-left-width)` |\n// | `--graupl-table-border-width` | The border width of the table component (combines top, right, bottom, and left widths). | `var(--graupl-table-border-top-width) var(--graupl-table-border-right-width) var(--graupl-table-border-bottom-width) var(--graupl-table-border-left-width)` |\n// | `--graupl-table-border-top-style` | The top border style of the table component. | `var(--graupl-border-top-style)` |\n// | `--graupl-table-border-right-style` | The right border style of the table component. | `var(--graupl-border-right-style)` |\n// | `--graupl-table-border-bottom-style` | The bottom border style of the table component. | `var(--graupl-border-bottom-style)` |\n// | `--graupl-table-border-left-style` | The left border style of the table component. | `var(--graupl-border-left-style)` |\n// | `--graupl-table-border-style` | The border style of the table component (combines top, right, bottom, and left styles). | `var(--graupl-table-border-top-style) var(--graupl-table-border-right-style) var(--graupl-table-border-bottom-style) var(--graupl-table-border-left-style)` |\n// | `--graupl-table-border-top-left-radius` | The top left border radius of the table component. | `var(--graupl-border-top-left-radius)` |\n// | `--graupl-table-border-top-right-radius` | The top right border radius of the table component. | `var(--graupl-border-top-right-radius)` |\n// | `--graupl-table-border-bottom-right-radius` | The bottom right border radius of the table component. | `var(--graupl-border-bottom-right-radius)` |\n// | `--graupl-table-border-bottom-left-radius` | The bottom left border radius of the table component. | `var(--graupl-border-bottom-left-radius)` |\n// | `--graupl-table-border-radius` | The border radius of the table component (combines top left, top right, bottom right, and bottom left radii). | `var(--graupl-table-border-top-left-radius) var(--graupl-table-border-top-right-radius) var(--graupl-table-border-bottom-right-radius) var(--graupl-table-border-bottom-left-radius)` |\n// | `--graupl-table-border-color` | The border colour of the table component. | `var(--graupl-border-color)` |\n// | `--graupl-table-cell-border-top-width` | The top border width of the table cell component. | `var(--graupl-border-top-width)` |\n// | `--graupl-table-cell-border-right-width` | The right border width of the table cell component. | `var(--graupl-border-right-width)` |\n// | `--graupl-table-cell-border-bottom-width` | The bottom border width of the table cell component. | `var(--graupl-border-bottom-width)` |\n// | `--graupl-table-cell-border-left-width` | The left border width of the table cell component. | `var(--graupl-border-left-width)` |\n// | `--graupl-table-cell-border-width` | The border width of the table cell component (combines top, right, bottom, and left widths). | `var(--graupl-table-cell-border-top-width) var(--graupl-table-cell-border-right-width) var(--graupl-table-cell-border-bottom-width) var(--graupl-table-cell-border-left-width)` |\n// | `--graupl-table-cell-border-top-style` | The top border style of the table cell component. | `var(--graupl-border-top-style)` |\n// | `--graupl-table-cell-border-right-style` | The right border style of the table cell component. | `var(--graupl-border-right-style)` |\n// | `--graupl-table-cell-border-bottom-style` | The bottom border style of the table cell component. | `var(--graupl-border-bottom-style)` |\n// | `--graupl-table-cell-border-left-style` | The left border style of the table cell component. | `var(--graupl-border-left-style)` |\n// | `--graupl-table-cell-border-style` | The border style of the table cell component (combines top, right, bottom, and left styles). | `var(--graupl-table-cell-border-top-style) var(--graupl-table-cell-border-right-style) var(--graupl-table-cell-border-bottom-style) var(--graupl-table-cell-border-left-style)` |\n// | `--graupl-table-cell-border-top-left-radius` | The top left border radius of the table cell component. | `var(--graupl-border-top-left-radius)` |\n// | `--graupl-table-cell-border-top-right-radius` | The top right border radius of the table cell component. | `var(--graupl-border-top-right-radius)` |\n// | `--graupl-table-cell-border-bottom-right-radius` | The bottom right border radius of the table cell component. | `var(--graupl-border-bottom-right-radius)` |\n// | `--graupl-table-cell-border-bottom-left-radius` | The bottom left border radius of the table cell component. | `var(--graupl-border-bottom-left-radius)` |\n// | `--graupl-table-cell-border-radius` | The border radius of the table cell component (combines top left, top right, bottom right, and bottom left radii). | `var(--graupl-table-cell-border-top-left-radius) var(--graupl-table-cell-border-top-right-radius) var(--graupl-table-cell-border-bottom-right-radius) var(--graupl-table-cell-border-bottom-left-radius)` |\n// | `--graupl-table-cell-border-color` | The border colour of the table cell component. | `var(--graupl-table-border-color)` |\n// | `--graupl-table-header-border-top-width` | The top border width of the table header component. | `var(--graupl-table-cell-border-top-width)` |\n// | `--graupl-table-header-border-right-width` | The right border width of the table header component. | `var(--graupl-table-cell-border-right-width)` |\n// | `--graupl-table-header-border-bottom-width` | The bottom border width of the table header component. | `var(--graupl-table-cell-border-bottom-width)` |\n// | `--graupl-table-header-border-left-width` | The left border width of the table header component. | `var(--graupl-table-cell-border-left-width)` |\n// | `--graupl-table-header-border-width` | The border width of the table header component (combines top, right, bottom, and left widths). | `var(--graupl-table-header-border-top-width) var(--graupl-table-header-border-right-width) var(--graupl-table-header-border-bottom-width) var(--graupl-table-header-border-left-width)` |\n// | `--graupl-table-header-border-top-style` | The top border style of the table header component. | `var(--graupl-table-cell-border-top-style)` |\n// | `--graupl-table-header-border-right-style` | The right border style of the table header component. | `var(--graupl-table-cell-border-right-style)` |\n// | `--graupl-table-header-border-bottom-style` | The bottom border style of the table header component. | `var(--graupl-table-cell-border-bottom-style)` |\n// | `--graupl-table-header-border-left-style` | The left border style of the table header component. | `var(--graupl-table-cell-border-left-style)` |\n// | `--graupl-table-header-border-style` | The border style of the table header component (combines top, right, bottom, and left styles). | `var(--graupl-table-header-border-top-style) var(--graupl-table-header-border-right-style) var(--graupl-table-header-border-bottom-style) var(--graupl-table-header-border-left-style)` |\n// | `--graupl-table-header-border-top-left-radius` | The top left border radius of the table header component. | `var(--graupl-table-cell-border-top-left-radius)` |\n// | `--graupl-table-header-border-top-right-radius` | The top right border radius of the table header component. | `var(--graupl-table-cell-border-top-right-radius)` |\n// | `--graupl-table-header-border-bottom-right-radius` | The bottom right border radius of the table header component. | `var(--graupl-table-cell-border-bottom-right-radius)` |\n// | `--graupl-table-header-border-bottom-left-radius` | The bottom left border radius of the table header component. | `var(--graupl-table-cell-border-bottom-left-radius)` |\n// | `--graupl-table-header-border-radius` | The border radius of the table header component (combines top left, top right, bottom right, and bottom left radii). | `var(--graupl-table-header-border-top-left-radius) var(--graupl-table-header-border-top-right-radius) var(--graupl-table-header-border-bottom-right-radius) var(--graupl-table-header-border-bottom-left-radius)` |\n// | `--graupl-table-header-border-color` | The border colour of the table header component. | `var(--graupl-table-border-color)` |\n// | `--graupl-table-striped-background` | The background colour of the striped table component modifier. | `var(--graupl-theme-active--secondary--200)` |\n// | `--graupl-table-striped-color` | The text colour of the striped table component modifier. | `var(--graupl-theme-active--secondary--900)` |\n// | `--graupl-table-hover-background` | The background colour of the hoverable table component modifier. | `var(--graupl-theme-active--secondary--300)` |\n// | `--graupl-table-hover-color` | The text colour of the hoverable table component modifier. | `var(--graupl-theme-active--secondary--900)` |\n// | `--graupl-table-highlight-background` | The background colour of the highlighted table component modifier. | `var(--graupl-theme-active--secondary--500)` |\n// | `--graupl-table-highlight-color` | The text colour of the highlighted table component modifier. | `var(--graupl-theme-active--secondary--100)` |\n//\n// The following sass variables can be used to customize the generation of the table component:\n// | Variable | Description | Default Value |\n// | --- | --- | --- |\n// | `$selector-base` | The selector base for the component. | `\"\"` |\n// | `$modifier-selector-base` | The selector base for component modifiers. | `\".\"` |\n// | `$generate-base-theme-map` | A flag to generate the base theme maps for table variants. | `true` |\n// | `$themeable` | A flag that determines whether theme modifiers are generated. | `true` |\n// | `$table-selector-base` | The selector base for the table component. | `$selector-base` |\n// | `$table-selector` | The selector for the table component. | `\"table\"` |\n// | `$table-caption-selector-base` | The selector base for the table caption component. | `$selector-base` |\n// | `$table-caption-selector` | The selector for the table caption component. | `\"caption\"` |\n// | `$table-header-selector-base` | The selector base for the table header cell component. | `$selector-base` |\n// | `$table-header-selector` | The selector for the table header cell component. | `\"th\"` |\n// | `$table-cell-selector-base` | The selector base for the table cell component. | `$selector-base` |\n// | `$table-cell-selector` | The selector for the table cell component. | `\"td\"` |\n// | `$table-row-selector-base` | The selector base for the table row component. | `$selector-base` |\n// | `$table-row-selector` | The selector for the table row component. | `\"tr\"` |\n// | `$table-body-selector-base` | The selector base for the table body component. | `$selector-base` |\n// | `$table-body-selector` | The selector for the table body component. | `\"tbody\"` |\n// | `$table-theme-prefix-selector-base` | The selector base for the themed table component modifiers. | `$modifier-selector-base` |\n// | `$table-theme-prefix-selector` | The selector prefix for the themed table component modifiers. | `\"\"` |\n// | `$table-bordered-selector-base` | The selector base for the bordered table component modifier. | `$modifier-selector-base` |\n// | `$table-bordered-selector` | The selector for the bordered table component modifier. | `\"bordered\"` |\n// | `$table-collapsed-selector-base` | The selector base for the collapsed table component modifier. | `$modifier-selector-base` |\n// | `$table-collapsed-selector` | The selector for the collapsed table component modifier. | `\"collapsed\"` |\n// | `$table-striped-columns-selector-base` | The selector base for the striped columns table component modifier. | `$modifier-selector-base` |\n// | `$table-striped-columns-selector` | The selector for the striped columns table component modifier. | `\"striped-columns\"` |\n// | `$table-striped-rows-selector-base` | The selector base for the striped rows table component modifier. | `$modifier-selector-base` |\n// | `$table-striped-rows-selector` | The selector for the striped rows table component modifier. | `\"striped-rows\"` |\n// | `$table-hoverable-selector-base` | The selector base for the hoverable table component modifier. | `$modifier-selector-base` |\n// | `$table-hoverable-selector` | The selector for the hoverable table component modifier. | `\"hoverable\"` |\n// | `$table-highlight-selector-base` | The selector base for the highlighted table component modifier. | `$modifier-selector-base` |\n// | `$table-highlight-selector` | The selector for the highlighted table component modifier. | `\"highlight\"` |\n// | `$table-responsive-selector-base` | The selector base for the responsive table component modifier. | `$modifier-selector-base` |\n// | `$table-responsive-selector` | The selector for the responsive table component modifier. | `\"responsive-table\"` |\n// | `$table-theme-mappings` | A map of properties and color shades used generate all table variants. | `()` |\n// | `$table-theme-map` | A map of all properties, colors, and color shades used to generate all table variants. | `()` |\n//\n// ## Using `$table-theme-mappings`\n//\n// `$table-theme-mappings` is a 1-level map of properties and shade values.\n//\n// e.g.\n// ```scss\n// $table-theme-mappings: (\n// header-background: 700,\n// )\n// ```\n//\n// This directly[1] maps to all table variants, telling them what shade to use for said property.\n// All table variants will use the following based on the example above:\n// - Primary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--primary--700`,\n// - Secondary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--secondary--700`, and\n// - Tertiary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--tertiary--700`.\n//\n// You can use this to customize _all_ tables variants in the same way.\n//\n// For example, if you use the following map:\n// ```scss\n// $table-theme-mappings: (\n// header-background: 500,\n// )\n// ```\n//\n// All table variants will use the following:\n// - Primary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--primary--500`,\n// - Secondary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--secondary--500`, and\n// - Tertiary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--tertiary--500`.\n//\n// [1] `$table-theme-mappings` gets parsed into a larger, more explicit map: `$table-theme-map`.\n//\n// Using `$table-theme-map`\n//\n// `$table-theme-map` is a multi-level map of properties, colors, and shade values.\n//\n// e.g.\n// ```scss\n// $table-theme-map: (\n// primary: (\n// header-background: (\n// color: primary,\n// shade: 700\n// ),\n// ),\n// secondary: (\n// header-background: (\n// color: secondary,\n// shade: 700\n// ),\n// ),\n// tertiary: (\n// header-background: (\n// color: tertiary,\n// shade: 700\n// ),\n// ),\n// )\n// ```\n//\n// This directly maps to all table variants, telling them what shade to use for said property.\n// The table variants will use the following based on the example above:\n// - Primary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--primary--700`,\n// - Secondary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--secondary--700`, and\n// - Tertiary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--tertiary--700`.\n//\n// You can use this to customize table variants individually.\n//\n// For example, if you use the following map:\n//\n// ```scss\n// $table-theme-map: (\n// primary: (\n// header-background: (\n// color: secondary,\n// shade: 700\n// ),\n// ),\n// secondary: (\n// header-background: (\n// color: secondary,\n// shade: 700\n// ),\n// ),\n// tertiary: (\n// header-background: (\n// color: secondary,\n// shade: 700\n// ),\n// ),\n// )\n// ```\n//\n// The table variants will use the following:\n// - Primary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--secondary--700`,\n// - Secondary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--secondary--700`, and\n// - Tertiary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--secondary--700`.\n//\n// @example\n// <table class=\"table bordered\">\n// <caption>Table Caption</caption>\n// <thead>\n// <tr>\n// <th>Header 1</th>\n// <th>Header 2</th>\n// </tr>\n// </thead>\n// <tbody>\n// <tr>\n// <td>Cell 1</td>\n// <td>Cell 2</td>\n// </tr>\n// <tr>\n// <td>Cell 3</td>\n// <td>Cell 4</td>\n// </tr>\n// </tbody>\n// </table>\n\n@use \"defaults\";\n@use \"variables\" as *;\n@use \"../../mixins/layer\" as *;\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/state\";\n@use \"../../mixins/theme\";\n\n@include layer(base) {\n // table\n #{defaults.$table-selector-base}#{defaults.$table-selector} {\n border-radius: $table-border-radius;\n\n // caption\n #{defaults.$table-caption-selector-base}#{defaults.$table-caption-selector} {\n padding: $table-caption-padding;\n caption-side: $table-caption-side;\n }\n\n // th\n #{defaults.$table-header-selector-base}#{defaults.$table-header-selector} {\n padding: $table-header-padding;\n border-radius: $table-header-border-radius;\n font-weight: $table-header-font-weight;\n }\n\n // td, tbody th\n #{defaults.$table-cell-selector-base}#{defaults.$table-cell-selector},\n #{defaults.$table-body-selector-base}#{defaults.$table-body-selector}\n #{defaults.$table-header-selector-base}#{defaults.$table-header-selector} {\n padding: $table-cell-padding;\n border-radius: $table-cell-border-radius;\n }\n\n // &.collapsed\n &#{defaults.$table-collapsed-selector-base}#{defaults.$table-collapsed-selector} {\n border-collapse: collapse;\n }\n\n // &.bordered\n &#{defaults.$table-bordered-selector-base}#{defaults.$table-bordered-selector} {\n // A bordered table can't actually have rounded corners.\n --#{root-defaults.$prefix}table-border-radius: 0;\n --#{root-defaults.$prefix}table-cell-border-radius: 0;\n --#{root-defaults.$prefix}table-header-border-radius: 0;\n\n border-collapse: collapse;\n border-width: $table-border-width;\n border-style: $table-border-style;\n\n // td\n #{defaults.$table-cell-selector-base}#{defaults.$table-cell-selector} {\n border-width: $table-cell-border-width;\n border-style: $table-cell-border-style;\n }\n\n // th\n #{defaults.$table-header-selector-base}#{defaults.$table-header-selector} {\n border-width: $table-header-border-width;\n border-style: $table-header-border-style;\n }\n }\n }\n\n // .responsive-table\n #{defaults.$table-responsive-selector-base}#{defaults.$table-responsive-selector} {\n display: block;\n width: 100%;\n overflow: scroll hidden;\n\n // table\n #{defaults.$table-selector-base}#{defaults.$table-selector} {\n width: 100%;\n margin-bottom: 0;\n }\n }\n}\n\n@include layer(theme) {\n // table\n #{defaults.$table-selector-base}#{defaults.$table-selector} {\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$table-theme-map,\n defaults.$table-theme-prefix-selector-base,\n defaults.$table-theme-prefix-selector,\n \"table-\"\n );\n\n // Apply theme modifiers when used without the parent reference.\n @include theme.generate-modifiers(\n defaults.$table-theme-map,\n defaults.$table-theme-prefix-selector-base,\n defaults.$table-theme-prefix-selector,\n \"table-\",\n \"\"\n );\n }\n\n // th\n #{defaults.$table-header-selector-base}#{defaults.$table-header-selector} {\n background: $table-header-background;\n color: $table-header-color;\n }\n\n // td, tbody th\n #{defaults.$table-cell-selector-base}#{defaults.$table-cell-selector},\n #{defaults.$table-body-selector-base}#{defaults.$table-body-selector}\n #{defaults.$table-header-selector-base}#{defaults.$table-header-selector} {\n background: $table-cell-background;\n color: $table-cell-color;\n }\n\n // &.bordered\n &#{defaults.$table-bordered-selector-base}#{defaults.$table-bordered-selector} {\n border-color: $table-border-color;\n\n // td\n #{defaults.$table-cell-selector-base}#{defaults.$table-cell-selector} {\n border-color: $table-cell-border-color;\n }\n\n // th\n #{defaults.$table-header-selector-base}#{defaults.$table-header-selector} {\n border-color: $table-header-border-color;\n }\n }\n\n // &.striped-columns\n &#{defaults.$table-striped-columns-selector-base}#{defaults.$table-striped-columns-selector} {\n // tbody tr:nth-child(odd) > *\n #{defaults.$table-body-selector-base}#{defaults.$table-body-selector}\n #{defaults.$table-row-selector-base}#{defaults.$table-row-selector}:nth-child(\n odd\n )\n > * {\n background: $table-striped-background;\n color: $table-striped-color;\n }\n }\n\n // &.striped-rows\n &#{defaults.$table-striped-rows-selector-base}#{defaults.$table-striped-rows-selector} {\n // tbody tr > :nth-child(odd)\n #{defaults.$table-body-selector-base}#{defaults.$table-body-selector}\n #{defaults.$table-row-selector-base}#{defaults.$table-row-selector}\n > :nth-child(odd) {\n background: $table-striped-background;\n color: $table-striped-color;\n }\n }\n\n // &.hoverable\n &#{defaults.$table-hoverable-selector-base}#{defaults.$table-hoverable-selector} {\n // tbody tr:hover > *\n #{defaults.$table-body-selector-base}#{defaults.$table-body-selector}\n #{defaults.$table-row-selector-base}#{defaults.$table-row-selector}:hover\n > * {\n background: $table-hover-background;\n color: $table-hover-color;\n }\n }\n\n // &.highlight\n #{defaults.$table-highlight-selector-base}#{defaults.$table-highlight-selector} {\n --#{root-defaults.$prefix}table-cell-background: #{$table-highlight-background};\n --#{root-defaults.$prefix}table-cell-color: #{$table-highlight-color};\n --#{root-defaults.$prefix}table-header-background: #{$table-highlight-background};\n --#{root-defaults.$prefix}table-header-color: #{$table-highlight-color};\n --#{root-defaults.$prefix}table-striped-background: #{$table-highlight-background};\n --#{root-defaults.$prefix}table-striped-color: #{$table-highlight-color};\n }\n }\n}\n","// @graupl/core table base variables.\n//\n// These values are to be used to directly style bases and provide a\n// cleaner way to reference custom properties.\n\n// Custom property defaults:\n// | Custom property | Default |\n// | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | --graupl-table-caption-side | var(--graupl-table-caption-side) |\n// | --graupl-table-caption-padding-x | var(--graupl-spacer-3) |\n// | --graupl-table-caption-padding-y | var(--graupl-spacer-3) |\n// | --graupl-table-caption-padding | var(--graupl-table-caption-padding-y) var(--graupl-table-caption-padding-x) |\n// | --graupl-table-header-font-weight | typography.var(--graupl-font-weight-bold) |\n// | --graupl-table-header-padding-x | var(--graupl-spacer-3) |\n// | --graupl-table-header-padding-y | var(--graupl-spacer-3) |\n// | --graupl-table-header-padding | var(--graupl-table-header-padding-y) var(--graupl-table-header-padding-x) |\n// | --graupl-table-header-background | var(--graupl-background) |\n// | --graupl-table-header-color | var(--graupl-color) |\n// | --graupl-table-cell-padding-x | var(--graupl-spacer-3) |\n// | --graupl-table-cell-padding-y | var(--graupl-spacer-3) |\n// | --graupl-table-cell-padding | var(--graupl-table-cell-padding-y) var(--graupl-table-cell-padding-x) |\n// | --graupl-table-cell-background | var(--graupl-background) |\n// | --graupl-table-cell-color | var(--graupl-color) |\n// | --graupl-table-border-top-width | var(--graupl-border-top-width) |\n// | --graupl-table-border-right-width | var(--graupl-border-right-width) |\n// | --graupl-table-border-bottom-width | var(--graupl-border-bottom-width) |\n// | --graupl-table-border-left-width | var(--graupl-border-left-width) |\n// | --graupl-table-border-width | var(--graupl-table-border-top-width) var(--graupl-table-border-right-width) var(--graupl-table-border-bottom-width) var(--graupl-table-border-left-width) |\n// | --graupl-table-border-top-style | var(--graupl-border-top-style) |\n// | --graupl-table-border-right-style | var(--graupl-border-right-style) |\n// | --graupl-table-border-bottom-style | var(--graupl-border-bottom-style) |\n// | --graupl-table-border-left-style | var(--graupl-border-left-style) |\n// | --graupl-table-border-style | var(--graupl-table-border-top-style) var(--graupl-table-border-right-style) var(--graupl-table-border-bottom-style) var(--graupl-table-border-left-style) |\n// | --graupl-table-border-top-left-radius | var(--graupl-border-top-left-radius) |\n// | --graupl-table-border-top-right-radius | var(--graupl-border-top-right-radius) |\n// | --graupl-table-border-bottom-right-radius | var(--graupl-border-bottom-right-radius) |\n// | --graupl-table-border-bottom-left-radius | var(--graupl-border-bottom-left-radius) |\n// | --graupl-table-border-radius | var(--graupl-table-border-top-left-radius) var(--graupl-table-border-top-right-radius) var(--graupl-table-border-bottom-right-radius) var(--graupl-table-border-bottom-left-radius) |\n// | --graupl-table-border-color | var(--graupl-border-color) |\n// | --graupl-table-cell-border-top-width | var(--graupl-border-top-width) |\n// | --graupl-table-cell-border-right-width | var(--graupl-border-right-width) |\n// | --graupl-table-cell-border-bottom-width | var(--graupl-border-bottom-width) |\n// | --graupl-table-cell-border-left-width | var(--graupl-border-left-width) |\n// | --graupl-table-cell-border-width | var(--graupl-table-cell-border-top-width) var(--graupl-table-cell-border-right-width) var(--graupl-table-cell-border-bottom-width) var(--graupl-table-cell-border-left-width) |\n// | --graupl-table-cell-border-top-style | var(--graupl-border-top-style) |\n// | --graupl-table-cell-border-right-style | var(--graupl-border-right-style) |\n// | --graupl-table-cell-border-bottom-style | var(--graupl-border-bottom-style) |\n// | --graupl-table-cell-border-left-style | var(--graupl-border-left-style) |\n// | --graupl-table-cell-border-style | var(--graupl-table-cell-border-top-style) var(--graupl-table-cell-border-right-style) var(--graupl-table-cell-border-bottom-style) var(--graupl-table-cell-border-left-style) |\n// | --graupl-table-cell-border-top-left-radius | var(--graupl-border-top-left-radius) |\n// | --graupl-table-cell-border-top-right-radius | var(--graupl-border-top-right-radius) |\n// | --graupl-table-cell-border-bottom-right-radius | var(--graupl-border-bottom-right-radius) |\n// | --graupl-table-cell-border-bottom-left-radius | var(--graupl-border-bottom-left-radius) |\n// | --graupl-table-cell-border-radius | var(--graupl-table-cell-border-top-left-radius) var(--graupl-table-cell-border-top-right-radius) var(--graupl-table-cell-border-bottom-right-radius) var(--graupl-table-cell-border-bottom-left-radius) |\n// | --graupl-table-cell-border-color | var(--graupl-table-border-color) |\n// | --graupl-table-header-border-top-width | var(--graupl-table-cell-border-top-width) |\n// | --graupl-table-header-border-right-width | var(--graupl-table-cell-border-right-width) |\n// | --graupl-table-header-border-bottom-width | var(--graupl-table-cell-border-bottom-width) |\n// | --graupl-table-header-border-left-width | var(--graupl-table-cell-border-left-width) |\n// | --graupl-table-header-border-width | var(--graupl-table-header-border-top-width) var(--graupl-table-header-border-right-width) var(--graupl-table-header-border-bottom-width) var(--graupl-table-header-border-left-width) |\n// | --graupl-table-header-border-top-style | var(--graupl-table-cell-border-top-style) |\n// | --graupl-table-header-border-right-style | var(--graupl-table-cell-border-right-style) |\n// | --graupl-table-header-border-bottom-style | var(--graupl-table-cell-border-bottom-style) |\n// | --graupl-table-header-border-left-style | var(--graupl-table-cell-border-left-style) |\n// | --graupl-table-header-border-style | var(--graupl-table-header-border-top-style) var(--graupl-table-header-border-right-style) var(--graupl-table-header-border-bottom-style) var(--graupl-table-header-border-left-style) |\n// | --graupl-table-header-border-top-left-radius | var(--graupl-table-cell-border-top-left-radius) |\n// | --graupl-table-header-border-top-right-radius | var(--graupl-table-cell-border-top-right-radius) |\n// | --graupl-table-header-border-bottom-right-radius | var(--graupl-table-cell-border-bottom-right-radius) |\n// | --graupl-table-header-border-bottom-left-radius | var(--graupl-table-cell-border-bottom-left-radius) |\n// | --graupl-table-header-border-radius | var(--graupl-table-header-border-top-left-radius) var(--graupl-table-header-border-top-right-radius) var(--graupl-table-header-border-bottom-right-radius) var(--graupl-table-header-border-bottom-left-radius) |\n// | --graupl-table-header-border-color | var(--graupl-table-border-color) |\n// | --graupl-table-striped-background | var(--graupl-theme-active--secondary--200) |\n// | --graupl-table-striped-color | var(--graupl-theme-active--secondary--900) |\n// | --graupl-table-hover-background | var(--graupl-theme-active--secondary--300) |\n// | --graupl-table-hover-color | var(--graupl-theme-active--secondary--900) |\n// | --graupl-table-highlight-background | var(--graupl-theme-active--secondary--500) |\n// | --graupl-table-highlight-color | var(--graupl-theme-active--secondary--100) |\n\n@use \"defaults\";\n@use \"../../defaults\" as root-defaults;\n@use \"../../variables\" as root-variables;\n@use \"../../theme/typography/variables\" as typography;\n@use \"../../theme/color/variables\" as color;\n@use \"../../functions/theme\";\n@use \"sass:map\";\n\n// Table caption properties.\n// --graupl-table-caption-side\n$table-caption-side: var(\n --#{root-defaults.$prefix}table-caption-side,\n #{defaults.$table-caption-side}\n);\n\n// --graupl-table-caption-padding-x\n$table-caption-padding-x: var(\n --#{root-defaults.$prefix}table-caption-padding-x,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-table-caption-padding-y\n$table-caption-padding-y: var(\n --#{root-defaults.$prefix}table-caption-padding-y,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-table-caption-padding\n$table-caption-padding: var(\n --#{root-defaults.$prefix}table-caption-padding,\n #{$table-caption-padding-y} #{$table-caption-padding-x}\n);\n\n// Table header properties.\n// --graupl-table-header-font-weight\n$table-header-font-weight: var(\n --#{root-defaults.$prefix}table-header-font-weight,\n #{typography.$font-weight-bold}\n);\n\n// --graupl-table-header-padding-x\n$table-header-padding-x: var(\n --#{root-defaults.$prefix}table-header-padding-x,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-table-header-padding-y\n$table-header-padding-y: var(\n --#{root-defaults.$prefix}table-header-padding-y,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-table-header-padding\n$table-header-padding: var(\n --#{root-defaults.$prefix}table-header-padding,\n #{$table-header-padding-y} #{$table-header-padding-x}\n);\n\n// --graupl-table-header-background\n$table-header-background: var(\n --#{root-defaults.$prefix}table-header-background,\n #{color.$background}\n);\n\n// --graupl-table-header-color\n$table-header-color: var(\n --#{root-defaults.$prefix}table-header-color,\n #{color.$color}\n);\n\n// Table cell properties.\n// --graupl-table-cell-padding-x\n$table-cell-padding-x: var(\n --#{root-defaults.$prefix}table-cell-padding-x,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-table-cell-padding-y\n$table-cell-padding-y: var(\n --#{root-defaults.$prefix}table-cell-padding-y,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-table-cell-padding\n$table-cell-padding: var(\n --#{root-defaults.$prefix}table-cell-padding,\n #{$table-cell-padding-y} #{$table-cell-padding-x}\n);\n\n// --graupl-table-cell-background\n$table-cell-background: var(\n --#{root-defaults.$prefix}table-cell-background,\n #{color.$background}\n);\n\n// --graupl-table-cell-color\n$table-cell-color: var(\n --#{root-defaults.$prefix}table-cell-color,\n #{color.$color}\n);\n\n// Table border properties.\n// --graupl-table-border-top-width\n$table-border-top-width: var(\n --#{root-defaults.$prefix}table-border-top-width,\n #{root-variables.$border-top-width}\n);\n\n// --graupl-table-border-right-width\n$table-border-right-width: var(\n --#{root-defaults.$prefix}table-border-right-width,\n #{root-variables.$border-right-width}\n);\n\n// --graupl-table-border-bottom-width\n$table-border-bottom-width: var(\n --#{root-defaults.$prefix}table-border-bottom-width,\n #{root-variables.$border-bottom-width}\n);\n\n// --graupl-table-border-left-width\n$table-border-left-width: var(\n --#{root-defaults.$prefix}table-border-left-width,\n #{root-variables.$border-left-width}\n);\n\n// --graupl-table-border-width\n$table-border-width: var(\n --#{root-defaults.$prefix}table-border-width,\n #{$table-border-top-width} #{$table-border-right-width}\n #{$table-border-bottom-width} #{$table-border-left-width}\n);\n\n// --graupl-table-border-top-style\n$table-border-top-style: var(\n --#{root-defaults.$prefix}table-border-top-style,\n #{root-variables.$border-top-style}\n);\n\n// --graupl-table-border-right-style\n$table-border-right-style: var(\n --#{root-defaults.$prefix}table-border-right-style,\n #{root-variables.$border-right-style}\n);\n\n// --graupl-table-border-bottom-style\n$table-border-bottom-style: var(\n --#{root-defaults.$prefix}table-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n\n// --graupl-table-border-left-style\n$table-border-left-style: var(\n --#{root-defaults.$prefix}table-border-left-style,\n #{root-variables.$border-left-style}\n);\n\n// --graupl-table-border-style\n$table-border-style: var(\n --#{root-defaults.$prefix}table-border-style,\n #{$table-border-top-style} #{$table-border-right-style}\n #{$table-border-bottom-style} #{$table-border-left-style}\n);\n\n// --graupl-table-border-top-left-radius\n$table-border-top-left-radius: var(\n --#{root-defaults.$prefix}table-border-top-left-radius,\n #{root-variables.$border-top-left-radius}\n);\n\n// --graupl-table-border-top-right-radius\n$table-border-top-right-radius: var(\n --#{root-defaults.$prefix}table-border-top-right-radius,\n #{root-variables.$border-top-right-radius}\n);\n\n// --graupl-table-border-bottom-right-radius\n$table-border-bottom-right-radius: var(\n --#{root-defaults.$prefix}table-border-bottom-right-radius,\n #{root-variables.$border-bottom-right-radius}\n);\n\n// --graupl-table-border-bottom-left-radius\n$table-border-bottom-left-radius: var(\n --#{root-defaults.$prefix}table-border-bottom-left-radius,\n #{root-variables.$border-bottom-left-radius}\n);\n\n// --graupl-table-border-radius\n$table-border-radius: var(\n --#{root-defaults.$prefix}table-border-radius,\n #{$table-border-top-left-radius} #{$table-border-top-right-radius}\n #{$table-border-bottom-right-radius} #{$table-border-bottom-left-radius}\n);\n\n// --graupl-table-border-color\n$table-border-color: var(\n --#{root-defaults.$prefix}table-border-color,\n #{color.$border-color}\n);\n\n// Table cell border properties.\n// --graupl-table-cell-border-top-width\n$table-cell-border-top-width: var(\n --#{root-defaults.$prefix}table-cell-border-top-width,\n #{root-variables.$border-top-width}\n);\n\n// --graupl-table-cell-border-right-width\n$table-cell-border-right-width: var(\n --#{root-defaults.$prefix}table-cell-border-right-width,\n #{root-variables.$border-right-width}\n);\n\n// --graupl-table-cell-border-bottom-width\n$table-cell-border-bottom-width: var(\n --#{root-defaults.$prefix}table-cell-border-bottom-width,\n #{root-variables.$border-bottom-width}\n);\n\n// --graupl-table-cell-border-left-width\n$table-cell-border-left-width: var(\n --#{root-defaults.$prefix}table-cell-border-left-width,\n #{root-variables.$border-left-width}\n);\n\n// --graupl-table-cell-border-width\n$table-cell-border-width: var(\n --#{root-defaults.$prefix}table-cell-border-width,\n #{$table-cell-border-top-width} #{$table-cell-border-right-width}\n #{$table-cell-border-bottom-width} #{$table-cell-border-left-width}\n);\n\n// --graupl-table-cell-border-top-style\n$table-cell-border-top-style: var(\n --#{root-defaults.$prefix}table-cell-border-top-style,\n #{root-variables.$border-top-style}\n);\n\n// --graupl-table-cell-border-right-style\n$table-cell-border-right-style: var(\n --#{root-defaults.$prefix}table-cell-border-right-style,\n #{root-variables.$border-right-style}\n);\n\n// --graupl-table-cell-border-bottom-style\n$table-cell-border-bottom-style: var(\n --#{root-defaults.$prefix}table-cell-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n\n// --graupl-table-cell-border-left-style\n$table-cell-border-left-style: var(\n --#{root-defaults.$prefix}table-cell-border-left-style,\n #{root-variables.$border-left-style}\n);\n\n// --graupl-table-cell-border-style\n$table-cell-border-style: var(\n --#{root-defaults.$prefix}table-cell-border-style,\n #{$table-cell-border-top-style} #{$table-cell-border-right-style}\n #{$table-cell-border-bottom-style} #{$table-cell-border-left-style}\n);\n\n// --graupl-table-cell-border-top-left-radius\n$table-cell-border-top-left-radius: var(\n --#{root-defaults.$prefix}table-cell-border-top-left-radius,\n #{root-variables.$border-top-left-radius}\n);\n\n// --graupl-table-cell-border-top-right-radius\n$table-cell-border-top-right-radius: var(\n --#{root-defaults.$prefix}table-cell-border-top-right-radius,\n #{root-variables.$border-top-right-radius}\n);\n\n// --graupl-table-cell-border-bottom-right-radius\n$table-cell-border-bottom-right-radius: var(\n --#{root-defaults.$prefix}table-cell-border-bottom-right-radius,\n #{root-variables.$border-bottom-right-radius}\n);\n\n// --graupl-table-cell-border-bottom-left-radius\n$table-cell-border-bottom-left-radius: var(\n --#{root-defaults.$prefix}table-cell-border-bottom-left-radius,\n #{root-variables.$border-bottom-left-radius}\n);\n\n// --graupl-table-cell-border-radius\n$table-cell-border-radius: var(\n --#{root-defaults.$prefix}table-cell-border-radius,\n #{$table-cell-border-top-left-radius} #{$table-cell-border-top-right-radius}\n #{$table-cell-border-bottom-right-radius}\n #{$table-cell-border-bottom-left-radius}\n);\n\n// --graupl-table-cell-border-color\n$table-cell-border-color: var(\n --#{root-defaults.$prefix}table-cell-border-color,\n #{$table-border-color}\n);\n\n// Table header border properties.\n// --graupl-table-header-border-top-width\n$table-header-border-top-width: var(\n --#{root-defaults.$prefix}table-header-border-top-width,\n #{$table-cell-border-top-width}\n);\n\n// --graupl-table-header-border-right-width\n$table-header-border-right-width: var(\n --#{root-defaults.$prefix}table-header-border-right-width,\n #{$table-cell-border-right-width}\n);\n\n// --graupl-table-header-border-bottom-width\n$table-header-border-bottom-width: var(\n --#{root-defaults.$prefix}table-header-border-bottom-width,\n #{$table-cell-border-bottom-width}\n);\n\n// --graupl-table-header-border-left-width\n$table-header-border-left-width: var(\n --#{root-defaults.$prefix}table-header-border-left-width,\n #{$table-cell-border-left-width}\n);\n\n// --graupl-table-header-border-width\n$table-header-border-width: var(\n --#{root-defaults.$prefix}table-header-border-width,\n #{$table-header-border-top-width} #{$table-header-border-right-width}\n #{$table-header-border-bottom-width} #{$table-header-border-left-width}\n);\n\n// --graupl-table-header-border-top-style\n$table-header-border-top-style: var(\n --#{root-defaults.$prefix}table-header-border-top-style,\n #{$table-cell-border-top-style}\n);\n\n// --graupl-table-header-border-right-style\n$table-header-border-right-style: var(\n --#{root-defaults.$prefix}table-header-border-right-style,\n #{$table-cell-border-right-style}\n);\n\n// --graupl-table-header-border-bottom-style\n$table-header-border-bottom-style: var(\n --#{root-defaults.$prefix}table-header-border-bottom-style,\n #{$table-cell-border-bottom-style}\n);\n\n// --graupl-table-header-border-left-style\n$table-header-border-left-style: var(\n --#{root-defaults.$prefix}table-header-border-left-style,\n #{$table-cell-border-left-style}\n);\n\n// --graupl-table-header-border-style\n$table-header-border-style: var(\n --#{root-defaults.$prefix}table-header-border-style,\n #{$table-header-border-top-style} #{$table-header-border-right-style}\n #{$table-header-border-bottom-style} #{$table-header-border-left-style}\n);\n\n// --graupl-table-header-border-top-left-radius\n$table-header-border-top-left-radius: var(\n --#{root-defaults.$prefix}table-header-border-top-left-radius,\n #{$table-cell-border-top-left-radius}\n);\n\n// --graupl-table-header-border-top-right-radius\n$table-header-border-top-right-radius: var(\n --#{root-defaults.$prefix}table-header-border-top-right-radius,\n #{$table-cell-border-top-right-radius}\n);\n\n// --graupl-table-header-border-bottom-right-radius\n$table-header-border-bottom-right-radius: var(\n --#{root-defaults.$prefix}table-header-border-bottom-right-radius,\n #{$table-cell-border-bottom-right-radius}\n);\n\n// --graupl-table-header-border-bottom-left-radius\n$table-header-border-bottom-left-radius: var(\n --#{root-defaults.$prefix}table-header-border-bottom-left-radius,\n #{$table-cell-border-bottom-left-radius}\n);\n\n// --graupl-table-header-border-radius\n$table-header-border-radius: var(\n --#{root-defaults.$prefix}table-header-border-radius,\n #{$table-header-border-top-left-radius}\n #{$table-header-border-top-right-radius}\n #{$table-header-border-bottom-right-radius}\n #{$table-header-border-bottom-left-radius}\n);\n\n// --graupl-table-header-border-color\n$table-header-border-color: var(\n --#{root-defaults.$prefix}table-header-border-color,\n #{$table-border-color}\n);\n\n// Table striped properties.\n// --graupl-table-striped-background\n$table-striped-background: var(\n --#{root-defaults.$prefix}table-striped-background,\n #{theme.get(secondary, 200)}\n);\n\n// --graupl-table-striped-color\n$table-striped-color: var(\n --#{root-defaults.$prefix}table-striped-color,\n #{theme.get(secondary, 900)}\n);\n\n// Table hover properties.\n// --graupl-table-hover-background\n$table-hover-background: var(\n --#{root-defaults.$prefix}table-hover-background,\n #{theme.get(secondary, 300)}\n);\n\n// --graupl-table-hover-color\n$table-hover-color: var(\n --#{root-defaults.$prefix}table-hover-color,\n #{theme.get(secondary, 900)}\n);\n\n// Table highlight properties.\n// --graupl-table-highlight-background\n$table-highlight-background: var(\n --#{root-defaults.$prefix}table-highlight-background,\n #{theme.get(secondary, 500)}\n);\n\n// --graupl-table-highlight-color\n$table-highlight-color: var(\n --#{root-defaults.$prefix}table-highlight-color,\n #{theme.get(secondary, 100)}\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":[]}