@graupl/graupl 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 (206) 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 +6 -11
  157. package/scss/base/button.scss +1 -1
  158. package/scss/base/form.scss +1 -1
  159. package/scss/base/link.scss +1 -1
  160. package/scss/base/table.scss +1 -1
  161. package/scss/base.scss +1 -1
  162. package/scss/component/accordion.scss +1 -1
  163. package/scss/component/alert.scss +1 -1
  164. package/scss/component/badge.scss +1 -1
  165. package/scss/component/card.scss +1 -1
  166. package/scss/component/carousel.scss +1 -1
  167. package/scss/component/disclosure.scss +1 -1
  168. package/scss/component/input-group.scss +1 -1
  169. package/scss/component/list.scss +1 -1
  170. package/scss/component/menu.scss +1 -1
  171. package/scss/component/navigation.scss +1 -1
  172. package/scss/component.scss +1 -1
  173. package/scss/graupl.scss +1 -1
  174. package/scss/init.scss +1 -1
  175. package/scss/layout/columns.scss +1 -1
  176. package/scss/layout/container.scss +1 -1
  177. package/scss/layout/flex-columns.scss +1 -1
  178. package/scss/layout.scss +1 -1
  179. package/scss/normalize.scss +1 -1
  180. package/scss/state/focus.scss +1 -1
  181. package/scss/state.scss +1 -1
  182. package/scss/theme/color.scss +1 -1
  183. package/scss/theme/typography.scss +1 -1
  184. package/scss/theme.scss +1 -1
  185. package/scss/utilities/alignment.scss +1 -1
  186. package/scss/utilities/background.scss +1 -1
  187. package/scss/utilities/border.scss +1 -1
  188. package/scss/utilities/color.scss +1 -1
  189. package/scss/utilities/container.scss +1 -1
  190. package/scss/utilities/display.scss +1 -1
  191. package/scss/utilities/flex.scss +1 -1
  192. package/scss/utilities/gradient.scss +1 -1
  193. package/scss/utilities/height.scss +1 -1
  194. package/scss/utilities/inset.scss +1 -1
  195. package/scss/utilities/justification.scss +1 -1
  196. package/scss/utilities/list.scss +1 -1
  197. package/scss/utilities/order.scss +1 -1
  198. package/scss/utilities/position.scss +1 -1
  199. package/scss/utilities/ratio.scss +1 -1
  200. package/scss/utilities/spacing.scss +1 -1
  201. package/scss/utilities/typography.scss +1 -1
  202. package/scss/utilities/visibility.scss +1 -1
  203. package/scss/utilities/visually-hidden.scss +1 -1
  204. package/scss/utilities/width.scss +1 -1
  205. package/scss/utilities/z-index.scss +1 -1
  206. package/scss/utilities.scss +1 -1
package/dist/css/component/alert.css CHANGED
@@ -1,2 +1,2 @@
1
- @layer graupl.base{.alert-dismisser{align-items:center;border-radius:var(--graupl-button-border-radius,var(--graupl-button-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem))) var(--graupl-button-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem))) var(--graupl-button-border-bottom-right-radius,var(--graupl-border-bottom-right-radius,var(--graupl-border-radius,.125rem))) var(--graupl-button-border-bottom-left-radius,var(--graupl-border-bottom-left-radius,var(--graupl-border-radius,.125rem))));border-style:var(--graupl-button-border-style,var(--graupl-button-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid))) var(--graupl-button-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid))) var(--graupl-button-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid))) var(--graupl-button-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-width:var(--graupl-button-border-width,var(--graupl-button-border-top-width,var(--graupl-border-top-width,var(--graupl-border-width,.125rem))) var(--graupl-button-border-right-width,var(--graupl-border-right-width,var(--graupl-border-width,.125rem))) var(--graupl-button-border-bottom-width,var(--graupl-border-bottom-width,var(--graupl-border-width,.125rem))) var(--graupl-button-border-left-width,var(--graupl-border-left-width,var(--graupl-border-width,.125rem))));cursor:pointer;display:flex;font-size:var(--graupl-button-font-size,var(--graupl-font-base,calc(var(--graupl-font-size-base, 1rem)*1)));justify-content:center;min-height:var(--graupl-button-min-height,44px);min-width:var(--graupl-button-min-width,44px);padding:var(--graupl-button-padding,var(--graupl-button-padding-y,var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5))) var(--graupl-button-padding-x,var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))));transform:var(--graupl-button-transform,none);transition:var(--graupl-button-transition,background var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease),color var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease),transform var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease))}.alert-dismisser.visited,.alert-dismisser:visited{transform:var(--graupl-button-visited-transform,var(--graupl-button-transform,none))}.alert-dismisser:focus-visible{transform:var(--graupl-button-focus-transform,var(--graupl-button-transform,none))}.alert-dismisser.focus{transform:var(--graupl-button-focus-transform,var(--graupl-button-transform,none))}.alert-dismisser.hover,.alert-dismisser:hover{transform:var(--graupl-button-hover-transform,var(--graupl-button-transform,none))}.alert-dismisser.active,.alert-dismisser:active{transform:var(--graupl-button-active-transform,scale(.95))}.alert-dismisser:disabled{cursor:not-allowed}.alert-dismisser:disabled,.alert-dismisser:disabled.visited,.alert-dismisser:disabled:visited{transform:var(--graupl-button-disabled-transform,none)}.alert-dismisser:disabled:focus-visible{transform:var(--graupl-button-disabled-transform,none)}.alert-dismisser:disabled.active,.alert-dismisser:disabled.focus,.alert-dismisser:disabled.hover,.alert-dismisser:disabled:active,.alert-dismisser:disabled:hover,.alert-dismisser[disabled]{transform:var(--graupl-button-disabled-transform,none)}.alert-dismisser[disabled]{cursor:not-allowed}.alert-dismisser[disabled].visited,.alert-dismisser[disabled]:visited{transform:var(--graupl-button-disabled-transform,none)}.alert-dismisser[disabled]:focus-visible{transform:var(--graupl-button-disabled-transform,none)}.alert-dismisser[aria-disabled=true],.alert-dismisser[disabled].active,.alert-dismisser[disabled].focus,.alert-dismisser[disabled].hover,.alert-dismisser[disabled]:active,.alert-dismisser[disabled]:hover{transform:var(--graupl-button-disabled-transform,none)}.alert-dismisser[aria-disabled=true]{cursor:not-allowed}.alert-dismisser[aria-disabled=true].visited,.alert-dismisser[aria-disabled=true]:visited{transform:var(--graupl-button-disabled-transform,none)}.alert-dismisser[aria-disabled=true]:focus-visible{transform:var(--graupl-button-disabled-transform,none)}.alert-dismisser.disabled,.alert-dismisser[aria-disabled=true].active,.alert-dismisser[aria-disabled=true].focus,.alert-dismisser[aria-disabled=true].hover,.alert-dismisser[aria-disabled=true]:active,.alert-dismisser[aria-disabled=true]:hover{transform:var(--graupl-button-disabled-transform,none)}.alert-dismisser.disabled{cursor:not-allowed}.alert-dismisser.disabled.visited,.alert-dismisser.disabled:visited{transform:var(--graupl-button-disabled-transform,none)}.alert-dismisser.disabled:focus-visible{transform:var(--graupl-button-disabled-transform,none)}.alert-dismisser.disabled.active,.alert-dismisser.disabled.focus,.alert-dismisser.disabled.hover,.alert-dismisser.disabled:active,.alert-dismisser.disabled:hover{transform:var(--graupl-button-disabled-transform,none)}@media (prefers-reduced-motion:reduce){.alert-dismisser{--graupl-button-transition:var(--graupl-button-transition-reduced-motion,background var(--graupl-transition-timing-function,ease),color var(--graupl-transition-timing-function,ease))}}}@layer graupl.component{.alert{--graupl-button-border:0;border-radius:var(--graupl-alert-border-radius,var(--graupl-alert-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem))) var(--graupl-alert-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem))) var(--graupl-alert-border-bottom-right-radius,var(--graupl-border-bottom-right-radius,var(--graupl-border-radius,.125rem))) var(--graupl-alert-border-bottom-left-radius,var(--graupl-border-bottom-left-radius,var(--graupl-border-radius,.125rem))));border-style:var(--graupl-alert-border-style,var(--graupl-alert-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid))) var(--graupl-alert-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid))) var(--graupl-alert-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid))) var(--graupl-alert-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-width:var(--graupl-alert-border-width,var(--graupl-alert-border-top-width,var(--graupl-border-top-width,var(--graupl-border-width,.125rem))) var(--graupl-alert-border-right-width,var(--graupl-border-right-width,var(--graupl-border-width,.125rem))) var(--graupl-alert-border-bottom-width,var(--graupl-border-bottom-width,var(--graupl-border-width,.125rem))) var(--graupl-alert-border-left-width,var(--graupl-border-left-width,var(--graupl-border-width,.125rem))));display:grid;gap:var(--graupl-alert-gap,var(--graupl-alert-column-gap,var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))) var(--graupl-alert-row-gap,var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5))));grid-template-columns:[content-start] 1fr [content-end dismiss-start] auto [dismiss-end];grid-template-rows:[header-start] auto [header-end body-start] auto [body-end footer-start] auto [footer-end];padding:var(--graupl-alert-padding,var(--graupl-alert-padding-y,var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))) var(--graupl-alert-padding-x,var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))));transition:var(--graupl-alert-transition,opacity var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease),transform var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease))}.alert.hide{display:none}.alert.transitioning{display:grid;opacity:0}.alert.show{display:grid}@media (prefers-reduced-motion:reduce){.alert .alert{--graupl-alert-transition:var(--graupl-alert-transition-reduced-motion,opacity var(--graupl-transition-duration-fast,150ms) var(--graupl-transition-timing-function,ease))}}.alert-header{grid-column:content;grid-row:header;padding:var(--graupl-alert-header-padding,var(--graupl-alert-header-padding-y,0) var(--graupl-alert-header-padding-x,0))}.alert-body{grid-column:content;grid-row:body;padding:var(--graupl-alert-body-padding,var(--graupl-alert-body-padding-y,0) var(--graupl-alert-body-padding-x,0))}.alert-footer{grid-column:content;grid-row:footer;padding:var(--graupl-alert-footer-padding,var(--graupl-alert-footer-padding-y,0) var(--graupl-alert-footer-padding-x,0))}.alert-dismisser{align-self:flex-start;grid-column:dismiss;grid-row:1/-1}.alert-title{margin:var(--graupl-alert-title-margin,0 0 0 0)}}@layer graupl.theme{.alert{--graupl-button-background:var(--graupl-alert-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-button-focus-background:var(--graupl-alert-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-link-color:var(--graupl-alert-link-color);--graupl-link-visited-color:var(--graupl-alert-link-visited-color);--graupl-link-focus-color:var(--graupl-alert-link-focus-color);--graupl-link-hover-color:var(--graupl-alert-link-hover-color);--graupl-link-active-color:var(--graupl-alert-link-active-color);--graupl-link-disabled-color:var(--graupl-alert-link-disabled-color);background-color:var(--graupl-alert-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-alert-border-color,var(--graupl-alert-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-alert-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))))))}.alert.primary{--graupl-alert-color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)));--graupl-alert-background:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)));--graupl-alert-border-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-alert-title-color:var(--graupl-theme-active--primary--800,var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561)));--graupl-alert-button-border-color:transparent;--graupl-alert-link-color:var(--graupl-theme-active--primary--800,var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561)));--graupl-alert-link-visited-color:var(--graupl-theme-active--primary--800,var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561)));--graupl-alert-link-focus-color:var(--graupl-theme-active--primary--800,var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561)));--graupl-alert-link-hover-color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)));--graupl-alert-link-active-color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)));--graupl-alert-link-disabled-color:var(--graupl-theme-active--primary--400,var(--graupl-theme-light--primary--400,var(--graupl-primary--400,#3672e2)))}.alert.secondary{--graupl-alert-color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)));--graupl-alert-background:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)));--graupl-alert-border-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-alert-title-color:var(--graupl-theme-active--secondary--800,var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642)));--graupl-alert-button-border-color:transparent;--graupl-alert-link-color:var(--graupl-theme-active--secondary--800,var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642)));--graupl-alert-link-visited-color:var(--graupl-theme-active--secondary--800,var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642)));--graupl-alert-link-focus-color:var(--graupl-theme-active--secondary--800,var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642)));--graupl-alert-link-hover-color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)));--graupl-alert-link-active-color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)));--graupl-alert-link-disabled-color:var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))}.alert.tertiary{--graupl-alert-color:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)));--graupl-alert-background:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)));--graupl-alert-border-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-alert-title-color:var(--graupl-theme-active--tertiary--800,var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26)));--graupl-alert-button-border-color:transparent;--graupl-alert-link-color:var(--graupl-theme-active--tertiary--800,var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26)));--graupl-alert-link-visited-color:var(--graupl-theme-active--tertiary--800,var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26)));--graupl-alert-link-focus-color:var(--graupl-theme-active--tertiary--800,var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26)));--graupl-alert-link-hover-color:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)));--graupl-alert-link-active-color:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)));--graupl-alert-link-disabled-color:var(--graupl-theme-active--tertiary--400,var(--graupl-theme-light--tertiary--400,var(--graupl-tertiary--400,#d14775)))}.alert-dismisser{background:var(--graupl-button-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));border-color:var(--graupl-button-border-color,var(--graupl-border-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));color:var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))}.alert-dismisser.primary{--graupl-button-color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)));--graupl-button-border-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-hover-color:var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)));--graupl-button-hover-background:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-hover-border-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-disabled-color:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)));--graupl-button-disabled-border-color:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)))}.alert-dismisser.secondary{--graupl-button-color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)));--graupl-button-border-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-hover-color:var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7)));--graupl-button-hover-background:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-hover-border-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-disabled-color:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)));--graupl-button-disabled-border-color:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)))}.alert-dismisser.tertiary{--graupl-button-color:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)));--graupl-button-border-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-hover-color:var(--graupl-theme-active--tertiary--100,var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef)));--graupl-button-hover-background:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-hover-border-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-disabled-color:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)));--graupl-button-disabled-border-color:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)))}.alert-dismisser.visited,.alert-dismisser:visited{background:var(--graupl-button-visited-background,var(--graupl-button-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))));border-color:var(--graupl-button-visited-border-color,var(--graupl-button-border-color,var(--graupl-border-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))));color:var(--graupl-button-visited-color,var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))}.alert-dismisser:focus-visible{background:var(--graupl-button-focus-background,var(--graupl-button-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))));border-color:var(--graupl-button-focus-border-color,var(--graupl-button-border-color,var(--graupl-border-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))));color:var(--graupl-button-focus-color,var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))}.alert-dismisser.focus{background:var(--graupl-button-focus-background,var(--graupl-button-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))));border-color:var(--graupl-button-focus-border-color,var(--graupl-button-border-color,var(--graupl-border-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))));color:var(--graupl-button-focus-color,var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))}.alert-dismisser.hover,.alert-dismisser:hover{background:var(--graupl-button-hover-background,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))));border-color:var(--graupl-button-hover-border-color,var(--graupl-border-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));color:var(--graupl-button-hover-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))))}.alert-dismisser.active,.alert-dismisser:active{background:var(--graupl-button-active-background,var(--graupl-button-hover-background,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));border-color:var(--graupl-button-active-border-color,var(--graupl-button-hover-border-color,var(--graupl-border-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))));color:var(--graupl-button-active-color,var(--graupl-button-hover-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))))}.alert-dismisser:disabled,.alert-dismisser:disabled.visited,.alert-dismisser:disabled:visited{background:var(--graupl-button-disabled-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));border-color:var(--graupl-button-disabled-border-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))));color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.alert-dismisser:disabled:focus-visible{background:var(--graupl-button-disabled-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));border-color:var(--graupl-button-disabled-border-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))));color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.alert-dismisser:disabled.active,.alert-dismisser:disabled.focus,.alert-dismisser:disabled.hover,.alert-dismisser:disabled:active,.alert-dismisser:disabled:hover,.alert-dismisser[disabled],.alert-dismisser[disabled].visited,.alert-dismisser[disabled]:visited{background:var(--graupl-button-disabled-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));border-color:var(--graupl-button-disabled-border-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))));color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.alert-dismisser[disabled]:focus-visible{background:var(--graupl-button-disabled-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));border-color:var(--graupl-button-disabled-border-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))));color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.alert-dismisser[aria-disabled=true],.alert-dismisser[aria-disabled=true].visited,.alert-dismisser[aria-disabled=true]:visited,.alert-dismisser[disabled].active,.alert-dismisser[disabled].focus,.alert-dismisser[disabled].hover,.alert-dismisser[disabled]:active,.alert-dismisser[disabled]:hover{background:var(--graupl-button-disabled-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));border-color:var(--graupl-button-disabled-border-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))));color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.alert-dismisser[aria-disabled=true]:focus-visible{background:var(--graupl-button-disabled-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));border-color:var(--graupl-button-disabled-border-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))));color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.alert-dismisser.disabled,.alert-dismisser.disabled.visited,.alert-dismisser.disabled:visited,.alert-dismisser[aria-disabled=true].active,.alert-dismisser[aria-disabled=true].focus,.alert-dismisser[aria-disabled=true].hover,.alert-dismisser[aria-disabled=true]:active,.alert-dismisser[aria-disabled=true]:hover{background:var(--graupl-button-disabled-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));border-color:var(--graupl-button-disabled-border-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))));color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.alert-dismisser.disabled:focus-visible{background:var(--graupl-button-disabled-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));border-color:var(--graupl-button-disabled-border-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))));color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.alert-dismisser.disabled.active,.alert-dismisser.disabled.focus,.alert-dismisser.disabled.hover,.alert-dismisser.disabled:active,.alert-dismisser.disabled:hover{background:var(--graupl-button-disabled-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));border-color:var(--graupl-button-disabled-border-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))));color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.alert-title{color:var(--graupl-alert-title-color,var(--graupl-alert-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)))))));font-size:var(--graupl-alert-title-font-size,var(--graupl-h4-font-size,var(--graupl-font-2xl,calc(var(--graupl-font-size-base, 1rem)*1.728))));font-weight:var(--graupl-alert-title-font-weight,var(--graupl-h4-font-weight,var(--graupl-heading-font-weight,var(--graupl-font-weight-bold,var(--graupl-font-weight-bold,700)))));line-height:var(--graupl-alert-title-line-height,var(--graupl-h4-line-height,var(--graupl-heading-line-height,var(--graupl-line-height,1.2em))))}}
2
- /*# sourceMappingURL=alert.css.map */
1
+ @layer graupl.base{.alert-dismisser{min-width:var(--graupl-button-min-width,44px);min-height:var(--graupl-button-min-height,44px);padding:var(--graupl-button-padding,var(--graupl-button-padding-y,var(--graupl-spacer-3,calc(.5*var(--graupl-spacer,1rem))))var(--graupl-button-padding-x,var(--graupl-spacer-5,calc(1*var(--graupl-spacer,1rem)))));transform:var(--graupl-button-transform,none);transition:var(--graupl-button-transition,background var(--graupl-transition-duration-fast,.15s)var(--graupl-transition-timing-function,ease),color var(--graupl-transition-duration-fast,.15s)var(--graupl-transition-timing-function,ease),transform var(--graupl-transition-duration-fast,.15s)var(--graupl-transition-timing-function,ease));border-width:var(--graupl-button-border-width,var(--graupl-button-border-top-width,var(--graupl-border-top-width,var(--graupl-border-width,.125rem)))var(--graupl-button-border-right-width,var(--graupl-border-right-width,var(--graupl-border-width,.125rem)))var(--graupl-button-border-bottom-width,var(--graupl-border-bottom-width,var(--graupl-border-width,.125rem)))var(--graupl-button-border-left-width,var(--graupl-border-left-width,var(--graupl-border-width,.125rem))));border-style:var(--graupl-button-border-style,var(--graupl-button-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid)))var(--graupl-button-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid)))var(--graupl-button-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid)))var(--graupl-button-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-radius:var(--graupl-button-border-radius,var(--graupl-button-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem)))var(--graupl-button-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem)))var(--graupl-button-border-bottom-right-radius,var(--graupl-border-bottom-right-radius,var(--graupl-border-radius,.125rem)))var(--graupl-button-border-bottom-left-radius,var(--graupl-border-bottom-left-radius,var(--graupl-border-radius,.125rem))));font-size:var(--graupl-button-font-size,var(--graupl-font-base,calc(1*var(--graupl-font-size-base,1rem))));cursor:pointer;justify-content:center;align-items:center;display:flex}.alert-dismisser:visited,.alert-dismisser.visited{transform:var(--graupl-button-visited-transform,var(--graupl-button-transform,none))}.alert-dismisser:focus-visible,.alert-dismisser.focus{transform:var(--graupl-button-focus-transform,var(--graupl-button-transform,none))}.alert-dismisser:hover,.alert-dismisser.hover{transform:var(--graupl-button-hover-transform,var(--graupl-button-transform,none))}.alert-dismisser:active,.alert-dismisser.active{transform:var(--graupl-button-active-transform,scale(.95))}.alert-dismisser:disabled,.alert-dismisser:disabled:visited,.alert-dismisser:disabled.visited,.alert-dismisser:disabled:focus-visible,.alert-dismisser:disabled.focus,.alert-dismisser:disabled:hover,.alert-dismisser:disabled.hover,.alert-dismisser:disabled:active,.alert-dismisser:disabled.active,.alert-dismisser:disabled[aria-selected=true],.alert-dismisser:disabled.selected,.alert-dismisser:disabled[aria-current=true],.alert-dismisser:disabled.current,.alert-dismisser[disabled],.alert-dismisser[disabled]:visited,.alert-dismisser[disabled].visited,.alert-dismisser[disabled]:focus-visible,.alert-dismisser[disabled].focus,.alert-dismisser[disabled]:hover,.alert-dismisser[disabled].hover,.alert-dismisser[disabled]:active,.alert-dismisser[disabled].active,.alert-dismisser[disabled][aria-selected=true],.alert-dismisser[disabled].selected,.alert-dismisser[disabled][aria-current=true],.alert-dismisser[disabled].current,.alert-dismisser[aria-disabled=true],.alert-dismisser[aria-disabled=true]:visited,.alert-dismisser[aria-disabled=true].visited,.alert-dismisser[aria-disabled=true]:focus-visible,.alert-dismisser[aria-disabled=true].focus,.alert-dismisser[aria-disabled=true]:hover,.alert-dismisser[aria-disabled=true].hover,.alert-dismisser[aria-disabled=true]:active,.alert-dismisser[aria-disabled=true].active,.alert-dismisser[aria-disabled=true][aria-selected=true],.alert-dismisser[aria-disabled=true].selected,.alert-dismisser[aria-disabled=true][aria-current=true],.alert-dismisser[aria-disabled=true].current,.alert-dismisser.disabled,.alert-dismisser.disabled:visited,.alert-dismisser.disabled.visited,.alert-dismisser.disabled:focus-visible,.alert-dismisser.disabled.focus,.alert-dismisser.disabled:hover,.alert-dismisser.disabled.hover,.alert-dismisser.disabled:active,.alert-dismisser.disabled.active,.alert-dismisser.disabled[aria-selected=true],.alert-dismisser.disabled.selected,.alert-dismisser.disabled[aria-current=true],.alert-dismisser.disabled.current{transform:var(--graupl-button-disabled-transform,none)}.alert-dismisser:disabled,.alert-dismisser[disabled],.alert-dismisser[aria-disabled=true],.alert-dismisser.disabled{cursor:not-allowed}@media (prefers-reduced-motion:reduce){.alert-dismisser{--graupl-button-transition:var(--graupl-button-transition-reduced-motion,background var(--graupl-transition-timing-function,ease),color var(--graupl-transition-timing-function,ease))}}}@layer graupl.component{.alert{--graupl-button-border:0;padding:var(--graupl-alert-padding,var(--graupl-alert-padding-y,var(--graupl-spacer-5,calc(1*var(--graupl-spacer,1rem))))var(--graupl-alert-padding-x,var(--graupl-spacer-5,calc(1*var(--graupl-spacer,1rem)))));transition:var(--graupl-alert-transition,opacity var(--graupl-transition-duration-fast,.15s)var(--graupl-transition-timing-function,ease),transform var(--graupl-transition-duration-fast,.15s)var(--graupl-transition-timing-function,ease));border-width:var(--graupl-alert-border-width,var(--graupl-alert-border-top-width,var(--graupl-border-top-width,var(--graupl-border-width,.125rem)))var(--graupl-alert-border-right-width,var(--graupl-border-right-width,var(--graupl-border-width,.125rem)))var(--graupl-alert-border-bottom-width,var(--graupl-border-bottom-width,var(--graupl-border-width,.125rem)))var(--graupl-alert-border-left-width,var(--graupl-border-left-width,var(--graupl-border-width,.125rem))));border-style:var(--graupl-alert-border-style,var(--graupl-alert-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid)))var(--graupl-alert-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid)))var(--graupl-alert-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid)))var(--graupl-alert-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-radius:var(--graupl-alert-border-radius,var(--graupl-alert-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem)))var(--graupl-alert-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem)))var(--graupl-alert-border-bottom-right-radius,var(--graupl-border-bottom-right-radius,var(--graupl-border-radius,.125rem)))var(--graupl-alert-border-bottom-left-radius,var(--graupl-border-bottom-left-radius,var(--graupl-border-radius,.125rem))));gap:var(--graupl-alert-gap,var(--graupl-alert-column-gap,var(--graupl-spacer-0,calc(0*var(--graupl-spacer,1rem))))var(--graupl-alert-row-gap,var(--graupl-spacer-3,calc(.5*var(--graupl-spacer,1rem)))));grid-template-rows:[header-start]auto[header-end body-start]auto[body-end footer-start]auto[footer-end];grid-template-columns:[content-start]1fr[content-end dismiss-start]auto[dismiss-end];display:grid}.alert.hide{display:none}.alert.transitioning{opacity:0;display:grid}.alert.show{display:grid}.alert-header{padding:var(--graupl-alert-header-padding,var(--graupl-alert-header-padding-y,0)var(--graupl-alert-header-padding-x,0));grid-area:header/content}.alert-body{padding:var(--graupl-alert-body-padding,var(--graupl-alert-body-padding-y,0)var(--graupl-alert-body-padding-x,0));grid-area:body/content}.alert-footer{padding:var(--graupl-alert-footer-padding,var(--graupl-alert-footer-padding-y,0)var(--graupl-alert-footer-padding-x,0));grid-area:footer/content}.alert-dismisser{grid-area:1/dismiss/-1;align-self:flex-start}.alert-title{margin:var(--graupl-alert-title-margin,0 0 0 0)}@media (prefers-reduced-motion:reduce){.alert{--graupl-alert-transition:var(--graupl-alert-transition-reduced-motion,opacity var(--graupl-transition-duration-fast,.15s)var(--graupl-transition-timing-function,ease))}}}@layer graupl.theme{.alert{--graupl-button-background:var(--graupl-alert-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-button-focus-background:var(--graupl-alert-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-link-color:var(--graupl-alert-link-color,var(--graupl-link-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)))));--graupl-link-visited-color:var(--graupl-alert-link-visited-color,var(--graupl-alert-link-color,var(--graupl-link-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1))))));--graupl-link-focus-color:var(--graupl-alert-link-focus-color,var(--graupl-alert-link-color,var(--graupl-link-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1))))));--graupl-link-hover-color:var(--graupl-alert-link-hover-color,var(--graupl-link-hover-color,var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)))));--graupl-link-active-color:var(--graupl-alert-link-active-color,var(--graupl-alert-link-hover-color,var(--graupl-link-hover-color,var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46))))));--graupl-link-disabled-color:var(--graupl-alert-link-disabled-color,var(--graupl-link-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)))));border-color:var(--graupl-alert-border-color,var(--graupl-alert-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-color:var(--graupl-alert-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-alert-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))))))}.alert.primary{--graupl-alert-color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)));--graupl-alert-background:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)));--graupl-alert-border-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-alert-title-color:var(--graupl-theme-active--primary--800,var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561)));--graupl-alert-button-border-color:transparent;--graupl-alert-link-color:var(--graupl-theme-active--primary--800,var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561)));--graupl-alert-link-visited-color:var(--graupl-theme-active--primary--800,var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561)));--graupl-alert-link-focus-color:var(--graupl-theme-active--primary--800,var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561)));--graupl-alert-link-hover-color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)));--graupl-alert-link-active-color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)));--graupl-alert-link-disabled-color:var(--graupl-theme-active--primary--400,var(--graupl-theme-light--primary--400,var(--graupl-primary--400,#3672e2)))}.alert.secondary{--graupl-alert-color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)));--graupl-alert-background:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)));--graupl-alert-border-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-alert-title-color:var(--graupl-theme-active--secondary--800,var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642)));--graupl-alert-button-border-color:transparent;--graupl-alert-link-color:var(--graupl-theme-active--secondary--800,var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642)));--graupl-alert-link-visited-color:var(--graupl-theme-active--secondary--800,var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642)));--graupl-alert-link-focus-color:var(--graupl-theme-active--secondary--800,var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642)));--graupl-alert-link-hover-color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)));--graupl-alert-link-active-color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)));--graupl-alert-link-disabled-color:var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))}.alert.tertiary{--graupl-alert-color:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)));--graupl-alert-background:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)));--graupl-alert-border-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-alert-title-color:var(--graupl-theme-active--tertiary--800,var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26)));--graupl-alert-button-border-color:transparent;--graupl-alert-link-color:var(--graupl-theme-active--tertiary--800,var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26)));--graupl-alert-link-visited-color:var(--graupl-theme-active--tertiary--800,var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26)));--graupl-alert-link-focus-color:var(--graupl-theme-active--tertiary--800,var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26)));--graupl-alert-link-hover-color:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)));--graupl-alert-link-active-color:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)));--graupl-alert-link-disabled-color:var(--graupl-theme-active--tertiary--400,var(--graupl-theme-light--tertiary--400,var(--graupl-tertiary--400,#d14775)))}.alert-dismisser{border-color:var(--graupl-button-border-color,var(--graupl-border-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));background:var(--graupl-button-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));color:var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))}.alert-dismisser:visited,.alert-dismisser.visited{border-color:var(--graupl-button-visited-border-color,var(--graupl-button-border-color,var(--graupl-border-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))));background:var(--graupl-button-visited-background,var(--graupl-button-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))));color:var(--graupl-button-visited-color,var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))}.alert-dismisser:focus-visible,.alert-dismisser.focus{border-color:var(--graupl-button-focus-border-color,var(--graupl-button-border-color,var(--graupl-border-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))));background:var(--graupl-button-focus-background,var(--graupl-button-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))));color:var(--graupl-button-focus-color,var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))}.alert-dismisser:hover,.alert-dismisser.hover{border-color:var(--graupl-button-hover-border-color,var(--graupl-border-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));background:var(--graupl-button-hover-background,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))));color:var(--graupl-button-hover-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))))}.alert-dismisser:active,.alert-dismisser.active{border-color:var(--graupl-button-active-border-color,var(--graupl-button-hover-border-color,var(--graupl-border-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))));background:var(--graupl-button-active-background,var(--graupl-button-hover-background,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));color:var(--graupl-button-active-color,var(--graupl-button-hover-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))))}.alert-dismisser:disabled,.alert-dismisser:disabled:visited,.alert-dismisser:disabled.visited,.alert-dismisser:disabled:focus-visible,.alert-dismisser:disabled.focus,.alert-dismisser:disabled:hover,.alert-dismisser:disabled.hover,.alert-dismisser:disabled:active,.alert-dismisser:disabled.active,.alert-dismisser:disabled[aria-selected=true],.alert-dismisser:disabled.selected,.alert-dismisser:disabled[aria-current=true],.alert-dismisser:disabled.current,.alert-dismisser[disabled],.alert-dismisser[disabled]:visited,.alert-dismisser[disabled].visited,.alert-dismisser[disabled]:focus-visible,.alert-dismisser[disabled].focus,.alert-dismisser[disabled]:hover,.alert-dismisser[disabled].hover,.alert-dismisser[disabled]:active,.alert-dismisser[disabled].active,.alert-dismisser[disabled][aria-selected=true],.alert-dismisser[disabled].selected,.alert-dismisser[disabled][aria-current=true],.alert-dismisser[disabled].current,.alert-dismisser[aria-disabled=true],.alert-dismisser[aria-disabled=true]:visited,.alert-dismisser[aria-disabled=true].visited,.alert-dismisser[aria-disabled=true]:focus-visible,.alert-dismisser[aria-disabled=true].focus,.alert-dismisser[aria-disabled=true]:hover,.alert-dismisser[aria-disabled=true].hover,.alert-dismisser[aria-disabled=true]:active,.alert-dismisser[aria-disabled=true].active,.alert-dismisser[aria-disabled=true][aria-selected=true],.alert-dismisser[aria-disabled=true].selected,.alert-dismisser[aria-disabled=true][aria-current=true],.alert-dismisser[aria-disabled=true].current,.alert-dismisser.disabled,.alert-dismisser.disabled:visited,.alert-dismisser.disabled.visited,.alert-dismisser.disabled:focus-visible,.alert-dismisser.disabled.focus,.alert-dismisser.disabled:hover,.alert-dismisser.disabled.hover,.alert-dismisser.disabled:active,.alert-dismisser.disabled.active,.alert-dismisser.disabled[aria-selected=true],.alert-dismisser.disabled.selected,.alert-dismisser.disabled[aria-current=true],.alert-dismisser.disabled.current{border-color:var(--graupl-button-disabled-border-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))));background:var(--graupl-button-disabled-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.alert-dismisser.primary{--graupl-button-color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)));--graupl-button-border-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-hover-color:var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)));--graupl-button-hover-background:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-hover-border-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-disabled-color:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)));--graupl-button-disabled-border-color:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)))}.alert-dismisser.secondary{--graupl-button-color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)));--graupl-button-border-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-hover-color:var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7)));--graupl-button-hover-background:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-hover-border-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-disabled-color:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)));--graupl-button-disabled-border-color:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)))}.alert-dismisser.tertiary{--graupl-button-color:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)));--graupl-button-border-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-hover-color:var(--graupl-theme-active--tertiary--100,var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef)));--graupl-button-hover-background:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-hover-border-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-disabled-color:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)));--graupl-button-disabled-border-color:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)))}.alert-title{color:var(--graupl-alert-title-color,var(--graupl-alert-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)))))));font-size:var(--graupl-alert-title-font-size,var(--graupl-h4-font-size,var(--graupl-font-2xl,calc(1.728*var(--graupl-font-size-base,1rem)))));font-weight:var(--graupl-alert-title-font-weight,var(--graupl-h4-font-weight,var(--graupl-heading-font-weight,var(--graupl-font-weight-bold,var(--graupl-font-weight-bold,700)))));line-height:var(--graupl-alert-title-line-height,var(--graupl-h4-line-height,var(--graupl-heading-line-height,var(--graupl-line-height,1.2em))))}}
2
+ /*# sourceMappingURL=alert.css.map */
package/dist/css/component/alert.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../node_modules/@graupl/core/src/scss/mixins/_layer.scss","../../../node_modules/@graupl/core/src/scss/component/alert/_index.scss","../../../node_modules/@graupl/core/src/scss/base/button/_mixins.scss","../../../node_modules/@graupl/core/src/scss/base/button/_variables.scss","alert.css","../../../node_modules/@graupl/core/src/scss/mixins/_animation.scss","../../../node_modules/@graupl/core/src/scss/component/alert/_variables.scss"],"names":[],"mappings":"AASI,mBCIF,iBCCA,kBAAA,CASA,ohBC8LqB,CD/LrB,kdC0KoB,CD3KpB,0dCsJoB,CDlJpB,cAAA,CAZA,YAAA,CAWA,2GCUiB,CDnBjB,sBAAA,CAEA,+CCCkB,CDFlB,6CCFiB,CDIjB,uNCYe,CDXf,6CCqCiB,CDpCjB,mVEJA,CFcI,kDACE,oFETN,CFQI,+BACE,kFENN,CFKI,uBACE,kFEHN,CFEI,8CACE,kFEGN,CFJI,gDACE,0DESN,CFVI,0BAKI,kBESR,CFHc,8FACE,sDEQhB,CFTc,wCACE,sDEWhB,CFvBI,6LAYY,sDE8BhB,CF1CI,2BAKI,kBEqCR,CF/Bc,sEACE,sDEoChB,CFrCc,yCACE,sDEuChB,CFnDI,4MAYY,sDE0DhB,CFtEI,qCAKI,kBEiER,CF3Dc,0FACE,sDEgEhB,CFjEc,mDACE,sDEmEhB,CF/EI,mPAYY,sDEsFhB,CFlGI,0BAKI,kBE6FR,CFvFc,oEACE,sDE4FhB,CF7Fc,wCACE,sDE+FhB,CFhGc,kKACE,sDE8GhB,CC7IA,uCJEA,iBCwCE,sLEuGA,CACF,CACF,CJrJI,wBCUF,OACE,wBAAA,CASA,+gBKmDkB,CLpDlB,6cK8FiB,CL/FjB,qdK0EiB,CL/EjB,YAAA,CAQA,2MKKQ,CLZR,wFAAA,CACA,6GAAA,CACA,mNKJY,CLKZ,+OGiJF,CH3IE,YACE,YG6IJ,CH1IE,qBACE,YAAA,CACA,SG4IJ,CHzIE,YACE,YG2IJ,CC1KA,uCJmCI,cACE,0KG0IJ,CACF,CHtIA,cACE,mBAAA,CACA,eAAA,CACA,wHGwIF,CHrIA,YACE,mBAAA,CACA,aAAA,CACA,kHGuIF,CHpIA,cACE,mBAAA,CACA,eAAA,CACA,wHGsIF,CHnIA,iBAGE,qBAAA,CAFA,mBAAA,CACA,aGsIF,CHlIA,aACE,+CGoIF,CACF,CJzMI,oBCyEF,OACE,oOAAA,CACA,0OAAA,CACA,kDAAA,CACA,kEAAA,CACA,8DAAA,CACA,8DAAA,CACA,gEAAA,CACA,oEAAA,CAGA,0NKpDe,CLmDf,wOKhCiB,CLkCjB,gMGkIF,CH/HI,eAEI,wIAAA,CAAA,6IAAA,CAAA,+IAAA,CAAA,8IAAA,CAAA,8CAAA,CAAA,6IAAA,CAAA,qJAAA,CAAA,mJAAA,CAAA,mJAAA,CAAA,oJAAA,CAAA,sJG0IR,CH5II,iBAEI,8IAAA,CAAA,mJAAA,CAAA,qJAAA,CAAA,oJAAA,CAAA,8CAAA,CAAA,mJAAA,CAAA,2JAAA,CAAA,yJAAA,CAAA,yJAAA,CAAA,0JAAA,CAAA,4JGuJR,CHzJI,gBAEI,2IAAA,CAAA,gJAAA,CAAA,kJAAA,CAAA,iJAAA,CAAA,8CAAA,CAAA,gJAAA,CAAA,wJAAA,CAAA,sJAAA,CAAA,sJAAA,CAAA,uJAAA,CAAA,yJGoKR,CH3JA,iBChDA,qNC8BkB,CD/BlB,0OCiKoB,CD/JpB,iME+MA,CF3ME,yBAEI,yIAAA,CAAA,gJAAA,CAAA,+IAAA,CAAA,oJAAA,CAAA,sJAAA,CAAA,kJAAA,CAAA,yJEkNN,CFpNE,2BAEI,+IAAA,CAAA,sJAAA,CAAA,qJAAA,CAAA,0JAAA,CAAA,4JAAA,CAAA,wJAAA,CAAA,+JE2NN,CF7NE,0BAEI,4IAAA,CAAA,mJAAA,CAAA,kJAAA,CAAA,uJAAA,CAAA,yJAAA,CAAA,qJAAA,CAAA,4JEoON,CFzNI,kDAEE,6PAAA,CADA,oRAAA,CAEA,oOEgON,CFnOI,+BAEE,2PAAA,CADA,kRAAA,CAEA,kOEqON,CFxOI,uBAEE,2PAAA,CADA,kRAAA,CAEA,kOE0ON,CF7OI,8CAEE,iNAAA,CADA,gPAAA,CAEA,iNEoPN,CFvPI,gDAEE,wPAAA,CADA,yRAAA,CAEA,mPE8PN,CFtPc,8FAEE,8NAAA,CADA,2KAAA,CAEA,6JEkQhB,CFrQc,wCAEE,8NAAA,CADA,2KAAA,CAEA,6JEuQhB,CF1Qc,mQAEE,8NAAA,CADA,2KAAA,CAEA,6JE+ShB,CFlTc,yCAEE,8NAAA,CADA,2KAAA,CAEA,6JEoThB,CFvTc,sSAEE,8NAAA,CADA,2KAAA,CAEA,6JE4VhB,CF/Vc,mDAEE,8NAAA,CADA,2KAAA,CAEA,6JEiWhB,CFpWc,uTAEE,8NAAA,CADA,2KAAA,CAEA,6JEyYhB,CF5Yc,wCAEE,8NAAA,CADA,2KAAA,CAEA,6JE8YhB,CFjZc,kKAEE,8NAAA,CADA,2KAAA,CAEA,6JEuahB,CHnZA,aACE,gOK4CgB,CL3ChB,8IK+CoB,CL9CpB,kLKkDsB,CLjDtB,gJGqZF,CACF","file":"alert.css"}
1
+ {"version":3,"sourceRoot":null,"mappings":"AESI,mBCuMF,8yEGjLI,uIAAA,yIAAA,iIAAA,2GAAA,m/DFIF,uIGxBF,uCJqMA,0MDvME,wBC8MF,6xEAcE,yBAKA,4CAMA,yBAMF,+JAOA,qJAOA,+JAOA,8DAOA,6DIvQA,uCJ6QE,kLD/QA,oBCuRF,k6EMxPE,4+CAAA,0iDAAA,2gDNiRF,opBG1RI,0yBAAA,wyBAAA,msBAAA,uzBAAA,q+EGSF,6hCAAA,ykCAAA,mjCNsRF","sources":["dist/css/component/alert.css","var/www/html/node_modules/@graupl/core/src/scss/theme/typography/_defaults.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_layer.scss","var/www/html/node_modules/@graupl/core/src/scss/component/alert/_index.scss","var/www/html/node_modules/@graupl/core/src/scss/base/button/_mixins.scss","var/www/html/node_modules/@graupl/core/src/scss/base/button/_variables.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_state.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_animation.scss","var/www/html/node_modules/@graupl/core/src/scss/component/alert/_variables.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_theme.scss"],"sourcesContent":["/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */\n@layer graupl.base {\n .alert-dismisser {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--graupl-button-min-width, 44px);\n min-height: var(--graupl-button-min-height, 44px);\n padding: var(--graupl-button-padding, var(--graupl-button-padding-y, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))) var(--graupl-button-padding-x, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))));\n transform: var(--graupl-button-transform, none);\n transition: var(--graupl-button-transition, background var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease), color var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease), transform var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease));\n border-width: var(--graupl-button-border-width, var(--graupl-button-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))) var(--graupl-button-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))) var(--graupl-button-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))) var(--graupl-button-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem))));\n border-style: var(--graupl-button-border-style, var(--graupl-button-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-button-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-button-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-button-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n border-radius: var(--graupl-button-border-radius, var(--graupl-button-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-button-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-button-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-button-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))));\n font-size: var(--graupl-button-font-size, var(--graupl-font-base, calc(1 * var(--graupl-font-size-base, 1rem))));\n cursor: pointer;\n }\n .alert-dismisser:visited {\n transform: var(--graupl-button-visited-transform, var(--graupl-button-transform, none));\n }\n .alert-dismisser.visited {\n transform: var(--graupl-button-visited-transform, var(--graupl-button-transform, none));\n }\n .alert-dismisser:focus-visible {\n transform: var(--graupl-button-focus-transform, var(--graupl-button-transform, none));\n }\n .alert-dismisser.focus {\n transform: var(--graupl-button-focus-transform, var(--graupl-button-transform, none));\n }\n .alert-dismisser:hover {\n transform: var(--graupl-button-hover-transform, var(--graupl-button-transform, none));\n }\n .alert-dismisser.hover {\n transform: var(--graupl-button-hover-transform, var(--graupl-button-transform, none));\n }\n .alert-dismisser:active {\n transform: var(--graupl-button-active-transform, scale(0.95));\n }\n .alert-dismisser.active {\n transform: var(--graupl-button-active-transform, scale(0.95));\n }\n .alert-dismisser:disabled {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser:disabled:visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser:disabled.visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser:disabled:focus-visible {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser:disabled.focus {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser:disabled:hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser:disabled.hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser:disabled:active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser:disabled.active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser:disabled[aria-selected=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser:disabled.selected {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser:disabled[aria-current=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser:disabled.current {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser[disabled] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser[disabled]:visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser[disabled].visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser[disabled]:focus-visible {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser[disabled].focus {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser[disabled]:hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser[disabled].hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser[disabled]:active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser[disabled].active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser[disabled][aria-selected=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser[disabled].selected {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser[disabled][aria-current=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser[disabled].current {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser[aria-disabled=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser[aria-disabled=true]:visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser[aria-disabled=true].visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser[aria-disabled=true]:focus-visible {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser[aria-disabled=true].focus {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser[aria-disabled=true]:hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser[aria-disabled=true].hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser[aria-disabled=true]:active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser[aria-disabled=true].active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser[aria-disabled=true][aria-selected=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser[aria-disabled=true].selected {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser[aria-disabled=true][aria-current=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser[aria-disabled=true].current {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser.disabled {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser.disabled:visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser.disabled.visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser.disabled:focus-visible {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser.disabled.focus {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser.disabled:hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser.disabled.hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser.disabled:active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser.disabled.active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser.disabled[aria-selected=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser.disabled.selected {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser.disabled[aria-current=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser.disabled.current {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .alert-dismisser:disabled {\n cursor: not-allowed;\n }\n .alert-dismisser[disabled] {\n cursor: not-allowed;\n }\n .alert-dismisser[aria-disabled=true] {\n cursor: not-allowed;\n }\n .alert-dismisser.disabled {\n cursor: not-allowed;\n }\n @media (prefers-reduced-motion: reduce) {\n .alert-dismisser {\n --graupl-button-transition: var(--graupl-button-transition-reduced-motion, background var(--graupl-transition-timing-function, ease), color var(--graupl-transition-timing-function, ease));\n }\n }\n}\n@layer graupl.component {\n .alert {\n --graupl-button-border: 0;\n display: grid;\n grid-template-columns: [content-start] 1fr [content-end dismiss-start] auto [dismiss-end];\n grid-template-rows: [header-start] auto [header-end body-start] auto [body-end footer-start] auto [footer-end];\n padding: var(--graupl-alert-padding, var(--graupl-alert-padding-y, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) var(--graupl-alert-padding-x, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))));\n transition: var(--graupl-alert-transition, opacity var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease), transform var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease));\n border-width: var(--graupl-alert-border-width, var(--graupl-alert-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))) var(--graupl-alert-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))) var(--graupl-alert-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))) var(--graupl-alert-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem))));\n border-style: var(--graupl-alert-border-style, var(--graupl-alert-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-alert-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-alert-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-alert-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n border-radius: var(--graupl-alert-border-radius, var(--graupl-alert-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-alert-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-alert-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-alert-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))));\n gap: var(--graupl-alert-gap, var(--graupl-alert-column-gap, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))) var(--graupl-alert-row-gap, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))));\n }\n .alert.hide {\n display: none;\n }\n .alert.transitioning {\n display: grid;\n opacity: 0;\n }\n .alert.show {\n display: grid;\n }\n .alert-header {\n grid-column: content;\n grid-row: header;\n padding: var(--graupl-alert-header-padding, var(--graupl-alert-header-padding-y, 0) var(--graupl-alert-header-padding-x, 0));\n }\n .alert-body {\n grid-column: content;\n grid-row: body;\n padding: var(--graupl-alert-body-padding, var(--graupl-alert-body-padding-y, 0) var(--graupl-alert-body-padding-x, 0));\n }\n .alert-footer {\n grid-column: content;\n grid-row: footer;\n padding: var(--graupl-alert-footer-padding, var(--graupl-alert-footer-padding-y, 0) var(--graupl-alert-footer-padding-x, 0));\n }\n .alert-dismisser {\n grid-column: dismiss;\n grid-row: 1/-1;\n align-self: flex-start;\n }\n .alert-title {\n margin: var(--graupl-alert-title-margin, 0 0 0 0);\n }\n @media (prefers-reduced-motion: reduce) {\n .alert {\n --graupl-alert-transition: var(--graupl-alert-transition-reduced-motion, opacity var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease));\n }\n }\n}\n@layer graupl.theme {\n .alert {\n --graupl-button-background: var(--graupl-alert-background, var(--graupl-background, var(--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-button-focus-background: var(--graupl-alert-background, var(--graupl-background, var(--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-link-color: var(--graupl-alert-link-color, var(--graupl-link-color, var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))))));\n --graupl-link-visited-color: var(--graupl-alert-link-visited-color, var(--graupl-alert-link-color, var(--graupl-link-color, var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%)))))));\n --graupl-link-focus-color: var(--graupl-alert-link-focus-color, var(--graupl-alert-link-color, var(--graupl-link-color, var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%)))))));\n --graupl-link-hover-color: var(--graupl-alert-link-hover-color, var(--graupl-link-hover-color, var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))))));\n --graupl-link-active-color: var(--graupl-alert-link-active-color, var(--graupl-alert-link-hover-color, var(--graupl-link-hover-color, var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%)))))));\n --graupl-link-disabled-color: var(--graupl-alert-link-disabled-color, var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))))));\n border-color: var(--graupl-alert-border-color, var(--graupl-alert-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-color: var(--graupl-alert-background, var(--graupl-background, var(--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-alert-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 .alert.primary {\n --graupl-alert-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-alert-background: var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))));\n --graupl-alert-border-color: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n --graupl-alert-title-color: var(--graupl-theme-active--primary--800, var(--graupl-theme-light--primary--800, var(--graupl-primary--800, hsl(219, 90%, 20%))));\n --graupl-alert-button-border-color: transparent;\n --graupl-alert-link-color: var(--graupl-theme-active--primary--800, var(--graupl-theme-light--primary--800, var(--graupl-primary--800, hsl(219, 90%, 20%))));\n --graupl-alert-link-visited-color: var(--graupl-theme-active--primary--800, var(--graupl-theme-light--primary--800, var(--graupl-primary--800, hsl(219, 90%, 20%))));\n --graupl-alert-link-focus-color: var(--graupl-theme-active--primary--800, var(--graupl-theme-light--primary--800, var(--graupl-primary--800, hsl(219, 90%, 20%))));\n --graupl-alert-link-hover-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-alert-link-active-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-alert-link-disabled-color: var(--graupl-theme-active--primary--400, var(--graupl-theme-light--primary--400, var(--graupl-primary--400, hsl(219, 75%, 55%))));\n }\n .alert.secondary {\n --graupl-alert-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-alert-background: var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))));\n --graupl-alert-border-color: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n --graupl-alert-title-color: var(--graupl-theme-active--secondary--800, var(--graupl-theme-light--secondary--800, var(--graupl-secondary--800, hsl(235, 30%, 20%))));\n --graupl-alert-button-border-color: transparent;\n --graupl-alert-link-color: var(--graupl-theme-active--secondary--800, var(--graupl-theme-light--secondary--800, var(--graupl-secondary--800, hsl(235, 30%, 20%))));\n --graupl-alert-link-visited-color: var(--graupl-theme-active--secondary--800, var(--graupl-theme-light--secondary--800, var(--graupl-secondary--800, hsl(235, 30%, 20%))));\n --graupl-alert-link-focus-color: var(--graupl-theme-active--secondary--800, var(--graupl-theme-light--secondary--800, var(--graupl-secondary--800, hsl(235, 30%, 20%))));\n --graupl-alert-link-hover-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-alert-link-active-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-alert-link-disabled-color: var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))));\n }\n .alert.tertiary {\n --graupl-alert-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-alert-background: var(--graupl-theme-active--tertiary--200, var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%))));\n --graupl-alert-border-color: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n --graupl-alert-title-color: var(--graupl-theme-active--tertiary--800, var(--graupl-theme-light--tertiary--800, var(--graupl-tertiary--800, hsl(340, 75%, 20%))));\n --graupl-alert-button-border-color: transparent;\n --graupl-alert-link-color: var(--graupl-theme-active--tertiary--800, var(--graupl-theme-light--tertiary--800, var(--graupl-tertiary--800, hsl(340, 75%, 20%))));\n --graupl-alert-link-visited-color: var(--graupl-theme-active--tertiary--800, var(--graupl-theme-light--tertiary--800, var(--graupl-tertiary--800, hsl(340, 75%, 20%))));\n --graupl-alert-link-focus-color: var(--graupl-theme-active--tertiary--800, var(--graupl-theme-light--tertiary--800, var(--graupl-tertiary--800, hsl(340, 75%, 20%))));\n --graupl-alert-link-hover-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-alert-link-active-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-alert-link-disabled-color: var(--graupl-theme-active--tertiary--400, var(--graupl-theme-light--tertiary--400, var(--graupl-tertiary--400, hsl(340, 60%, 55%))));\n }\n .alert-dismisser {\n border-color: var(--graupl-button-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n background: var(--graupl-button-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n }\n .alert-dismisser:visited {\n border-color: var(--graupl-button-visited-border-color, var(--graupl-button-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n background: var(--graupl-button-visited-background, var(--graupl-button-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n color: var(--graupl-button-visited-color, var(--graupl-button-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n }\n .alert-dismisser.visited {\n border-color: var(--graupl-button-visited-border-color, var(--graupl-button-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n background: var(--graupl-button-visited-background, var(--graupl-button-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n color: var(--graupl-button-visited-color, var(--graupl-button-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n }\n .alert-dismisser:focus-visible {\n border-color: var(--graupl-button-focus-border-color, var(--graupl-button-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n background: var(--graupl-button-focus-background, var(--graupl-button-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n color: var(--graupl-button-focus-color, var(--graupl-button-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n }\n .alert-dismisser.focus {\n border-color: var(--graupl-button-focus-border-color, var(--graupl-button-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n background: var(--graupl-button-focus-background, var(--graupl-button-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n color: var(--graupl-button-focus-color, var(--graupl-button-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n }\n .alert-dismisser:hover {\n border-color: var(--graupl-button-hover-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n background: var(--graupl-button-hover-background, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n color: var(--graupl-button-hover-color, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n }\n .alert-dismisser.hover {\n border-color: var(--graupl-button-hover-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n background: var(--graupl-button-hover-background, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n color: var(--graupl-button-hover-color, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n }\n .alert-dismisser:active {\n border-color: var(--graupl-button-active-border-color, var(--graupl-button-hover-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n background: var(--graupl-button-active-background, var(--graupl-button-hover-background, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n color: var(--graupl-button-active-color, var(--graupl-button-hover-color, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n }\n .alert-dismisser.active {\n border-color: var(--graupl-button-active-border-color, var(--graupl-button-hover-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n background: var(--graupl-button-active-background, var(--graupl-button-hover-background, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n color: var(--graupl-button-active-color, var(--graupl-button-hover-color, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n }\n .alert-dismisser:disabled {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser:disabled:visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser:disabled.visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser:disabled:focus-visible {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser:disabled.focus {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser:disabled:hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser:disabled.hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser:disabled:active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser:disabled.active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser:disabled[aria-selected=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser:disabled.selected {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser:disabled[aria-current=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser:disabled.current {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser[disabled] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser[disabled]:visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser[disabled].visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser[disabled]:focus-visible {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser[disabled].focus {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser[disabled]:hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser[disabled].hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser[disabled]:active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser[disabled].active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser[disabled][aria-selected=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser[disabled].selected {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser[disabled][aria-current=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser[disabled].current {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser[aria-disabled=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser[aria-disabled=true]:visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser[aria-disabled=true].visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser[aria-disabled=true]:focus-visible {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser[aria-disabled=true].focus {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser[aria-disabled=true]:hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser[aria-disabled=true].hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser[aria-disabled=true]:active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser[aria-disabled=true].active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser[aria-disabled=true][aria-selected=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser[aria-disabled=true].selected {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser[aria-disabled=true][aria-current=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser[aria-disabled=true].current {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser.disabled {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser.disabled:visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser.disabled.visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser.disabled:focus-visible {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser.disabled.focus {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser.disabled:hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser.disabled.hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser.disabled:active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser.disabled.active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser.disabled[aria-selected=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser.disabled.selected {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser.disabled[aria-current=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser.disabled.current {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .alert-dismisser.primary {\n --graupl-button-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-button-border-color: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n --graupl-button-hover-color: var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));\n --graupl-button-hover-background: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n --graupl-button-hover-border-color: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n --graupl-button-disabled-color: var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))));\n --graupl-button-disabled-border-color: var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))));\n }\n .alert-dismisser.secondary {\n --graupl-button-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-button-border-color: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n --graupl-button-hover-color: var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))));\n --graupl-button-hover-background: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n --graupl-button-hover-border-color: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n --graupl-button-disabled-color: var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))));\n --graupl-button-disabled-border-color: var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))));\n }\n .alert-dismisser.tertiary {\n --graupl-button-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-button-border-color: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n --graupl-button-hover-color: var(--graupl-theme-active--tertiary--100, var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%))));\n --graupl-button-hover-background: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n --graupl-button-hover-border-color: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n --graupl-button-disabled-color: var(--graupl-theme-active--tertiary--200, var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%))));\n --graupl-button-disabled-border-color: var(--graupl-theme-active--tertiary--200, var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%))));\n }\n .alert-title {\n color: var(--graupl-alert-title-color, var(--graupl-alert-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n font-size: var(--graupl-alert-title-font-size, var(--graupl-h4-font-size, var(--graupl-font-2xl, calc(1.728 * var(--graupl-font-size-base, 1rem)))));\n font-weight: var(--graupl-alert-title-font-weight, var(--graupl-h4-font-weight, var(--graupl-heading-font-weight, var(--graupl-font-weight-bold, var(--graupl-font-weight-bold, 700)))));\n line-height: var(--graupl-alert-title-line-height, var(--graupl-h4-line-height, var(--graupl-heading-line-height, var(--graupl-line-height, 1.2em))));\n }\n}","// @graupl/core typography theme default values.\n//\n// Generally, these should not be used directly when styling components unless a static value is needed.\n// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.\n//\n// They should not be used to define direct property values (i.e. font-size, color, etc.).\n// Those should be defined as custom properties in the `_variables.scss` file.\n\n@use \"../../defaults\" as root-defaults;\n@use \"sass:map\";\n\n// font properties.\n$selector-base: root-defaults.$element-selector-base !default;\n$modifier-selector-base: root-defaults.$modifier-selector-base !default;\n$paragraph-selector-base: $selector-base !default;\n$paragraph-selector: \"p\";\n$small-selector-base: $selector-base !default;\n$small-selector: \"small\";\n$h1-selector-base: $selector-base !default;\n$h1-selector: \"h1\" !default;\n$h2-selector-base: $selector-base !default;\n$h2-selector: \"h2\" !default;\n$h3-selector-base: $selector-base !default;\n$h3-selector: \"h3\" !default;\n$h4-selector-base: $selector-base !default;\n$h4-selector: \"h4\" !default;\n$h5-selector-base: $selector-base !default;\n$h5-selector: \"h5\" !default;\n$h6-selector-base: $selector-base !default;\n$h6-selector: \"h6\" !default;\n$root-selector-base: \":\" !default;\n$root-selector: \"root\" !default;\n$bold-selector-base: $selector-base !default;\n$bold-selector: \"b\" !default;\n$strong-selector-base: $selector-base !default;\n$strong-selector: \"strong\" !default;\n$body-selector-base: $selector-base !default;\n$body-selector: \"body\" !default;\n$generate-base-font-sizes: root-defaults.$generate-base-font-sizes !default;\n$generate-base-font-weights: root-defaults.$generate-base-font-weights !default;\n$font-size-base: 1rem !default;\n$root-font-size: clamp(0.85rem, calc(0.8rem + 0.5vw), 1.25rem) !default;\n$line-height: 1.2em !default;\n\n// Multipliers for font sizes.\n// This uses a minor third scale.\n// See: https://typescale.com/?size=16&scale=1.250&text=A%20Visual%20Type%20Scale&font=Lato&fontweight=400&bodyfont=body_font_default&bodyfontweight=400&lineheight=1.75&backgroundcolor=%23ffffff&fontcolor=%23000000\n$-font-size-multipliers: (\n xs: 0.694,\n sm: 0.833,\n base: 1,\n lg: 1.2,\n xl: 1.44,\n 2xl: 1.728,\n 3xl: 2.074,\n 4xl: 2.488,\n 5xl: 2.986,\n);\n$font-size-multipliers: () !default;\n\n// Merge the font size multipliers with the default ones.\n@if $generate-base-font-sizes {\n $font-size-multipliers: map.merge(\n $-font-size-multipliers,\n $font-size-multipliers\n );\n}\n\n// Weights.\n$-font-weights: (\n light: 300,\n normal: 400,\n bold: 700,\n);\n$font-weights: () !default;\n\n// Merge the custom font weights with the default ones.\n@if $generate-base-font-weights {\n $font-weights: map.merge($-font-weights, $font-weights);\n}\n\n/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */\n$root-font-family:\n system-ui,\n -apple-system,\n blinkmacsystemfont,\n \"Segoe UI\",\n roboto,\n \"Helvetica Neue\",\n arial,\n sans-serif !default;\n","// @graupl/core 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 alert component styles.\n//\n// This module provides the alert component styles.\n//\n// The following selectors are generated by default:\n// - `.alert`: The alert container.\n// - `.alert-body`: The alert body content.\n// - `.alert-header`: The alert header content.\n// - `.alert-footer`: The alert footer content.\n// - `.alert-title`: The alert title element.\n// - `.alert-dismisser`: The alert dismisser control.\n// - `.show`: Modifier applied when the alert is shown.\n// - `.hide`: Modifier applied when the alert is hidden.\n// - `.transitioning`: Modifier applied while the alert is transitioning.\n//\n// The following custom properties can be used to customize the alert component:\n// | Property | Description | Default Value |\n// | --- | --- | --- |\n// | `--graupl-alert-padding-x` | Horizontal padding of the alert. | `var(--graupl-spacer-5)` |\n// | `--graupl-alert-padding-y` | Vertical padding of the alert. | `var(--graupl-spacer-5)` |\n// | `--graupl-alert-padding` | Shorthand padding of the alert. | `var(--graupl-alert-padding-y) var(--graupl-alert-padding-x)` |\n// | `--graupl-alert-gap` | Gap inside the alert (column/row). | `var(--graupl-alert-column-gap) var(--graupl-alert-row-gap)` |\n// | `--graupl-alert-background` | Background colour of the alert. | `var(--graupl-background)` |\n// | `--graupl-alert-color` | Text colour of the alert. | `var(--graupl-color)` |\n// | `--graupl-alert-border-width` | Border width of the alert. | `var(--graupl-border-top-width) var(--graupl-border-right-width) var(--graupl-border-bottom-width) var(--graupl-border-left-width)` |\n// | `--graupl-alert-border-style` | Border style of the alert. | `var(--graupl-border-top-style) var(--graupl-border-right-style) var(--graupl-border-bottom-style) var(--graupl-border-left-style)` |\n// | `--graupl-alert-border-radius` | Border radius of the alert. | `var(--graupl-border-top-left-radius) var(--graupl-border-top-right-radius) var(--graupl-border-bottom-right-radius) var(--graupl-border-bottom-left-radius)` |\n// | `--graupl-alert-border-color` | Border colour of the alert. | `var(--graupl-alert-color)` |\n// | `--graupl-alert-transition` | Transition applied to alert appearance. | `opacity var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function), transform var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function)` |\n// | `--graupl-alert-transition-reduced-motion` | Transition when reduced motion is enabled. | `opacity var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function)` |\n// | `--graupl-alert-header-padding` | Padding for the alert header. | `0 0` |\n// | `--graupl-alert-body-padding` | Padding for the alert body. | `0 0` |\n// | `--graupl-alert-footer-padding` | Padding for the alert footer. | `0 0` |\n// | `--graupl-alert-title-color` | Text colour of the alert title. | `var(--graupl-alert-color)` |\n// | `--graupl-alert-title-font-size` | Font size of the alert title. | `var(--graupl-h4)` |\n// | `--graupl-alert-title-font-weight` | Font weight of the alert title. | `var(--graupl-font-weight-h4)` |\n// | `--graupl-alert-title-font-family` | Font family of the alert title. | `var(--graupl-font-family-h4)` |\n// | `--graupl-alert-title-line-height` | Line height of the alert title. | `var(--graupl-line-height-h4)` |\n// | `--graupl-alert-title-margin` | Margin for the alert title. | `0 0 0 0` |\n// | `--graupl-alert-link-color` | Link colour inside alerts. | `unset` (inherits) |\n// | `--graupl-alert-link-visited-color` | Visited link colour inside alerts. | `unset` |\n// | `--graupl-alert-link-focus-color` | Focused link colour inside alerts. | `unset` |\n// | `--graupl-alert-link-hover-color` | Hovered link colour inside alerts. | `unset` |\n// | `--graupl-alert-link-active-color` | Active link colour inside alerts. | `unset` |\n// | `--graupl-alert-link-disabled-color` | Disabled link colour inside alerts. | `unset` |\n//\n// The following sass variables can be used to customize the generation of the alert 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 map. | `true` |\n// | `$themeable` | Flag to generate theme modifiers. | `true` |\n// | `$alert-selector-base` | Selector base for the alert container. | `$selector-base` |\n// | `$alert-selector` | Selector for the alert container. | `\"alert\"` |\n// | `$alert-theme-selector-base` | Selector base for theme modifiers. | `\".\"` |\n// | `$alert-theme-selector-prefix` | Selector prefix for theme modifiers. | `\"\"` |\n// | `$alert-body-selector-base` | Selector base for the alert body. | `$selector-base` |\n// | `$alert-body-selector` | Selector for the alert body. | `\"alert-body\"` |\n// | `$alert-header-selector-base` | Selector base for the alert header. | `$selector-base` |\n// | `$alert-header-selector` | Selector for the alert header. | `\"alert-header\"` |\n// | `$alert-footer-selector-base` | Selector base for the alert footer. | `$selector-base` |\n// | `$alert-footer-selector` | Selector for the alert footer. | `\"alert-footer\"` |\n// | `$alert-title-selector-base` | Selector base for the alert title. | `$selector-base` |\n// | `$alert-title-selector` | Selector for the alert title. | `\"alert-title\"` |\n// | `$alert-dismisser-selector-base` | Selector base for the alert dismisser. | `$selector-base` |\n// | `$alert-dismisser-selector` | Selector for the alert dismisser. | `\"alert-dismisser\"` |\n// | `$alert-hidden-selector-base` | Selector base for the hidden modifier. | `\".\"` |\n// | `$alert-hidden-selector` | Selector applied when hidden. | `\"hide\"` |\n// | `$alert-shown-selector-base` | Selector base for the shown modifier. | `\".\"` |\n// | `$alert-shown-selector` | Selector applied when shown. | `\"show\"` |\n// | `$alert-transition-selector-base` | Selector base for the transitioning modifier. | `\".\"` |\n// | `$alert-transition-selector` | Selector applied while transitioning. | `\"transitioning\"` |\n//\n// ## Using `$alert-theme-mappings`\n//\n// `$alert-theme-mappings` is a 1-level map of properties and shade values.\n//\n// e.g.\n// ```scss\n// $alert-theme-mappings: (\n// border-color: 700,\n// )\n// ```\n//\n// This directly[1] maps to all alert variants, telling them what shade to use for said property.\n// All alert variants will use the following based on the example above:\n// - Primary alerts will have their `--graupl-alert-border-color` property set to `--graupl-theme-active--primary--700`,\n// - Secondary alerts will have their `--graupl-alert-border-color` property set to `--graupl-theme-active--secondary--700`, and\n// - Tertiary alerts will have their `--graupl-alert-border-color` property set to `--graupl-theme-active--tertiary--700`.\n//\n// You can use this to customize _all_ alerts variants in the same way.\n//\n// For example, if you use the following map:\n// ```scss\n// $alert-theme-mappings: (\n// border-color: 500,\n// )\n// ```\n//\n// All alert variants will use the following:\n// - Primary alerts will have their `--graupl-alert-border-color` property set to `--graupl-theme-active--primary--500`,\n// - Secondary alerts will have their `--graupl-alert-border-color` property set to `--graupl-theme-active--secondary--500`, and\n// - Tertiary alerts will have their `--graupl-alert-border-color` property set to `--graupl-theme-active--tertiary--500`.\n//\n// [1] `$alert-theme-mappings` gets parsed into a larger, more explicit map: `$alert-theme-map`.\n//\n// Using `$alert-theme-map`\n//\n// `$alert-theme-map` is a multi-level map of properties, colors, and shade values.\n//\n// e.g.\n// ```scss\n// $alert-theme-map: (\n// primary: (\n// border-color: (\n// color: primary,\n// shade: 700\n// ),\n// ),\n// secondary: (\n// border-color: (\n// color: secondary,\n// shade: 700\n// ),\n// ),\n// tertiary: (\n// border-color: (\n// color: tertiary,\n// shade: 700\n// ),\n// ),\n// )\n// ```\n//\n// This directly maps to all alert variants, telling them what shade to use for said property.\n// The alert variants will use the following based on the example above:\n// - Primary alerts will have their `--graupl-alert-border-color` property set to `--graupl-theme-active--primary--700`,\n// - Secondary alerts will have their `--graupl-alert-border-color` property set to `--graupl-theme-active--secondary--700`, and\n// - Tertiary alerts will have their `--graupl-alert-border-color` property set to `--graupl-theme-active--tertiary--700`.\n//\n// You can use this to customize alert variants individually.\n//\n// For example, if you use the following map:\n//\n// ```scss\n// $alert-theme-map: (\n// primary: (\n// border-color: (\n// color: secondary,\n// shade: 700\n// ),\n// ),\n// secondary: (\n// border-color: (\n// color: secondary,\n// shade: 700\n// ),\n// ),\n// tertiary: (\n// border-color: (\n// color: secondary,\n// shade: 700\n// ),\n// ),\n// )\n// ```\n//\n// The alert variants will use the following:\n// - Primary alerts will have their `--graupl-alert-border-color` property set to `--graupl-theme-active--secondary--700`,\n// - Secondary alerts will have their `--graupl-alert-border-color` property set to `--graupl-theme-active--secondary--700`, and\n// - Tertiary alerts will have their `--graupl-alert-border-color` property set to `--graupl-theme-active--secondary--700`.\n//\n// @example\n// <div class=\"alert\">\n// <div class=\"alert-header\">\n// <h3 class=\"alert-title\">Alert</h3>\n// </div>\n// <div class=\"alert-body\">\n// <p>This is some text that describes the alert.</p>\n// </div>\n// </div>\n//\n// @example\n// <div class=\"alert primary\">\n// <div class=\"alert-header\">\n// <h3 class=\"alert-title\">Alert</h3>\n// </div>\n// <div class=\"alert-body\">\n// <p>This is some text that describes the alert.</p>\n// </div>\n// <div class=\"alert-footer\">\n// <a href=\"#\">Action</a>\n// </div>\n// <button class=\"alert-dismisser\">x</button>\n// </div>\n\n@use \"defaults\";\n@use \"variables\" as *;\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/layer\" as *;\n@use \"../../mixins/animation\";\n@use \"../../mixins/theme\";\n@use \"../../base/button/mixins\" as button-mixins;\n@use \"sass:map\";\n\n@include layer(base) {\n // .alert-dismisser\n #{defaults.$alert-dismisser-selector-base}#{defaults.$alert-dismisser-selector} {\n @include button-mixins.apply-base;\n }\n}\n\n@include layer(component) {\n // .alert\n #{defaults.$alert-selector-base}#{defaults.$alert-selector} {\n --#{root-defaults.$prefix}button-border: 0;\n\n display: grid;\n grid-template-columns: [content-start] 1fr [content-end dismiss-start] auto [dismiss-end];\n grid-template-rows: [header-start] auto [header-end body-start] auto [body-end footer-start] auto [footer-end];\n padding: $alert-padding;\n transition: $alert-transition;\n border-width: $alert-border-width;\n border-style: $alert-border-style;\n border-radius: $alert-border-radius;\n gap: $alert-gap;\n\n // &.hide\n &#{defaults.$alert-hidden-selector-base}#{defaults.$alert-hidden-selector} {\n display: none;\n }\n\n // &.transitioning\n &#{defaults.$alert-transition-selector-base}#{defaults.$alert-transition-selector} {\n display: grid;\n opacity: 0;\n }\n\n // &.show\n &#{defaults.$alert-shown-selector-base}#{defaults.$alert-shown-selector} {\n display: grid;\n }\n }\n\n // .alert-header\n #{defaults.$alert-header-selector-base}#{defaults.$alert-header-selector} {\n grid-column: content;\n grid-row: header;\n padding: $alert-header-padding;\n }\n\n // .alert-body\n #{defaults.$alert-body-selector-base}#{defaults.$alert-body-selector} {\n grid-column: content;\n grid-row: body;\n padding: $alert-body-padding;\n }\n\n // .alert-footer\n #{defaults.$alert-footer-selector-base}#{defaults.$alert-footer-selector} {\n grid-column: content;\n grid-row: footer;\n padding: $alert-footer-padding;\n }\n\n // .alert-dismisser\n #{defaults.$alert-dismisser-selector-base}#{defaults.$alert-dismisser-selector} {\n grid-column: dismiss;\n grid-row: 1 / -1;\n align-self: flex-start;\n }\n\n // .alert-title\n #{defaults.$alert-title-selector-base}#{defaults.$alert-title-selector} {\n margin: $alert-title-margin;\n }\n\n @include animation.off {\n // .alert\n #{defaults.$alert-selector-base}#{defaults.$alert-selector} {\n --#{root-defaults.$prefix}alert-transition: #{$alert-transition-reduced-motion};\n }\n }\n}\n\n@include layer(theme) {\n // .alert\n #{defaults.$alert-selector-base}#{defaults.$alert-selector} {\n --#{root-defaults.$prefix}button-background: #{$alert-background};\n --#{root-defaults.$prefix}button-focus-background: #{$alert-background};\n --#{root-defaults.$prefix}link-color: #{$alert-link-color};\n --#{root-defaults.$prefix}link-visited-color: #{$alert-link-visited-color};\n --#{root-defaults.$prefix}link-focus-color: #{$alert-link-focus-color};\n --#{root-defaults.$prefix}link-hover-color: #{$alert-link-hover-color};\n --#{root-defaults.$prefix}link-active-color: #{$alert-link-active-color};\n --#{root-defaults.$prefix}link-disabled-color: #{$alert-link-disabled-color};\n\n border-color: $alert-border-color;\n background-color: $alert-background;\n color: $alert-color;\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$alert-theme-map,\n defaults.$alert-theme-selector-base,\n defaults.$alert-theme-selector-prefix,\n \"alert-\"\n );\n }\n }\n\n // .alert-dismisser\n #{defaults.$alert-dismisser-selector-base}#{defaults.$alert-dismisser-selector} {\n @include button-mixins.apply-theme;\n }\n\n // .alert-title\n #{defaults.$alert-title-selector-base}#{defaults.$alert-title-selector} {\n color: $alert-title-color;\n font-size: $alert-title-font-size;\n font-weight: $alert-title-font-weight;\n line-height: $alert-title-line-height;\n }\n}\n","// @graupl/core button base styles.\n\n@use \"defaults\";\n@use \"../../defaults\" as root-defaults;\n@use \"../../theme/color/variables\" as color;\n@use \"variables\" as *;\n@use \"../../mixins/layer\" as *;\n@use \"../../mixins/animation\";\n@use \"../../mixins/state\";\n@use \"../../mixins/theme\";\n@use \"sass:map\";\n\n/// Mixin to apply base styles for buttons.\n@mixin apply-base() {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: $button-min-width;\n min-height: $button-min-height;\n padding: $button-padding;\n transform: $button-transform;\n transition: $button-transition;\n border-width: $button-border-width;\n border-style: $button-border-style;\n border-radius: $button-border-radius;\n font-size: $button-font-size;\n cursor: pointer;\n\n @include state.generate-modifiers(\n (\n transform: $button-transform-states,\n )\n );\n\n @each $selector in map.get(root-defaults.$state-selectors, \"disabled\") {\n &#{$selector} {\n cursor: not-allowed;\n }\n }\n\n @include animation.off {\n --#{root-defaults.$prefix}button-transition: #{$button-transition-reduced-motion};\n }\n}\n\n/// Mixin to apply theme styles for buttons.\n@mixin apply-theme() {\n border-color: $button-border-color;\n background: $button-background;\n color: $button-color;\n\n @include state.generate-modifiers(\n (\n border-color: $button-border-color-states,\n background: $button-background-states,\n color: $button-color-states,\n )\n );\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$button-theme-map,\n defaults.$button-theme-selector-base,\n defaults.$button-theme-selector-prefix,\n \"button-\"\n );\n }\n}\n\n@mixin apply() {\n @include apply-base;\n @include apply-theme;\n}\n","// @graupl/core button base variables.\n//\n// These values are to be used to directly style bases and provide a\n// cleaner way to reference custom properties.\n\n// Custom property defaults:\n// | Custom property | Default |\n// | ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | --graupl-button-min-width | 44px |\n// | --graupl-button-min-height | 44px |\n// | --graupl-button-padding-x | var(--graupl-spacer-5) |\n// | --graupl-button-padding-y | var(--graupl-spacer-3) |\n// | --graupl-button-padding | var(--graupl-button-padding-y) var(--graupl-button-padding-x) |\n// | --graupl-button-font-size | var(--graupl-font-base) |\n// | --graupl-button-transition | background var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function), color var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function), transform var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function) |\n// | --graupl-button-transition-reduced-motion | background var(--graupl-transition-duration-none) var(--graupl-transition-timing-function), color var(--graupl-transition-duration-none) var(--graupl-transition-timing-function) |\n// | --graupl-button-transform | none |\n// | --graupl-button-visited-transform | var(--graupl-button-transform) |\n// | --graupl-button-focus-transform | var(--graupl-button-transform) |\n// | --graupl-button-hover-transform | var(--graupl-button-transform) |\n// | --graupl-button-active-transform | scale(0.95) |\n// | --graupl-button-disabled-transform | none |\n// | --graupl-button-background | var(--graupl-background) |\n// | --graupl-button-visited-background | var(--graupl-button-background) |\n// | --graupl-button-focus-background | var(--graupl-button-background) |\n// | --graupl-button-hover-background | var(--graupl-color) |\n// | --graupl-button-active-background | var(--graupl-button-hover-background) |\n// | --graupl-button-disabled-background | var(--graupl-background) |\n// | --graupl-button-color | var(--graupl-color) |\n// | --graupl-button-visited-color | var(--graupl-button-color) |\n// | --graupl-button-focus-color | var(--graupl-button-color) |\n// | --graupl-button-hover-color | var(--graupl-background) |\n// | --graupl-button-active-color | var(--graupl-button-hover-color) |\n// | --graupl-button-disabled-color | var(--graupl-theme-active--primary--200) |\n// | --graupl-button-border-top-width | var(--graupl-border-top-width) |\n// | --graupl-button-border-right-width | var(--graupl-border-right-width) |\n// | --graupl-button-border-bottom-width | var(--graupl-border-bottom-width) |\n// | --graupl-button-border-left-width | var(--graupl-border-left-width) |\n// | --graupl-button-border-width | var(--graupl-button-border-top-width) var(--graupl-button-border-right-width) var(--graupl-button-border-bottom-width) var(--graupl-button-border-left-width) |\n// | --graupl-button-border-top-style | var(--graupl-border-top-style) |\n// | --graupl-button-border-right-style | var(--graupl-border-right-style) |\n// | --graupl-button-border-bottom-style | var(--graupl-border-bottom-style) |\n// | --graupl-button-border-left-style | var(--graupl-border-left-style) |\n// | --graupl-button-border-style | var(--graupl-button-border-top-style) var(--graupl-button-border-right-style) var(--graupl-button-border-bottom-style) var(--graupl-button-border-left-style) |\n// | --graupl-button-border-top-left-radius | var(--graupl-border-top-left-radius) |\n// | --graupl-button-border-top-right-radius | var(--graupl-border-top-right-radius) |\n// | --graupl-button-border-bottom-right-radius | var(--graupl-border-bottom-right-radius) |\n// | --graupl-button-border-bottom-left-radius | var(--graupl-border-bottom-left-radius) |\n// | --graupl-button-border-radius | var(--graupl-button-border-top-left-radius) var(--graupl-button-border-top-right-radius) var(--graupl-button-border-bottom-right-radius) var(--graupl-button-border-bottom-left-radius) |\n// | --graupl-button-border-color | var(--graupl-border-color) |\n// | --graupl-button-visited-border-color | var(--graupl-button-border-color) |\n// | --graupl-button-focus-border-color | var(--graupl-button-border-color) |\n// | --graupl-button-hover-border-color | var(--graupl-border-color) |\n// | --graupl-button-active-border-color | var(--graupl-button-hover-border-color) |\n// | --graupl-button-disabled-border-color | var(--graupl-theme-active--primary--200) |\n\n@use \"defaults\";\n@use \"../../variables\" as root-variables;\n@use \"../../defaults\" as root-defaults;\n@use \"../../theme/color/variables\" as color;\n@use \"../../theme/typography/variables\" as typography;\n@use \"../../functions/theme\";\n@use \"sass:map\";\n\n// Button properties.\n// --graupl-button-min-width\n$button-min-width: var(\n --#{root-defaults.$prefix}button-min-width,\n #{root-defaults.$interactive-min-width}\n);\n\n// --graupl-button-min-height\n$button-min-height: var(\n --#{root-defaults.$prefix}button-min-height,\n #{root-defaults.$interactive-min-height}\n);\n\n// --graupl-button-padding-x\n$button-padding-x: var(\n --#{root-defaults.$prefix}button-padding-x,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-button-padding-y\n$button-padding-y: var(\n --#{root-defaults.$prefix}button-padding-y,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-button-padding\n$button-padding: var(\n --#{root-defaults.$prefix}button-padding,\n #{$button-padding-y} #{$button-padding-x}\n);\n\n// --graupl-button-font-size\n$button-font-size: var(\n --#{root-defaults.$prefix}button-font-size,\n #{map.get(typography.$font-sizes, base)}\n);\n\n// --graupl-button-transition\n$button-transition: var(\n --#{root-defaults.$prefix}button-transition,\n background #{map.get(root-variables.$transition-durations, fast)}\n #{root-variables.$transition-timing-function},\n color #{map.get(root-variables.$transition-durations, fast)}\n #{root-variables.$transition-timing-function},\n transform #{map.get(root-variables.$transition-durations, fast)}\n #{root-variables.$transition-timing-function}\n);\n\n// --graupl-button-transition-reduced-motion\n$button-transition-reduced-motion: var(\n --#{root-defaults.$prefix}button-transition-reduced-motion,\n background #{map.get(root-variables.$transition-durations, none)}\n #{root-variables.$transition-timing-function},\n color #{map.get(root-variables.$transition-durations, none)}\n #{root-variables.$transition-timing-function}\n);\n\n// Transform properties.\n// --graupl-button-transform\n$button-transform: var(\n --#{root-defaults.$prefix}button-transform,\n #{defaults.$button-initial-transform}\n);\n\n// --graupl-button-visited-transform\n$button-visited-transform: var(\n --#{root-defaults.$prefix}button-visited-transform,\n #{$button-transform}\n);\n\n// --graupl-button-focus-transform\n$button-focus-transform: var(\n --#{root-defaults.$prefix}button-focus-transform,\n #{$button-transform}\n);\n\n// --graupl-button-hover-transform\n$button-hover-transform: var(\n --#{root-defaults.$prefix}button-hover-transform,\n #{$button-transform}\n);\n\n// --graupl-button-active-transform\n$button-active-transform: var(\n --#{root-defaults.$prefix}button-active-transform,\n #{defaults.$button-final-transform}\n);\n\n// --graupl-button-disabled-transform\n$button-disabled-transform: var(\n --#{root-defaults.$prefix}button-disabled-transform,\n #{defaults.$button-disabled-transform}\n);\n$button-transform-states: (\n default: $button-transform,\n visited: $button-visited-transform,\n focus: $button-focus-transform,\n hover: $button-hover-transform,\n active: $button-active-transform,\n disabled: $button-disabled-transform,\n);\n\n// Background properties.\n// --graupl-button-background\n$button-background: var(\n --#{root-defaults.$prefix}button-background,\n #{color.$background}\n);\n\n// --graupl-button-visited-background\n$button-visited-background: var(\n --#{root-defaults.$prefix}button-visited-background,\n #{$button-background}\n);\n\n// --graupl-button-focus-background\n$button-focus-background: var(\n --#{root-defaults.$prefix}button-focus-background,\n #{$button-background}\n);\n\n// --graupl-button-hover-background\n$button-hover-background: var(\n --#{root-defaults.$prefix}button-hover-background,\n #{color.$color}\n);\n\n// --graupl-button-active-background\n$button-active-background: var(\n --#{root-defaults.$prefix}button-active-background,\n #{$button-hover-background}\n);\n\n// --graupl-button-disabled-background\n$button-disabled-background: var(\n --#{root-defaults.$prefix}button-disabled-background,\n #{color.$background}\n);\n$button-background-states: (\n default: $button-background,\n visited: $button-visited-background,\n focus: $button-focus-background,\n hover: $button-hover-background,\n active: $button-active-background,\n disabled: $button-disabled-background,\n);\n\n// Text properties.\n// --graupl-button-color\n$button-color: var(--#{root-defaults.$prefix}button-color, #{color.$color});\n\n// --graupl-button-visited-color\n$button-visited-color: var(\n --#{root-defaults.$prefix}button-visited-color,\n #{$button-color}\n);\n\n// --graupl-button-focus-color\n$button-focus-color: var(\n --#{root-defaults.$prefix}button-focus-color,\n #{$button-color}\n);\n\n// --graupl-button-hover-color\n$button-hover-color: var(\n --#{root-defaults.$prefix}button-hover-color,\n #{color.$background}\n);\n\n// --graupl-button-active-color\n$button-active-color: var(\n --#{root-defaults.$prefix}button-active-color,\n #{$button-hover-color}\n);\n\n// --graupl-button-disabled-color\n$button-disabled-color: var(\n --#{root-defaults.$prefix}button-disabled-color,\n #{theme.get(primary, 200)}\n);\n$button-color-states: (\n default: $button-color,\n visited: $button-visited-color,\n focus: $button-focus-color,\n hover: $button-hover-color,\n active: $button-active-color,\n disabled: $button-disabled-color,\n);\n\n// Border properties.\n// --graupl-button-border-top-width\n$button-border-top-width: var(\n --#{root-defaults.$prefix}button-border-top-width,\n #{root-variables.$border-top-width}\n);\n\n// --graupl-button-border-right-width\n$button-border-right-width: var(\n --#{root-defaults.$prefix}button-border-right-width,\n #{root-variables.$border-right-width}\n);\n\n// --graupl-button-border-bottom-width\n$button-border-bottom-width: var(\n --#{root-defaults.$prefix}button-border-bottom-width,\n #{root-variables.$border-bottom-width}\n);\n\n// --graupl-button-border-left-width\n$button-border-left-width: var(\n --#{root-defaults.$prefix}button-border-left-width,\n #{root-variables.$border-left-width}\n);\n\n// --graupl-button-border-width\n$button-border-width: var(\n --#{root-defaults.$prefix}button-border-width,\n #{$button-border-top-width} #{$button-border-right-width}\n #{$button-border-bottom-width} #{$button-border-left-width}\n);\n\n// --graupl-button-border-top-style\n$button-border-top-style: var(\n --#{root-defaults.$prefix}button-border-top-style,\n #{root-variables.$border-top-style}\n);\n\n// --graupl-button-border-right-style\n$button-border-right-style: var(\n --#{root-defaults.$prefix}button-border-right-style,\n #{root-variables.$border-right-style}\n);\n\n// --graupl-button-border-bottom-style\n$button-border-bottom-style: var(\n --#{root-defaults.$prefix}button-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n\n// --graupl-button-border-left-style\n$button-border-left-style: var(\n --#{root-defaults.$prefix}button-border-left-style,\n #{root-variables.$border-left-style}\n);\n\n// --graupl-button-border-style\n$button-border-style: var(\n --#{root-defaults.$prefix}button-border-style,\n #{$button-border-top-style} #{$button-border-right-style}\n #{$button-border-bottom-style} #{$button-border-left-style}\n);\n\n// --graupl-button-border-top-left-radius\n$button-border-top-left-radius: var(\n --#{root-defaults.$prefix}button-border-top-left-radius,\n #{root-variables.$border-top-left-radius}\n);\n\n// --graupl-button-border-top-right-radius\n$button-border-top-right-radius: var(\n --#{root-defaults.$prefix}button-border-top-right-radius,\n #{root-variables.$border-top-right-radius}\n);\n\n// --graupl-button-border-bottom-right-radius\n$button-border-bottom-right-radius: var(\n --#{root-defaults.$prefix}button-border-bottom-right-radius,\n #{root-variables.$border-bottom-right-radius}\n);\n\n// --graupl-button-border-bottom-left-radius\n$button-border-bottom-left-radius: var(\n --#{root-defaults.$prefix}button-border-bottom-left-radius,\n #{root-variables.$border-bottom-left-radius}\n);\n\n// --graupl-button-border-radius\n$button-border-radius: var(\n --#{root-defaults.$prefix}button-border-radius,\n #{$button-border-top-left-radius} #{$button-border-top-right-radius}\n #{$button-border-bottom-right-radius} #{$button-border-bottom-left-radius}\n);\n\n// Border colour properties.\n// --graupl-button-border-color\n$button-border-color: var(\n --#{root-defaults.$prefix}button-border-color,\n #{color.$border-color}\n);\n\n// --graupl-button-visited-border-color\n$button-visited-border-color: var(\n --#{root-defaults.$prefix}button-visited-border-color,\n #{$button-border-color}\n);\n\n// --graupl-button-focus-border-color\n$button-focus-border-color: var(\n --#{root-defaults.$prefix}button-focus-border-color,\n #{$button-border-color}\n);\n\n// --graupl-button-hover-border-color\n$button-hover-border-color: var(\n --#{root-defaults.$prefix}button-hover-border-color,\n #{color.$border-color}\n);\n\n// --graupl-button-active-border-color\n$button-active-border-color: var(\n --#{root-defaults.$prefix}button-active-border-color,\n #{$button-hover-border-color}\n);\n\n// --graupl-button-disabled-border-color\n$button-disabled-border-color: var(\n --#{root-defaults.$prefix}button-disabled-border-color,\n #{theme.get(primary, 200)}\n);\n$button-border-color-states: (\n default: $button-border-color,\n visited: $button-visited-border-color,\n focus: $button-focus-border-color,\n hover: $button-hover-border-color,\n active: $button-active-border-color,\n disabled: $button-disabled-border-color,\n);\n","// @graupl/core state mixins.\n//\n// A series of mixins to tie styles to a state.\n\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n\n/// Applies styles to a specific state.\n///\n/// @param {string} $state\n/// The name of the state to apply the styles to.\n@mixin state($state) {\n @each $selector in map.get(root-defaults.$state-selectors, $state) {\n &#{$selector} {\n @content;\n }\n }\n}\n\n/// Generates state modifiers with properties.\n///\n/// @param {map} $state-map\n/// The map of props and states.\n/// @param {string} $selector-base\n/// The selector base for the state modifier.\n/// @param {string} $selector-prefix\n/// The selector prefix for the state modifer.\n@mixin generate-modifiers($state-map) {\n @each $state, $selectors in root-defaults.$state-selectors {\n @each $selector in $selectors {\n // e.g &:visited, &:focus-visible, &:hover, &:active, &:disabled\n &#{$selector} {\n @each $prop, $map in $state-map {\n #{$prop}: map.get($map, $state);\n }\n\n // If the state is disabled, we want that to supersede all other states.\n @if $state == \"disabled\" {\n @each $sub-state, $sub-selectors in root-defaults.$state-selectors {\n @if $sub-state != $state {\n @each $sub-selector in $sub-selectors {\n // e.g &:visited, &:focus-visible, &:hover, &:active\n &#{$sub-selector} {\n @each $prop, $map in $state-map {\n #{$prop}: map.get($map, $state);\n }\n }\n }\n }\n }\n }\n }\n }\n }\n}\n","// @graupl/core animation media query mixins.\n\n// A media query for targeting users who have not requested reduced motion.\n@mixin on {\n @media (prefers-reduced-motion: no-preference) {\n @content;\n }\n}\n\n// A media query for targeting users who have requested reduced motion.\n@mixin off {\n @media (prefers-reduced-motion: reduce) {\n @content;\n }\n}\n","// @graupl/core alert 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// | --graupl-alert-padding-x | var(--graupl-spacer-5) |\n// | --graupl-alert-padding-y | var(--graupl-spacer-5) |\n// | --graupl-alert-padding | var(--graupl-alert-padding-y) var(--graupl-alert-padding-x) |\n// | --graupl-alert-column-gap | var(--graupl-spacer-0) |\n// | --graupl-alert-row-gap | var(--graupl-spacer-3) |\n// | --graupl-alert-gap | var(--graupl-alert-column-gap) var(--graupl-alert-row-gap) |\n// | --graupl-alert-background | var(--graupl-background) |\n// | --graupl-alert-color | var(--graupl-color) |\n// | --graupl-alert-link-color | link-variables.var(--graupl-link-color) |\n// | --graupl-alert-link-visited-color | var(--graupl-alert-link-color) |\n// | --graupl-alert-link-focus-color | var(--graupl-alert-link-color) |\n// | --graupl-alert-link-hover-color | link-variables.var(--graupl-link-hover-color) |\n// | --graupl-alert-link-active-color | var(--graupl-alert-link-hover-color) |\n// | --graupl-alert-link-disabled-color | link-variables.var(--graupl-link-disabled-color) |\n// | --graupl-alert-border-color | var(--graupl-alert-color) |\n// | --graupl-alert-border-top-left-radius | var(--graupl-border-top-left-radius) |\n// | --graupl-alert-border-top-right-radius | var(--graupl-border-top-right-radius) |\n// | --graupl-alert-border-bottom-left-radius | var(--graupl-border-bottom-left-radius) |\n// | --graupl-alert-border-bottom-right-radius | var(--graupl-border-bottom-right-radius) |\n// | --graupl-alert-border-radius | var(--graupl-alert-border-top-left-radius) var(--graupl-alert-border-top-right-radius) var(--graupl-alert-border-bottom-right-radius) var(--graupl-alert-border-bottom-left-radius) |\n// | --graupl-alert-border-top-width | var(--graupl-border-top-width) |\n// | --graupl-alert-border-right-width | var(--graupl-border-right-width) |\n// | --graupl-alert-border-bottom-width | var(--graupl-border-bottom-width) |\n// | --graupl-alert-border-left-width | var(--graupl-border-left-width) |\n// | --graupl-alert-border-width | var(--graupl-alert-border-top-width) var(--graupl-alert-border-right-width) var(--graupl-alert-border-bottom-width) var(--graupl-alert-border-left-width) |\n// | --graupl-alert-border-top-style | var(--graupl-border-top-style) |\n// | --graupl-alert-border-right-style | var(--graupl-border-right-style) |\n// | --graupl-alert-border-bottom-style | var(--graupl-border-bottom-style) |\n// | --graupl-alert-border-left-style | var(--graupl-border-left-style) |\n// | --graupl-alert-border-style | var(--graupl-alert-border-top-style) var(--graupl-alert-border-right-style) var(--graupl-alert-border-bottom-style) var(--graupl-alert-border-left-style) |\n// | --graupl-alert-transition | opacity var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function), transform var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function) |\n// | --graupl-alert-transition-reduced-motion | opacity var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function) |\n// | --graupl-alert-header-padding-x | 0 |\n// | --graupl-alert-header-padding-y | 0 |\n// | --graupl-alert-header-padding | var(--graupl-alert-header-padding-y) var(--graupl-alert-header-padding-x) |\n// | --graupl-alert-title-color | var(--graupl-alert-color) |\n// | --graupl-alert-title-font-size | var(--graupl-h4-font-size) |\n// | --graupl-alert-title-font-weight | var(--graupl-h4-font-weight) |\n// | --graupl-alert-title-font-family | var(--graupl-h4-font-family) |\n// | --graupl-alert-title-line-height | var(--graupl-h4-line-height) |\n// | --graupl-alert-title-margin | 0 0 0 0 |\n// | --graupl-alert-body-padding-x | 0 |\n// | --graupl-alert-body-padding-y | 0 |\n// | --graupl-alert-body-padding | var(--graupl-alert-body-padding-y) var(--graupl-alert-body-padding-x) |\n// | --graupl-alert-footer-padding-x | 0 |\n// | --graupl-alert-footer-padding-y | 0 |\n// | --graupl-alert-footer-padding | var(--graupl-alert-footer-padding-y) var(--graupl-alert-footer-padding-x) |\n\n@use \"defaults\";\n@use \"../../defaults\" as root-defaults;\n@use \"../../variables\" as root-variables;\n@use \"../../theme/color/variables\" as color;\n@use \"../../theme/typography/variables\" as typography;\n@use \"../../base/link/variables\" as link-variables;\n@use \"sass:map\";\n\n// Alert properties.\n// --graupl-alert-padding-x\n$alert-padding-x: var(\n --#{root-defaults.$prefix}alert-padding-x,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-alert-padding-y\n$alert-padding-y: var(\n --#{root-defaults.$prefix}alert-padding-y,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-alert-padding\n$alert-padding: var(\n --#{root-defaults.$prefix}alert-padding,\n #{$alert-padding-y} #{$alert-padding-x}\n);\n\n// Alert gap properties.\n// --graupl-alert-column-gap\n$alert-column-gap: var(\n --#{root-defaults.$prefix}alert-column-gap,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-alert-row-gap\n$alert-row-gap: var(\n --#{root-defaults.$prefix}alert-row-gap,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-alert-gap\n$alert-gap: var(\n --#{root-defaults.$prefix}alert-gap,\n #{$alert-column-gap} #{$alert-row-gap}\n);\n\n// Alert color properties.\n// --graupl-alert-background\n$alert-background: var(\n --#{root-defaults.$prefix}alert-background,\n #{color.$background}\n);\n\n// --graupl-alert-color\n$alert-color: var(--#{root-defaults.$prefix}alert-color, #{color.$color});\n\n// --graupl-alert-link-color\n$alert-link-color: var(\n --#{root-defaults.$prefix}alert-link-color,\n #{link-variables.$link-color}\n);\n\n// --graupl-alert-link-visited-color\n$alert-link-visited-color: var(\n --#{root-defaults.$prefix}alert-link-visited-color,\n #{$alert-link-color}\n);\n\n// --graupl-alert-link-focus-color\n$alert-link-focus-color: var(\n --#{root-defaults.$prefix}alert-link-focus-color,\n #{$alert-link-color}\n);\n\n// --graupl-alert-link-hover-color\n$alert-link-hover-color: var(\n --#{root-defaults.$prefix}alert-link-hover-color,\n #{link-variables.$link-hover-color}\n);\n\n// --graupl-alert-link-active-color\n$alert-link-active-color: var(\n --#{root-defaults.$prefix}alert-link-active-color,\n #{$alert-link-hover-color}\n);\n\n// --graupl-alert-link-disabled-color\n$alert-link-disabled-color: var(\n --#{root-defaults.$prefix}alert-link-disabled-color,\n #{link-variables.$link-disabled-color}\n);\n\n// Alert border-properties.\n// --graupl-alert-border-color\n$alert-border-color: var(\n --#{root-defaults.$prefix}alert-border-color,\n #{$alert-color}\n);\n\n// --graupl-alert-border-top-left-radius\n$alert-border-top-left-radius: var(\n --#{root-defaults.$prefix}alert-border-top-left-radius,\n #{root-variables.$border-top-left-radius}\n);\n\n// --graupl-alert-border-top-right-radius\n$alert-border-top-right-radius: var(\n --#{root-defaults.$prefix}alert-border-top-right-radius,\n #{root-variables.$border-top-right-radius}\n);\n\n// --graupl-alert-border-bottom-left-radius\n$alert-border-bottom-left-radius: var(\n --#{root-defaults.$prefix}alert-border-bottom-left-radius,\n #{root-variables.$border-bottom-left-radius}\n);\n\n// --graupl-alert-border-bottom-right-radius\n$alert-border-bottom-right-radius: var(\n --#{root-defaults.$prefix}alert-border-bottom-right-radius,\n #{root-variables.$border-bottom-right-radius}\n);\n\n// --graupl-alert-border-radius\n$alert-border-radius: var(\n --#{root-defaults.$prefix}alert-border-radius,\n #{$alert-border-top-left-radius} #{$alert-border-top-right-radius}\n #{$alert-border-bottom-right-radius} #{$alert-border-bottom-left-radius}\n);\n\n// --graupl-alert-border-top-width\n$alert-border-top-width: var(\n --#{root-defaults.$prefix}alert-border-top-width,\n #{root-variables.$border-top-width}\n);\n\n// --graupl-alert-border-right-width\n$alert-border-right-width: var(\n --#{root-defaults.$prefix}alert-border-right-width,\n #{root-variables.$border-right-width}\n);\n\n// --graupl-alert-border-bottom-width\n$alert-border-bottom-width: var(\n --#{root-defaults.$prefix}alert-border-bottom-width,\n #{root-variables.$border-bottom-width}\n);\n\n// --graupl-alert-border-left-width\n$alert-border-left-width: var(\n --#{root-defaults.$prefix}alert-border-left-width,\n #{root-variables.$border-left-width}\n);\n\n// --graupl-alert-border-width\n$alert-border-width: var(\n --#{root-defaults.$prefix}alert-border-width,\n #{$alert-border-top-width} #{$alert-border-right-width}\n #{$alert-border-bottom-width} #{$alert-border-left-width}\n);\n\n// --graupl-alert-border-top-style\n$alert-border-top-style: var(\n --#{root-defaults.$prefix}alert-border-top-style,\n #{root-variables.$border-top-style}\n);\n\n// --graupl-alert-border-right-style\n$alert-border-right-style: var(\n --#{root-defaults.$prefix}alert-border-right-style,\n #{root-variables.$border-right-style}\n);\n\n// --graupl-alert-border-bottom-style\n$alert-border-bottom-style: var(\n --#{root-defaults.$prefix}alert-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n\n// --graupl-alert-border-left-style\n$alert-border-left-style: var(\n --#{root-defaults.$prefix}alert-border-left-style,\n #{root-variables.$border-left-style}\n);\n\n// --graupl-alert-border-style\n$alert-border-style: var(\n --#{root-defaults.$prefix}alert-border-style,\n #{$alert-border-top-style} #{$alert-border-right-style}\n #{$alert-border-bottom-style} #{$alert-border-left-style}\n);\n\n// Alert transition properties.\n// --graupl-alert-transition\n$alert-transition: var(\n --#{root-defaults.$prefix}alert-transition,\n opacity #{map.get(root-variables.$transition-durations, fast)}\n #{root-variables.$transition-timing-function},\n transform #{map.get(root-variables.$transition-durations, fast)}\n #{root-variables.$transition-timing-function}\n);\n\n// --graupl-alert-transition-reduced-motion\n$alert-transition-reduced-motion: var(\n --#{root-defaults.$prefix}alert-transition-reduced-motion,\n opacity #{map.get(root-variables.$transition-durations, fast)}\n #{root-variables.$transition-timing-function}\n);\n\n// Alert header properties.\n// --graupl-alert-header-padding-x\n$alert-header-padding-x: var(\n --#{root-defaults.$prefix}alert-header-padding-x,\n 0\n);\n\n// --graupl-alert-header-padding-y\n$alert-header-padding-y: var(\n --#{root-defaults.$prefix}alert-header-padding-y,\n 0\n);\n\n// --graupl-alert-header-padding\n$alert-header-padding: var(\n --#{root-defaults.$prefix}alert-header-padding,\n #{$alert-header-padding-y} #{$alert-header-padding-x}\n);\n\n// Alert title properties.\n// --graupl-alert-title-color\n$alert-title-color: var(\n --#{root-defaults.$prefix}alert-title-color,\n #{$alert-color}\n);\n\n// --graupl-alert-title-font-size\n$alert-title-font-size: var(\n --#{root-defaults.$prefix}alert-title-font-size,\n #{typography.$h4-font-size}\n);\n\n// --graupl-alert-title-font-weight\n$alert-title-font-weight: var(\n --#{root-defaults.$prefix}alert-title-font-weight,\n #{typography.$h4-font-weight}\n);\n\n// --graupl-alert-title-font-family\n$alert-title-font-family: var(\n --#{root-defaults.$prefix}alert-title-font-family,\n #{typography.$h4-font-family}\n);\n\n// --graupl-alert-title-line-height\n$alert-title-line-height: var(\n --#{root-defaults.$prefix}alert-title-line-height,\n #{typography.$h4-line-height}\n);\n\n// --graupl-alert-title-margin\n$alert-title-margin: var(--#{root-defaults.$prefix}alert-title-margin, 0 0 0 0);\n\n// Alert body properties.\n// --graupl-alert-body-padding-x\n$alert-body-padding-x: var(--#{root-defaults.$prefix}alert-body-padding-x, 0);\n\n// --graupl-alert-body-padding-y\n$alert-body-padding-y: var(--#{root-defaults.$prefix}alert-body-padding-y, 0);\n\n// --graupl-alert-body-padding\n$alert-body-padding: var(\n --#{root-defaults.$prefix}alert-body-padding,\n #{$alert-body-padding-y} #{$alert-body-padding-x}\n);\n\n// Alert footer properties.\n// --graupl-alert-footer-padding-x\n$alert-footer-padding-x: var(\n --#{root-defaults.$prefix}alert-footer-padding-x,\n 0\n);\n\n// --graupl-alert-footer-padding-y\n$alert-footer-padding-y: var(\n --#{root-defaults.$prefix}alert-footer-padding-y,\n 0\n);\n\n// --graupl-alert-footer-padding\n$alert-footer-padding: var(\n --#{root-defaults.$prefix}alert-footer-padding,\n #{$alert-footer-padding-y} #{$alert-footer-padding-x}\n);\n","// @graupl/core theme mixins.\n//\n// A series of mixins to tie styles to a theme-mode.\n\n@use \"../functions/theme\";\n@use \"../theme/color/defaults\" as color-defaults;\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n\n/// Applies styles to a specific theme mode.\n///\n/// @param {string} $theme-name\n/// The name of the theme mode to apply the styles to.\n@mixin theme($theme-name) {\n #{color-defaults.$theme-selector-base}#{color-defaults.$theme-selector-prefix}#{$theme-name}#{color-defaults.$theme-selector-suffix} {\n @content;\n }\n}\n\n/// Generates a theme modifiers with custom props.\n///\n/// @param {map} $theme-map\n/// The map of custom props.\n/// @param {string} $selector-base\n/// The selector base for the theme modifier.\n/// @param {string} $selector-prefix\n/// The selector prefix for the theme modifer.\n/// @param {string} $scope\n/// The scope of the custom properties.\n/// @param {string} $base\n/// The base selector to append the theme modifier to.\n@mixin generate-modifiers(\n $theme-map,\n $selector-base,\n $selector-prefix,\n $scope: \"\",\n $base: \"&\"\n) {\n @each $color, $map in $theme-map {\n // e.g. &.primary, &.secondary, &.tertiary\n #{$base}#{$selector-base}#{$selector-prefix}#{$color} {\n @each $prop, $value in $map {\n --#{root-defaults.$prefix}#{$scope}#{$prop}: #{theme.get(\n map.get($value, color),\n map.get($value, shade)\n )};\n }\n }\n }\n}\n"],"names":[]}
package/dist/css/component/badge.css CHANGED
@@ -1,2 +1,2 @@
1
- @layer graupl.component{.badge{align-items:center;border-radius:var(--graupl-badge-border-radius,var(--graupl-badge-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem))) var(--graupl-badge-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem))) var(--graupl-badge-border-bottom-right-radius,var(--graupl-border-bottom-right-radius,var(--graupl-border-radius,.125rem))) var(--graupl-badge-border-bottom-left-radius,var(--graupl-border-bottom-left-radius,var(--graupl-border-radius,.125rem))));border-style:var(--graupl-badge-border-style,var(--graupl-badge-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid))) var(--graupl-badge-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid))) var(--graupl-badge-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid))) var(--graupl-badge-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-width:var(--graupl-badge-border-width,var(--graupl-badge-border-top-width,var(--graupl-border-top-width,var(--graupl-border-width,.125rem))) var(--graupl-badge-border-right-width,var(--graupl-border-right-width,var(--graupl-border-width,.125rem))) var(--graupl-badge-border-bottom-width,var(--graupl-border-bottom-width,var(--graupl-border-width,.125rem))) var(--graupl-badge-border-left-width,var(--graupl-border-left-width,var(--graupl-border-width,.125rem))));display:flex;font-size:var(--graupl-badge-font-size,var(--graupl-font-sm,calc(var(--graupl-font-size-base, 1rem)*.833)));justify-content:center;padding:var(--graupl-badge-padding,var(--graupl-badge-padding-y,var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5))) var(--graupl-badge-padding-x,var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))))}}@layer graupl.theme{.badge{background:var(--graupl-badge-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-badge-border-color,var(--graupl-border-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));color:var(--graupl-badge-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))))))}.badge.primary{--graupl-badge-color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)));--graupl-badge-border-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)))}.badge.secondary{--graupl-badge-color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)));--graupl-badge-border-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)))}.badge.tertiary{--graupl-badge-color:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)));--graupl-badge-border-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)))}}
2
- /*# sourceMappingURL=badge.css.map */
1
+ @layer graupl.component{.badge{padding:var(--graupl-badge-padding,var(--graupl-badge-padding-y,var(--graupl-spacer-2,calc(.25*var(--graupl-spacer,1rem))))var(--graupl-badge-padding-x,var(--graupl-spacer-3,calc(.5*var(--graupl-spacer,1rem)))));border-width:var(--graupl-badge-border-width,var(--graupl-badge-border-top-width,var(--graupl-border-top-width,var(--graupl-border-width,.125rem)))var(--graupl-badge-border-right-width,var(--graupl-border-right-width,var(--graupl-border-width,.125rem)))var(--graupl-badge-border-bottom-width,var(--graupl-border-bottom-width,var(--graupl-border-width,.125rem)))var(--graupl-badge-border-left-width,var(--graupl-border-left-width,var(--graupl-border-width,.125rem))));border-style:var(--graupl-badge-border-style,var(--graupl-badge-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid)))var(--graupl-badge-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid)))var(--graupl-badge-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid)))var(--graupl-badge-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-radius:var(--graupl-badge-border-radius,var(--graupl-badge-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem)))var(--graupl-badge-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem)))var(--graupl-badge-border-bottom-right-radius,var(--graupl-border-bottom-right-radius,var(--graupl-border-radius,.125rem)))var(--graupl-badge-border-bottom-left-radius,var(--graupl-border-bottom-left-radius,var(--graupl-border-radius,.125rem))));font-size:var(--graupl-badge-font-size,var(--graupl-font-sm,calc(.833*var(--graupl-font-size-base,1rem))));justify-content:center;align-items:center;display:flex}}@layer graupl.theme{.badge{border-color:var(--graupl-badge-border-color,var(--graupl-border-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));background:var(--graupl-badge-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-badge-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))))))}.badge.primary{--graupl-badge-color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)));--graupl-badge-border-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)))}.badge.secondary{--graupl-badge-color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)));--graupl-badge-border-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)))}.badge.tertiary{--graupl-badge-color:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)));--graupl-badge-border-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)))}}
2
+ /*# sourceMappingURL=badge.css.map */