@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/badge.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/badge/_index.scss","../../../node_modules/@graupl/core/src/scss/component/badge/_variables.scss","badge.css"],"names":[],"mappings":"AASI,wBCgKF,OAEE,kBAAA,CAKA,+gBCrEkB,CDoElB,6cC3FiB,CD0FjB,qdCjHiB,CD6GjB,YAAA,CAOA,2GCnKc,CD8Jd,sBAAA,CACA,oNElKF,CACF,CHHI,oBC8KF,OAEE,oNCrKe,CDoKf,yOC/JiB,CDiKjB,gMExKF,CF4KI,eAEI,wIAAA,CAAA,+IE1KR,CFwKI,iBAEI,8IAAA,CAAA,qJEtKR,CFoKI,gBAEI,2IAAA,CAAA,kJElKR,CACF","file":"badge.css"}
1
+ {"version":3,"sourceRoot":null,"mappings":"AESI,wBCgKF,yyDDhKE,oBC8KF,uoBE/IE,wSAAA,sTAAA","sources":["dist/css/component/badge.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/badge/_index.scss","var/www/html/node_modules/@graupl/core/src/scss/component/badge/_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.component {\n .badge {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--graupl-badge-padding, var(--graupl-badge-padding-y, var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem)))) var(--graupl-badge-padding-x, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))));\n border-width: var(--graupl-badge-border-width, var(--graupl-badge-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))) var(--graupl-badge-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))) var(--graupl-badge-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))) var(--graupl-badge-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem))));\n 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))));\n border-radius: var(--graupl-badge-border-radius, var(--graupl-badge-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-badge-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-badge-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-badge-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))));\n font-size: var(--graupl-badge-font-size, var(--graupl-font-sm, calc(0.833 * var(--graupl-font-size-base, 1rem))));\n }\n}\n@layer graupl.theme {\n .badge {\n 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, hsl(219, 100%, 10%))))))));\n 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, hsl(219, 100%, 95%)))))));\n 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, hsl(219, 100%, 10%)))))));\n }\n .badge.primary {\n --graupl-badge-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-badge-border-color: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n }\n .badge.secondary {\n --graupl-badge-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-badge-border-color: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n }\n .badge.tertiary {\n --graupl-badge-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-badge-border-color: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\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 badge base styles.\n//\n// This module provides the base styles for the badge component.\n//\n// The badge component is meant to be used on <span>, <div>, or <a> elements, but can be applied to anything.\n//\n// The following selectors are generated by default:\n// - `.badge`: The badge component.\n// - `.primary`: A component modifier to use the primary colour for the badge component.\n// - `.secondary`: A component modifier to use the secondary colour for the badge component.\n// - `.tertiary`: A component modifier to use the tertiary colour for the badge component.\n//\n// The following custom properties can be used to customize the badge component:\n// | Property | Description | Default Value |\n// | --- | --- | --- |\n// | `--graupl-badge-font-size` | The font size of the badge component. | `var(--graupl-font-sm)` |\n// | `--graupl-badge-background` | The background colour of the badge component. | `var(--graupl-background)` |\n// | `--graupl-badge-color` | The text colour of the badge component. | `var(--graupl-color)` |\n// | `--graupl-badge-border-color` | The border colour of the badge component. | `var(--graupl-border-color)` |\n// | `--graupl-badge-padding-x` | The horizontal padding of the badge component. | `var(--graupl-spacer-5)` |\n// | `--graupl-badge-padding-y` | The vertical padding of the badge component. | `var(--graupl-spacer-3)` |\n// | `--graupl-badge-padding` | The padding of the badge component (combines y and x padding). | `var(--graupl-badge-padding-y) var(--graupl-badge-padding-x)` |\n// | `--graupl-badge-border-top-width` | The top border width of the badge component. | `var(--graupl-border-top-width)` |\n// | `--graupl-badge-border-right-width` | The right border width of the badge component. | `var(--graupl-border-right-width)` |\n// | `--graupl-badge-border-bottom-width` | The bottom border width of the badge component. | `var(--graupl-border-bottom-width)` |\n// | `--graupl-badge-border-left-width` | The left border width of the badge component. | `var(--graupl-border-left-width)` |\n// | `--graupl-badge-border-width` | The border width of the badge component (combines top, right, bottom, and left widths). | `var(--graupl-badge-border-top-width) var(--graupl-badge-border-right-width) var(--graupl-badge-border-bottom-width) var(--graupl-badge-border-left-width)` |\n// | `--graupl-badge-border-top-style` | The top border style of the badge component. | `var(--graupl-border-top-style)` |\n// | `--graupl-badge-border-right-style` | The right border style of the badge component. | `var(--graupl-border-right-style)` |\n// | `--graupl-badge-border-bottom-style` | The bottom border style of the badge component. | `var(--graupl-border-bottom-style)` |\n// | `--graupl-badge-border-left-style` | The left border style of the badge component. | `var(--graupl-border-left-style)` |\n// | `--graupl-badge-border-style` | The border style of the badge component (combines top, right, bottom, and left styles). | `var(--graupl-badge-border-top-style) var(--graupl-badge-border-right-style) var(--graupl-badge-border-bottom-style) var(--graupl-badge-border-left-style)` |\n// | `--graupl-badge-border-top-left-radius` | The top-left border radius of the badge component. | `var(--graupl-border-top-left-radius)` |\n// | `--graupl-badge-border-top-right-radius` | The top-right border radius of the badge component. | `var(--graupl-border-top-right-radius)` |\n// | `--graupl-badge-border-bottom-right-radius` | The bottom-right border radius of the badge component. | `var(--graupl-border-bottom-right-radius)` |\n// | `--graupl-badge-border-bottom-left-radius` | The bottom-left border radius of the badge component. | `var(--graupl-border-bottom-left-radius)` |\n// | `--graupl-badge-border-radius` | The border radius of the badge component (combines top-left, top-right, bottom-right, and bottom-left radii). | `var(--graupl-badge-border-top-left-radius) var(--graupl-badge-border-top-right-radius) var(--graupl-badge-border-bottom-right-radius) var(--graupl-badge-border-bottom-left-radius)` |\n//\n// The following sass variables can be used to customize the generation of the badge component:\n// | Variable | Description | Default Value |\n// | --- | --- | --- |\n// | `$selector-base` | The selector base for the component. | `.` |\n// | `$modifier-selector-base` | The selector base for component modifiers. | `.` |\n// | `$themeable` | Flag to generate theme modifiers. | `true`. |\n// | `$generate-base-theme-map` | A flag to generate the base theme maps for badge variants. | `true` |\n// | `$badge-selector-base` | The selector base for the badge component. | `$selector-base` |\n// | `$badge-selector` | The badge component selector. | `badge` |\n// | `$badge-theme-selector-base` | The selector base for the badge theme component modifiers. | `$modifier-selector-base` |\n// | `$badge-theme-selector-prefix` | The badge theme component modifier selector prefix. | `\"\"` |\n// | `$badge-theme-mappings` | A map of properties and color shades used generate all badge variants. | `()` |\n// | `$badge-theme-map` | A map of all properties, colors, and color shades used to generate all badge variants. | `()` |\n//\n// ## Using `$badge-theme-mappings`\n//\n// `$badge-theme-mappings` is a 1-level map of properties and shade values.\n//\n// e.g.\n// ```scss\n// $badge-theme-mappings: (\n// border-color: 700,\n// )\n// ```\n//\n// This directly[1] maps to all badge variants, telling them what shade to use for said property.\n// All badge variants will use the following based on the example above:\n// - Primary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--primary--700`,\n// - Secondary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--secondary--700`, and\n// - Tertiary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--tertiary--700`.\n//\n// You can use this to customize _all_ badges variants in the same way.\n//\n// For example, if you use the following map:\n// ```scss\n// $badge-theme-mappings: (\n// border-color: 500,\n// )\n// ```\n//\n// All badge variants will use the following:\n// - Primary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--primary--500`,\n// - Secondary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--secondary--500`, and\n// - Tertiary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--tertiary--500`.\n//\n// [1] `$badge-theme-mappings` gets parsed into a larger, more explicit map: `$badge-theme-map`.\n//\n// Using `$badge-theme-map`\n//\n// `$badge-theme-map` is a multi-level map of properties, colors, and shade values.\n//\n// e.g.\n// ```scss\n// $badge-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 badge variants, telling them what shade to use for said property.\n// The badge variants will use the following based on the example above:\n// - Primary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--primary--700`,\n// - Secondary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--secondary--700`, and\n// - Tertiary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--tertiary--700`.\n//\n// You can use this to customize badge variants individually.\n//\n// For example, if you use the following map:\n//\n// ```scss\n// $badge-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 badge variants will use the following:\n// - Primary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--secondary--700`,\n// - Secondary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--secondary--700`, and\n// - Tertiary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--secondary--700`.\n//\n// @example\n// <badge class=\"badge primary\">Primary Badge</badge>\n//\n// @example\n// <a class=\"badge secondary\" href=\"#\">Secondary Badge</a>\n//\n// @example\n// <a class=\"badge tertiary\" href=\"#\">Tertiary Badge</a>\n\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/theme\";\n@use \"../../mixins/layer\" as *;\n@use \"defaults\";\n@use \"sass:map\";\n@use \"variables\" as *;\n\n@include layer(component) {\n // .badge\n #{defaults.$badge-selector-base}#{defaults.$badge-selector} {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: $badge-padding;\n border-width: $badge-border-width;\n border-style: $badge-border-style;\n border-radius: $badge-border-radius;\n font-size: $badge-font-size;\n }\n}\n\n@include layer(theme) {\n // .badge\n #{defaults.$badge-selector-base}#{defaults.$badge-selector} {\n border-color: $badge-border-color;\n background: $badge-background;\n color: $badge-color;\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$badge-theme-map,\n defaults.$badge-theme-selector-base,\n defaults.$badge-theme-selector-prefix,\n \"badge-\"\n );\n }\n }\n}\n","// @graupl/core badge 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-badge-font-size | var(--graupl-font-sm) |\n// | --graupl-badge-background | var(--graupl-background) |\n// | --graupl-badge-color | var(--graupl-color) |\n// | --graupl-badge-border-color | var(--graupl-border-color) |\n// | --graupl-badge-padding-x | var(--graupl-spacer-5) |\n// | --graupl-badge-padding-y | var(--graupl-spacer-3) |\n// | --graupl-badge-padding | var(--graupl-badge-padding-y) var(--graupl-badge-padding-x) |\n// | --graupl-badge-border-top-width | var(--graupl-border-top-width) |\n// | --graupl-badge-border-right-width | var(--graupl-border-right-width) |\n// | --graupl-badge-border-bottom-width | var(--graupl-border-bottom-width) |\n// | --graupl-badge-border-left-width | var(--graupl-border-left-width) |\n// | --graupl-badge-border-width | var(--graupl-badge-border-top-width) var(--graupl-badge-border-right-width) var(--graupl-badge-border-bottom-width) var(--graupl-badge-border-left-width) |\n// | --graupl-badge-border-top-style | var(--graupl-border-top-style) |\n// | --graupl-badge-border-right-style | var(--graupl-border-right-style) |\n// | --graupl-badge-border-bottom-style | var(--graupl-border-bottom-style) |\n// | --graupl-badge-border-left-style | var(--graupl-border-left-style) |\n// | --graupl-badge-border-style | var(--graupl-badge-border-top-style) var(--graupl-badge-border-right-style) var(--graupl-badge-border-bottom-style) var(--graupl-badge-border-left-style) |\n// | --graupl-badge-border-top-left-radius | var(--graupl-border-top-left-radius) |\n// | --graupl-badge-border-top-right-radius | var(--graupl-border-top-right-radius) |\n// | --graupl-badge-border-bottom-right-radius | var(--graupl-border-bottom-right-radius) |\n// | --graupl-badge-border-bottom-left-radius | var(--graupl-border-bottom-left-radius) |\n// | --graupl-badge-border-radius | var(--graupl-badge-border-top-left-radius) var(--graupl-badge-border-top-right-radius) var(--graupl-badge-border-bottom-right-radius) var(--graupl-badge-border-bottom-left-radius) |\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// Typography.\n// --graupl-badge-font-size\n$badge-font-size: var(\n --#{root-defaults.$prefix}badge-font-size,\n #{map.get(typography.$font-sizes, sm)}\n);\n\n// Colors.\n// --graupl-badge-background\n$badge-background: var(\n --#{root-defaults.$prefix}badge-background,\n #{color.$background}\n);\n\n// --graupl-badge-color\n$badge-color: var(--#{root-defaults.$prefix}badge-color, #{color.$color});\n\n// --graupl-badge-border-color\n$badge-border-color: var(\n --#{root-defaults.$prefix}badge-border-color,\n #{color.$border-color}\n);\n\n// Spacing.\n// --graupl-badge-padding-x\n$badge-padding-x: var(\n --#{root-defaults.$prefix}badge-padding-x,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-badge-padding-y\n$badge-padding-y: var(\n --#{root-defaults.$prefix}badge-padding-y,\n #{map.get(root-variables.$spacers, 2)}\n);\n\n// --graupl-badge-padding\n$badge-padding: var(\n --#{root-defaults.$prefix}badge-padding,\n #{$badge-padding-y} #{$badge-padding-x}\n);\n\n// Border widths.\n// --graupl-badge-border-top-width\n$badge-border-top-width: var(\n --#{root-defaults.$prefix}badge-border-top-width,\n #{root-variables.$border-top-width}\n);\n\n// --graupl-badge-border-right-width\n$badge-border-right-width: var(\n --#{root-defaults.$prefix}badge-border-right-width,\n #{root-variables.$border-right-width}\n);\n\n// --graupl-badge-border-bottom-width\n$badge-border-bottom-width: var(\n --#{root-defaults.$prefix}badge-border-bottom-width,\n #{root-variables.$border-bottom-width}\n);\n\n// --graupl-badge-border-left-width\n$badge-border-left-width: var(\n --#{root-defaults.$prefix}badge-border-left-width,\n #{root-variables.$border-left-width}\n);\n\n// --graupl-badge-border-width\n$badge-border-width: var(\n --#{root-defaults.$prefix}badge-border-width,\n #{$badge-border-top-width} #{$badge-border-right-width}\n #{$badge-border-bottom-width} #{$badge-border-left-width}\n);\n\n// Border styles.\n// --graupl-badge-border-top-style\n$badge-border-top-style: var(\n --#{root-defaults.$prefix}badge-border-top-style,\n #{root-variables.$border-top-style}\n);\n\n// --graupl-badge-border-right-style\n$badge-border-right-style: var(\n --#{root-defaults.$prefix}badge-border-right-style,\n #{root-variables.$border-right-style}\n);\n\n// --graupl-badge-border-bottom-style\n$badge-border-bottom-style: var(\n --#{root-defaults.$prefix}badge-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n\n// --graupl-badge-border-left-style\n$badge-border-left-style: var(\n --#{root-defaults.$prefix}badge-border-left-style,\n #{root-variables.$border-left-style}\n);\n\n// --graupl-badge-border-style\n$badge-border-style: var(\n --#{root-defaults.$prefix}badge-border-style,\n #{$badge-border-top-style} #{$badge-border-right-style}\n #{$badge-border-bottom-style} #{$badge-border-left-style}\n);\n\n// Border radii.\n// --graupl-badge-border-top-left-radius\n$badge-border-top-left-radius: var(\n --#{root-defaults.$prefix}badge-border-top-left-radius,\n #{root-variables.$border-top-left-radius}\n);\n\n// --graupl-badge-border-top-right-radius\n$badge-border-top-right-radius: var(\n --#{root-defaults.$prefix}badge-border-top-right-radius,\n #{root-variables.$border-top-right-radius}\n);\n\n// --graupl-badge-border-bottom-right-radius\n$badge-border-bottom-right-radius: var(\n --#{root-defaults.$prefix}badge-border-bottom-right-radius,\n #{root-variables.$border-bottom-right-radius}\n);\n\n// --graupl-badge-border-bottom-left-radius\n$badge-border-bottom-left-radius: var(\n --#{root-defaults.$prefix}badge-border-bottom-left-radius,\n #{root-variables.$border-bottom-left-radius}\n);\n\n// --graupl-badge-border-radius\n$badge-border-radius: var(\n --#{root-defaults.$prefix}badge-border-radius,\n #{$badge-border-top-left-radius} #{$badge-border-top-right-radius}\n #{$badge-border-bottom-right-radius} #{$badge-border-bottom-left-radius}\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/card.css CHANGED
@@ -1,2 +1,2 @@
1
- @layer graupl.component{.card{border-radius:var(--graupl-card-border-radius,var(--graupl-card-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem))) var(--graupl-card-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem))) var(--graupl-card-border-bottom-right-radius,var(--graupl-border-bottom-right-radius,var(--graupl-border-radius,.125rem))) var(--graupl-card-border-bottom-left-radius,var(--graupl-border-bottom-left-radius,var(--graupl-border-radius,.125rem))));border-style:var(--graupl-card-border-style,var(--graupl-card-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid))) var(--graupl-card-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid))) var(--graupl-card-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid))) var(--graupl-card-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-width:var(--graupl-card-border-width,var(--graupl-card-border-top-width,var(--graupl-border-top-width,var(--graupl-border-width,.125rem))) var(--graupl-card-border-right-width,var(--graupl-border-right-width,var(--graupl-border-width,.125rem))) var(--graupl-card-border-bottom-width,var(--graupl-border-bottom-width,var(--graupl-border-width,.125rem))) var(--graupl-card-border-left-width,var(--graupl-border-left-width,var(--graupl-border-width,.125rem))));display:grid;gap:var(--graupl-card-gap,var(--graupl-card-column-gap,var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))) var(--graupl-card-row-gap,var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))));grid-template-columns:[image-start content-start] 1fr [image-end content-end];isolation:isolate;padding:var(--graupl-card-padding,var(--graupl-card-padding-y,var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))) var(--graupl-card-padding-x,var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))));position:relative;transform:var(--graupl-card-transform,none);transition:var(--graupl-card-transition,transform var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease))}.card,.card.top{grid-template-rows:[image-start] var(--graupl-card-image-ratio,auto) [image-end content-start] var(--graupl-card-content-ratio,1fr) [content-end]}.card.bottom,.card.inverse{grid-template-rows:[content-start] var(--graupl-card-content-ratio,1fr) [content-end image-start] var(--graupl-card-image-ratio,auto) [image-end]}.card:hover{--graupl-card-transform:var(--graupl-card-hover-transform,none)}.card.horizontal,.card.horizontal.left{--graupl-card-content-ratio:var(--graupl-horizontal-card-content-ratio,3fr);--graupl-card-image-ratio:var(--graupl-horizontal-card-image-ratio,2fr);grid-template-columns:[image-start] var(--graupl-card-image-ratio,auto) [image-end content-start] var(--graupl-card-content-ratio,1fr) [content-end];grid-template-rows:[image-start content-start] 1fr [image-end content-end]}.card.horizontal .card-image img,.card.horizontal.left .card-image img{border-radius:calc(var(--graupl-card-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, .125rem))) - min(var(--graupl-card-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, .125rem))), var(--graupl-card-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, .125rem))))) 0 0 calc(var(--graupl-card-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, .125rem))) - min(var(--graupl-card-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, .125rem))), var(--graupl-card-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, .125rem)))))}.card.horizontal.inverse,.card.horizontal.right{grid-template-columns:[content-start] var(--graupl-card-content-ratio,1fr) [content-end image-start] var(--graupl-card-image-ratio,auto) [image-end]}.card.horizontal.inverse .card-image img,.card.horizontal.right .card-image img{border-radius:0 calc(var(--graupl-card-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, .125rem))) - min(var(--graupl-card-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, .125rem))), var(--graupl-card-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, .125rem))))) calc(var(--graupl-card-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, .125rem))) - min(var(--graupl-card-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, .125rem))), var(--graupl-card-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, .125rem))))) 0}.card-image{grid-area:image;padding:var(--graupl-card-image-padding,var(--graupl-card-image-padding-y,var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))) var(--graupl-card-image-padding-x,var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))))}.card-image img{border-radius:calc(var(--graupl-card-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, .125rem))) - min(var(--graupl-card-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, .125rem))), var(--graupl-card-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, .125rem))))) calc(var(--graupl-card-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, .125rem))) - min(var(--graupl-card-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, .125rem))), var(--graupl-card-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, .125rem))))) 0 0;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.card-content{display:flex;flex-direction:column;gap:var(--graupl-card-content-gap,var(--graupl-card-content-column-gap,var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))) var(--graupl-card-content-row-gap,var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5))));grid-area:content;padding:var(--graupl-card-content-padding,var(--graupl-card-content-padding-y,var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5))) var(--graupl-card-content-padding-x,var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))))}.card-body{flex:1 0 auto}.card-footer,.card-title{flex:0 0 auto}@container (width <= 71ch){.card.horizontal,.card.horizontal.bottom,.card.horizontal.inverse,.card.horizontal.left,.card.horizontal.right,.card.horizontal.top{--graupl-horizontal-card-image-ratio:auto;--graupl-horizontal-card-content-ratio:1fr;grid-template-columns:[image-start content-start] 1fr [image-end content-end]}.card.horizontal,.card.horizontal.left,.card.horizontal.right,.card.horizontal.top{grid-template-rows:[image-start] var(--graupl-card-image-ratio,auto) [image-end content-start] var(--graupl-card-content-ratio,1fr) [content-end]}.card.horizontal.bottom,.card.horizontal.inverse{grid-template-rows:[content-start] var(--graupl-card-content-ratio,1fr) [content-end image-start] var(--graupl-card-image-ratio,auto) [image-end]}}@media (prefers-reduced-motion:reduce){.card{--graupl-card-transition:var(--graupl-card-transition-reduced-motion,none)}}}@layer graupl.theme{.card{background:var(--graupl-card-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-card-border-color,var(--graupl-card-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-card-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))))))}.card-title{color:var(--graupl-card-title-color,var(--graupl-card-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-card-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-card-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-card-title-line-height,var(--graupl-h4-line-height,var(--graupl-heading-line-height,var(--graupl-line-height,1.2em))))}}
2
- /*# sourceMappingURL=card.css.map */
1
+ @layer graupl.component{.card{padding:var(--graupl-card-padding,var(--graupl-card-padding-y,var(--graupl-spacer-0,calc(0*var(--graupl-spacer,1rem))))var(--graupl-card-padding-x,var(--graupl-spacer-0,calc(0*var(--graupl-spacer,1rem)))));transform:var(--graupl-card-transform,none);transition:var(--graupl-card-transition,transform var(--graupl-transition-duration-fast,.15s)var(--graupl-transition-timing-function,ease));border-width:var(--graupl-card-border-width,var(--graupl-card-border-top-width,var(--graupl-border-top-width,var(--graupl-border-width,.125rem)))var(--graupl-card-border-right-width,var(--graupl-border-right-width,var(--graupl-border-width,.125rem)))var(--graupl-card-border-bottom-width,var(--graupl-border-bottom-width,var(--graupl-border-width,.125rem)))var(--graupl-card-border-left-width,var(--graupl-border-left-width,var(--graupl-border-width,.125rem))));border-style:var(--graupl-card-border-style,var(--graupl-card-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid)))var(--graupl-card-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid)))var(--graupl-card-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid)))var(--graupl-card-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-radius:var(--graupl-card-border-radius,var(--graupl-card-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem)))var(--graupl-card-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem)))var(--graupl-card-border-bottom-right-radius,var(--graupl-border-bottom-right-radius,var(--graupl-border-radius,.125rem)))var(--graupl-card-border-bottom-left-radius,var(--graupl-border-bottom-left-radius,var(--graupl-border-radius,.125rem))));gap:var(--graupl-card-gap,var(--graupl-card-column-gap,var(--graupl-spacer-0,calc(0*var(--graupl-spacer,1rem))))var(--graupl-card-row-gap,var(--graupl-spacer-0,calc(0*var(--graupl-spacer,1rem)))));isolation:isolate;grid-template-columns:[image-start content-start]1fr[image-end content-end];display:grid;position:relative}.card,.card.top{grid-template-rows:[image-start]var(--graupl-card-image-ratio,auto)[image-end content-start]var(--graupl-card-content-ratio,1fr)[content-end]}.card.bottom,.card.inverse{grid-template-rows:[content-start]var(--graupl-card-content-ratio,1fr)[content-end image-start]var(--graupl-card-image-ratio,auto)[image-end]}.card:hover{--graupl-card-transform:var(--graupl-card-hover-transform,none)}.card.horizontal,.card.horizontal.left{--graupl-card-content-ratio:var(--graupl-horizontal-card-content-ratio,3fr);--graupl-card-image-ratio:var(--graupl-horizontal-card-image-ratio,2fr);grid-template-columns:[image-start]var(--graupl-card-image-ratio,auto)[image-end content-start]var(--graupl-card-content-ratio,1fr)[content-end];grid-template-rows:[image-start content-start]1fr[image-end content-end]}.card.horizontal .card-image img,.card.horizontal.left .card-image img{border-radius:calc(var(--graupl-card-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem))) - min(var(--graupl-card-border-top-width,var(--graupl-border-top-width,var(--graupl-border-width,.125rem))),var(--graupl-card-border-left-width,var(--graupl-border-left-width,var(--graupl-border-width,.125rem)))))0 0 calc(var(--graupl-card-border-bottom-left-radius,var(--graupl-border-bottom-left-radius,var(--graupl-border-radius,.125rem))) - min(var(--graupl-card-border-bottom-width,var(--graupl-border-bottom-width,var(--graupl-border-width,.125rem))),var(--graupl-card-border-left-width,var(--graupl-border-left-width,var(--graupl-border-width,.125rem)))))}.card.horizontal.right,.card.horizontal.inverse{grid-template-columns:[content-start]var(--graupl-card-content-ratio,1fr)[content-end image-start]var(--graupl-card-image-ratio,auto)[image-end]}.card.horizontal.right .card-image img,.card.horizontal.inverse .card-image img{border-radius:0 calc(var(--graupl-card-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem))) - min(var(--graupl-card-border-top-width,var(--graupl-border-top-width,var(--graupl-border-width,.125rem))),var(--graupl-card-border-right-width,var(--graupl-border-right-width,var(--graupl-border-width,.125rem)))))calc(var(--graupl-card-border-bottom-right-radius,var(--graupl-border-bottom-right-radius,var(--graupl-border-radius,.125rem))) - min(var(--graupl-card-border-bottom-width,var(--graupl-border-bottom-width,var(--graupl-border-width,.125rem))),var(--graupl-card-border-right-width,var(--graupl-border-right-width,var(--graupl-border-width,.125rem)))))0}.card-image{padding:var(--graupl-card-image-padding,var(--graupl-card-image-padding-y,var(--graupl-spacer-0,calc(0*var(--graupl-spacer,1rem))))var(--graupl-card-image-padding-x,var(--graupl-spacer-0,calc(0*var(--graupl-spacer,1rem)))));grid-area:image}.card-image img{border-radius:calc(var(--graupl-card-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem))) - min(var(--graupl-card-border-top-width,var(--graupl-border-top-width,var(--graupl-border-width,.125rem))),var(--graupl-card-border-left-width,var(--graupl-border-left-width,var(--graupl-border-width,.125rem)))))calc(var(--graupl-card-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem))) - min(var(--graupl-card-border-top-width,var(--graupl-border-top-width,var(--graupl-border-width,.125rem))),var(--graupl-card-border-right-width,var(--graupl-border-right-width,var(--graupl-border-width,.125rem)))))0 0;object-fit:cover;width:100%;height:100%}.card-content{padding:var(--graupl-card-content-padding,var(--graupl-card-content-padding-y,var(--graupl-spacer-3,calc(.5*var(--graupl-spacer,1rem))))var(--graupl-card-content-padding-x,var(--graupl-spacer-5,calc(1*var(--graupl-spacer,1rem)))));gap:var(--graupl-card-content-gap,var(--graupl-card-content-column-gap,var(--graupl-spacer-0,calc(0*var(--graupl-spacer,1rem))))var(--graupl-card-content-row-gap,var(--graupl-spacer-3,calc(.5*var(--graupl-spacer,1rem)))));flex-direction:column;grid-area:content;display:flex}.card-body{flex:1 0 auto}.card-footer,.card-title{flex:none}@container (width<=767px){.card.horizontal,.card.horizontal.left,.card.horizontal.top,.card.horizontal.right,.card.horizontal.bottom,.card.horizontal.inverse{--graupl-horizontal-card-image-ratio:auto;--graupl-horizontal-card-content-ratio:1fr;grid-template-columns:[image-start content-start]1fr[image-end content-end]}.card.horizontal,.card.horizontal.left,.card.horizontal.right,.card.horizontal.top{grid-template-rows:[image-start]var(--graupl-card-image-ratio,auto)[image-end content-start]var(--graupl-card-content-ratio,1fr)[content-end]}.card.horizontal.bottom,.card.horizontal.inverse{grid-template-rows:[content-start]var(--graupl-card-content-ratio,1fr)[content-end image-start]var(--graupl-card-image-ratio,auto)[image-end]}}@media (prefers-reduced-motion:reduce){.card{--graupl-card-transition:var(--graupl-card-transition-reduced-motion,none)}}}@layer graupl.theme{.card{--graupl-color:var(--graupl-card-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))));--graupl-background:var(--graupl-card-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-card-border-color,var(--graupl-card-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-card-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-card-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))))))}.card-title{color:var(--graupl-card-title-color,var(--graupl-card-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-card-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-card-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-card-title-line-height,var(--graupl-h4-line-height,var(--graupl-heading-line-height,var(--graupl-line-height,1.2em))))}}
2
+ /*# sourceMappingURL=card.css.map */
package/dist/css/component/card.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/card/_index.scss","../../../node_modules/@graupl/core/src/scss/component/card/_variables.scss","card.css","../../../node_modules/@graupl/core/src/scss/mixins/_container.scss","../../../node_modules/@graupl/core/src/scss/mixins/_animation.scss"],"names":[],"mappings":"AASI,wBCCF,MASE,0gBCoEiB,CDrEjB,wcC+GgB,CDhHhB,gdC2FgB,CDjGhB,YAAA,CASA,uMCkCO,CDzCP,6EAAA,CAQA,iBAAA,CAPA,gNCOW,CDTX,iBAAA,CAGA,2CCqBa,CDpBb,4IEFF,CFSE,gBAEE,iJERJ,CFgBE,2BAEE,iJEfJ,CFuBE,YACE,+DErBJ,CFyBI,uCAEE,2EAAA,CACA,uEAAA,CAEA,oJACE,CAKF,0EE9BN,CFgCM,uEACE,6sBE9BR,CF8CI,gDAEE,oJE7CN,CFoDM,gFACE,qtBElDR,CFqEA,YACE,eAAA,CACA,kOEnEF,CFqEE,gBAGE,qsBAAA,CADA,WAAA,CAcA,mBAAA,CAAA,gBAAA,CAfA,UEhEJ,CFmFA,cACE,YAAA,CAEA,qBAAA,CAEA,gOCsDe,CDzDf,iBAAA,CAEA,yOEhFF,CFoFA,WACE,aElFF,CFyFA,yBACE,aEpFF,CCzCA,2BHmIM,oIAME,yCAAA,CACA,0CAAA,CAEA,6EE7FN,CFgGI,mFAIE,iJEjGN,CFyGI,iDAEE,iJExGN,CACF,CElEA,uCJqLE,MACE,0EEhHF,CACF,CACF,CH1EI,oBC8LF,MAEE,mNC7Ic,CD4Id,sOCrIgB,CDuIhB,+LEjHF,CFoHA,YACE,8NCVe,CDWf,6ICPmB,CDQnB,iLCJqB,CDKrB,+IElHF,CACF","file":"card.css"}
1
+ {"version":3,"sourceRoot":null,"mappings":"AESI,wBCqNF,0mEAcE,8JAWA,yKAUA,4EAOE,qZAcE,gwBAmBF,iMAUE,gxBAsBN,4PAIE,wuBAqBF,wgBASA,yBAKA,mCEzVA,0BFwWM,qSAaA,iOAaA,gMG9YN,uCH6ZE,mFD/ZA,oBCuaF,uiCAmBA","sources":["dist/css/component/card.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/card/_index.scss","var/www/html/node_modules/@graupl/core/src/scss/component/card/_variables.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_container.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_animation.scss"],"sourcesContent":["/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */\n@layer graupl.component {\n .card {\n display: grid;\n position: relative;\n grid-template-columns: [image-start content-start] 1fr [image-end content-end];\n padding: var(--graupl-card-padding, var(--graupl-card-padding-y, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))) var(--graupl-card-padding-x, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))));\n transform: var(--graupl-card-transform, none);\n transition: var(--graupl-card-transition, transform var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease));\n border-width: var(--graupl-card-border-width, var(--graupl-card-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))) var(--graupl-card-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))) var(--graupl-card-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))) var(--graupl-card-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem))));\n border-style: var(--graupl-card-border-style, var(--graupl-card-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-card-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-card-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-card-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n border-radius: var(--graupl-card-border-radius, var(--graupl-card-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-card-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-card-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-card-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))));\n gap: var(--graupl-card-gap, var(--graupl-card-column-gap, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))) var(--graupl-card-row-gap, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))));\n isolation: isolate;\n }\n .card, .card.top {\n grid-template-rows: [image-start] var(--graupl-card-image-ratio, auto) [image-end content-start] var(--graupl-card-content-ratio, 1fr) [content-end];\n }\n .card.bottom, .card.inverse {\n grid-template-rows: [content-start] var(--graupl-card-content-ratio, 1fr) [content-end image-start] var(--graupl-card-image-ratio, auto) [image-end];\n }\n .card:hover {\n --graupl-card-transform: var(--graupl-card-hover-transform, none);\n }\n .card.horizontal, .card.horizontal.left {\n --graupl-card-content-ratio: var(--graupl-horizontal-card-content-ratio, 3fr);\n --graupl-card-image-ratio: var(--graupl-horizontal-card-image-ratio, 2fr);\n grid-template-columns: [image-start] var(--graupl-card-image-ratio, auto) [image-end content-start] var(--graupl-card-content-ratio, 1fr) [content-end];\n grid-template-rows: [image-start content-start] 1fr [image-end content-end];\n }\n .card.horizontal .card-image img, .card.horizontal.left .card-image img {\n border-radius: calc(var(--graupl-card-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) - min(var(--graupl-card-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))), var(--graupl-card-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem))))) 0 0 calc(var(--graupl-card-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))) - min(var(--graupl-card-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))), var(--graupl-card-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem)))));\n }\n .card.horizontal.right, .card.horizontal.inverse {\n grid-template-columns: [content-start] var(--graupl-card-content-ratio, 1fr) [content-end image-start] var(--graupl-card-image-ratio, auto) [image-end];\n }\n .card.horizontal.right .card-image img, .card.horizontal.inverse .card-image img {\n border-radius: 0 calc(var(--graupl-card-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) - min(var(--graupl-card-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))), var(--graupl-card-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))))) calc(var(--graupl-card-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) - min(var(--graupl-card-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))), var(--graupl-card-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))))) 0;\n }\n .card-image {\n grid-area: image;\n padding: var(--graupl-card-image-padding, var(--graupl-card-image-padding-y, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))) var(--graupl-card-image-padding-x, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))));\n }\n .card-image img {\n width: 100%;\n height: 100%;\n border-radius: calc(var(--graupl-card-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) - min(var(--graupl-card-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))), var(--graupl-card-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem))))) calc(var(--graupl-card-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) - min(var(--graupl-card-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))), var(--graupl-card-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))))) 0 0;\n object-fit: cover;\n }\n .card-content {\n display: flex;\n grid-area: content;\n flex-direction: column;\n padding: var(--graupl-card-content-padding, var(--graupl-card-content-padding-y, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))) var(--graupl-card-content-padding-x, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))));\n gap: var(--graupl-card-content-gap, var(--graupl-card-content-column-gap, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))) var(--graupl-card-content-row-gap, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))));\n }\n .card-body {\n flex: 1 0 auto;\n }\n .card-footer {\n flex: 0 0 auto;\n }\n .card-title {\n flex: 0 0 auto;\n }\n @container (width <= 767px) {\n .card.horizontal, .card.horizontal.left, .card.horizontal.top, .card.horizontal.right, .card.horizontal.bottom, .card.horizontal.inverse {\n --graupl-horizontal-card-image-ratio: auto;\n --graupl-horizontal-card-content-ratio: 1fr;\n grid-template-columns: [image-start content-start] 1fr [image-end content-end];\n }\n .card.horizontal, .card.horizontal.left, .card.horizontal.right, .card.horizontal.top {\n grid-template-rows: [image-start] var(--graupl-card-image-ratio, auto) [image-end content-start] var(--graupl-card-content-ratio, 1fr) [content-end];\n }\n .card.horizontal.bottom, .card.horizontal.inverse {\n grid-template-rows: [content-start] var(--graupl-card-content-ratio, 1fr) [content-end image-start] var(--graupl-card-image-ratio, auto) [image-end];\n }\n }\n @media (prefers-reduced-motion: reduce) {\n .card {\n --graupl-card-transition: var(--graupl-card-transition-reduced-motion, none);\n }\n }\n}\n@layer graupl.theme {\n .card {\n --graupl-color: var(--graupl-card-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n --graupl-background: var(--graupl-card-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n border-color: var(--graupl-card-border-color, var(--graupl-card-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-card-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-card-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 .card-title {\n color: var(--graupl-card-title-color, var(--graupl-card-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-card-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-card-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-card-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 card component styles.\n//\n// This module provides the card component styles for vertical and horizontal layouts.\n//\n// The following selectors are generated by default:\n// - `.card`: The card container.\n// - `.card-image`: The card image wrapper.\n// - `.card-content`: The card content wrapper.\n// - `.card-body`: The main body region.\n// - `.card-header`: The header region.\n// - `.card-footer`: The footer region.\n// - `.card-title`: The title element.\n// - `.horizontal`: A modifier to use a horizontal layout for the card.\n// - `.left`: A modifier to position the image on the left in a horizontal layout.\n// - `.right`: A modifier to position the image on the right in a horizontal layout.\n// - `.top`: A modifier to position the image on the top in a vertical layout.\n// - `.bottom`: A modifier to position the image on the bottom in a vertical layout.\n// - `.inverse`: A modifier to invert the image/content positioning.\n//\n// The following custom properties can be used to customize the card component:\n// | Property | Description | Default Value |\n// | --- | --- | --- |\n// | `--graupl-card-padding-x` | Horizontal padding of the card. | `var(--graupl-spacer-0)` |\n// | `--graupl-card-padding-y` | Vertical padding of the card. | `var(--graupl-spacer-0)` |\n// | `--graupl-card-padding` | Shorthand padding of the card. | `var(--graupl-card-padding-y) var(--graupl-card-padding-x)` |\n// | `--graupl-card-transition` | Transition applied to the card. | `transform var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function)` |\n// | `--graupl-card-transition-reduced-motion` | Transition when reduced motion is enabled. | `none` |\n// | `--graupl-card-transform` | Base transform for the card. | `none` |\n// | `--graupl-card-hover-transform` | Transform for hovered cards. | `none` |\n// | `--graupl-card-column-gap` | Column gap inside the card. | `var(--graupl-spacer-0)` |\n// | `--graupl-card-row-gap` | Row gap inside the card. | `var(--graupl-spacer-0)` |\n// | `--graupl-card-gap` | Gap inside the card (column/row). | `var(--graupl-card-column-gap) var(--graupl-card-row-gap)` |\n// | `--graupl-card-background` | Background colour of the card. | `var(--graupl-background)` |\n// | `--graupl-card-color` | Text colour of the card. | `var(--graupl-color)` |\n// | `--graupl-card-border-width` | Border width of the card. | `var(--graupl-border-top-width) var(--graupl-border-right-width) var(--graupl-border-bottom-width) var(--graupl-border-left-width)` |\n// | `--graupl-card-border-style` | Border style of the card. | `var(--graupl-border-top-style) var(--graupl-border-right-style) var(--graupl-border-bottom-style) var(--graupl-border-left-style)` |\n// | `--graupl-card-border-radius` | Border radius of the card. | `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-card-border-color` | Border colour of the card. | `var(--graupl-card-color)` |\n// | `--graupl-card-content-ratio` | Grid row ratio used for card content. | `1fr` |\n// | `--graupl-card-image-ratio` | Grid row ratio used for card images. | `auto` |\n// | `--graupl-horizontal-card-content-ratio` | Grid column ratio for horizontal cards (content area). | `3fr` |\n// | `--graupl-horizontal-card-image-ratio` | Grid column ratio for horizontal cards (image area). | `2fr` |\n// | `--graupl-card-image-padding` | Padding for the card image wrapper. | `var(--graupl-spacer-0) var(--graupl-spacer-0)` |\n// | `--graupl-card-content-padding` | Padding for the card content wrapper. | `var(--graupl-spacer-3) var(--graupl-spacer-5)` |\n// | `--graupl-card-content-gap` | Gap inside the card content (column/row). | `var(--graupl-card-content-column-gap) var(--graupl-card-content-row-gap)` |\n// | `--graupl-card-title-color` | Text colour of the card title. | `var(--graupl-card-color)` |\n// | `--graupl-card-title-font-size` | Font size of the card title. | `var(--graupl-h4)` |\n// | `--graupl-card-title-font-weight` | Font weight of the card title. | `var(--graupl-font-weight-h4)` |\n// | `--graupl-card-title-font-family` | Font family of the card title. | `var(--graupl-font-family-h4)` |\n// | `--graupl-card-title-line-height` | Line height of the card title. | `var(--graupl-line-height-h4)` |\n//\n// The following sass variables can be used to customize the generation of the card component:\n// | Variable | Description | Default Value |\n// | --- | --- | --- |\n// | `$selector-base` | Selector base for the component. | `\".\"` |\n// | `$modifier-selector-base` | Selector base for component modifiers. | `\".\"` |\n// | `$generate-base-theme-map` | A flag to generate the base theme maps for accordion variants. | `true` |\n// | `$themeable` | Flag to generate theme modifiers. | `false` |\n// | `$card-selector-base` | Selector base for the card container. | `$selector-base` |\n// | `$card-selector` | Selector for the card container. | `\"card\"` |\n// | `$card-image-selector-base` | Selector base for the image wrapper. | `$selector-base` |\n// | `$card-image-selector` | Selector for the image wrapper. | `\"card-image\"` |\n// | `$card-content-selector-base` | Selector base for the content wrapper. | `$selector-base` |\n// | `$card-content-selector` | Selector for the content wrapper. | `\"card-content\"` |\n// | `$card-body-selector-base` | Selector base for the body region. | `$selector-base` |\n// | `$card-body-selector` | Selector for the body region. | `\"card-body\"` |\n// | `$card-header-selector-base` | Selector base for the header region. | `$selector-base` |\n// | `$card-header-selector` | Selector for the header region. | `\"card-header\"` |\n// | `$card-footer-selector-base` | Selector base for the footer region. | `$selector-base` |\n// | `$card-footer-selector` | Selector for the footer region. | `\"card-footer\"` |\n// | `$card-title-selector-base` | Selector base for the title element. | `$selector-base` |\n// | `$card-title-selector` | Selector for the title element. | `\"card-title\"` |\n// | `$horizontal-card-selector-base` | Selector base for horizontal layout modifier. | `\".\"` |\n// | `$horizontal-card-selector` | Selector for horizontal layout modifier. | `\"horizontal\"` |\n// | `$horizontal-card-left-selector-base` | Selector base for left modifier. | `\".\"` |\n// | `$horizontal-card-left-selector` | Selector for left modifier. | `\"left\"` |\n// | `$horizontal-card-right-selector-base` | Selector base for right modifier. | `\".\"` |\n// | `$horizontal-card-right-selector` | Selector for right modifier. | `\"right\"` |\n// | `$vertical-card-top-selector-base` | Selector base for top modifier. | `\".\"` |\n// | `$vertical-card-top-selector` | Selector for top modifier. | `\"top\"` |\n// | `$vertical-card-bottom-selector-base` | Selector base for bottom modifier. | `\".\"` |\n// | `$vertical-card-bottom-selector` | Selector for bottom modifier. | `\"bottom\"` |\n// | `$inverse-card-selector-base` | Selector base for inverse layout modifier. | `\".\"` |\n// | `$inverse-card-selector` | Selector for inverse layout modifier. | `\"inverse\"` |\n// | `$card-transform` | Base transform for the card. | `none` |\n// | `$card-hover-transform` | Hover transform for the card. | `none` |\n// | `$card-content-ratio` | Grid ratio for content rows. | `1fr` |\n// | `$card-image-ratio` | Grid ratio for image rows. | `auto` |\n// | `$horizontal-card-content-ratio` | Grid ratio for content in horizontal layout. | `3fr` |\n// | `$horizontal-card-image-ratio` | Grid ratio for images in horizontal layout. | `2fr` |\n// | `$card-theme-mappings` | A map of properties and color shades used generate all card variants. | `()` |\n// | `$card-theme-map` | A map of all properties, colors, and color shades used to generate all card variants. | `()` |\n//\n// ## Using `$card-theme-mappings`\n//\n// `$card-theme-mappings` is a 1-level map of properties and shade values.\n//\n// e.g.\n// ```scss\n// $card-theme-mappings: (\n// border-color: 700,\n// )\n// ```\n//\n// This directly[1] maps to all card variants, telling them what shade to use for said property.\n// All card variants will use the following based on the example above:\n// - Primary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--primary--700`,\n// - Secondary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--secondary--700`, and\n// - Tertiary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--tertiary--700`.\n//\n// You can use this to customize _all_ cards variants in the same way.\n//\n// For example, if you use the following map:\n// ```scss\n// $card-theme-mappings: (\n// border-color: 500,\n// )\n// ```\n//\n// All card variants will use the following:\n// - Primary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--primary--500`,\n// - Secondary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--secondary--500`, and\n// - Tertiary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--tertiary--500`.\n//\n// [1] `$card-theme-mappings` gets parsed into a larger, more explicit map: `$card-theme-map`.\n//\n// Using `$card-theme-map`\n//\n// `$card-theme-map` is a multi-level map of properties, colors, and shade values.\n//\n// e.g.\n// ```scss\n// $card-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 card variants, telling them what shade to use for said property.\n// The card variants will use the following based on the example above:\n// - Primary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--primary--700`,\n// - Secondary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--secondary--700`, and\n// - Tertiary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--tertiary--700`.\n//\n// You can use this to customize card variants individually.\n//\n// For example, if you use the following map:\n//\n// ```scss\n// $card-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 card variants will use the following:\n// - Primary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--secondary--700`,\n// - Secondary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--secondary--700`, and\n// - Tertiary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--secondary--700`.\n//\n// @example\n// <div class=\"card\">\n// <div class=\"card-image\"><img src=\"https://picsum.photos/600/400\" alt=\"Card image\" /></div>\n// <div class=\"card-content\">\n// <div class=\"card-header\"><h3 class=\"card-title\">Card Title</h3></div>\n// <div class=\"card-body\"><p>This is some text that describes the card.</p></div>\n// <div class=\"card-footer\"><a class=\"card stretched\" href=\"#\">Card Action</a></div>\n// </div>\n// </div>\n//\n// @example\n// <div class=\"card horizontal right\">\n// <div class=\"card-image\"><img src=\"https://picsum.photos/600/400\" alt=\"Card image\" /></div>\n// <div class=\"card-content\">\n// <div class=\"card-header\"><h3 class=\"card-title\">Card Title</h3></div>\n// <div class=\"card-body\"><p>This is some text that describes the card.</p></div>\n// <div class=\"card-footer\"><a class=\"card stretched\" href=\"#\">Card Action</a></div>\n// </div>\n// </div>\n\n@use \"defaults\";\n@use \"variables\" as *;\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/layer\" as *;\n@use \"../../mixins/theme\";\n@use \"../../mixins/animation\";\n@use \"../../mixins/container\";\n\n@include layer(component) {\n // .card\n #{defaults.$card-selector-base}#{defaults.$card-selector} {\n display: grid;\n position: relative;\n grid-template-columns: [image-start content-start] 1fr [image-end content-end];\n padding: $card-padding;\n transform: $card-transform;\n transition: $card-transition;\n border-width: $card-border-width;\n border-style: $card-border-style;\n border-radius: $card-border-radius;\n gap: $card-gap;\n isolation: isolate;\n\n // &, &.top\n &,\n &#{defaults.$vertical-card-top-selector-base}#{defaults.$vertical-card-top-selector} {\n grid-template-rows:\n [image-start]\n $card-image-ratio\n [image-end content-start]\n $card-content-ratio\n [content-end];\n }\n\n // &.bottom, &.inverse\n &#{defaults.$vertical-card-bottom-selector-base}#{defaults.$vertical-card-bottom-selector},\n &#{defaults.$inverse-card-selector-base}#{defaults.$inverse-card-selector} {\n grid-template-rows:\n [content-start]\n $card-content-ratio\n [content-end image-start]\n $card-image-ratio\n [image-end];\n }\n\n &:hover {\n --#{root-defaults.$prefix}card-transform: #{$card-hover-transform};\n }\n\n // &.horizontal\n &#{defaults.$horizontal-card-selector-base}#{defaults.$horizontal-card-selector} {\n // &, &.left\n &,\n &#{defaults.$horizontal-card-left-selector-base}#{defaults.$horizontal-card-left-selector} {\n --#{root-defaults.$prefix}card-content-ratio: #{$horizontal-card-content-ratio};\n --#{root-defaults.$prefix}card-image-ratio: #{$horizontal-card-image-ratio};\n\n grid-template-columns:\n [image-start]\n $card-image-ratio\n [image-end content-start]\n $card-content-ratio\n [content-end];\n grid-template-rows: [image-start content-start] 1fr [image-end content-end];\n\n // .card-image\n #{defaults.$card-image-selector-base}#{defaults.$card-image-selector}\n img {\n border-radius: calc(\n $card-border-top-left-radius - min(\n $card-border-top-width,\n $card-border-left-width\n )\n )\n 0 0\n calc(\n $card-border-bottom-left-radius - min(\n $card-border-bottom-width,\n $card-border-left-width\n )\n );\n }\n }\n\n // &.right, &.inverse\n &#{defaults.$horizontal-card-right-selector-base}#{defaults.$horizontal-card-right-selector},\n &#{defaults.$inverse-card-selector-base}#{defaults.$inverse-card-selector} {\n grid-template-columns:\n [content-start]\n $card-content-ratio\n [content-end image-start]\n $card-image-ratio\n [image-end];\n\n // .card-image\n #{defaults.$card-image-selector-base}#{defaults.$card-image-selector}\n img {\n border-radius: 0\n calc(\n $card-border-top-right-radius - min(\n $card-border-top-width,\n $card-border-right-width\n )\n )\n calc(\n $card-border-bottom-right-radius - min(\n $card-border-bottom-width,\n $card-border-right-width\n )\n )\n 0;\n }\n }\n }\n }\n\n // .card-image\n #{defaults.$card-image-selector-base}#{defaults.$card-image-selector} {\n grid-area: image;\n padding: $card-image-padding;\n\n img {\n width: 100%;\n height: 100%;\n border-radius: calc(\n $card-border-top-left-radius - min(\n $card-border-top-width,\n $card-border-left-width\n )\n )\n calc(\n $card-border-top-right-radius - min(\n $card-border-top-width,\n $card-border-right-width\n )\n )\n 0 0;\n object-fit: cover;\n }\n }\n\n // .card-content\n #{defaults.$card-content-selector-base}#{defaults.$card-content-selector} {\n display: flex;\n grid-area: content;\n flex-direction: column;\n padding: $card-content-padding;\n gap: $card-content-gap;\n }\n\n // .card-body\n #{defaults.$card-body-selector-base}#{defaults.$card-body-selector} {\n flex: 1 0 auto;\n }\n\n // .card-footer\n #{defaults.$card-footer-selector-base}#{defaults.$card-footer-selector} {\n flex: 0 0 auto;\n }\n\n // .card-title\n #{defaults.$card-title-selector-base}#{defaults.$card-title-selector} {\n flex: 0 0 auto;\n }\n\n @include container.trigger(force-vertical-card) {\n // .card\n #{defaults.$card-selector-base}#{defaults.$card-selector} {\n // .horizontal\n &#{defaults.$horizontal-card-selector-base}#{defaults.$horizontal-card-selector} {\n // &, &.left, &.top, &.right, &.bottom, &.inverse\n &,\n &#{defaults.$horizontal-card-left-selector-base}#{defaults.$horizontal-card-left-selector},\n &#{defaults.$vertical-card-top-selector-base}#{defaults.$vertical-card-top-selector},\n &#{defaults.$horizontal-card-right-selector-base}#{defaults.$horizontal-card-right-selector},\n &#{defaults.$vertical-card-bottom-selector-base}#{defaults.$vertical-card-bottom-selector},\n &#{defaults.$inverse-card-selector-base}#{defaults.$inverse-card-selector} {\n --#{root-defaults.$prefix}horizontal-card-image-ratio: #{defaults.$card-image-ratio};\n --#{root-defaults.$prefix}horizontal-card-content-ratio: #{defaults.$card-content-ratio};\n\n grid-template-columns: [image-start content-start] 1fr [image-end content-end];\n }\n\n // &, &.left, &.top\n &,\n &#{defaults.$horizontal-card-left-selector-base}#{defaults.$horizontal-card-left-selector},\n &#{defaults.$horizontal-card-right-selector-base}#{defaults.$horizontal-card-right-selector},\n &#{defaults.$vertical-card-top-selector-base}#{defaults.$vertical-card-top-selector} {\n grid-template-rows:\n [image-start]\n $card-image-ratio\n [image-end content-start]\n $card-content-ratio\n [content-end];\n }\n\n // &.bottom, &.inverse\n &#{defaults.$vertical-card-bottom-selector-base}#{defaults.$vertical-card-bottom-selector},\n &#{defaults.$inverse-card-selector-base}#{defaults.$inverse-card-selector} {\n grid-template-rows:\n [content-start]\n $card-content-ratio\n [content-end image-start]\n $card-image-ratio\n [image-end];\n }\n }\n }\n }\n\n @include animation.off {\n // .card\n #{#{defaults.$card-selector-base}}#{defaults.$card-selector} {\n --#{root-defaults.$prefix}card-transition: #{$card-transition-reduced-motion};\n }\n }\n}\n\n@include layer(theme) {\n // .card\n #{#{defaults.$card-selector-base}}#{defaults.$card-selector} {\n --#{root-defaults.$prefix}color: #{$card-color};\n --#{root-defaults.$prefix}background: #{$card-background};\n\n border-color: $card-border-color;\n background: $card-background;\n color: $card-color;\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$card-theme-map,\n defaults.$card-theme-selector-base,\n defaults.$card-theme-selector-prefix,\n \"card-\"\n );\n }\n }\n\n // .card-title\n #{defaults.$card-title-selector-base}#{defaults.$card-title-selector} {\n color: $card-title-color;\n font-size: $card-title-font-size;\n font-weight: $card-title-font-weight;\n line-height: $card-title-line-height;\n }\n}\n","// @graupl/core card 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-card-padding-x | var(--graupl-spacer-0) |\n// | --graupl-card-padding-y | var(--graupl-spacer-0) |\n// | --graupl-card-padding | var(--graupl-card-padding-y) var(--graupl-card-padding-x) |\n// | --graupl-card-transition | transform var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function) |\n// | --graupl-card-transition-reduced-motion | none |\n// | --graupl-card-transform | none |\n// | --graupl-card-hover-transform | none |\n// | --graupl-card-column-gap | var(--graupl-spacer-0) |\n// | --graupl-card-row-gap | var(--graupl-spacer-0) |\n// | --graupl-card-gap | var(--graupl-card-column-gap) var(--graupl-card-row-gap) |\n// | --graupl-card-background | var(--graupl-background) |\n// | --graupl-card-color | var(--graupl-color) |\n// | --graupl-card-border-color | var(--graupl-card-color) |\n// | --graupl-card-border-top-left-radius | var(--graupl-border-top-left-radius) |\n// | --graupl-card-border-top-right-radius | var(--graupl-border-top-right-radius) |\n// | --graupl-card-border-bottom-left-radius | var(--graupl-border-bottom-left-radius) |\n// | --graupl-card-border-bottom-right-radius | var(--graupl-border-bottom-right-radius) |\n// | --graupl-card-border-radius | var(--graupl-card-border-top-left-radius) var(--graupl-card-border-top-right-radius) var(--graupl-card-border-bottom-right-radius) var(--graupl-card-border-bottom-left-radius) |\n// | --graupl-card-border-top-width | var(--graupl-border-top-width) |\n// | --graupl-card-border-right-width | var(--graupl-border-right-width) |\n// | --graupl-card-border-bottom-width | var(--graupl-border-bottom-width) |\n// | --graupl-card-border-left-width | var(--graupl-border-left-width) |\n// | --graupl-card-border-width | var(--graupl-card-border-top-width) var(--graupl-card-border-right-width) var(--graupl-card-border-bottom-width) var(--graupl-card-border-left-width) |\n// | --graupl-card-border-top-style | var(--graupl-border-top-style) |\n// | --graupl-card-border-right-style | var(--graupl-border-right-style) |\n// | --graupl-card-border-bottom-style | var(--graupl-border-bottom-style) |\n// | --graupl-card-border-left-style | var(--graupl-border-left-style) |\n// | --graupl-card-border-style | var(--graupl-card-border-top-style) var(--graupl-card-border-right-style) var(--graupl-card-border-bottom-style) var(--graupl-card-border-left-style) |\n// | --graupl-card-content-ratio | 1fr |\n// | --graupl-card-image-ratio | auto |\n// | --graupl-horizontal-card-content-ratio | 3fr |\n// | --graupl-horizontal-card-image-ratio | 2fr |\n// | --graupl-card-image-padding-x | var(--graupl-spacer-0) |\n// | --graupl-card-image-padding-y | var(--graupl-spacer-0) |\n// | --graupl-card-image-padding | var(--graupl-card-image-padding-y) var(--graupl-card-image-padding-x) |\n// | --graupl-card-content-padding-x | var(--graupl-spacer-5) |\n// | --graupl-card-content-padding-y | var(--graupl-spacer-3) |\n// | --graupl-card-content-padding | var(--graupl-card-content-padding-y) var(--graupl-card-content-padding-x) |\n// | --graupl-card-content-column-gap | var(--graupl-spacer-0) |\n// | --graupl-card-content-row-gap | var(--graupl-spacer-3) |\n// | --graupl-card-content-gap | var(--graupl-card-content-column-gap) var(--graupl-card-content-row-gap) |\n// | --graupl-card-title-color | var(--graupl-card-color) |\n// | --graupl-card-title-font-size | var(--graupl-h4-font-size) |\n// | --graupl-card-title-font-weight | var(--graupl-h4-font-weight) |\n// | --graupl-card-title-font-family | var(--graupl-h4-font-family) |\n// | --graupl-card-title-line-height | var(--graupl-h4-line-height) |\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 \"sass:map\";\n\n// Card properties.\n// --graupl-card-padding-x\n$card-padding-x: var(\n --#{root-defaults.$prefix}card-padding-x,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-card-padding-y\n$card-padding-y: var(\n --#{root-defaults.$prefix}card-padding-y,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-card-padding\n$card-padding: var(\n --#{root-defaults.$prefix}card-padding,\n #{$card-padding-y} #{$card-padding-x}\n);\n\n// --graupl-card-transition\n$card-transition: var(\n --#{root-defaults.$prefix}card-transition,\n transform #{map.get(root-variables.$transition-durations, fast)}\n #{root-variables.$transition-timing-function}\n);\n\n// --graupl-card-transition-reduced-motion\n$card-transition-reduced-motion: var(\n --#{root-defaults.$prefix}card-transition-reduced-motion,\n none\n);\n\n// Card transform properties.\n// --graupl-card-transform\n$card-transform: var(\n --#{root-defaults.$prefix}card-transform,\n #{defaults.$card-transform}\n);\n\n// --graupl-card-hover-transform\n$card-hover-transform: var(\n --#{root-defaults.$prefix}card-hover-transform,\n #{defaults.$card-hover-transform}\n);\n\n// Card gap properties.\n// --graupl-card-column-gap\n$card-column-gap: var(\n --#{root-defaults.$prefix}card-column-gap,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-card-row-gap\n$card-row-gap: var(\n --#{root-defaults.$prefix}card-row-gap,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-card-gap\n$card-gap: var(\n --#{root-defaults.$prefix}card-gap,\n #{$card-column-gap} #{$card-row-gap}\n);\n\n// Card color properties.\n// --graupl-card-background\n$card-background: var(\n --#{root-defaults.$prefix}card-background,\n #{color.$background}\n);\n\n// --graupl-card-color\n$card-color: var(--#{root-defaults.$prefix}card-color, #{color.$color});\n\n// Card border-properties.\n// --graupl-card-border-color\n$card-border-color: var(\n --#{root-defaults.$prefix}card-border-color,\n #{$card-color}\n);\n\n// --graupl-card-border-top-left-radius\n$card-border-top-left-radius: var(\n --#{root-defaults.$prefix}card-border-top-left-radius,\n #{root-variables.$border-top-left-radius}\n);\n\n// --graupl-card-border-top-right-radius\n$card-border-top-right-radius: var(\n --#{root-defaults.$prefix}card-border-top-right-radius,\n #{root-variables.$border-top-right-radius}\n);\n\n// --graupl-card-border-bottom-left-radius\n$card-border-bottom-left-radius: var(\n --#{root-defaults.$prefix}card-border-bottom-left-radius,\n #{root-variables.$border-bottom-left-radius}\n);\n\n// --graupl-card-border-bottom-right-radius\n$card-border-bottom-right-radius: var(\n --#{root-defaults.$prefix}card-border-bottom-right-radius,\n #{root-variables.$border-bottom-right-radius}\n);\n\n// --graupl-card-border-radius\n$card-border-radius: var(\n --#{root-defaults.$prefix}card-border-radius,\n #{$card-border-top-left-radius} #{$card-border-top-right-radius}\n #{$card-border-bottom-right-radius} #{$card-border-bottom-left-radius}\n);\n\n// --graupl-card-border-top-width\n$card-border-top-width: var(\n --#{root-defaults.$prefix}card-border-top-width,\n #{root-variables.$border-top-width}\n);\n\n// --graupl-card-border-right-width\n$card-border-right-width: var(\n --#{root-defaults.$prefix}card-border-right-width,\n #{root-variables.$border-right-width}\n);\n\n// --graupl-card-border-bottom-width\n$card-border-bottom-width: var(\n --#{root-defaults.$prefix}card-border-bottom-width,\n #{root-variables.$border-bottom-width}\n);\n\n// --graupl-card-border-left-width\n$card-border-left-width: var(\n --#{root-defaults.$prefix}card-border-left-width,\n #{root-variables.$border-left-width}\n);\n\n// --graupl-card-border-width\n$card-border-width: var(\n --#{root-defaults.$prefix}card-border-width,\n #{$card-border-top-width} #{$card-border-right-width}\n #{$card-border-bottom-width} #{$card-border-left-width}\n);\n\n// --graupl-card-border-top-style\n$card-border-top-style: var(\n --#{root-defaults.$prefix}card-border-top-style,\n #{root-variables.$border-top-style}\n);\n\n// --graupl-card-border-right-style\n$card-border-right-style: var(\n --#{root-defaults.$prefix}card-border-right-style,\n #{root-variables.$border-right-style}\n);\n\n// --graupl-card-border-bottom-style\n$card-border-bottom-style: var(\n --#{root-defaults.$prefix}card-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n\n// --graupl-card-border-left-style\n$card-border-left-style: var(\n --#{root-defaults.$prefix}card-border-left-style,\n #{root-variables.$border-left-style}\n);\n\n// --graupl-card-border-style\n$card-border-style: var(\n --#{root-defaults.$prefix}card-border-style,\n #{$card-border-top-style} #{$card-border-right-style}\n #{$card-border-bottom-style} #{$card-border-left-style}\n);\n\n// Card layout properties.\n// --graupl-card-content-ratio\n$card-content-ratio: var(\n --#{root-defaults.$prefix}card-content-ratio,\n defaults.$card-content-ratio\n);\n\n// --graupl-card-image-ratio\n$card-image-ratio: var(\n --#{root-defaults.$prefix}card-image-ratio,\n defaults.$card-image-ratio\n);\n\n// --graupl-horizontal-card-content-ratio\n$horizontal-card-content-ratio: var(\n --#{root-defaults.$prefix}horizontal-card-content-ratio,\n defaults.$horizontal-card-content-ratio\n);\n\n// --graupl-horizontal-card-image-ratio\n$horizontal-card-image-ratio: var(\n --#{root-defaults.$prefix}horizontal-card-image-ratio,\n defaults.$horizontal-card-image-ratio\n);\n\n// Card image properties.\n// --graupl-card-image-padding-x\n$card-image-padding-x: var(\n --#{root-defaults.$prefix}card-image-padding-x,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-card-image-padding-y\n$card-image-padding-y: var(\n --#{root-defaults.$prefix}card-image-padding-y,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-card-image-padding\n$card-image-padding: var(\n --#{root-defaults.$prefix}card-image-padding,\n #{$card-image-padding-y} #{$card-image-padding-x}\n);\n\n// Card content properties.\n// --graupl-card-content-padding-x\n$card-content-padding-x: var(\n --#{root-defaults.$prefix}card-content-padding-x,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-card-content-padding-y\n$card-content-padding-y: var(\n --#{root-defaults.$prefix}card-content-padding-y,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-card-content-padding\n$card-content-padding: var(\n --#{root-defaults.$prefix}card-content-padding,\n #{$card-content-padding-y} #{$card-content-padding-x}\n);\n\n// Card content gap properties.\n// --graupl-card-content-column-gap\n$card-content-column-gap: var(\n --#{root-defaults.$prefix}card-content-column-gap,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-card-content-row-gap\n$card-content-row-gap: var(\n --#{root-defaults.$prefix}card-content-row-gap,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-card-content-gap\n$card-content-gap: var(\n --#{root-defaults.$prefix}card-content-gap,\n #{$card-content-column-gap} #{$card-content-row-gap}\n);\n\n// Card title properties.\n// --graupl-card-title-color\n$card-title-color: var(\n --#{root-defaults.$prefix}card-title-color,\n #{$card-color}\n);\n\n// --graupl-card-title-font-size\n$card-title-font-size: var(\n --#{root-defaults.$prefix}card-title-font-size,\n #{typography.$h4-font-size}\n);\n\n// --graupl-card-title-font-weight\n$card-title-font-weight: var(\n --#{root-defaults.$prefix}card-title-font-weight,\n #{typography.$h4-font-weight}\n);\n\n// --graupl-card-title-font-family\n$card-title-font-family: var(\n --#{root-defaults.$prefix}card-title-font-family,\n #{typography.$h4-font-family}\n);\n\n// --graupl-card-title-line-height\n$card-title-line-height: var(\n --#{root-defaults.$prefix}card-title-line-height,\n #{typography.$h4-line-height}\n);\n","// @graupl/core container mixins.\n//\n// A series of mixins to generate breakpoints.\n\n// @use \"../defaults\" as root-defaults;\n@use \"../functions/container\";\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n@use \"sass:meta\";\n\n// A mixin to generate a minimum container width media query.\n@mixin up($size) {\n $container-size: container.min($size);\n\n @container (#{$container-size} <= width) {\n @content;\n }\n}\n\n// A mixin to generate a maximum container width media query.\n@mixin down($size) {\n $container-size: container.max($size);\n\n @container (width <= #{$container-size}) {\n @content;\n }\n}\n\n// A mixin to generate a range of container widths media query.\n@mixin between($min, $max) {\n $container-size: container.range($min, $max);\n $min: map.get($container-size, \"min\");\n $max: map.get($container-size, \"max\");\n\n @container (#{$min} <= width <= #{$max}) {\n @content;\n }\n}\n\n@mixin only($size) {\n @include between($size, $size) {\n @content;\n }\n}\n\n@mixin trigger($trigger) {\n @if not map.has-key(root-defaults.$container-size-triggers, $trigger) {\n @error \"The container size trigger \\\"#{$trigger}\\\" does not exist.\";\n }\n\n $container-size-trigger: map.get(\n root-defaults.$container-size-triggers,\n $trigger\n );\n\n @if not map.has-key($container-size-trigger, \"mixin\") {\n @error \"The container size trigger \\\"#{$trigger}\\\" does not have a mixin key.\";\n }\n\n @if not map.has-key($container-size-trigger, \"args\") {\n @error \"The container size trigger \\\"#{$trigger}\\\" does not have an args key.\";\n }\n\n $mixin-name: map.get($container-size-trigger, \"mixin\");\n $mixin-args: map.get($container-size-trigger, \"args\");\n\n @if not meta.mixin-exists($mixin-name) {\n @error \"The mixin \\\"#{$mixin-name}\\\" does not exist.\";\n }\n\n $mixin: meta.get-mixin($mixin-name);\n\n @if meta.accepts-content($mixin) {\n @include meta.apply($mixin, $mixin-args...) {\n @content;\n }\n } @else {\n @warn \"The mixin \\\"#{$mixin-name}\\\" does not accept content.\";\n }\n}\n","// @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"],"names":[]}
package/dist/css/component/carousel.css CHANGED
@@ -1,2 +1,2 @@
1
- @charset "UTF-8";@layer graupl.base{.carousel-control{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))}.carousel-control.visited,.carousel-control:visited{transform:var(--graupl-button-visited-transform,var(--graupl-button-transform,none))}.carousel-control:focus-visible{transform:var(--graupl-button-focus-transform,var(--graupl-button-transform,none))}.carousel-control.focus{transform:var(--graupl-button-focus-transform,var(--graupl-button-transform,none))}.carousel-control.hover,.carousel-control:hover{transform:var(--graupl-button-hover-transform,var(--graupl-button-transform,none))}.carousel-control.active,.carousel-control:active{transform:var(--graupl-button-active-transform,scale(.95))}.carousel-control:disabled{cursor:not-allowed}.carousel-control:disabled,.carousel-control:disabled.visited,.carousel-control:disabled:visited{transform:var(--graupl-button-disabled-transform,none)}.carousel-control:disabled:focus-visible{transform:var(--graupl-button-disabled-transform,none)}.carousel-control:disabled.active,.carousel-control:disabled.focus,.carousel-control:disabled.hover,.carousel-control:disabled:active,.carousel-control:disabled:hover,.carousel-control[disabled]{transform:var(--graupl-button-disabled-transform,none)}.carousel-control[disabled]{cursor:not-allowed}.carousel-control[disabled].visited,.carousel-control[disabled]:visited{transform:var(--graupl-button-disabled-transform,none)}.carousel-control[disabled]:focus-visible{transform:var(--graupl-button-disabled-transform,none)}.carousel-control[aria-disabled=true],.carousel-control[disabled].active,.carousel-control[disabled].focus,.carousel-control[disabled].hover,.carousel-control[disabled]:active,.carousel-control[disabled]:hover{transform:var(--graupl-button-disabled-transform,none)}.carousel-control[aria-disabled=true]{cursor:not-allowed}.carousel-control[aria-disabled=true].visited,.carousel-control[aria-disabled=true]:visited{transform:var(--graupl-button-disabled-transform,none)}.carousel-control[aria-disabled=true]:focus-visible{transform:var(--graupl-button-disabled-transform,none)}.carousel-control.disabled,.carousel-control[aria-disabled=true].active,.carousel-control[aria-disabled=true].focus,.carousel-control[aria-disabled=true].hover,.carousel-control[aria-disabled=true]:active,.carousel-control[aria-disabled=true]:hover{transform:var(--graupl-button-disabled-transform,none)}.carousel-control.disabled{cursor:not-allowed}.carousel-control.disabled.visited,.carousel-control.disabled:visited{transform:var(--graupl-button-disabled-transform,none)}.carousel-control.disabled:focus-visible{transform:var(--graupl-button-disabled-transform,none)}.carousel-control.disabled.active,.carousel-control.disabled.focus,.carousel-control.disabled.hover,.carousel-control.disabled:active,.carousel-control.disabled:hover{transform:var(--graupl-button-disabled-transform,none)}@media (prefers-reduced-motion:reduce){.carousel-control{--graupl-button-transition:var(--graupl-button-transition-reduced-motion,background var(--graupl-transition-timing-function,ease),color var(--graupl-transition-timing-function,ease))}}.carousel-tab{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))}.carousel-tab.visited,.carousel-tab:visited{transform:var(--graupl-button-visited-transform,var(--graupl-button-transform,none))}.carousel-tab:focus-visible{transform:var(--graupl-button-focus-transform,var(--graupl-button-transform,none))}.carousel-tab.focus{transform:var(--graupl-button-focus-transform,var(--graupl-button-transform,none))}.carousel-tab.hover,.carousel-tab:hover{transform:var(--graupl-button-hover-transform,var(--graupl-button-transform,none))}.carousel-tab.active,.carousel-tab:active{transform:var(--graupl-button-active-transform,scale(.95))}.carousel-tab:disabled{cursor:not-allowed}.carousel-tab:disabled,.carousel-tab:disabled.visited,.carousel-tab:disabled:visited{transform:var(--graupl-button-disabled-transform,none)}.carousel-tab:disabled:focus-visible{transform:var(--graupl-button-disabled-transform,none)}.carousel-tab:disabled.active,.carousel-tab:disabled.focus,.carousel-tab:disabled.hover,.carousel-tab:disabled:active,.carousel-tab:disabled:hover,.carousel-tab[disabled]{transform:var(--graupl-button-disabled-transform,none)}.carousel-tab[disabled]{cursor:not-allowed}.carousel-tab[disabled].visited,.carousel-tab[disabled]:visited{transform:var(--graupl-button-disabled-transform,none)}.carousel-tab[disabled]:focus-visible{transform:var(--graupl-button-disabled-transform,none)}.carousel-tab[aria-disabled=true],.carousel-tab[disabled].active,.carousel-tab[disabled].focus,.carousel-tab[disabled].hover,.carousel-tab[disabled]:active,.carousel-tab[disabled]:hover{transform:var(--graupl-button-disabled-transform,none)}.carousel-tab[aria-disabled=true]{cursor:not-allowed}.carousel-tab[aria-disabled=true].visited,.carousel-tab[aria-disabled=true]:visited{transform:var(--graupl-button-disabled-transform,none)}.carousel-tab[aria-disabled=true]:focus-visible{transform:var(--graupl-button-disabled-transform,none)}.carousel-tab.disabled,.carousel-tab[aria-disabled=true].active,.carousel-tab[aria-disabled=true].focus,.carousel-tab[aria-disabled=true].hover,.carousel-tab[aria-disabled=true]:active,.carousel-tab[aria-disabled=true]:hover{transform:var(--graupl-button-disabled-transform,none)}.carousel-tab.disabled{cursor:not-allowed}.carousel-tab.disabled.visited,.carousel-tab.disabled:visited{transform:var(--graupl-button-disabled-transform,none)}.carousel-tab.disabled:focus-visible{transform:var(--graupl-button-disabled-transform,none)}.carousel-tab.disabled.active,.carousel-tab.disabled.focus,.carousel-tab.disabled.hover,.carousel-tab.disabled:active,.carousel-tab.disabled:hover{transform:var(--graupl-button-disabled-transform,none)}@media (prefers-reduced-motion:reduce){.carousel-tab{--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{.carousel{display:grid;grid-template-columns:[slide-start controls-start] auto [tabs-start] var(--graupl-carousel-tabs-width,1fr) [tabs-end] auto [controls-end slide-end];grid-template-rows:[slide-start controls-start] var(--graupl-carousel-controls-height,auto) [controls-end] var(--graupl-carousel-slide-height,1fr) [tabs-start] var(--graupl-carousel-tabs-height,auto) [tabs-end slide-end];isolation:isolate;padding:var(--graupl-carousel-padding,var(--graupl-carousel-padding-y,var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))) var(--graupl-carousel-padding-x,var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))));position:relative}.carousel[data-graupl-action=next] .carousel-item.previous{transform:translateX(calc(var(--graupl-carousel-item-max-width, 100%)*-1))}.carousel[data-graupl-action=next] .carousel-item.previous.active{transform:none}.carousel[data-graupl-action=next] .carousel-item.next{transform:translateX(var(--graupl-carousel-item-max-width,100%))}.carousel[data-graupl-action=next] .carousel-item.next.active{transform:none}.carousel[data-graupl-action=previous] .carousel-item.previous{transform:translateX(var(--graupl-carousel-item-max-width,100%))}.carousel[data-graupl-action=previous] .carousel-item.previous.active{transform:none}.carousel[data-graupl-action=previous] .carousel-item.next{transform:translateX(calc(var(--graupl-carousel-item-max-width, 100%)*-1))}.carousel[data-graupl-action=previous] .carousel-item.next.active{transform:none}.carousel-control-container{display:grid;grid-area:controls;grid-template-columns:[autoplay-start] var(--graupl-carousel-control-width,4rem) [autoplay-end] 1fr [previous-start] var(--graupl-carousel-control-width,4rem) [previous-end next-start] var(--graupl-carousel-control-width,4rem) [next-end];grid-template-rows:[autoplay-start next-start previous-start] var(--graupl-carousel-control-height,3rem) [previous-end next-end autoplay-end];pointer-events:none;z-index:1}.carousel-control{pointer-events:auto}.carousel-control.autoplay{grid-area:autoplay}.carousel-control.play:before{content:var(--graupl-carousel-play-content,"▶");display:inline-block}.carousel-control.pause:before{content:var(--graupl-carousel-pause-content,"❚❚");display:inline-block}.carousel-control.next{grid-area:next}.carousel-control.next:before{content:var(--graupl-carousel-next-content,"▶");display:inline-block}.carousel-control.previous{grid-area:previous}.carousel-control.previous:before{content:var(--graupl-carousel-previous-content,"◀");display:inline-block}.carousel-item-container{display:grid;grid-area:slide;grid-template-areas:"items";isolation:isolate;overflow-x:hidden;padding:var(--graupl-carousel-item-container-padding,var(--graupl-carousel-item-container-padding-y,var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))) var(--graupl-carousel-item-container-padding-x,var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))));z-index:0}.carousel-item{grid-area:items;max-width:var(--graupl-carousel-item-max-width,100%);opacity:0;z-index:-1}.carousel-item.active{transform:none}.carousel-item.active,.carousel-item.previous{opacity:1;transition:transform var(--graupl-carousel-transition-duration,.5s) ease-in-out;z-index:1}.carousel-item.previous{transform:translateX(calc(var(--graupl-carousel-item-max-width, 100%)*-1))}.carousel-item.previous.active{transform:none}.carousel-item.next{opacity:1;transform:translateX(var(--graupl-carousel-item-max-width,100%));z-index:1}.carousel-item.next.active{transform:none}.carousel-tab-container{display:flex;gap:var(--graupl-carousel-tab-container-gap,var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5)));grid-area:tabs;justify-content:center;padding:var(--graupl-carousel-tab-container-padding,var(--graupl-carousel-tab-container-padding-y,var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5))) var(--graupl-carousel-tab-container-padding-x,var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5))));pointer-events:none;z-index:1}.carousel-tab{--graupl-button-border-radius:50%;pointer-events:auto}}@layer graupl.theme{.carousel-control{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))))))}.carousel-control.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)))}.carousel-control.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)))}.carousel-control.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)))}.carousel-control.visited,.carousel-control: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)))))))}.carousel-control: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)))))))}.carousel-control.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)))))))}.carousel-control.hover,.carousel-control: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))))))}.carousel-control.active,.carousel-control: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)))))))}.carousel-control:disabled,.carousel-control:disabled.visited,.carousel-control: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))))}.carousel-control: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))))}.carousel-control:disabled.active,.carousel-control:disabled.focus,.carousel-control:disabled.hover,.carousel-control:disabled:active,.carousel-control:disabled:hover,.carousel-control[disabled],.carousel-control[disabled].visited,.carousel-control[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))))}.carousel-control[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))))}.carousel-control[aria-disabled=true],.carousel-control[aria-disabled=true].visited,.carousel-control[aria-disabled=true]:visited,.carousel-control[disabled].active,.carousel-control[disabled].focus,.carousel-control[disabled].hover,.carousel-control[disabled]:active,.carousel-control[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))))}.carousel-control[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))))}.carousel-control.disabled,.carousel-control.disabled.visited,.carousel-control.disabled:visited,.carousel-control[aria-disabled=true].active,.carousel-control[aria-disabled=true].focus,.carousel-control[aria-disabled=true].hover,.carousel-control[aria-disabled=true]:active,.carousel-control[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))))}.carousel-control.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))))}.carousel-control.disabled.active,.carousel-control.disabled.focus,.carousel-control.disabled.hover,.carousel-control.disabled:active,.carousel-control.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))))}.carousel-tab{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))))))}.carousel-tab.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)))}.carousel-tab.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)))}.carousel-tab.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)))}.carousel-tab.visited,.carousel-tab: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)))))))}.carousel-tab: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)))))))}.carousel-tab.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)))))))}.carousel-tab.hover,.carousel-tab: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))))))}.carousel-tab.active,.carousel-tab: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)))))))}.carousel-tab:disabled,.carousel-tab:disabled.visited,.carousel-tab: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))))}.carousel-tab: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))))}.carousel-tab:disabled.active,.carousel-tab:disabled.focus,.carousel-tab:disabled.hover,.carousel-tab:disabled:active,.carousel-tab:disabled:hover,.carousel-tab[disabled],.carousel-tab[disabled].visited,.carousel-tab[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))))}.carousel-tab[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))))}.carousel-tab[aria-disabled=true],.carousel-tab[aria-disabled=true].visited,.carousel-tab[aria-disabled=true]:visited,.carousel-tab[disabled].active,.carousel-tab[disabled].focus,.carousel-tab[disabled].hover,.carousel-tab[disabled]:active,.carousel-tab[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))))}.carousel-tab[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))))}.carousel-tab.disabled,.carousel-tab.disabled.visited,.carousel-tab.disabled:visited,.carousel-tab[aria-disabled=true].active,.carousel-tab[aria-disabled=true].focus,.carousel-tab[aria-disabled=true].hover,.carousel-tab[aria-disabled=true]:active,.carousel-tab[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))))}.carousel-tab.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))))}.carousel-tab.disabled.active,.carousel-tab.disabled.focus,.carousel-tab.disabled.hover,.carousel-tab.disabled:active,.carousel-tab.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))))}}
2
- /*# sourceMappingURL=carousel.css.map */
1
+ @layer graupl.base{.carousel-control{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}.carousel-control:visited,.carousel-control.visited{transform:var(--graupl-button-visited-transform,var(--graupl-button-transform,none))}.carousel-control:focus-visible,.carousel-control.focus{transform:var(--graupl-button-focus-transform,var(--graupl-button-transform,none))}.carousel-control:hover,.carousel-control.hover{transform:var(--graupl-button-hover-transform,var(--graupl-button-transform,none))}.carousel-control:active,.carousel-control.active{transform:var(--graupl-button-active-transform,scale(.95))}.carousel-control:disabled,.carousel-control:disabled:visited,.carousel-control:disabled.visited,.carousel-control:disabled:focus-visible,.carousel-control:disabled.focus,.carousel-control:disabled:hover,.carousel-control:disabled.hover,.carousel-control:disabled:active,.carousel-control:disabled.active,.carousel-control:disabled[aria-selected=true],.carousel-control:disabled.selected,.carousel-control:disabled[aria-current=true],.carousel-control:disabled.current,.carousel-control[disabled],.carousel-control[disabled]:visited,.carousel-control[disabled].visited,.carousel-control[disabled]:focus-visible,.carousel-control[disabled].focus,.carousel-control[disabled]:hover,.carousel-control[disabled].hover,.carousel-control[disabled]:active,.carousel-control[disabled].active,.carousel-control[disabled][aria-selected=true],.carousel-control[disabled].selected,.carousel-control[disabled][aria-current=true],.carousel-control[disabled].current,.carousel-control[aria-disabled=true],.carousel-control[aria-disabled=true]:visited,.carousel-control[aria-disabled=true].visited,.carousel-control[aria-disabled=true]:focus-visible,.carousel-control[aria-disabled=true].focus,.carousel-control[aria-disabled=true]:hover,.carousel-control[aria-disabled=true].hover,.carousel-control[aria-disabled=true]:active,.carousel-control[aria-disabled=true].active,.carousel-control[aria-disabled=true][aria-selected=true],.carousel-control[aria-disabled=true].selected,.carousel-control[aria-disabled=true][aria-current=true],.carousel-control[aria-disabled=true].current,.carousel-control.disabled,.carousel-control.disabled:visited,.carousel-control.disabled.visited,.carousel-control.disabled:focus-visible,.carousel-control.disabled.focus,.carousel-control.disabled:hover,.carousel-control.disabled.hover,.carousel-control.disabled:active,.carousel-control.disabled.active,.carousel-control.disabled[aria-selected=true],.carousel-control.disabled.selected,.carousel-control.disabled[aria-current=true],.carousel-control.disabled.current{transform:var(--graupl-button-disabled-transform,none)}.carousel-control:disabled,.carousel-control[disabled],.carousel-control[aria-disabled=true],.carousel-control.disabled{cursor:not-allowed}@media (prefers-reduced-motion:reduce){.carousel-control{--graupl-button-transition:var(--graupl-button-transition-reduced-motion,background var(--graupl-transition-timing-function,ease),color var(--graupl-transition-timing-function,ease))}}.carousel-tab{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}.carousel-tab:visited,.carousel-tab.visited{transform:var(--graupl-button-visited-transform,var(--graupl-button-transform,none))}.carousel-tab:focus-visible,.carousel-tab.focus{transform:var(--graupl-button-focus-transform,var(--graupl-button-transform,none))}.carousel-tab:hover,.carousel-tab.hover{transform:var(--graupl-button-hover-transform,var(--graupl-button-transform,none))}.carousel-tab:active,.carousel-tab.active{transform:var(--graupl-button-active-transform,scale(.95))}.carousel-tab:disabled,.carousel-tab:disabled:visited,.carousel-tab:disabled.visited,.carousel-tab:disabled:focus-visible,.carousel-tab:disabled.focus,.carousel-tab:disabled:hover,.carousel-tab:disabled.hover,.carousel-tab:disabled:active,.carousel-tab:disabled.active,.carousel-tab:disabled[aria-selected=true],.carousel-tab:disabled.selected,.carousel-tab:disabled[aria-current=true],.carousel-tab:disabled.current,.carousel-tab[disabled],.carousel-tab[disabled]:visited,.carousel-tab[disabled].visited,.carousel-tab[disabled]:focus-visible,.carousel-tab[disabled].focus,.carousel-tab[disabled]:hover,.carousel-tab[disabled].hover,.carousel-tab[disabled]:active,.carousel-tab[disabled].active,.carousel-tab[disabled][aria-selected=true],.carousel-tab[disabled].selected,.carousel-tab[disabled][aria-current=true],.carousel-tab[disabled].current,.carousel-tab[aria-disabled=true],.carousel-tab[aria-disabled=true]:visited,.carousel-tab[aria-disabled=true].visited,.carousel-tab[aria-disabled=true]:focus-visible,.carousel-tab[aria-disabled=true].focus,.carousel-tab[aria-disabled=true]:hover,.carousel-tab[aria-disabled=true].hover,.carousel-tab[aria-disabled=true]:active,.carousel-tab[aria-disabled=true].active,.carousel-tab[aria-disabled=true][aria-selected=true],.carousel-tab[aria-disabled=true].selected,.carousel-tab[aria-disabled=true][aria-current=true],.carousel-tab[aria-disabled=true].current,.carousel-tab.disabled,.carousel-tab.disabled:visited,.carousel-tab.disabled.visited,.carousel-tab.disabled:focus-visible,.carousel-tab.disabled.focus,.carousel-tab.disabled:hover,.carousel-tab.disabled.hover,.carousel-tab.disabled:active,.carousel-tab.disabled.active,.carousel-tab.disabled[aria-selected=true],.carousel-tab.disabled.selected,.carousel-tab.disabled[aria-current=true],.carousel-tab.disabled.current{transform:var(--graupl-button-disabled-transform,none)}.carousel-tab:disabled,.carousel-tab[disabled],.carousel-tab[aria-disabled=true],.carousel-tab.disabled{cursor:not-allowed}@media (prefers-reduced-motion:reduce){.carousel-tab{--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{.carousel{grid-template-columns:[slide-start controls-start]auto [tabs-start]var(--graupl-carousel-tabs-width,1fr)[tabs-end]auto [controls-end slide-end];grid-template-rows:[slide-start controls-start]var(--graupl-carousel-controls-height,auto)[controls-end]var(--graupl-carousel-slide-height,1fr)[tabs-start]var(--graupl-carousel-tabs-height,auto)[tabs-end slide-end];isolation:isolate;padding:var(--graupl-carousel-padding,var(--graupl-carousel-padding-y,var(--graupl-spacer-0,calc(0*var(--graupl-spacer,1rem))))var(--graupl-carousel-padding-x,var(--graupl-spacer-0,calc(0*var(--graupl-spacer,1rem)))));display:grid;position:relative}.carousel[data-graupl-action=next] .carousel-item.previous{transform:translateX(calc(-1*var(--graupl-carousel-item-max-width,100%)))}.carousel[data-graupl-action=next] .carousel-item.previous.active{transform:none}.carousel[data-graupl-action=next] .carousel-item.next{transform:translateX(var(--graupl-carousel-item-max-width,100%))}.carousel[data-graupl-action=next] .carousel-item.next.active{transform:none}.carousel[data-graupl-action=previous] .carousel-item.previous{transform:translateX(var(--graupl-carousel-item-max-width,100%))}.carousel[data-graupl-action=previous] .carousel-item.previous.active{transform:none}.carousel[data-graupl-action=previous] .carousel-item.next{transform:translateX(calc(-1*var(--graupl-carousel-item-max-width,100%)))}.carousel[data-graupl-action=previous] .carousel-item.next.active{transform:none}.carousel-control-container{z-index:1;grid-area:controls;grid-template-columns:[autoplay-start]var(--graupl-carousel-control-width,4rem)[autoplay-end]1fr [previous-start]var(--graupl-carousel-control-width,4rem)[previous-end next-start]var(--graupl-carousel-control-width,4rem)[next-end];grid-template-rows:[autoplay-start next-start previous-start]var(--graupl-carousel-control-height,3rem)[previous-end next-end autoplay-end];pointer-events:none;display:grid}.carousel-control{pointer-events:auto}.carousel-control.autoplay{grid-area:autoplay}.carousel-control.play:before{content:var(--graupl-carousel-play-content,"▶");display:inline-block}.carousel-control.pause:before{content:var(--graupl-carousel-pause-content,"❚❚");display:inline-block}.carousel-control.next{grid-area:next}.carousel-control.next:before{content:var(--graupl-carousel-next-content,"▶");display:inline-block}.carousel-control.previous{grid-area:previous}.carousel-control.previous:before{content:var(--graupl-carousel-previous-content,"◀");display:inline-block}.carousel-item-container{z-index:0;padding:var(--graupl-carousel-item-container-padding,var(--graupl-carousel-item-container-padding-y,var(--graupl-spacer-0,calc(0*var(--graupl-spacer,1rem))))var(--graupl-carousel-item-container-padding-x,var(--graupl-spacer-0,calc(0*var(--graupl-spacer,1rem)))));isolation:isolate;grid-area:slide;grid-template-areas:"items";display:grid;overflow-x:hidden}.carousel-item{z-index:-1;max-width:var(--graupl-carousel-item-max-width,100%);opacity:0;grid-area:items}.carousel-item.active{z-index:1;transition:transform var(--graupl-carousel-transition-duration,.5s)ease-in-out;opacity:1;transform:none}.carousel-item.previous{z-index:1;transform:translateX(calc(-1*var(--graupl-carousel-item-max-width,100%)));transition:transform var(--graupl-carousel-transition-duration,.5s)ease-in-out;opacity:1}.carousel-item.previous.active{transform:none}.carousel-item.next{z-index:1;transform:translateX(var(--graupl-carousel-item-max-width,100%));opacity:1}.carousel-item.next.active{transform:none}.carousel-tab-container{z-index:1;padding:var(--graupl-carousel-tab-container-padding,var(--graupl-carousel-tab-container-padding-y,var(--graupl-spacer-3,calc(.5*var(--graupl-spacer,1rem))))var(--graupl-carousel-tab-container-padding-x,var(--graupl-spacer-3,calc(.5*var(--graupl-spacer,1rem)))));justify-content:center;gap:var(--graupl-carousel-tab-container-gap,var(--graupl-spacer-3,calc(.5*var(--graupl-spacer,1rem))));pointer-events:none;grid-area:tabs;display:flex}.carousel-tab{--graupl-button-border-radius:50%;pointer-events:auto}}@layer graupl.theme{.carousel-control:visited,.carousel-control.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)))))))}.carousel-control:focus-visible,.carousel-control.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)))))))}.carousel-control:hover,.carousel-control.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))))))}.carousel-control:active,.carousel-control.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)))))))}.carousel-control:disabled,.carousel-control:disabled:visited,.carousel-control:disabled.visited,.carousel-control:disabled:focus-visible,.carousel-control:disabled.focus,.carousel-control:disabled:hover,.carousel-control:disabled.hover,.carousel-control:disabled:active,.carousel-control:disabled.active,.carousel-control:disabled[aria-selected=true],.carousel-control:disabled.selected,.carousel-control:disabled[aria-current=true],.carousel-control:disabled.current,.carousel-control[disabled],.carousel-control[disabled]:visited,.carousel-control[disabled].visited,.carousel-control[disabled]:focus-visible,.carousel-control[disabled].focus,.carousel-control[disabled]:hover,.carousel-control[disabled].hover,.carousel-control[disabled]:active,.carousel-control[disabled].active,.carousel-control[disabled][aria-selected=true],.carousel-control[disabled].selected,.carousel-control[disabled][aria-current=true],.carousel-control[disabled].current,.carousel-control[aria-disabled=true],.carousel-control[aria-disabled=true]:visited,.carousel-control[aria-disabled=true].visited,.carousel-control[aria-disabled=true]:focus-visible,.carousel-control[aria-disabled=true].focus,.carousel-control[aria-disabled=true]:hover,.carousel-control[aria-disabled=true].hover,.carousel-control[aria-disabled=true]:active,.carousel-control[aria-disabled=true].active,.carousel-control[aria-disabled=true][aria-selected=true],.carousel-control[aria-disabled=true].selected,.carousel-control[aria-disabled=true][aria-current=true],.carousel-control[aria-disabled=true].current,.carousel-control.disabled,.carousel-control.disabled:visited,.carousel-control.disabled.visited,.carousel-control.disabled:focus-visible,.carousel-control.disabled.focus,.carousel-control.disabled:hover,.carousel-control.disabled.hover,.carousel-control.disabled:active,.carousel-control.disabled.active,.carousel-control.disabled[aria-selected=true],.carousel-control.disabled.selected,.carousel-control.disabled[aria-current=true],.carousel-control.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))))}.carousel-control.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)))}.carousel-control.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)))}.carousel-control.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)))}.carousel-control{border-color:var(--graupl-carousel-control-border-color,var(--graupl-carousel-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-carousel-control-background,var(--graupl-carousel-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-carousel-control-color,var(--graupl-carousel-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)))))))}.carousel-control:visited,.carousel-control.visited{border-color:var(--graupl-carousel-control-visited-border-color,var(--graupl-carousel-control-border-color,var(--graupl-carousel-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-carousel-control-visited-color,var(--graupl-carousel-control-color,var(--graupl-carousel-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-carousel-control-visited-background,var(--graupl-carousel-control-background,var(--graupl-carousel-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))))))))}.carousel-control:focus-visible,.carousel-control.focus{border-color:var(--graupl-carousel-control-focus-border-color,var(--graupl-carousel-control-border-color,var(--graupl-carousel-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-carousel-control-focus-color,var(--graupl-carousel-control-color,var(--graupl-carousel-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-carousel-control-focus-background,var(--graupl-carousel-control-background,var(--graupl-carousel-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))))))))}.carousel-control:hover,.carousel-control.hover{border-color:var(--graupl-carousel-control-hover-border-color,var(--graupl-carousel-control-border-color,var(--graupl-carousel-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-carousel-control-hover-color,var(--graupl-carousel-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))));background:var(--graupl-carousel-control-hover-background,var(--graupl-carousel-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)))))))}.carousel-control:active,.carousel-control.active{border-color:var(--graupl-carousel-control-active-border-color,var(--graupl-carousel-control-hover-border-color,var(--graupl-carousel-control-border-color,var(--graupl-carousel-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-carousel-control-active-color,var(--graupl-carousel-control-hover-color,var(--graupl-carousel-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))))));background:var(--graupl-carousel-control-active-background,var(--graupl-carousel-control-hover-background,var(--graupl-carousel-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))))))))}.carousel-control:disabled,.carousel-control:disabled:visited,.carousel-control:disabled.visited,.carousel-control:disabled:focus-visible,.carousel-control:disabled.focus,.carousel-control:disabled:hover,.carousel-control:disabled.hover,.carousel-control:disabled:active,.carousel-control:disabled.active,.carousel-control:disabled[aria-selected=true],.carousel-control:disabled.selected,.carousel-control:disabled[aria-current=true],.carousel-control:disabled.current,.carousel-control[disabled],.carousel-control[disabled]:visited,.carousel-control[disabled].visited,.carousel-control[disabled]:focus-visible,.carousel-control[disabled].focus,.carousel-control[disabled]:hover,.carousel-control[disabled].hover,.carousel-control[disabled]:active,.carousel-control[disabled].active,.carousel-control[disabled][aria-selected=true],.carousel-control[disabled].selected,.carousel-control[disabled][aria-current=true],.carousel-control[disabled].current,.carousel-control[aria-disabled=true],.carousel-control[aria-disabled=true]:visited,.carousel-control[aria-disabled=true].visited,.carousel-control[aria-disabled=true]:focus-visible,.carousel-control[aria-disabled=true].focus,.carousel-control[aria-disabled=true]:hover,.carousel-control[aria-disabled=true].hover,.carousel-control[aria-disabled=true]:active,.carousel-control[aria-disabled=true].active,.carousel-control[aria-disabled=true][aria-selected=true],.carousel-control[aria-disabled=true].selected,.carousel-control[aria-disabled=true][aria-current=true],.carousel-control[aria-disabled=true].current,.carousel-control.disabled,.carousel-control.disabled:visited,.carousel-control.disabled.visited,.carousel-control.disabled:focus-visible,.carousel-control.disabled.focus,.carousel-control.disabled:hover,.carousel-control.disabled.hover,.carousel-control.disabled:active,.carousel-control.disabled.active,.carousel-control.disabled[aria-selected=true],.carousel-control.disabled.selected,.carousel-control.disabled[aria-current=true],.carousel-control.disabled.current{border-color:var(--graupl-carousel-control-disabled-border-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))));color:var(--graupl-carousel-control-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))));background:var(--graupl-carousel-control-disabled-background,var(--graupl-carousel-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)))))))}.carousel-tab:visited,.carousel-tab.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)))))))}.carousel-tab:focus-visible,.carousel-tab.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)))))))}.carousel-tab:hover,.carousel-tab.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))))))}.carousel-tab:active,.carousel-tab.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)))))))}.carousel-tab:disabled,.carousel-tab:disabled:visited,.carousel-tab:disabled.visited,.carousel-tab:disabled:focus-visible,.carousel-tab:disabled.focus,.carousel-tab:disabled:hover,.carousel-tab:disabled.hover,.carousel-tab:disabled:active,.carousel-tab:disabled.active,.carousel-tab:disabled[aria-selected=true],.carousel-tab:disabled.selected,.carousel-tab:disabled[aria-current=true],.carousel-tab:disabled.current,.carousel-tab[disabled],.carousel-tab[disabled]:visited,.carousel-tab[disabled].visited,.carousel-tab[disabled]:focus-visible,.carousel-tab[disabled].focus,.carousel-tab[disabled]:hover,.carousel-tab[disabled].hover,.carousel-tab[disabled]:active,.carousel-tab[disabled].active,.carousel-tab[disabled][aria-selected=true],.carousel-tab[disabled].selected,.carousel-tab[disabled][aria-current=true],.carousel-tab[disabled].current,.carousel-tab[aria-disabled=true],.carousel-tab[aria-disabled=true]:visited,.carousel-tab[aria-disabled=true].visited,.carousel-tab[aria-disabled=true]:focus-visible,.carousel-tab[aria-disabled=true].focus,.carousel-tab[aria-disabled=true]:hover,.carousel-tab[aria-disabled=true].hover,.carousel-tab[aria-disabled=true]:active,.carousel-tab[aria-disabled=true].active,.carousel-tab[aria-disabled=true][aria-selected=true],.carousel-tab[aria-disabled=true].selected,.carousel-tab[aria-disabled=true][aria-current=true],.carousel-tab[aria-disabled=true].current,.carousel-tab.disabled,.carousel-tab.disabled:visited,.carousel-tab.disabled.visited,.carousel-tab.disabled:focus-visible,.carousel-tab.disabled.focus,.carousel-tab.disabled:hover,.carousel-tab.disabled.hover,.carousel-tab.disabled:active,.carousel-tab.disabled.active,.carousel-tab.disabled[aria-selected=true],.carousel-tab.disabled.selected,.carousel-tab.disabled[aria-current=true],.carousel-tab.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))))}.carousel-tab.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)))}.carousel-tab.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)))}.carousel-tab.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)))}.carousel-tab{border-color:var(--graupl-carousel-tab-border-color,var(--graupl-carousel-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-carousel-tab-background,var(--graupl-carousel-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-carousel-tab-color,var(--graupl-carousel-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)))))))}.carousel-tab:visited,.carousel-tab.visited{border-color:var(--graupl-carousel-tab-visited-border-color,var(--graupl-carousel-tab-border-color,var(--graupl-carousel-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-carousel-tab-visited-color,var(--graupl-carousel-tab-color,var(--graupl-carousel-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-carousel-tab-visited-background,var(--graupl-carousel-tab-background,var(--graupl-carousel-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))))))))}.carousel-tab:focus-visible,.carousel-tab.focus{border-color:var(--graupl-carousel-tab-focus-border-color,var(--graupl-carousel-tab-border-color,var(--graupl-carousel-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-carousel-tab-focus-color,var(--graupl-carousel-tab-color,var(--graupl-carousel-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-carousel-tab-focus-background,var(--graupl-carousel-tab-background,var(--graupl-carousel-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))))))))}.carousel-tab:hover,.carousel-tab.hover{border-color:var(--graupl-carousel-tab-hover-border-color,var(--graupl-carousel-tab-border-color,var(--graupl-carousel-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-carousel-tab-hover-color,var(--graupl-carousel-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))));background:var(--graupl-carousel-tab-hover-background,var(--graupl-carousel-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)))))))}.carousel-tab:active,.carousel-tab.active{border-color:var(--graupl-carousel-tab-active-border-color,var(--graupl-carousel-tab-hover-border-color,var(--graupl-carousel-tab-border-color,var(--graupl-carousel-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-carousel-tab-active-color,var(--graupl-carousel-tab-hover-color,var(--graupl-carousel-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))))));background:var(--graupl-carousel-tab-active-background,var(--graupl-carousel-tab-hover-background,var(--graupl-carousel-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))))))))}.carousel-tab:disabled,.carousel-tab:disabled:visited,.carousel-tab:disabled.visited,.carousel-tab:disabled:focus-visible,.carousel-tab:disabled.focus,.carousel-tab:disabled:hover,.carousel-tab:disabled.hover,.carousel-tab:disabled:active,.carousel-tab:disabled.active,.carousel-tab:disabled[aria-selected=true],.carousel-tab:disabled.selected,.carousel-tab:disabled[aria-current=true],.carousel-tab:disabled.current,.carousel-tab[disabled],.carousel-tab[disabled]:visited,.carousel-tab[disabled].visited,.carousel-tab[disabled]:focus-visible,.carousel-tab[disabled].focus,.carousel-tab[disabled]:hover,.carousel-tab[disabled].hover,.carousel-tab[disabled]:active,.carousel-tab[disabled].active,.carousel-tab[disabled][aria-selected=true],.carousel-tab[disabled].selected,.carousel-tab[disabled][aria-current=true],.carousel-tab[disabled].current,.carousel-tab[aria-disabled=true],.carousel-tab[aria-disabled=true]:visited,.carousel-tab[aria-disabled=true].visited,.carousel-tab[aria-disabled=true]:focus-visible,.carousel-tab[aria-disabled=true].focus,.carousel-tab[aria-disabled=true]:hover,.carousel-tab[aria-disabled=true].hover,.carousel-tab[aria-disabled=true]:active,.carousel-tab[aria-disabled=true].active,.carousel-tab[aria-disabled=true][aria-selected=true],.carousel-tab[aria-disabled=true].selected,.carousel-tab[aria-disabled=true][aria-current=true],.carousel-tab[aria-disabled=true].current,.carousel-tab.disabled,.carousel-tab.disabled:visited,.carousel-tab.disabled.visited,.carousel-tab.disabled:focus-visible,.carousel-tab.disabled.focus,.carousel-tab.disabled:hover,.carousel-tab.disabled.hover,.carousel-tab.disabled:active,.carousel-tab.disabled.active,.carousel-tab.disabled[aria-selected=true],.carousel-tab.disabled.selected,.carousel-tab.disabled[aria-current=true],.carousel-tab.disabled.current{border-color:var(--graupl-carousel-tab-disabled-border-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))));color:var(--graupl-carousel-tab-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))));background:var(--graupl-carousel-tab-disabled-background,var(--graupl-carousel-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)))))))}}
2
+ /*# sourceMappingURL=carousel.css.map */