@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/navigation.css CHANGED
@@ -1,2 +1,2 @@
1
- @charset "UTF-8";@layer graupl.component{.navigation{display:grid;grid-template-areas:"branding - toggle" "menu menu menu";grid-template-columns:auto 1fr auto;isolation:isolate}.navigation .menu{grid-area:menu}.navigation .menu.show{--graupl-menu-display:var(--graupl-menu-show-display,flex)}.navigation .menu.hide{--graupl-menu-display:var(--graupl-menu-hide-display,none)}.navigation-toggle{align-items:center;border-radius:var(--graupl-navigation-toggle-border-radius,var(--graupl-navigation-toggle-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem))) var(--graupl-navigation-toggle-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem))) var(--graupl-navigation-toggle-border-bottom-right-radius,var(--graupl-border-bottom-right-radius,var(--graupl-border-radius,.125rem))) var(--graupl-navigation-toggle-border-bottom-left-radius,var(--graupl-border-bottom-left-radius,var(--graupl-border-radius,.125rem))));border-style:var(--graupl-navigation-toggle-border-style,var(--graupl-navigation-toggle-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid))) var(--graupl-navigation-toggle-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid))) var(--graupl-navigation-toggle-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid))) var(--graupl-navigation-toggle-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-width:var(--graupl-navigation-toggle-border-width,var(--graupl-navigation-toggle-border-top-width,var(--graupl-border-top-width,var(--graupl-border-width,.125rem))) var(--graupl-navigation-toggle-border-right-width,var(--graupl-border-right-width,var(--graupl-border-width,.125rem))) var(--graupl-navigation-toggle-border-bottom-width,var(--graupl-border-bottom-width,var(--graupl-border-width,.125rem))) var(--graupl-navigation-toggle-border-left-width,var(--graupl-border-left-width,var(--graupl-border-width,.125rem))));display:flex;grid-area:toggle;justify-content:center;min-height:var(--graupl-navigation-toggle-min-height,44px);min-width:var(--graupl-navigation-toggle-min-width,44px);padding:var(--graupl-navigation-toggle-padding,var(--graupl-navigation-toggle-padding-y,var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5))) var(--graupl-navigation-toggle-padding-x,var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))))}.navigation-toggle:before{content:var(--graupl-navigation-toggle-content,"☰");display:block}.navigation-branding{align-items:center;display:flex;font-size:var(--graupl-navigation-branding-font-size,var(--graupl-font-lg,calc(var(--graupl-font-size-base, 1rem)*1.2)));font-weight:var(--graupl-navigation-branding-font-weight,var(--graupl-font-weight-bold,var(--graupl-font-weight-bold,700)));grid-area:branding;justify-content:flex-start;padding:var(--graupl-navigation-branding-padding,var(--graupl-navigation-branding-padding-y,var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25))) var(--graupl-navigation-branding-padding-x,var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5))));-webkit-text-decoration:var(--graupl-navigation-branding-text-decoration,none);text-decoration:var(--graupl-navigation-branding-text-decoration,none);text-decoration-style:var(--graupl-navigation-branding-text-decoration-style,solid);text-decoration-thickness:var(--graupl-navigation-branding-text-decoration-thickness,var(--graupl-border-width,.125rem))}.navigation-branding:visited{--graupl-navigation-branding-text-decoration:var(--graupl-navigation-branding-visited-text-decoration,var(--graupl-navigation-branding-text-decoration,none));--graupl-navigation-branding-text-decoration-thickness:var(--graupl-navigation-branding-visited-text-decoration-thickness,var(--graupl-navigation-branding-text-decoration-thickness,var(--graupl-border-width,0.125rem)));--graupl-navigation-branding-text-decoration-style:var(--graupl-navigation-branding-visited-text-decoration-style,var(--graupl-navigation-branding-text-decoration-style,solid))}.navigation-branding:focus-visible{--graupl-navigation-branding-text-decoration:var(--graupl-navigation-branding-focus-text-decoration,var(--graupl-navigation-branding-text-decoration,none));--graupl-navigation-branding-text-decoration-thickness:var(--graupl-navigation-branding-focus-text-decoration-thickness,var(--graupl-navigation-branding-text-decoration-thickness,var(--graupl-border-width,0.125rem)));--graupl-navigation-branding-text-decoration-style:var(--graupl-navigation-branding-focus-text-decoration-style,var(--graupl-navigation-branding-text-decoration-style,solid))}.navigation-branding:hover{--graupl-navigation-branding-text-decoration:var(--graupl-navigation-branding-hover-text-decoration,none);--graupl-navigation-branding-text-decoration-thickness:var(--graupl-navigation-branding-hover-text-decoration-thickness,var(--graupl-border-width,0.125rem));--graupl-navigation-branding-text-decoration-style:var(--graupl-navigation-branding-hover-text-decoration-style,solid)}.navigation-branding:active{--graupl-navigation-branding-text-decoration:var(--graupl-navigation-branding-active-text-decoration,var(--graupl-navigation-branding-hover-text-decoration,none));--graupl-navigation-branding-text-decoration-thickness:var(--graupl-navigation-branding-active-text-decoration-thickness,var(--graupl-navigation-branding-hover-text-decoration-thickness,var(--graupl-border-width,0.125rem)));--graupl-navigation-branding-text-decoration-style:var(--graupl-navigation-branding-active-text-decoration-style,var(--graupl-navigation-branding-hover-text-decoration-style,solid))}.navigation-branding:disabled,.navigation-branding:disabled:active,.navigation-branding:disabled:focus-visible,.navigation-branding:disabled:hover,.navigation-branding:disabled:visited,.navigation-branding[disabled],.navigation-branding[disabled]:active,.navigation-branding[disabled]:focus-visible,.navigation-branding[disabled]:hover,.navigation-branding[disabled]:visited{--graupl-navigation-branding-text-decoration:var(--graupl-navigation-branding-disabled-text-decoration,none);--graupl-navigation-branding-text-decoration-thickness:var(--graupl-navigation-branding-disabled-text-decoration-thickness,var(--graupl-border-width,0.125rem));--graupl-navigation-branding-text-decoration-style:var(--graupl-navigation-branding-disabled-text-decoration-style,solid)}@media screen and (width <= 71ch){.navigation{--graupl-menu-flex-direction:column;--graupl-submenu-position:relative;--graupl-menu-item-min-width:100%;--graupl-submenu-inset:auto}}@media screen and (72ch <= width){.navigation{--graupl-menu-hide-display:var(--graupl-menu-show-display,flex);grid-template-areas:"branding - menu"}.navigation-toggle{display:none}}}@layer graupl.theme{.navigation{--graupl-menu-background:var(--graupl-navigation-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));--graupl-menu-color:var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))));--graupl-submenu-background:var(--graupl-navigation-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));--graupl-submenu-color:var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))));background:var(--graupl-navigation-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));color:var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))}.navigation-toggle{background:var(--graupl-navigation-toggle-background,var(--graupl-navigation-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))));border-color:var(--graupl-navigation-toggle-border-color,var(--graupl-navigation-toggle-color,var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))));color:var(--graupl-navigation-toggle-color,var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))}.navigation-toggle:hover{--graupl-navigation-toggle-background:var(--graupl-navigation-toggle-hover-background,var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));--graupl-navigation-toggle-color:var(--graupl-navigation-toggle-hover-color,var(--graupl-navigation-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))))}.navigation-branding{color:var(--graupl-navigation-branding-color,var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));text-decoration-color:var(--graupl-navigation-branding-text-decoration-color,var(--graupl-navigation-branding-color,var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))))}.navigation-branding:visited{--graupl-navigation-branding-color:var(--graupl-navigation-branding-visited-color,var(--graupl-navigation-branding-color,var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))));--graupl-navigation-branding-text-decoration-color:var(--graupl-navigation-branding-visited-text-decoration-color,var(--graupl-navigation-branding-visited-color,var(--graupl-navigation-branding-color,var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))))}.navigation-branding:focus-visible{--graupl-navigation-branding-color:var(--graupl-navigation-branding-focus-color,var(--graupl-navigation-branding-color,var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))));--graupl-navigation-branding-text-decoration-color:var(--graupl-navigation-branding-focus-text-decoration-color,var(--graupl-navigation-branding-focus-color,var(--graupl-navigation-branding-color,var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))))}.navigation-branding:hover{--graupl-navigation-branding-color:var(--graupl-navigation-branding-hover-color,var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));--graupl-navigation-branding-text-decoration-color:var(--graupl-navigation-branding-hover-text-decoration-color,var(--graupl-navigation-branding-hover-color,var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))))}.navigation-branding:active{--graupl-navigation-branding-color:var(--graupl-navigation-branding-active-color,var(--graupl-navigation-branding-hover-color,var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))));--graupl-navigation-branding-text-decoration-color:var(--graupl-navigation-branding-active-text-decoration-color,var(--graupl-navigation-branding-active-color,var(--graupl-navigation-branding-hover-color,var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))))}.navigation-branding:disabled,.navigation-branding:disabled:active,.navigation-branding:disabled:focus-visible,.navigation-branding:disabled:hover,.navigation-branding:disabled:visited,.navigation-branding[disabled],.navigation-branding[disabled]:active,.navigation-branding[disabled]:focus-visible,.navigation-branding[disabled]:hover,.navigation-branding[disabled]:visited{--graupl-navigation-branding-color:var(--graupl-navigation-branding-disabled-color,var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));--graupl-navigation-branding-text-decoration-color:var(--graupl-navigation-branding-disabled-text-decoration-color,var(--graupl-navigation-branding-disabled-color,var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))))}}
2
- /*# sourceMappingURL=navigation.css.map */
1
+ @layer graupl.component{.navigation{isolation:isolate;grid-template-columns:auto 1fr auto;grid-template-areas:"branding \- toggle""menu menu menu";display:grid}.navigation .menu{grid-area:menu}.navigation .menu.show{--graupl-menu-display:var(--graupl-menu-show-display,flex)}.navigation .menu.hide{--graupl-menu-display:var(--graupl-menu-hide-display,none)}.navigation-toggle{min-width:var(--graupl-navigation-toggle-min-width,44px);min-height:var(--graupl-navigation-toggle-min-height,44px);padding:var(--graupl-navigation-toggle-padding,var(--graupl-navigation-toggle-padding-y,var(--graupl-spacer-3,calc(.5*var(--graupl-spacer,1rem))))var(--graupl-navigation-toggle-padding-x,var(--graupl-spacer-5,calc(1*var(--graupl-spacer,1rem)))));border-width:var(--graupl-navigation-toggle-border-width,var(--graupl-navigation-toggle-border-top-width,var(--graupl-border-top-width,var(--graupl-border-width,.125rem)))var(--graupl-navigation-toggle-border-right-width,var(--graupl-border-right-width,var(--graupl-border-width,.125rem)))var(--graupl-navigation-toggle-border-bottom-width,var(--graupl-border-bottom-width,var(--graupl-border-width,.125rem)))var(--graupl-navigation-toggle-border-left-width,var(--graupl-border-left-width,var(--graupl-border-width,.125rem))));border-style:var(--graupl-navigation-toggle-border-style,var(--graupl-navigation-toggle-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid)))var(--graupl-navigation-toggle-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid)))var(--graupl-navigation-toggle-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid)))var(--graupl-navigation-toggle-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-radius:var(--graupl-navigation-toggle-border-radius,var(--graupl-navigation-toggle-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem)))var(--graupl-navigation-toggle-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem)))var(--graupl-navigation-toggle-border-bottom-right-radius,var(--graupl-border-bottom-right-radius,var(--graupl-border-radius,.125rem)))var(--graupl-navigation-toggle-border-bottom-left-radius,var(--graupl-border-bottom-left-radius,var(--graupl-border-radius,.125rem))));grid-area:toggle;justify-content:center;align-items:center;display:flex}.navigation-toggle:before{content:var(--graupl-navigation-toggle-content,"☰");display:block}.navigation-branding{padding:var(--graupl-navigation-branding-padding,var(--graupl-navigation-branding-padding-y,var(--graupl-spacer-2,calc(.25*var(--graupl-spacer,1rem))))var(--graupl-navigation-branding-padding-x,var(--graupl-spacer-3,calc(.5*var(--graupl-spacer,1rem)))));font-size:var(--graupl-navigation-branding-font-size,var(--graupl-font-lg,calc(1.2*var(--graupl-font-size-base,1rem))));font-weight:var(--graupl-navigation-branding-font-weight,var(--graupl-font-weight-bold,var(--graupl-font-weight-bold,700)));text-decoration:var(--graupl-navigation-branding-text-decoration,none);text-decoration-style:var(--graupl-navigation-branding-text-decoration-style,solid);text-decoration-thickness:var(--graupl-navigation-branding-text-decoration-thickness,var(--graupl-border-width,.125rem));grid-area:branding;justify-content:flex-start;align-items:center;display:flex}.navigation-branding:visited,.navigation-branding.visited{text-decoration:var(--graupl-navigation-branding-visited-text-decoration,var(--graupl-navigation-branding-text-decoration,none));text-decoration-thickness:var(--graupl-navigation-branding-visited-text-decoration-thickness,var(--graupl-navigation-branding-text-decoration-thickness,var(--graupl-border-width,.125rem)));text-decoration-style:var(--graupl-navigation-branding-visited-text-decoration-style,var(--graupl-navigation-branding-text-decoration-style,solid))}.navigation-branding:focus-visible,.navigation-branding.focus{text-decoration:var(--graupl-navigation-branding-focus-text-decoration,var(--graupl-navigation-branding-text-decoration,none));text-decoration-thickness:var(--graupl-navigation-branding-focus-text-decoration-thickness,var(--graupl-navigation-branding-text-decoration-thickness,var(--graupl-border-width,.125rem)));text-decoration-style:var(--graupl-navigation-branding-focus-text-decoration-style,var(--graupl-navigation-branding-text-decoration-style,solid))}.navigation-branding:hover,.navigation-branding.hover{text-decoration:var(--graupl-navigation-branding-hover-text-decoration,none);text-decoration-thickness:var(--graupl-navigation-branding-hover-text-decoration-thickness,var(--graupl-border-width,.125rem));text-decoration-style:var(--graupl-navigation-branding-hover-text-decoration-style,solid)}.navigation-branding:active,.navigation-branding.active{text-decoration:var(--graupl-navigation-branding-active-text-decoration,var(--graupl-navigation-branding-hover-text-decoration,none));text-decoration-thickness:var(--graupl-navigation-branding-active-text-decoration-thickness,var(--graupl-navigation-branding-hover-text-decoration-thickness,var(--graupl-border-width,.125rem)));text-decoration-style:var(--graupl-navigation-branding-active-text-decoration-style,var(--graupl-navigation-branding-hover-text-decoration-style,solid))}.navigation-branding:disabled,.navigation-branding:disabled:visited,.navigation-branding:disabled.visited,.navigation-branding:disabled:focus-visible,.navigation-branding:disabled.focus,.navigation-branding:disabled:hover,.navigation-branding:disabled.hover,.navigation-branding:disabled:active,.navigation-branding:disabled.active,.navigation-branding:disabled[aria-selected=true],.navigation-branding:disabled.selected,.navigation-branding:disabled[aria-current=true],.navigation-branding:disabled.current,.navigation-branding[disabled],.navigation-branding[disabled]:visited,.navigation-branding[disabled].visited,.navigation-branding[disabled]:focus-visible,.navigation-branding[disabled].focus,.navigation-branding[disabled]:hover,.navigation-branding[disabled].hover,.navigation-branding[disabled]:active,.navigation-branding[disabled].active,.navigation-branding[disabled][aria-selected=true],.navigation-branding[disabled].selected,.navigation-branding[disabled][aria-current=true],.navigation-branding[disabled].current,.navigation-branding[aria-disabled=true],.navigation-branding[aria-disabled=true]:visited,.navigation-branding[aria-disabled=true].visited,.navigation-branding[aria-disabled=true]:focus-visible,.navigation-branding[aria-disabled=true].focus,.navigation-branding[aria-disabled=true]:hover,.navigation-branding[aria-disabled=true].hover,.navigation-branding[aria-disabled=true]:active,.navigation-branding[aria-disabled=true].active,.navigation-branding[aria-disabled=true][aria-selected=true],.navigation-branding[aria-disabled=true].selected,.navigation-branding[aria-disabled=true][aria-current=true],.navigation-branding[aria-disabled=true].current,.navigation-branding.disabled,.navigation-branding.disabled:visited,.navigation-branding.disabled.visited,.navigation-branding.disabled:focus-visible,.navigation-branding.disabled.focus,.navigation-branding.disabled:hover,.navigation-branding.disabled.hover,.navigation-branding.disabled:active,.navigation-branding.disabled.active,.navigation-branding.disabled[aria-selected=true],.navigation-branding.disabled.selected,.navigation-branding.disabled[aria-current=true],.navigation-branding.disabled.current{text-decoration:var(--graupl-navigation-branding-disabled-text-decoration,none);text-decoration-thickness:var(--graupl-navigation-branding-disabled-text-decoration-thickness,var(--graupl-border-width,.125rem));text-decoration-style:var(--graupl-navigation-branding-disabled-text-decoration-style,solid)}@media screen and (width<=767px){.navigation{--graupl-menu-flex-direction:column;--graupl-submenu-position:relative;--graupl-menu-item-min-width:100%;--graupl-submenu-inset:auto}}@media screen and (width>=768px){.navigation{--graupl-menu-hide-display:var(--graupl-menu-show-display,flex);grid-template-areas:"branding \- menu"}.navigation-toggle{display:none}}}@layer graupl.theme{.navigation{--graupl-menu-background:var(--graupl-navigation-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));--graupl-menu-color:var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))));background:var(--graupl-navigation-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));color:var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))}.navigation-toggle{border-color:var(--graupl-navigation-toggle-border-color,var(--graupl-navigation-toggle-color,var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))));background:var(--graupl-navigation-toggle-background,var(--graupl-navigation-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))));color:var(--graupl-navigation-toggle-color,var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))}.navigation-toggle:visited,.navigation-toggle.visited{border-color:var(--graupl-navigation-toggle-visited-border-color,var(--graupl-navigation-toggle-border-color,var(--graupl-navigation-toggle-color,var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))));background:var(--graupl-navigation-toggle-visited-background,var(--graupl-navigation-toggle-background,var(--graupl-navigation-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))))));color:var(--graupl-navigation-toggle-visited-color,var(--graupl-navigation-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))))}.navigation-toggle:focus-visible,.navigation-toggle.focus{border-color:var(--graupl-navigation-toggle-focus-border-color,var(--graupl-navigation-toggle-border-color,var(--graupl-navigation-toggle-color,var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))));background:var(--graupl-navigation-toggle-focus-background,var(--graupl-navigation-toggle-background,var(--graupl-navigation-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))))));color:var(--graupl-navigation-toggle-focus-color,var(--graupl-navigation-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))))}.navigation-toggle:hover,.navigation-toggle.hover{border-color:var(--graupl-navigation-toggle-hover-border-color,var(--graupl-navigation-toggle-hover-color,var(--graupl-navigation-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))))));background:var(--graupl-navigation-toggle-hover-background,var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));color:var(--graupl-navigation-toggle-hover-color,var(--graupl-navigation-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))))}.navigation-toggle:active,.navigation-toggle.active{border-color:var(--graupl-navigation-toggle-active-border-color,var(--graupl-navigation-toggle-hover-border-color,var(--graupl-navigation-toggle-hover-color,var(--graupl-navigation-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))))));background:var(--graupl-navigation-toggle-active-background,var(--graupl-navigation-toggle-hover-background,var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))));color:var(--graupl-navigation-toggle-active-color,var(--graupl-navigation-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))))}.navigation-toggle:disabled,.navigation-toggle:disabled:visited,.navigation-toggle:disabled.visited,.navigation-toggle:disabled:focus-visible,.navigation-toggle:disabled.focus,.navigation-toggle:disabled:hover,.navigation-toggle:disabled.hover,.navigation-toggle:disabled:active,.navigation-toggle:disabled.active,.navigation-toggle:disabled[aria-selected=true],.navigation-toggle:disabled.selected,.navigation-toggle:disabled[aria-current=true],.navigation-toggle:disabled.current,.navigation-toggle[disabled],.navigation-toggle[disabled]:visited,.navigation-toggle[disabled].visited,.navigation-toggle[disabled]:focus-visible,.navigation-toggle[disabled].focus,.navigation-toggle[disabled]:hover,.navigation-toggle[disabled].hover,.navigation-toggle[disabled]:active,.navigation-toggle[disabled].active,.navigation-toggle[disabled][aria-selected=true],.navigation-toggle[disabled].selected,.navigation-toggle[disabled][aria-current=true],.navigation-toggle[disabled].current,.navigation-toggle[aria-disabled=true],.navigation-toggle[aria-disabled=true]:visited,.navigation-toggle[aria-disabled=true].visited,.navigation-toggle[aria-disabled=true]:focus-visible,.navigation-toggle[aria-disabled=true].focus,.navigation-toggle[aria-disabled=true]:hover,.navigation-toggle[aria-disabled=true].hover,.navigation-toggle[aria-disabled=true]:active,.navigation-toggle[aria-disabled=true].active,.navigation-toggle[aria-disabled=true][aria-selected=true],.navigation-toggle[aria-disabled=true].selected,.navigation-toggle[aria-disabled=true][aria-current=true],.navigation-toggle[aria-disabled=true].current,.navigation-toggle.disabled,.navigation-toggle.disabled:visited,.navigation-toggle.disabled.visited,.navigation-toggle.disabled:focus-visible,.navigation-toggle.disabled.focus,.navigation-toggle.disabled:hover,.navigation-toggle.disabled.hover,.navigation-toggle.disabled:active,.navigation-toggle.disabled.active,.navigation-toggle.disabled[aria-selected=true],.navigation-toggle.disabled.selected,.navigation-toggle.disabled[aria-current=true],.navigation-toggle.disabled.current{border-color:var(--graupl-navigation-toggle-disabled-border-color,var(--graupl-navigation-toggle-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)))));background:var(--graupl-navigation-toggle-disabled-background,var(--graupl-navigation-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))));color:var(--graupl-navigation-toggle-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.navigation-branding{color:var(--graupl-navigation-branding-color,var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));text-decoration-color:var(--graupl-navigation-branding-text-decoration-color,var(--graupl-navigation-branding-color,var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))))}.navigation-branding:visited,.navigation-branding.visited{color:var(--graupl-navigation-branding-visited-color,var(--graupl-navigation-branding-color,var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))));text-decoration:var(--graupl-navigation-branding-visited-text-decoration-color,var(--graupl-navigation-branding-visited-color,var(--graupl-navigation-branding-color,var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))))}.navigation-branding:focus-visible,.navigation-branding.focus{color:var(--graupl-navigation-branding-focus-color,var(--graupl-navigation-branding-color,var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))));text-decoration:var(--graupl-navigation-branding-focus-text-decoration-color,var(--graupl-navigation-branding-focus-color,var(--graupl-navigation-branding-color,var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))))}.navigation-branding:hover,.navigation-branding.hover{color:var(--graupl-navigation-branding-hover-color,var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));text-decoration:var(--graupl-navigation-branding-hover-text-decoration-color,var(--graupl-navigation-branding-hover-color,var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))))}.navigation-branding:active,.navigation-branding.active{color:var(--graupl-navigation-branding-active-color,var(--graupl-navigation-branding-hover-color,var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))));text-decoration:var(--graupl-navigation-branding-active-text-decoration-color,var(--graupl-navigation-branding-active-color,var(--graupl-navigation-branding-hover-color,var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))))}.navigation-branding:disabled,.navigation-branding:disabled:visited,.navigation-branding:disabled.visited,.navigation-branding:disabled:focus-visible,.navigation-branding:disabled.focus,.navigation-branding:disabled:hover,.navigation-branding:disabled.hover,.navigation-branding:disabled:active,.navigation-branding:disabled.active,.navigation-branding:disabled[aria-selected=true],.navigation-branding:disabled.selected,.navigation-branding:disabled[aria-current=true],.navigation-branding:disabled.current,.navigation-branding[disabled],.navigation-branding[disabled]:visited,.navigation-branding[disabled].visited,.navigation-branding[disabled]:focus-visible,.navigation-branding[disabled].focus,.navigation-branding[disabled]:hover,.navigation-branding[disabled].hover,.navigation-branding[disabled]:active,.navigation-branding[disabled].active,.navigation-branding[disabled][aria-selected=true],.navigation-branding[disabled].selected,.navigation-branding[disabled][aria-current=true],.navigation-branding[disabled].current,.navigation-branding[aria-disabled=true],.navigation-branding[aria-disabled=true]:visited,.navigation-branding[aria-disabled=true].visited,.navigation-branding[aria-disabled=true]:focus-visible,.navigation-branding[aria-disabled=true].focus,.navigation-branding[aria-disabled=true]:hover,.navigation-branding[aria-disabled=true].hover,.navigation-branding[aria-disabled=true]:active,.navigation-branding[aria-disabled=true].active,.navigation-branding[aria-disabled=true][aria-selected=true],.navigation-branding[aria-disabled=true].selected,.navigation-branding[aria-disabled=true][aria-current=true],.navigation-branding[aria-disabled=true].current,.navigation-branding.disabled,.navigation-branding.disabled:visited,.navigation-branding.disabled.visited,.navigation-branding.disabled:focus-visible,.navigation-branding.disabled.focus,.navigation-branding.disabled:hover,.navigation-branding.disabled.hover,.navigation-branding.disabled:active,.navigation-branding.disabled.active,.navigation-branding.disabled[aria-selected=true],.navigation-branding.disabled.selected,.navigation-branding.disabled[aria-current=true],.navigation-branding.disabled.current{color:var(--graupl-navigation-branding-disabled-color,var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));text-decoration:var(--graupl-navigation-branding-disabled-text-decoration-color,var(--graupl-navigation-branding-disabled-color,var(--graupl-navigation-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))))}}
2
+ /*# sourceMappingURL=navigation.css.map */
package/dist/css/component/navigation.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/scss/mixins/_layer.scss","navigation.css","../../../src/scss/component/navigation/_index.scss","../../../src/scss/component/navigation/_variables.scss","../../../src/scss/mixins/_screen.scss"],"names":[],"mappings":"AASI,gBC+EJ,CD/EI,wBEGF,YACE,YAAA,CACA,wDACE,CAEF,mCAAA,CACA,iBDVF,CCYE,kBACE,cDVJ,CCYI,uBACE,0DDVN,CCaI,uBACE,0DDXN,CCiBA,mBAGE,kBAAA,CAOA,2kBCuF8B,CDxF9B,ygBC6D6B,CD9D7B,ihBCuC6B,CD9C7B,YAAA,CACA,gBAAA,CAEA,sBAAA,CAEA,0DCb2B,CDY3B,wDChB0B,CDkB1B,wPDZF,CCiBE,0BACE,mDC+OsB,CD9OtB,aDfJ,CCoBA,qBAGE,kBAAA,CAFA,YAAA,CAKA,wHCiF4B,CDhF5B,2HCoF8B,CDzF9B,kBAAA,CAEA,0BAAA,CACA,gQCkG0B,CD/F1B,8EC+HkC,CD/HlC,sEC+HkC,CD9HlC,mFCsJwC,CDrJxC,wHDlBF,CCoBE,6BACE,6JAAA,CACA,0NAAA,CACA,gLDlBJ,CCqBE,mCACE,2JAAA,CACA,wNAAA,CACA,8KDnBJ,CCsBE,2BACE,yGAAA,CACA,4JAAA,CACA,sHDpBJ,CCuBE,4BACE,kKAAA,CACA,+NAAA,CACA,qLDrBJ,CC0BI,uXAKE,4GAAA,CACA,+JAAA,CACA,yHD5BN,CG/CA,kCFkFE,YACE,mCAAA,CACA,kCAAA,CACA,iCAAA,CACA,2BDhCF,CACF,CGhEA,kCFqGE,YACE,+DAAA,CAEA,qCDnCF,CCuCA,mBACE,YDrCF,CACF,CACF,CD/EI,oBEyHF,YACE,uOAAA,CACA,mNAAA,CACA,0OAAA,CACA,sNAAA,CAEA,yNC3HoB,CD4HpB,qMDxCF,CC4CA,mBAEE,oQChG2B,CD+F3B,+RC/B6B,CDiC7B,2OD1CF,CC4CE,yBACE,sRAAA,CACA,2RD1CJ,CC+CA,qBACE,6OCQwB,CDPxB,qTD7CF,CC+CE,6BACE,0TAAA,CACA,0YD7CJ,CCgDE,mCACE,wTAAA,CACA,sYD9CJ,CCiDE,2BACE,gRAAA,CACA,8VD/CJ,CCkDE,4BACE,+TAAA,CACA,8YDhDJ,CCqDI,uXAKE,mRAAA,CACA,oWDvDN,CACF","file":"navigation.css"}
1
+ {"version":3,"sourceRoot":null,"mappings":"AESI,wBC2LF,wIASE,iCAIE,kFAKA,kFAOJ,oiEAYE,8FAOF,y2BEjNI,4gBAAA,0gBAAA,4VAAA,yhBAAA,27ECRJ,iCHiPE,kJG1PF,iCHoQE,mHAOA,kCDhRA,oBCwRF,w2BAyBA,oyBE3RI,s8BAAA,o8BAAA,02BAAA,m9BAAA,isFF0SJ,yjBE1SI,gsBAAA,8rBAAA,smBAAA,usBAAA","sources":["dist/css/component/navigation.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/component/navigation/_index.scss","var/www/html/packages/core/src/scss/component/navigation/_variables.scss","var/www/html/packages/core/src/scss/mixins/_state.scss","var/www/html/packages/core/src/scss/mixins/_screen.scss"],"sourcesContent":["@charset \"UTF-8\";\n/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */\n@layer graupl.component {\n .navigation {\n display: grid;\n grid-template-areas: \"branding - toggle\" \"menu menu menu\";\n grid-template-columns: auto 1fr auto;\n isolation: isolate;\n }\n .navigation .menu {\n grid-area: menu;\n }\n .navigation .menu.show {\n --graupl-menu-display: var(--graupl-menu-show-display, flex);\n }\n .navigation .menu.hide {\n --graupl-menu-display: var(--graupl-menu-hide-display, none);\n }\n .navigation-toggle {\n display: flex;\n grid-area: toggle;\n align-items: center;\n justify-content: center;\n min-width: var(--graupl-navigation-toggle-min-width, 44px);\n min-height: var(--graupl-navigation-toggle-min-height, 44px);\n padding: var(--graupl-navigation-toggle-padding, var(--graupl-navigation-toggle-padding-y, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))) var(--graupl-navigation-toggle-padding-x, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))));\n border-width: var(--graupl-navigation-toggle-border-width, var(--graupl-navigation-toggle-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))) var(--graupl-navigation-toggle-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))) var(--graupl-navigation-toggle-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))) var(--graupl-navigation-toggle-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem))));\n border-style: var(--graupl-navigation-toggle-border-style, var(--graupl-navigation-toggle-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-navigation-toggle-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-navigation-toggle-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-navigation-toggle-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n border-radius: var(--graupl-navigation-toggle-border-radius, var(--graupl-navigation-toggle-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-navigation-toggle-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-navigation-toggle-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-navigation-toggle-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))));\n }\n .navigation-toggle::before {\n content: var(--graupl-navigation-toggle-content, '☰');\n display: block;\n }\n .navigation-branding {\n display: flex;\n grid-area: branding;\n align-items: center;\n justify-content: flex-start;\n padding: var(--graupl-navigation-branding-padding, var(--graupl-navigation-branding-padding-y, var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem)))) var(--graupl-navigation-branding-padding-x, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))));\n font-size: var(--graupl-navigation-branding-font-size, var(--graupl-font-lg, calc(1.2 * var(--graupl-font-size-base, 1rem))));\n font-weight: var(--graupl-navigation-branding-font-weight, var(--graupl-font-weight-bold, var(--graupl-font-weight-bold, 700)));\n text-decoration: var(--graupl-navigation-branding-text-decoration, none);\n text-decoration-style: var(--graupl-navigation-branding-text-decoration-style, solid);\n text-decoration-thickness: var(--graupl-navigation-branding-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n }\n .navigation-branding:visited {\n text-decoration: var(--graupl-navigation-branding-visited-text-decoration, var(--graupl-navigation-branding-text-decoration, none));\n text-decoration-thickness: var(--graupl-navigation-branding-visited-text-decoration-thickness, var(--graupl-navigation-branding-text-decoration-thickness, var(--graupl-border-width, 0.125rem)));\n text-decoration-style: var(--graupl-navigation-branding-visited-text-decoration-style, var(--graupl-navigation-branding-text-decoration-style, solid));\n }\n .navigation-branding.visited {\n text-decoration: var(--graupl-navigation-branding-visited-text-decoration, var(--graupl-navigation-branding-text-decoration, none));\n text-decoration-thickness: var(--graupl-navigation-branding-visited-text-decoration-thickness, var(--graupl-navigation-branding-text-decoration-thickness, var(--graupl-border-width, 0.125rem)));\n text-decoration-style: var(--graupl-navigation-branding-visited-text-decoration-style, var(--graupl-navigation-branding-text-decoration-style, solid));\n }\n .navigation-branding:focus-visible {\n text-decoration: var(--graupl-navigation-branding-focus-text-decoration, var(--graupl-navigation-branding-text-decoration, none));\n text-decoration-thickness: var(--graupl-navigation-branding-focus-text-decoration-thickness, var(--graupl-navigation-branding-text-decoration-thickness, var(--graupl-border-width, 0.125rem)));\n text-decoration-style: var(--graupl-navigation-branding-focus-text-decoration-style, var(--graupl-navigation-branding-text-decoration-style, solid));\n }\n .navigation-branding.focus {\n text-decoration: var(--graupl-navigation-branding-focus-text-decoration, var(--graupl-navigation-branding-text-decoration, none));\n text-decoration-thickness: var(--graupl-navigation-branding-focus-text-decoration-thickness, var(--graupl-navigation-branding-text-decoration-thickness, var(--graupl-border-width, 0.125rem)));\n text-decoration-style: var(--graupl-navigation-branding-focus-text-decoration-style, var(--graupl-navigation-branding-text-decoration-style, solid));\n }\n .navigation-branding:hover {\n text-decoration: var(--graupl-navigation-branding-hover-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-hover-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-hover-text-decoration-style, solid);\n }\n .navigation-branding.hover {\n text-decoration: var(--graupl-navigation-branding-hover-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-hover-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-hover-text-decoration-style, solid);\n }\n .navigation-branding:active {\n text-decoration: var(--graupl-navigation-branding-active-text-decoration, var(--graupl-navigation-branding-hover-text-decoration, none));\n text-decoration-thickness: var(--graupl-navigation-branding-active-text-decoration-thickness, var(--graupl-navigation-branding-hover-text-decoration-thickness, var(--graupl-border-width, 0.125rem)));\n text-decoration-style: var(--graupl-navigation-branding-active-text-decoration-style, var(--graupl-navigation-branding-hover-text-decoration-style, solid));\n }\n .navigation-branding.active {\n text-decoration: var(--graupl-navigation-branding-active-text-decoration, var(--graupl-navigation-branding-hover-text-decoration, none));\n text-decoration-thickness: var(--graupl-navigation-branding-active-text-decoration-thickness, var(--graupl-navigation-branding-hover-text-decoration-thickness, var(--graupl-border-width, 0.125rem)));\n text-decoration-style: var(--graupl-navigation-branding-active-text-decoration-style, var(--graupl-navigation-branding-hover-text-decoration-style, solid));\n }\n .navigation-branding:disabled {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding:disabled:visited {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding:disabled.visited {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding:disabled:focus-visible {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding:disabled.focus {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding:disabled:hover {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding:disabled.hover {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding:disabled:active {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding:disabled.active {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding:disabled[aria-selected=true] {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding:disabled.selected {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding:disabled[aria-current=true] {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding:disabled.current {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding[disabled] {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding[disabled]:visited {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding[disabled].visited {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding[disabled]:focus-visible {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding[disabled].focus {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding[disabled]:hover {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding[disabled].hover {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding[disabled]:active {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding[disabled].active {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding[disabled][aria-selected=true] {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding[disabled].selected {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding[disabled][aria-current=true] {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding[disabled].current {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding[aria-disabled=true] {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding[aria-disabled=true]:visited {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding[aria-disabled=true].visited {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding[aria-disabled=true]:focus-visible {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding[aria-disabled=true].focus {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding[aria-disabled=true]:hover {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding[aria-disabled=true].hover {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding[aria-disabled=true]:active {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding[aria-disabled=true].active {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding[aria-disabled=true][aria-selected=true] {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding[aria-disabled=true].selected {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding[aria-disabled=true][aria-current=true] {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding[aria-disabled=true].current {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding.disabled {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding.disabled:visited {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding.disabled.visited {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding.disabled:focus-visible {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding.disabled.focus {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding.disabled:hover {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding.disabled.hover {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding.disabled:active {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding.disabled.active {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding.disabled[aria-selected=true] {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding.disabled.selected {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding.disabled[aria-current=true] {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n .navigation-branding.disabled.current {\n text-decoration: var(--graupl-navigation-branding-disabled-text-decoration, none);\n text-decoration-thickness: var(--graupl-navigation-branding-disabled-text-decoration-thickness, var(--graupl-border-width, 0.125rem));\n text-decoration-style: var(--graupl-navigation-branding-disabled-text-decoration-style, solid);\n }\n @media screen and (width <= 767px) {\n .navigation {\n --graupl-menu-flex-direction: column;\n --graupl-submenu-position: relative;\n --graupl-menu-item-min-width: 100%;\n --graupl-submenu-inset: auto;\n }\n }\n @media screen and (768px <= width) {\n .navigation {\n --graupl-menu-hide-display: var(--graupl-menu-show-display, flex);\n grid-template-areas: \"branding - menu\";\n }\n .navigation-toggle {\n display: none;\n }\n }\n}\n@layer graupl.theme {\n .navigation {\n --graupl-menu-background: var(--graupl-navigation-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-menu-color: var(--graupl-navigation-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-navigation-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-navigation-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 .navigation-toggle {\n border-color: var(--graupl-navigation-toggle-border-color, var(--graupl-navigation-toggle-color, var(--graupl-navigation-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-navigation-toggle-background, var(--graupl-navigation-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-navigation-toggle-color, var(--graupl-navigation-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 .navigation-toggle:visited {\n border-color: var(--graupl-navigation-toggle-visited-border-color, var(--graupl-navigation-toggle-border-color, var(--graupl-navigation-toggle-color, var(--graupl-navigation-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-navigation-toggle-visited-background, var(--graupl-navigation-toggle-background, var(--graupl-navigation-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-navigation-toggle-visited-color, var(--graupl-navigation-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 .navigation-toggle.visited {\n border-color: var(--graupl-navigation-toggle-visited-border-color, var(--graupl-navigation-toggle-border-color, var(--graupl-navigation-toggle-color, var(--graupl-navigation-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-navigation-toggle-visited-background, var(--graupl-navigation-toggle-background, var(--graupl-navigation-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-navigation-toggle-visited-color, var(--graupl-navigation-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 .navigation-toggle:focus-visible {\n border-color: var(--graupl-navigation-toggle-focus-border-color, var(--graupl-navigation-toggle-border-color, var(--graupl-navigation-toggle-color, var(--graupl-navigation-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-navigation-toggle-focus-background, var(--graupl-navigation-toggle-background, var(--graupl-navigation-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-navigation-toggle-focus-color, var(--graupl-navigation-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 .navigation-toggle.focus {\n border-color: var(--graupl-navigation-toggle-focus-border-color, var(--graupl-navigation-toggle-border-color, var(--graupl-navigation-toggle-color, var(--graupl-navigation-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-navigation-toggle-focus-background, var(--graupl-navigation-toggle-background, var(--graupl-navigation-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-navigation-toggle-focus-color, var(--graupl-navigation-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 .navigation-toggle:hover {\n border-color: var(--graupl-navigation-toggle-hover-border-color, var(--graupl-navigation-toggle-hover-color, var(--graupl-navigation-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-navigation-toggle-hover-background, var(--graupl-navigation-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-navigation-toggle-hover-color, var(--graupl-navigation-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 .navigation-toggle.hover {\n border-color: var(--graupl-navigation-toggle-hover-border-color, var(--graupl-navigation-toggle-hover-color, var(--graupl-navigation-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-navigation-toggle-hover-background, var(--graupl-navigation-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-navigation-toggle-hover-color, var(--graupl-navigation-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 .navigation-toggle:active {\n border-color: var(--graupl-navigation-toggle-active-border-color, var(--graupl-navigation-toggle-hover-border-color, var(--graupl-navigation-toggle-hover-color, var(--graupl-navigation-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-navigation-toggle-active-background, var(--graupl-navigation-toggle-hover-background, var(--graupl-navigation-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-navigation-toggle-active-color, var(--graupl-navigation-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 .navigation-toggle.active {\n border-color: var(--graupl-navigation-toggle-active-border-color, var(--graupl-navigation-toggle-hover-border-color, var(--graupl-navigation-toggle-hover-color, var(--graupl-navigation-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-navigation-toggle-active-background, var(--graupl-navigation-toggle-hover-background, var(--graupl-navigation-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-navigation-toggle-active-color, var(--graupl-navigation-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 .navigation-toggle:disabled {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle:disabled:visited {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle:disabled.visited {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle:disabled:focus-visible {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle:disabled.focus {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle:disabled:hover {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle:disabled.hover {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle:disabled:active {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle:disabled.active {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle:disabled[aria-selected=true] {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle:disabled.selected {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle:disabled[aria-current=true] {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle:disabled.current {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle[disabled] {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle[disabled]:visited {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle[disabled].visited {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle[disabled]:focus-visible {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle[disabled].focus {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle[disabled]:hover {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle[disabled].hover {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle[disabled]:active {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle[disabled].active {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle[disabled][aria-selected=true] {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle[disabled].selected {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle[disabled][aria-current=true] {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle[disabled].current {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle[aria-disabled=true] {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle[aria-disabled=true]:visited {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle[aria-disabled=true].visited {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle[aria-disabled=true]:focus-visible {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle[aria-disabled=true].focus {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle[aria-disabled=true]:hover {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle[aria-disabled=true].hover {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle[aria-disabled=true]:active {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle[aria-disabled=true].active {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle[aria-disabled=true][aria-selected=true] {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle[aria-disabled=true].selected {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle[aria-disabled=true][aria-current=true] {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle[aria-disabled=true].current {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle.disabled {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle.disabled:visited {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle.disabled.visited {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle.disabled:focus-visible {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle.disabled.focus {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle.disabled:hover {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle.disabled.hover {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle.disabled:active {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle.disabled.active {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle.disabled[aria-selected=true] {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle.disabled.selected {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle.disabled[aria-current=true] {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-toggle.disabled.current {\n border-color: var(--graupl-navigation-toggle-disabled-border-color, var(--graupl-navigation-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-navigation-toggle-disabled-background, var(--graupl-navigation-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-navigation-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .navigation-branding {\n color: var(--graupl-navigation-branding-color, var(--graupl-navigation-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 text-decoration-color: var(--graupl-navigation-branding-text-decoration-color, var(--graupl-navigation-branding-color, var(--graupl-navigation-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 .navigation-branding:visited {\n color: var(--graupl-navigation-branding-visited-color, var(--graupl-navigation-branding-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-visited-text-decoration-color, var(--graupl-navigation-branding-visited-color, var(--graupl-navigation-branding-color, var(--graupl-navigation-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 .navigation-branding.visited {\n color: var(--graupl-navigation-branding-visited-color, var(--graupl-navigation-branding-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-visited-text-decoration-color, var(--graupl-navigation-branding-visited-color, var(--graupl-navigation-branding-color, var(--graupl-navigation-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 .navigation-branding:focus-visible {\n color: var(--graupl-navigation-branding-focus-color, var(--graupl-navigation-branding-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-focus-text-decoration-color, var(--graupl-navigation-branding-focus-color, var(--graupl-navigation-branding-color, var(--graupl-navigation-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 .navigation-branding.focus {\n color: var(--graupl-navigation-branding-focus-color, var(--graupl-navigation-branding-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-focus-text-decoration-color, var(--graupl-navigation-branding-focus-color, var(--graupl-navigation-branding-color, var(--graupl-navigation-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 .navigation-branding:hover {\n color: var(--graupl-navigation-branding-hover-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-hover-text-decoration-color, var(--graupl-navigation-branding-hover-color, var(--graupl-navigation-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 .navigation-branding.hover {\n color: var(--graupl-navigation-branding-hover-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-hover-text-decoration-color, var(--graupl-navigation-branding-hover-color, var(--graupl-navigation-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 .navigation-branding:active {\n color: var(--graupl-navigation-branding-active-color, var(--graupl-navigation-branding-hover-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-active-text-decoration-color, var(--graupl-navigation-branding-active-color, var(--graupl-navigation-branding-hover-color, var(--graupl-navigation-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 .navigation-branding.active {\n color: var(--graupl-navigation-branding-active-color, var(--graupl-navigation-branding-hover-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-active-text-decoration-color, var(--graupl-navigation-branding-active-color, var(--graupl-navigation-branding-hover-color, var(--graupl-navigation-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 .navigation-branding:disabled {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding:disabled:visited {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding:disabled.visited {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding:disabled:focus-visible {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding:disabled.focus {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding:disabled:hover {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding:disabled.hover {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding:disabled:active {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding:disabled.active {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding:disabled[aria-selected=true] {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding:disabled.selected {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding:disabled[aria-current=true] {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding:disabled.current {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding[disabled] {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding[disabled]:visited {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding[disabled].visited {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding[disabled]:focus-visible {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding[disabled].focus {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding[disabled]:hover {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding[disabled].hover {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding[disabled]:active {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding[disabled].active {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding[disabled][aria-selected=true] {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding[disabled].selected {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding[disabled][aria-current=true] {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding[disabled].current {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding[aria-disabled=true] {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding[aria-disabled=true]:visited {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding[aria-disabled=true].visited {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding[aria-disabled=true]:focus-visible {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding[aria-disabled=true].focus {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding[aria-disabled=true]:hover {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding[aria-disabled=true].hover {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding[aria-disabled=true]:active {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding[aria-disabled=true].active {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding[aria-disabled=true][aria-selected=true] {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding[aria-disabled=true].selected {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding[aria-disabled=true][aria-current=true] {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding[aria-disabled=true].current {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding.disabled {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding.disabled:visited {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding.disabled.visited {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding.disabled:focus-visible {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding.disabled.focus {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding.disabled:hover {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding.disabled.hover {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding.disabled:active {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding.disabled.active {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding.disabled[aria-selected=true] {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding.disabled.selected {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding.disabled[aria-current=true] {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 .navigation-branding.disabled.current {\n color: var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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 text-decoration: var(--graupl-navigation-branding-disabled-text-decoration-color, var(--graupl-navigation-branding-disabled-color, var(--graupl-navigation-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}","// @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 navigation component styles.\n//\n// This module provides the navigation bar styles and its toggle/branding elements.\n//\n// The following selectors are generated by default:\n// - `.navigation`: The navigation container.\n// - `.navigation-toggle`: The navigation toggle control.\n// - `.navigation-branding`: The branding link/label.\n//\n// The following custom properties can be used to customize the navigation component:\n// | Property | Description | Default Value |\n// | ----------------------------------------------------------------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | `--graupl-navigation-background` | Background colour of the navigation bar. | `var(--graupl-background)` |\n// | `--graupl-navigation-color` | Text colour of the navigation bar. | `var(--graupl-color)` |\n// | `--graupl-navigation-toggle-min-width` | Minimum width of the toggle control. | `44px` |\n// | `--graupl-navigation-toggle-min-height` | Minimum height of the toggle control. | `44px` |\n// | `--graupl-navigation-toggle-padding-x` | Horizontal padding inside the toggle. | `var(--graupl-spacer-5)` |\n// | `--graupl-navigation-toggle-padding-y` | Vertical padding inside the toggle. | `var(--graupl-spacer-3)` |\n// | `--graupl-navigation-toggle-padding` | Shorthand padding for the toggle. | `var(--graupl-navigation-toggle-padding-y) var(--graupl-navigation-toggle-padding-x)` |\n// | `--graupl-navigation-toggle-background` | Background colour of the toggle. | `var(--graupl-navigation-background)` |\n// | `--graupl-navigation-toggle-visited-background` | Background when the toggle is visited. | `var(--graupl-navigation-toggle-background)` |\n// | `--graupl-navigation-toggle-focus-background` | Background when the toggle is focused. | `var(--graupl-navigation-toggle-background)` |\n// | `--graupl-navigation-toggle-hover-background` | Background when the toggle is hovered. | `var(--graupl-navigation-color)` |\n// | `--graupl-navigation-toggle-active-background` | Background when the toggle is active. | `var(--graupl-navigation-toggle-hover-background)` |\n// | `--graupl-navigation-toggle-disabled-background` | Background when the toggle is disabled. | `var(--graupl-navigation-background)` |\n// | `--graupl-navigation-toggle-color` | Text colour of the toggle. | `var(--graupl-navigation-color)` |\n// | `--graupl-navigation-toggle-visited-color` | Text colour of a visited toggle. | `var(--graupl-navigation-background)` |\n// | `--graupl-navigation-toggle-focus-color` | Text colour of a focused toggle. | `var(--graupl-navigation-background)` |\n// | `--graupl-navigation-toggle-hover-color` | Text colour of a hovered toggle. | `var(--graupl-navigation-background)` |\n// | `--graupl-navigation-toggle-active-color` | Text colour of an active toggle. | `var(--graupl-navigation-background)` |\n// | `--graupl-navigation-toggle-disabled-color` | Text colour of a disabled toggle. | `var(--graupl-theme-active--primary--200)` |\n// | `--graupl-navigation-toggle-border-top-width` | Top border width of the toggle. | `var(--graupl-border-top-width)` |\n// | `--graupl-navigation-toggle-border-right-width` | Right border width of the toggle. | `var(--graupl-border-right-width)` |\n// | `--graupl-navigation-toggle-border-bottom-width` | Bottom border width of the toggle. | `var(--graupl-border-bottom-width)` |\n// | `--graupl-navigation-toggle-border-left-width` | Left border width of the toggle. | `var(--graupl-border-left-width)` |\n// | `--graupl-navigation-toggle-border-width` | Border width shorthand for the toggle. | `var(--graupl-navigation-toggle-border-top-width) var(--graupl-navigation-toggle-border-right-width) var(--graupl-navigation-toggle-border-bottom-width) var(--graupl-navigation-toggle-border-left-width)` |\n// | `--graupl-navigation-toggle-border-top-style` | Top border style of the toggle. | `var(--graupl-border-top-style)` |\n// | `--graupl-navigation-toggle-border-right-style` | Right border style of the toggle. | `var(--graupl-border-right-style)` |\n// | `--graupl-navigation-toggle-border-bottom-style` | Bottom border style of the toggle. | `var(--graupl-border-bottom-style)` |\n// | `--graupl-navigation-toggle-border-left-style` | Left border style of the toggle. | `var(--graupl-border-left-style)` |\n// | `--graupl-navigation-toggle-border-style` | Border style shorthand for the toggle. | `var(--graupl-navigation-toggle-border-top-style) var(--graupl-navigation-toggle-border-right-style) var(--graupl-navigation-toggle-border-bottom-style) var(--graupl-navigation-toggle-border-left-style)` |\n// | `--graupl-navigation-toggle-border-color` | Base border colour of the toggle. | `var(--graupl-navigation-toggle-color)` |\n// | `--graupl-navigation-toggle-visited-border-color` | Border colour of a visited toggle. | `var(--graupl-navigation-toggle-border-color)` |\n// | `--graupl-navigation-toggle-focus-border-color` | Border colour of a focused toggle. | `var(--graupl-navigation-toggle-border-color)` |\n// | `--graupl-navigation-toggle-hover-border-color` | Border colour of a hovered toggle. | `var(--graupl-navigation-toggle-hover-color)` |\n// | `--graupl-navigation-toggle-active-border-color` | Border colour of an active toggle. | `var(--graupl-navigation-toggle-hover-border-color)` |\n// | `--graupl-navigation-toggle-disabled-border-color` | Border colour of a disabled toggle. | `var(--graupl-navigation-toggle-disabled-color)` |\n// | `--graupl-navigation-toggle-border-top-left-radius` | Top-left border radius of the toggle. | `var(--graupl-border-top-left-radius)` |\n// | `--graupl-navigation-toggle-border-top-right-radius` | Top-right border radius of the toggle. | `var(--graupl-border-top-right-radius)` |\n// | `--graupl-navigation-toggle-border-bottom-right-radius` | Bottom-right border radius of the toggle. | `var(--graupl-border-bottom-right-radius)` |\n// | `--graupl-navigation-toggle-border-bottom-left-radius` | Bottom-left border radius of the toggle. | `var(--graupl-border-bottom-left-radius)` |\n// | `--graupl-navigation-toggle-border-radius` | Border radius shorthand for the toggle. | `var(--graupl-navigation-toggle-border-top-left-radius) var(--graupl-navigation-toggle-border-top-right-radius) var(--graupl-navigation-toggle-border-bottom-right-radius) var(--graupl-navigation-toggle-border-bottom-left-radius)` |\n// | `--graupl-navigation-branding-padding-x` | Horizontal padding for the branding element. | `var(--graupl-spacer-3)` |\n// | `--graupl-navigation-branding-padding-y` | Vertical padding for the branding element. | `var(--graupl-spacer-2)` |\n// | `--graupl-navigation-branding-padding` | Shorthand padding for the branding element. | `var(--graupl-navigation-branding-padding-y) var(--graupl-navigation-branding-padding-x)` |\n// | `--graupl-navigation-branding-font-size` | Font size of the branding element. | `var(--graupl-font-lg)` |\n// | `--graupl-navigation-branding-font-weight` | Font weight of the branding element. | `var(--graupl-font-weight-bold)` |\n// | `--graupl-navigation-branding-color` | Text colour for branding. | `var(--graupl-navigation-color)` |\n// | `--graupl-navigation-branding-visited-color` | Text colour for visited branding. | `var(--graupl-navigation-branding-color)` |\n// | `--graupl-navigation-branding-focus-color` | Text colour for focused branding. | `var(--graupl-navigation-branding-color)` |\n// | `--graupl-navigation-branding-hover-color` | Text colour for hovered branding. | `var(--graupl-navigation-color)` |\n// | `--graupl-navigation-branding-active-color` | Text colour for active branding. | `var(--graupl-navigation-branding-hover-color)` |\n// | `--graupl-navigation-branding-disabled-color` | Text colour for disabled branding. | `var(--graupl-navigation-color)` |\n// | `--graupl-navigation-branding-text-decoration` | Base text decoration for branding. | `none` |\n// | `--graupl-navigation-branding-visited-text-decoration` | Text decoration for visited branding. | `var(--graupl-navigation-branding-text-decoration)` |\n// | `--graupl-navigation-branding-focus-text-decoration` | Text decoration for focused branding. | `var(--graupl-navigation-branding-text-decoration)` |\n// | `--graupl-navigation-branding-hover-text-decoration` | Text decoration for hovered branding. | `none` |\n// | `--graupl-navigation-branding-active-text-decoration` | Text decoration for active branding. | `var(--graupl-navigation-branding-hover-text-decoration)` |\n// | `--graupl-navigation-branding-disabled-text-decoration` | Text decoration for disabled branding. | `none` |\n// | `--graupl-navigation-branding-text-decoration-style` | Base text decoration style for branding. | `solid` |\n// | `--graupl-navigation-branding-visited-text-decoration-style` | Text decoration style for visited branding. | `var(--graupl-navigation-branding-text-decoration-style)` |\n// | `--graupl-navigation-branding-focus-text-decoration-style` | Text decoration style for focused branding. | `var(--graupl-navigation-branding-text-decoration-style)` |\n// | `--graupl-navigation-branding-hover-text-decoration-style` | Text decoration style for hovered branding. | `solid` |\n// | `--graupl-navigation-branding-active-text-decoration-style` | Text decoration style for active branding. | `var(--graupl-navigation-branding-hover-text-decoration-style)` |\n// | `--graupl-navigation-branding-disabled-text-decoration-style` | Text decoration style for disabled branding. | `solid` |\n// | `--graupl-navigation-branding-text-decoration-thickness` | Base decoration thickness for branding. | `var(--graupl-border-width)` |\n// | `--graupl-navigation-branding-visited-text-decoration-thickness` | Decoration thickness for visited branding. | `var(--graupl-navigation-branding-text-decoration-thickness)` |\n// | `--graupl-navigation-branding-focus-text-decoration-thickness` | Decoration thickness for focused branding. | `var(--graupl-navigation-branding-text-decoration-thickness)` |\n// | `--graupl-navigation-branding-hover-text-decoration-thickness` | Decoration thickness for hovered branding. | `var(--graupl-border-width)` |\n// | `--graupl-navigation-branding-active-text-decoration-thickness` | Decoration thickness for active branding. | `var(--graupl-navigation-branding-hover-text-decoration-thickness)` |\n// | `--graupl-navigation-branding-disabled-text-decoration-thickness` | Decoration thickness for disabled branding. | `var(--graupl-border-width)` |\n// | `--graupl-navigation-branding-text-decoration-color` | Base decoration colour for branding. | `var(--graupl-navigation-branding-color)` |\n// | `--graupl-navigation-branding-visited-text-decoration-color` | Decoration colour for visited branding. | `var(--graupl-navigation-branding-visited-color)` |\n// | `--graupl-navigation-branding-focus-text-decoration-color` | Decoration colour for focused branding. | `var(--graupl-navigation-branding-focus-color)` |\n// | `--graupl-navigation-branding-hover-text-decoration-color` | Decoration colour for hovered branding. | `var(--graupl-navigation-branding-hover-color)` |\n// | `--graupl-navigation-branding-active-text-decoration-color` | Decoration colour for active branding. | `var(--graupl-navigation-branding-active-color)` |\n// | `--graupl-navigation-branding-disabled-text-decoration-color` | Decoration colour for disabled branding. | `var(--graupl-navigation-branding-disabled-color)` |\n// | `--graupl-navigation-toggle-content` | Content used for the toggle pseudo-element. | `'☰'` |\n//\n// The following sass variables can be used to customize the generation of the navigation 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` | Flag to generate the base theme maps for navigation variants. | `true` |\n// | `$themeable` | Flag to generate theme modifiers. | `false` |\n// | `$navigation-selector-base` | Selector base for the navigation container. | `$selector-base` |\n// | `$navigation-selector` | Selector for the navigation container. | `\"navigation\"` |\n// | `$navigation-theme-selector-base` | Selector base for navigation theme modifiers. | `$modifier-selector-base` |\n// | `$navigation-theme-selector-prefix` | Selector prefix for navigation theme modifiers. | `\"\"` |\n// | `$navigation-toggle-selector-base` | Selector base for the navigation toggle. | `$selector-base` |\n// | `$navigation-toggle-selector` | Selector for the navigation toggle. | `\"navigation-toggle\"` |\n// | `$navigation-branding-selector-base` | Selector base for the navigation branding. | `$selector-base` |\n// | `$navigation-branding-selector` | Selector for the navigation branding. | `\"navigation-branding\"` |\n// | `$navigation-toggle-content` | Content for the toggle pseudo-element. | `'☰'` |\n// | `$navigation-theme-mappings` | A map of properties and shade values applied to navigation variants. | `()` |\n// | `$navigation-theme-map` | A fully expanded property map used to generate navigation variants. | `()` |\n//\n// ## Using `$navigation-theme-mappings`\n//\n// `$navigation-theme-mappings` is a single-level map of properties and shade values.\n//\n// e.g.\n// ```scss\n// $navigation-theme-mappings: (\n// color: 900,\n// background: 100,\n// );\n// ```\n//\n// This directly[1] informs all navigation variants what shade to use for each property key.\n// Based on the example above:\n// - Primary navigations expose `--graupl-navigation-color` as `var(--graupl-theme-active--primary--900)` and `--graupl-navigation-background` as `var(--graupl-theme-active--primary--100)`,\n// - Secondary navigations expose those properties via the secondary palette, and\n// - Tertiary navigations expose those properties via the tertiary palette.\n//\n// You can target multiple properties at once to keep every variant in sync.\n//\n// ```scss\n// $navigation-theme-mappings: (\n// color: 800,\n// toggle-hover-background: 700,\n// );\n// ```\n//\n// - Primary navigations use `--graupl-theme-active--primary--800` for `--graupl-navigation-color` and `--graupl-theme-active--primary--700` for `--graupl-navigation-toggle-hover-background`.\n// - Secondary/tertiary navigations pull the same shades from their respective palettes.\n//\n// [1] `$navigation-theme-mappings` gets parsed into a larger, more explicit map: `$navigation-theme-map`.\n//\n// ## Using `$navigation-theme-map`\n//\n// `$navigation-theme-map` is a multi-level map of properties, colours, and shade values, allowing you to override individual variants without affecting the others.\n//\n// e.g.\n// ```scss\n// $navigation-theme-map: (\n// primary: (\n// color: (\n// color: primary,\n// shade: 950,\n// ),\n// ),\n// secondary: (\n// background: (\n// color: secondary,\n// shade: 200,\n// ),\n// ),\n// );\n// ```\n//\n// This example keeps the default behaviour for tertiary navigations, while deepening the colour on the primary variant and lightening the background on the secondary variant.\n//\n// @example\n// <nav class=\"navigation\" data-graupl-menu-type=\"DisclosureMenu\" data-graupl-menu-options=\"{'optionalKeySupport': true}\">\n// <a class=\"navigation-branding\" href=\"#\">Graupl</a>\n// <button class=\"navigation-toggle\" aria-label=\"Toggle navigation\"></button>\n// <ul class=\"menu\">\n// <li class=\"menu-item\"><a class=\"menu-link\" href=\"#\">Home</a></li>\n// <li class=\"menu-item submenu-item\">\n// <button class=\"menu-link button link submenu-toggle\" type=\"button\">About</button>\n// <ul class=\"submenu\">\n// <li class=\"menu-item\"><a class=\"menu-link\" href=\"#\">About Us</a></li>\n// <li class=\"menu-item\"><a class=\"menu-link\" href=\"#\">Our Team</a></li>\n// <li class=\"menu-item\"><a class=\"menu-link\" href=\"#\">Our Mission</a></li>\n// </ul>\n// </li>\n// <li class=\"menu-item\"><a class=\"menu-link\" href=\"#\">Blog</a></li>\n// <li class=\"menu-item\"><a class=\"menu-link\" href=\"#\">Portfolio</a></li>\n// <li class=\"menu-item\"><a class=\"menu-link button tertiary\" href=\"#\">Contact</a></li>\n// </ul>\n// </nav>\n\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/layer\" as *;\n@use \"../../mixins/screen\";\n@use \"../../mixins/state\";\n@use \"../../mixins/theme\";\n@use \"../menu/defaults\" as menu-defaults;\n@use \"../menu/variables\" as menu-variables;\n@use \"defaults\";\n@use \"variables\" as *;\n\n@include layer(component) {\n // .navigation\n #{defaults.$navigation-selector-base}#{defaults.$navigation-selector} {\n display: grid;\n grid-template-areas:\n \"branding - toggle\"\n \"menu menu menu\";\n grid-template-columns: auto 1fr auto;\n isolation: isolate;\n\n // .menu\n #{menu-defaults.$menu-selector-base}#{menu-defaults.$menu-selector} {\n grid-area: menu;\n\n // &.show\n &#{menu-defaults.$menu-show-selector-base}#{menu-defaults.$menu-show-selector} {\n --#{root-defaults.$prefix}menu-display: #{menu-variables.$menu-show-display};\n }\n\n // &.hide\n &#{menu-defaults.$menu-hide-selector-base}#{menu-defaults.$menu-hide-selector} {\n --#{root-defaults.$prefix}menu-display: #{menu-variables.$menu-hide-display};\n }\n }\n }\n\n // .navigation-toggle\n #{defaults.$navigation-toggle-selector-base}#{defaults.$navigation-toggle-selector} {\n display: flex;\n grid-area: toggle;\n align-items: center;\n justify-content: center;\n min-width: $navigation-toggle-min-width;\n min-height: $navigation-toggle-min-height;\n padding: $navigation-toggle-padding;\n border-width: $navigation-toggle-border-width;\n border-style: $navigation-toggle-border-style;\n border-radius: $navigation-toggle-border-radius;\n\n &::before {\n content: $navigation-toggle-content;\n display: block;\n }\n }\n\n // .navigation-branding\n #{defaults.$navigation-branding-selector-base}#{defaults.$navigation-branding-selector} {\n display: flex;\n grid-area: branding;\n align-items: center;\n justify-content: flex-start;\n padding: $navigation-branding-padding;\n font-size: $navigation-branding-font-size;\n font-weight: $navigation-branding-font-weight;\n text-decoration: $navigation-branding-text-decoration;\n text-decoration-style: $navigation-branding-text-decoration-style;\n text-decoration-thickness: $navigation-branding-text-decoration-thickness;\n\n @include state.generate-modifiers(\n (\n text-decoration: $navigation-branding-text-decoration-states,\n text-decoration-thickness:\n $navigation-branding-text-decoration-thickness-states,\n text-decoration-style: $navigation-branding-text-decoration-style-states,\n )\n );\n }\n\n @include screen.trigger(navigation-collapse) {\n // .navigation\n #{defaults.$navigation-selector-base}#{defaults.$navigation-selector} {\n --#{root-defaults.$prefix}menu-flex-direction: column;\n --#{root-defaults.$prefix}submenu-position: relative;\n --#{root-defaults.$prefix}menu-item-min-width: 100%;\n --#{root-defaults.$prefix}submenu-inset: auto;\n }\n }\n\n @include screen.trigger(navigation-expand) {\n // .navigation\n #{defaults.$navigation-selector-base}#{defaults.$navigation-selector} {\n --#{root-defaults.$prefix}menu-hide-display: #{menu-variables.$menu-show-display};\n\n grid-template-areas: \"branding - menu\";\n }\n\n // .navigation-toggle\n #{defaults.$navigation-toggle-selector-base}#{defaults.$navigation-toggle-selector} {\n display: none;\n }\n }\n}\n\n@include layer(theme) {\n // .navigation\n #{defaults.$navigation-selector-base}#{defaults.$navigation-selector} {\n --#{root-defaults.$prefix}menu-background: #{$navigation-background};\n --#{root-defaults.$prefix}menu-color: #{$navigation-color};\n\n background: $navigation-background;\n color: $navigation-color;\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$navigation-theme-map,\n defaults.$navigation-theme-selector-base,\n defaults.$navigation-theme-selector-prefix,\n \"navigation-\"\n );\n @include theme.generate-modifiers(\n defaults.$navigation-theme-map,\n defaults.$navigation-theme-selector-base,\n defaults.$navigation-theme-selector-prefix,\n \"navigation-\",\n \"\"\n );\n }\n }\n\n // .navigation-toggle\n #{defaults.$navigation-toggle-selector-base}#{defaults.$navigation-toggle-selector} {\n border-color: $navigation-toggle-border-color;\n background: $navigation-toggle-background;\n color: $navigation-toggle-color;\n\n @include state.generate-modifiers(\n (\n border-color: $navigation-toggle-border-color-states,\n background: $navigation-toggle-background-states,\n color: $navigation-toggle-color-states,\n )\n );\n }\n\n // .navigation-branding\n #{defaults.$navigation-branding-selector-base}#{defaults.$navigation-branding-selector} {\n color: $navigation-branding-color;\n text-decoration-color: $navigation-branding-text-decoration-color;\n\n @include state.generate-modifiers(\n (\n color: $navigation-branding-color-states,\n text-decoration: $navigation-branding-text-decoration-color-states,\n )\n );\n }\n}\n","// @graupl/core navigation 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// | Custom property | Default |\n// | --------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | Custom property | Default |\n// | --------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | --graupl-navigation-background | var(--graupl-background) |\n// | --graupl-navigation-color | var(--graupl-color) |\n// | --graupl-navigation-toggle-min-width | 44px |\n// | --graupl-navigation-toggle-min-height | 44px |\n// | --graupl-navigation-toggle-padding-x | var(--graupl-spacer-5) |\n// | --graupl-navigation-toggle-padding-y | var(--graupl-spacer-3) |\n// | --graupl-navigation-toggle-padding | var(--graupl-navigation-toggle-padding-y) var(--graupl-navigation-toggle-padding-x) |\n// | --graupl-navigation-toggle-background | var(--graupl-navigation-background) |\n// | --graupl-navigation-toggle-color | var(--graupl-navigation-color) |\n// | --graupl-navigation-toggle-hover-background | var(--graupl-navigation-color) |\n// | --graupl-navigation-toggle-hover-color | var(--graupl-navigation-background) |\n// | --graupl-navigation-toggle-border-top-width | var(--graupl-border-top-width) |\n// | --graupl-navigation-toggle-border-right-width | var(--graupl-border-right-width) |\n// | --graupl-navigation-toggle-border-bottom-width | var(--graupl-border-bottom-width) |\n// | --graupl-navigation-toggle-border-left-width | var(--graupl-border-left-width) |\n// | --graupl-navigation-toggle-border-width | var(--graupl-navigation-toggle-border-top-width) var(--graupl-navigation-toggle-border-right-width) var(--graupl-navigation-toggle-border-bottom-width) var(--graupl-navigation-toggle-border-left-width) |\n// | --graupl-navigation-toggle-border-top-style | var(--graupl-border-top-style) |\n// | --graupl-navigation-toggle-border-right-style | var(--graupl-border-right-style) |\n// | --graupl-navigation-toggle-border-bottom-style | var(--graupl-border-bottom-style) |\n// | --graupl-navigation-toggle-border-left-style | var(--graupl-border-left-style) |\n// | --graupl-navigation-toggle-border-style | var(--graupl-navigation-toggle-border-top-style) var(--graupl-navigation-toggle-border-right-style) var(--graupl-navigation-toggle-border-bottom-style) var(--graupl-navigation-toggle-border-left-style) |\n// | --graupl-navigation-toggle-border-color | var(--graupl-navigation-toggle-color) |\n// | --graupl-navigation-toggle-border-top-left-radius | var(--graupl-border-top-left-radius) |\n// | --graupl-navigation-toggle-border-top-right-radius | var(--graupl-border-top-right-radius) |\n// | --graupl-navigation-toggle-border-bottom-left-radius | var(--graupl-border-bottom-left-radius) |\n// | --graupl-navigation-toggle-border-bottom-right-radius | var(--graupl-border-bottom-right-radius) |\n// | --graupl-navigation-toggle-border-radius | var(--graupl-navigation-toggle-border-top-left-radius) var(--graupl-navigation-toggle-border-top-right-radius) var(--graupl-navigation-toggle-border-bottom-right-radius) var(--graupl-navigation-toggle-border-bottom-left-radius) |\n// | --graupl-navigation-branding-font-size | var(--graupl-font-lg) |\n// | --graupl-navigation-branding-font-weight | var(--graupl-font-weight-bold) |\n// | --graupl-navigation-branding-padding-x | var(--graupl-spacer-3) |\n// | --graupl-navigation-branding-padding-y | var(--graupl-spacer-2) |\n// | --graupl-navigation-branding-padding | var(--graupl-navigation-branding-padding-y) var(--graupl-navigation-branding-padding-x) |\n// | --graupl-navigation-branding-color | var(--graupl-navigation-color) |\n// | --graupl-navigation-branding-visited-color | var(--graupl-navigation-branding-color) |\n// | --graupl-navigation-branding-focus-color | var(--graupl-navigation-branding-color) |\n// | --graupl-navigation-branding-hover-color | var(--graupl-navigation-color) |\n// | --graupl-navigation-branding-active-color | var(--graupl-navigation-branding-hover-color) |\n// | --graupl-navigation-branding-disabled-color | var(--graupl-navigation-color) |\n// | --graupl-navigation-branding-text-decoration | none |\n// | --graupl-navigation-branding-visited-text-decoration | var(--graupl-navigation-branding-text-decoration) |\n// | --graupl-navigation-branding-focus-text-decoration | var(--graupl-navigation-branding-text-decoration) |\n// | --graupl-navigation-branding-hover-text-decoration | none |\n// | --graupl-navigation-branding-active-text-decoration | var(--graupl-navigation-branding-hover-text-decoration) |\n// | --graupl-navigation-branding-disabled-text-decoration | none |\n// | --graupl-navigation-branding-text-decoration-style | solid |\n// | --graupl-navigation-branding-visited-text-decoration-style | var(--graupl-navigation-branding-text-decoration-style) |\n// | --graupl-navigation-branding-focus-text-decoration-style | var(--graupl-navigation-branding-text-decoration-style) |\n// | --graupl-navigation-branding-hover-text-decoration-style | solid |\n// | --graupl-navigation-branding-active-text-decoration-style | var(--graupl-navigation-branding-hover-text-decoration-style) |\n// | --graupl-navigation-branding-disabled-text-decoration-style | solid |\n// | --graupl-navigation-branding-text-decoration-thickness | var(--graupl-border-width) |\n// | --graupl-navigation-branding-visited-text-decoration-thickness | var(--graupl-navigation-branding-text-decoration-thickness) |\n// | --graupl-navigation-branding-focus-text-decoration-thickness | var(--graupl-navigation-branding-text-decoration-thickness) |\n// | --graupl-navigation-branding-hover-text-decoration-thickness | var(--graupl-border-width) |\n// | --graupl-navigation-branding-active-text-decoration-thickness | var(--graupl-navigation-branding-hover-text-decoration-thickness) |\n// | --graupl-navigation-branding-disabled-text-decoration-thickness | var(--graupl-border-width) |\n// | --graupl-navigation-branding-text-decoration-color | var(--graupl-navigation-branding-color) |\n// | --graupl-navigation-branding-visited-text-decoration-color | var(--graupl-navigation-branding-visited-color) |\n// | --graupl-navigation-branding-focus-text-decoration-color | var(--graupl-navigation-branding-focus-color) |\n// | --graupl-navigation-branding-hover-text-decoration-color | var(--graupl-navigation-branding-hover-color) |\n// | --graupl-navigation-branding-active-text-decoration-color | var(--graupl-navigation-branding-active-color) |\n// | --graupl-navigation-branding-disabled-text-decoration-color | var(--graupl-navigation-branding-disabled-color) |\n// | --graupl-navigation-toggle-content | \"'☰'\" |\n\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// Navigation colors.\n// --graupl-navigation-background\n$navigation-background: var(\n --#{root-defaults.$prefix}navigation-background,\n #{color.$background}\n);\n\n// --graupl-navigation-color\n$navigation-color: var(\n --#{root-defaults.$prefix}navigation-color,\n #{color.$color}\n);\n\n// Navigation toggle size.\n// --graupl-navigation-toggle-min-width\n$navigation-toggle-min-width: var(\n --#{root-defaults.$prefix}navigation-toggle-min-width,\n #{root-defaults.$interactive-min-width}\n);\n\n// --graupl-navigation-toggle-min-height\n$navigation-toggle-min-height: var(\n --#{root-defaults.$prefix}navigation-toggle-min-height,\n #{root-defaults.$interactive-min-height}\n);\n\n// Navigation toggle spacing.\n// --graupl-navigation-toggle-padding-x\n$navigation-toggle-padding-x: var(\n --#{root-defaults.$prefix}navigation-toggle-padding-x,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-navigation-toggle-padding-y\n$navigation-toggle-padding-y: var(\n --#{root-defaults.$prefix}navigation-toggle-padding-y,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-navigation-toggle-padding\n$navigation-toggle-padding: var(\n --#{root-defaults.$prefix}navigation-toggle-padding,\n #{$navigation-toggle-padding-y} #{$navigation-toggle-padding-x}\n);\n\n// Navigation toggle colors.\n// --graupl-navigation-toggle-background\n$navigation-toggle-background: var(\n --#{root-defaults.$prefix}navigation-toggle-background,\n #{$navigation-background}\n);\n\n// --graupl-navigation-toggle-visited-background\n$navigation-toggle-visited-background: var(\n --#{root-defaults.$prefix}navigation-toggle-visited-background,\n #{$navigation-toggle-background}\n);\n\n// --graupl-navigation-toggle-focus-background\n$navigation-toggle-focus-background: var(\n --#{root-defaults.$prefix}navigation-toggle-focus-background,\n #{$navigation-toggle-background}\n);\n\n// --graupl-navigation-toggle-hover-background\n$navigation-toggle-hover-background: var(\n --#{root-defaults.$prefix}navigation-toggle-hover-background,\n #{$navigation-color}\n);\n\n// --graupl-navigation-toggle-active-background\n$navigation-toggle-active-background: var(\n --#{root-defaults.$prefix}navigation-toggle-active-background,\n #{$navigation-toggle-hover-background}\n);\n\n// --graupl-navigation-toggle-disabled-background\n$navigation-toggle-disabled-background: var(\n --#{root-defaults.$prefix}navigation-toggle-disabled-background,\n #{$navigation-background}\n);\n$navigation-toggle-background-states: (\n default: $navigation-toggle-background,\n visited: $navigation-toggle-visited-background,\n focus: $navigation-toggle-focus-background,\n hover: $navigation-toggle-hover-background,\n active: $navigation-toggle-active-background,\n disabled: $navigation-toggle-disabled-background,\n);\n\n// --graupl-navigation-toggle-color\n$navigation-toggle-color: var(\n --#{root-defaults.$prefix}navigation-toggle-color,\n #{$navigation-color}\n);\n\n// --graupl-navigation-toggle-visited-color\n$navigation-toggle-visited-color: var(\n --#{root-defaults.$prefix}navigation-toggle-visited-color,\n #{$navigation-background}\n);\n\n// --graupl-navigation-toggle-focus-color\n$navigation-toggle-focus-color: var(\n --#{root-defaults.$prefix}navigation-toggle-focus-color,\n #{$navigation-background}\n);\n\n// --graupl-navigation-toggle-hover-color\n$navigation-toggle-hover-color: var(\n --#{root-defaults.$prefix}navigation-toggle-hover-color,\n #{$navigation-background}\n);\n\n// --graupl-navigation-toggle-active-color\n$navigation-toggle-active-color: var(\n --#{root-defaults.$prefix}navigation-toggle-active-color,\n #{$navigation-background}\n);\n\n// --graupl-navigation-toggle-disabled-color\n$navigation-toggle-disabled-color: var(\n --#{root-defaults.$prefix}navigation-toggle-disabled-color,\n #{theme.get(primary, 200)}\n);\n$navigation-toggle-color-states: (\n default: $navigation-toggle-color,\n visited: $navigation-toggle-visited-color,\n focus: $navigation-toggle-focus-color,\n hover: $navigation-toggle-hover-color,\n active: $navigation-toggle-active-color,\n disabled: $navigation-toggle-disabled-color,\n);\n\n// Navigation toggle border properties.\n// --graupl-navigation-toggle-border-top-width\n$navigation-toggle-border-top-width: var(\n --#{root-defaults.$prefix}navigation-toggle-border-top-width,\n #{root-variables.$border-top-width}\n);\n\n// --graupl-navigation-toggle-border-right-width\n$navigation-toggle-border-right-width: var(\n --#{root-defaults.$prefix}navigation-toggle-border-right-width,\n #{root-variables.$border-right-width}\n);\n\n// --graupl-navigation-toggle-border-bottom-width\n$navigation-toggle-border-bottom-width: var(\n --#{root-defaults.$prefix}navigation-toggle-border-bottom-width,\n #{root-variables.$border-bottom-width}\n);\n\n// --graupl-navigation-toggle-border-left-width\n$navigation-toggle-border-left-width: var(\n --#{root-defaults.$prefix}navigation-toggle-border-left-width,\n #{root-variables.$border-left-width}\n);\n\n// --graupl-navigation-toggle-border-width\n$navigation-toggle-border-width: var(\n --#{root-defaults.$prefix}navigation-toggle-border-width,\n #{$navigation-toggle-border-top-width}\n #{$navigation-toggle-border-right-width}\n #{$navigation-toggle-border-bottom-width}\n #{$navigation-toggle-border-left-width}\n);\n\n// --graupl-navigation-toggle-border-top-style\n$navigation-toggle-border-top-style: var(\n --#{root-defaults.$prefix}navigation-toggle-border-top-style,\n #{root-variables.$border-top-style}\n);\n\n// --graupl-navigation-toggle-border-right-style\n$navigation-toggle-border-right-style: var(\n --#{root-defaults.$prefix}navigation-toggle-border-right-style,\n #{root-variables.$border-right-style}\n);\n\n// --graupl-navigation-toggle-border-bottom-style\n$navigation-toggle-border-bottom-style: var(\n --#{root-defaults.$prefix}navigation-toggle-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n\n// --graupl-navigation-toggle-border-left-style\n$navigation-toggle-border-left-style: var(\n --#{root-defaults.$prefix}navigation-toggle-border-left-style,\n #{root-variables.$border-left-style}\n);\n\n// --graupl-navigation-toggle-border-style\n$navigation-toggle-border-style: var(\n --#{root-defaults.$prefix}navigation-toggle-border-style,\n #{$navigation-toggle-border-top-style}\n #{$navigation-toggle-border-right-style}\n #{$navigation-toggle-border-bottom-style}\n #{$navigation-toggle-border-left-style}\n);\n\n// --graupl-navigation-toggle-border-color\n$navigation-toggle-border-color: var(\n --#{root-defaults.$prefix}navigation-toggle-border-color,\n #{$navigation-toggle-color}\n);\n\n// --graupl-navigation-toggle-visited-border-color\n$navigation-toggle-visited-border-color: var(\n --#{root-defaults.$prefix}navigation-toggle-visited-border-color,\n #{$navigation-toggle-border-color}\n);\n\n// --graupl-navigation-toggle-focus-border-color\n$navigation-toggle-focus-border-color: var(\n --#{root-defaults.$prefix}navigation-toggle-focus-border-color,\n #{$navigation-toggle-border-color}\n);\n\n// --graupl-navigation-toggle-hover-border-color\n$navigation-toggle-hover-border-color: var(\n --#{root-defaults.$prefix}navigation-toggle-hover-border-color,\n #{$navigation-toggle-hover-color}\n);\n\n// --graupl-navigation-toggle-active-border-color\n$navigation-toggle-active-border-color: var(\n --#{root-defaults.$prefix}navigation-toggle-active-border-color,\n #{$navigation-toggle-hover-border-color}\n);\n\n// --graupl-navigation-toggle-disabled-border-color\n$navigation-toggle-disabled-border-color: var(\n --#{root-defaults.$prefix}navigation-toggle-disabled-border-color,\n #{$navigation-toggle-disabled-color}\n);\n$navigation-toggle-border-color-states: (\n default: $navigation-toggle-border-color,\n visited: $navigation-toggle-visited-border-color,\n focus: $navigation-toggle-focus-border-color,\n hover: $navigation-toggle-hover-border-color,\n active: $navigation-toggle-active-border-color,\n disabled: $navigation-toggle-disabled-border-color,\n);\n\n// --graupl-navigation-toggle-border-top-left-radius\n$navigation-toggle-border-top-left-radius: var(\n --#{root-defaults.$prefix}navigation-toggle-border-top-left-radius,\n #{root-variables.$border-top-left-radius}\n);\n\n// --graupl-navigation-toggle-border-top-right-radius\n$navigation-toggle-border-top-right-radius: var(\n --#{root-defaults.$prefix}navigation-toggle-border-top-right-radius,\n #{root-variables.$border-top-right-radius}\n);\n\n// --graupl-navigation-toggle-border-bottom-left-radius\n$navigation-toggle-border-bottom-left-radius: var(\n --#{root-defaults.$prefix}navigation-toggle-border-bottom-left-radius,\n #{root-variables.$border-bottom-left-radius}\n);\n\n// --graupl-navigation-toggle-border-bottom-right-radius\n$navigation-toggle-border-bottom-right-radius: var(\n --#{root-defaults.$prefix}navigation-toggle-border-bottom-right-radius,\n #{root-variables.$border-bottom-right-radius}\n);\n\n// --graupl-navigation-toggle-border-radius\n$navigation-toggle-border-radius: var(\n --#{root-defaults.$prefix}navigation-toggle-border-radius,\n #{$navigation-toggle-border-top-left-radius}\n #{$navigation-toggle-border-top-right-radius}\n #{$navigation-toggle-border-bottom-right-radius}\n #{$navigation-toggle-border-bottom-left-radius}\n);\n\n// Navigation branding properties.\n// --graupl-navigation-branding-font-size\n$navigation-branding-font-size: var(\n --#{root-defaults.$prefix}navigation-branding-font-size,\n #{map.get(typography.$font-sizes, \"lg\")}\n);\n\n// --graupl-navigation-branding-font-weight\n$navigation-branding-font-weight: var(\n --#{root-defaults.$prefix}navigation-branding-font-weight,\n #{typography.$font-weight-bold}\n);\n\n// --graupl-navigation-branding-padding-x\n$navigation-branding-padding-x: var(\n --#{root-defaults.$prefix}navigation-branding-padding-x,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-navigation-branding-padding-y\n$navigation-branding-padding-y: var(\n --#{root-defaults.$prefix}navigation-branding-padding-y,\n #{map.get(root-variables.$spacers, 2)}\n);\n\n// --graupl-navigation-branding-padding\n$navigation-branding-padding: var(\n --#{root-defaults.$prefix}navigation-branding-padding,\n #{$navigation-branding-padding-y} #{$navigation-branding-padding-x}\n);\n\n// Navigation branding colors.\n// --graupl-navigation-branding-color\n$navigation-branding-color: var(\n --#{root-defaults.$prefix}navigation-branding-color,\n #{$navigation-color}\n);\n\n// --graupl-navigation-branding-visited-color\n$navigation-branding-visited-color: var(\n --#{root-defaults.$prefix}navigation-branding-visited-color,\n #{$navigation-branding-color}\n);\n\n// --graupl-navigation-branding-focus-color\n$navigation-branding-focus-color: var(\n --#{root-defaults.$prefix}navigation-branding-focus-color,\n #{$navigation-branding-color}\n);\n\n// --graupl-navigation-branding-hover-color\n$navigation-branding-hover-color: var(\n --#{root-defaults.$prefix}navigation-branding-hover-color,\n #{$navigation-color}\n);\n\n// --graupl-navigation-branding-active-color\n$navigation-branding-active-color: var(\n --#{root-defaults.$prefix}navigation-branding-active-color,\n #{$navigation-branding-hover-color}\n);\n\n// --graupl-navigation-branding-disabled-color\n$navigation-branding-disabled-color: var(\n --#{root-defaults.$prefix}navigation-branding-disabled-color,\n #{$navigation-color}\n);\n$navigation-branding-color-states: (\n default: $navigation-branding-color,\n visited: $navigation-branding-visited-color,\n focus: $navigation-branding-focus-color,\n hover: $navigation-branding-hover-color,\n active: $navigation-branding-active-color,\n disabled: $navigation-branding-disabled-color,\n);\n\n// Navigation branding text decoration properties.\n// --graupl-navigation-branding-text-decoration\n$navigation-branding-text-decoration: var(\n --#{root-defaults.$prefix}navigation-branding-text-decoration,\n #{defaults.$navigation-branding-initial-text-decoration}\n);\n\n// --graupl-navigation-branding-visited-text-decoration\n$navigation-branding-visited-text-decoration: var(\n --#{root-defaults.$prefix}navigation-branding-visited-text-decoration,\n #{$navigation-branding-text-decoration}\n);\n\n// --graupl-navigation-branding-focus-text-decoration\n$navigation-branding-focus-text-decoration: var(\n --#{root-defaults.$prefix}navigation-branding-focus-text-decoration,\n #{$navigation-branding-text-decoration}\n);\n\n// --graupl-navigation-branding-hover-text-decoration\n$navigation-branding-hover-text-decoration: var(\n --#{root-defaults.$prefix}navigation-branding-hover-text-decoration,\n #{defaults.$navigation-branding-final-text-decoration}\n);\n\n// --graupl-navigation-branding-active-text-decoration\n$navigation-branding-active-text-decoration: var(\n --#{root-defaults.$prefix}navigation-branding-active-text-decoration,\n #{$navigation-branding-hover-text-decoration}\n);\n\n// --graupl-navigation-branding-disabled-text-decoration\n$navigation-branding-disabled-text-decoration: var(\n --#{root-defaults.$prefix}navigation-branding-disabled-text-decoration,\n #{defaults.$navigation-branding-disabled-text-decoration}\n);\n$navigation-branding-text-decoration-states: (\n default: $navigation-branding-text-decoration,\n visited: $navigation-branding-visited-text-decoration,\n focus: $navigation-branding-focus-text-decoration,\n hover: $navigation-branding-hover-text-decoration,\n active: $navigation-branding-active-text-decoration,\n disabled: $navigation-branding-disabled-text-decoration,\n);\n\n// --graupl-navigation-branding-text-decoration-style\n$navigation-branding-text-decoration-style: var(\n --#{root-defaults.$prefix}navigation-branding-text-decoration-style,\n #{defaults.$navigation-branding-initial-text-decoration-style}\n);\n\n// --graupl-navigation-branding-visited-text-decoration-style\n$navigation-branding-visited-text-decoration-style: var(\n --#{root-defaults.$prefix}navigation-branding-visited-text-decoration-style,\n #{$navigation-branding-text-decoration-style}\n);\n\n// --graupl-navigation-branding-focus-text-decoration-style\n$navigation-branding-focus-text-decoration-style: var(\n --#{root-defaults.$prefix}navigation-branding-focus-text-decoration-style,\n #{$navigation-branding-text-decoration-style}\n);\n\n// --graupl-navigation-branding-hover-text-decoration-style\n$navigation-branding-hover-text-decoration-style: var(\n --#{root-defaults.$prefix}navigation-branding-hover-text-decoration-style,\n #{defaults.$navigation-branding-final-text-decoration-style}\n);\n\n// --graupl-navigation-branding-active-text-decoration-style\n$navigation-branding-active-text-decoration-style: var(\n --#{root-defaults.$prefix}navigation-branding-active-text-decoration-style,\n #{$navigation-branding-hover-text-decoration-style}\n);\n\n// --graupl-navigation-branding-disabled-text-decoration-style\n$navigation-branding-disabled-text-decoration-style: var(\n --#{root-defaults.$prefix}navigation-branding-disabled-text-decoration-style,\n #{defaults.$navigation-branding-disabled-text-decoration-style}\n);\n$navigation-branding-text-decoration-style-states: (\n default: $navigation-branding-text-decoration-style,\n visited: $navigation-branding-visited-text-decoration-style,\n focus: $navigation-branding-focus-text-decoration-style,\n hover: $navigation-branding-hover-text-decoration-style,\n active: $navigation-branding-active-text-decoration-style,\n disabled: $navigation-branding-disabled-text-decoration-style,\n);\n\n// --graupl-navigation-branding-text-decoration-thickness\n$navigation-branding-text-decoration-thickness: var(\n --#{root-defaults.$prefix}navigation-branding-text-decoration-thickness,\n #{root-variables.$border-width}\n);\n\n// --graupl-navigation-branding-visited-text-decoration-thickness\n$navigation-branding-visited-text-decoration-thickness: var(\n --#{root-defaults.$prefix}navigation-branding-visited-text-decoration-thickness,\n #{$navigation-branding-text-decoration-thickness}\n);\n\n// --graupl-navigation-branding-focus-text-decoration-thickness\n$navigation-branding-focus-text-decoration-thickness: var(\n --#{root-defaults.$prefix}navigation-branding-focus-text-decoration-thickness,\n #{$navigation-branding-text-decoration-thickness}\n);\n\n// --graupl-navigation-branding-hover-text-decoration-thickness\n$navigation-branding-hover-text-decoration-thickness: var(\n --#{root-defaults.$prefix}navigation-branding-hover-text-decoration-thickness,\n #{root-variables.$border-width}\n);\n\n// --graupl-navigation-branding-active-text-decoration-thickness\n$navigation-branding-active-text-decoration-thickness: var(\n --#{root-defaults.$prefix}navigation-branding-active-text-decoration-thickness,\n #{$navigation-branding-hover-text-decoration-thickness}\n);\n\n// --graupl-navigation-branding-disabled-text-decoration-thickness\n$navigation-branding-disabled-text-decoration-thickness: var(\n --#{root-defaults.$prefix}navigation-branding-disabled-text-decoration-thickness,\n #{root-variables.$border-width}\n);\n$navigation-branding-text-decoration-thickness-states: (\n default: $navigation-branding-text-decoration-thickness,\n visited: $navigation-branding-visited-text-decoration-thickness,\n focus: $navigation-branding-focus-text-decoration-thickness,\n hover: $navigation-branding-hover-text-decoration-thickness,\n active: $navigation-branding-active-text-decoration-thickness,\n disabled: $navigation-branding-disabled-text-decoration-thickness,\n);\n\n// --graupl-navigation-branding-text-decoration-color\n$navigation-branding-text-decoration-color: var(\n --#{root-defaults.$prefix}navigation-branding-text-decoration-color,\n #{$navigation-branding-color}\n);\n\n// --graupl-navigation-branding-visited-text-decoration-color\n$navigation-branding-visited-text-decoration-color: var(\n --#{root-defaults.$prefix}navigation-branding-visited-text-decoration-color,\n #{$navigation-branding-visited-color}\n);\n\n// --graupl-navigation-branding-focus-text-decoration-color\n$navigation-branding-focus-text-decoration-color: var(\n --#{root-defaults.$prefix}navigation-branding-focus-text-decoration-color,\n #{$navigation-branding-focus-color}\n);\n\n// --graupl-navigation-branding-hover-text-decoration-color\n$navigation-branding-hover-text-decoration-color: var(\n --#{root-defaults.$prefix}navigation-branding-hover-text-decoration-color,\n #{$navigation-branding-hover-color}\n);\n\n// --graupl-navigation-branding-active-text-decoration-color\n$navigation-branding-active-text-decoration-color: var(\n --#{root-defaults.$prefix}navigation-branding-active-text-decoration-color,\n #{$navigation-branding-active-color}\n);\n\n// --graupl-navigation-branding-disabled-text-decoration-color\n$navigation-branding-disabled-text-decoration-color: var(\n --#{root-defaults.$prefix}navigation-branding-disabled-text-decoration-color,\n #{$navigation-branding-disabled-color}\n);\n$navigation-branding-text-decoration-color-states: (\n default: $navigation-branding-text-decoration-color,\n visited: $navigation-branding-visited-text-decoration-color,\n focus: $navigation-branding-focus-text-decoration-color,\n hover: $navigation-branding-hover-text-decoration-color,\n active: $navigation-branding-active-text-decoration-color,\n disabled: $navigation-branding-disabled-text-decoration-color,\n);\n\n// Navigation toggle properties.\n// --graupl-navigation-toggle-content\n$navigation-toggle-content: var(\n --#{root-defaults.$prefix}navigation-toggle-content,\n #{defaults.$navigation-toggle-content}\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 screen mixins.\n//\n// A series of mixins to generate breakpoints.\n\n// @use \"../defaults\" as root-defaults;\n@use \"../functions/screen\";\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n@use \"sass:meta\";\n\n// A mixin to generate a minimum screen width media query.\n@mixin up($size) {\n $screen-size: screen.min($size);\n\n @media screen and (#{$screen-size} <= width) {\n @content;\n }\n}\n\n// A mixin to generate a maximum screen width media query.\n@mixin down($size) {\n $screen-size: screen.max($size);\n\n @media screen and (width <= #{$screen-size}) {\n @content;\n }\n}\n\n// A mixin to generate a range of screen widths media query.\n@mixin between($min, $max) {\n $screen-size: screen.range($min, $max);\n $min: map.get($screen-size, \"min\");\n $max: map.get($screen-size, \"max\");\n\n @media screen and (#{$min} <= width <= #{$max}) {\n @content;\n }\n}\n\n@mixin only($size) {\n @include between($size, $size) {\n @content;\n }\n}\n\n@mixin trigger($trigger) {\n @if not map.has-key(root-defaults.$screen-size-triggers, $trigger) {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not exist.\";\n }\n\n $screen-size-trigger: map.get(root-defaults.$screen-size-triggers, $trigger);\n\n @if not map.has-key($screen-size-trigger, \"mixin\") {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not have a mixin key.\";\n }\n\n @if not map.has-key($screen-size-trigger, \"args\") {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not have an args key.\";\n }\n\n $mixin-name: map.get($screen-size-trigger, \"mixin\");\n $mixin-args: map.get($screen-size-trigger, \"args\");\n\n @if not meta.mixin-exists($mixin-name) {\n @error \"The mixin \\\"#{$mixin-name}\\\" does not exist.\";\n }\n\n $mixin: meta.get-mixin($mixin-name);\n\n @if meta.accepts-content($mixin) {\n @include meta.apply($mixin, $mixin-args...) {\n @content;\n }\n } @else {\n @warn \"The mixin \\\"#{$mixin-name}\\\" does not accept content.\";\n }\n}\n"],"names":[]}