@graupl/core 1.0.0-beta.51 → 1.0.0-beta.53

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 (49) hide show
  1. package/dist/css/graupl.css +1 -1
  2. package/dist/css/graupl.css.map +1 -1
  3. package/dist/css/layout/columns.css +1 -1
  4. package/dist/css/layout/columns.css.map +1 -1
  5. package/dist/css/layout/flex-columns.css.map +1 -1
  6. package/dist/css/layout.css +1 -1
  7. package/dist/css/layout.css.map +1 -1
  8. package/dist/css/utilities/block-size.css +1 -1
  9. package/dist/css/utilities/block-size.css.map +1 -1
  10. package/dist/css/utilities/grid.css +2 -0
  11. package/dist/css/utilities/grid.css.map +1 -0
  12. package/dist/css/utilities/inline-size.css +1 -1
  13. package/dist/css/utilities/inline-size.css.map +1 -1
  14. package/dist/css/utilities.css +1 -1
  15. package/dist/css/utilities.css.map +1 -1
  16. package/package.json +1 -1
  17. package/scss/utilities/grid.scss +3 -0
  18. package/src/scss/_defaults.scss +4 -0
  19. package/src/scss/layout/columns/_defaults.scss +26 -4
  20. package/src/scss/layout/columns/_index.scss +346 -35
  21. package/src/scss/layout/flex-columns/_defaults.scss +2 -2
  22. package/src/scss/layout/flex-columns/_index.scss +41 -41
  23. package/src/scss/utilities/_index.scss +1 -0
  24. package/src/scss/utilities/_template/_index.scss +1 -1
  25. package/src/scss/utilities/block-size/_defaults.scss +3 -3
  26. package/src/scss/utilities/block-size/_index.scss +84 -84
  27. package/src/scss/utilities/grid/_defaults.scss +89 -0
  28. package/src/scss/utilities/grid/_index.scss +236 -0
  29. package/src/scss/utilities/grid/_variables.scss +6 -0
  30. package/src/scss/utilities/grid/col-span/_defaults.scss +102 -0
  31. package/src/scss/utilities/grid/col-span/_index.scss +124 -0
  32. package/src/scss/utilities/grid/col-span/_variables.scss +6 -0
  33. package/src/scss/utilities/grid/grid-column/_defaults.scss +104 -0
  34. package/src/scss/utilities/grid/grid-column/_index.scss +140 -0
  35. package/src/scss/utilities/grid/grid-column/_variables.scss +6 -0
  36. package/src/scss/utilities/grid/grid-row/_defaults.scss +104 -0
  37. package/src/scss/utilities/grid/grid-row/_index.scss +140 -0
  38. package/src/scss/utilities/grid/grid-row/_variables.scss +6 -0
  39. package/src/scss/utilities/grid/grid-template-columns/_defaults.scss +102 -0
  40. package/src/scss/utilities/grid/grid-template-columns/_index.scss +124 -0
  41. package/src/scss/utilities/grid/grid-template-columns/_variables.scss +6 -0
  42. package/src/scss/utilities/grid/grid-template-rows/_defaults.scss +102 -0
  43. package/src/scss/utilities/grid/grid-template-rows/_index.scss +124 -0
  44. package/src/scss/utilities/grid/grid-template-rows/_variables.scss +6 -0
  45. package/src/scss/utilities/grid/row-span/_defaults.scss +102 -0
  46. package/src/scss/utilities/grid/row-span/_index.scss +124 -0
  47. package/src/scss/utilities/grid/row-span/_variables.scss +6 -0
  48. package/src/scss/utilities/inline-size/_defaults.scss +3 -3
  49. package/src/scss/utilities/inline-size/_index.scss +84 -84
package/dist/css/layout/flex-columns.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":null,"mappings":"AESI,qBC0PF,iXAME,mHEvFE,iUFwIA,gEExIA,iUFwIA,gEExIA,iUFwIA,gEExIA,iUFwIA,gEExIA,iUFwIA,gEExIA,iUFwIA,gEExIA,iUFwIA,gEExIA,iUFwIA,gEExIA,iUFwIA,gEExIA,oUFwIA,iEExIA,oUFwIA,iEExIA,oUFwIA,iEG5SJ,6BDoKI,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,wUFwIA,qEExIA,wUFwIA,qEExIA,wUFwIA,sEG5SJ,iCDoKI,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,wUFwIA,qEExIA,wUFwIA,qEExIA,wUFwIA,sEG5SJ,iCDoKI,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,wUFwIA,qEExIA,wUFwIA,qEExIA,wUFwIA,sEG5SJ,kCDoKI,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,wUFwIA,qEExIA,wUFwIA,qEExIA,wUFwIA,sEG5SJ,kCDoKI,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,wUFwIA,qEExIA,wUFwIA,qEExIA,wUFwIA,sEG5SJ,kCDoKI,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,wUFwIA,qEExIA,wUFwIA,qEExIA,wUFwIA,sEG5SJ,kCDoKI,sUFwIA,qEExIA,sUFwIA,qEExIA,sUFwIA,qEExIA,sUFwIA,qEExIA,sUFwIA,qEExIA,sUFwIA,qEExIA,sUFwIA,qEExIA,sUFwIA,qEExIA,sUFwIA,qEExIA,yUFwIA,sEExIA,yUFwIA,sEExIA,yUFwIA,uEG5SJ,kCDoKI,sUFwIA,qEExIA,sUFwIA,qEExIA,sUFwIA,qEExIA,sUFwIA,qEExIA,sUFwIA,qEExIA,sUFwIA,qEExIA,sUFwIA,qEExIA,sUFwIA,qEExIA,sUFwIA,qEExIA,yUFwIA,sEExIA,yUFwIA,sEExIA,yUFwIA,uEInSJ,0BJiTM,sUD/TJ,oBC0UF","sources":["dist/css/layout/flex-columns.css","var/www/html/packages/core/src/scss/layout/columns/_variables.scss","var/www/html/packages/core/src/scss/mixins/_layer.scss","var/www/html/packages/core/src/scss/layout/flex-columns/_index.scss","var/www/html/packages/core/src/scss/layout/flex-columns/_variables.scss","var/www/html/packages/core/src/scss/mixins/_utility.scss","var/www/html/packages/core/src/scss/mixins/_screen.scss","var/www/html/packages/core/src/scss/mixins/_container.scss"],"sourcesContent":["/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n/* stylelint-enable scss/operator-no-newline-after */\n@layer graupl.layout {\n .flex-columns {\n display: flex;\n flex-wrap: wrap;\n gap: var(--graupl-flex-columns-row-gap, var(--graupl-columns-row-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))) var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))));\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns > * {\n flex: 1 1 var(--graupl-flex-columns-size, auto);\n max-width: var(--graupl-flex-columns-max-width, unset);\n }\n .flex-columns .col-1 {\n --graupl-flex-columns-size: calc(100% / 12 * 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n .flex-columns .col-2 {\n --graupl-flex-columns-size: calc(100% / 12 * 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n .flex-columns .col-3 {\n --graupl-flex-columns-size: calc(100% / 12 * 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n .flex-columns .col-4 {\n --graupl-flex-columns-size: calc(100% / 12 * 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n .flex-columns .col-5 {\n --graupl-flex-columns-size: calc(100% / 12 * 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n .flex-columns .col-6 {\n --graupl-flex-columns-size: calc(100% / 12 * 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n .flex-columns .col-7 {\n --graupl-flex-columns-size: calc(100% / 12 * 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n .flex-columns .col-8 {\n --graupl-flex-columns-size: calc(100% / 12 * 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n .flex-columns .col-9 {\n --graupl-flex-columns-size: calc(100% / 12 * 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n .flex-columns .col-10 {\n --graupl-flex-columns-size: calc(100% / 12 * 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n .flex-columns .col-11 {\n --graupl-flex-columns-size: calc(100% / 12 * 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n .flex-columns .col-12 {\n --graupl-flex-columns-size: calc(100% / 12 * 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n @media screen and (0 <= width) {\n .flex-columns .xs\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 * 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xs\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (0 <= width) {\n .flex-columns .xs\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 * 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xs\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (0 <= width) {\n .flex-columns .xs\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 * 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xs\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (0 <= width) {\n .flex-columns .xs\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 * 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xs\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (0 <= width) {\n .flex-columns .xs\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 * 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xs\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (0 <= width) {\n .flex-columns .xs\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 * 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xs\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (0 <= width) {\n .flex-columns .xs\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 * 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xs\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (0 <= width) {\n .flex-columns .xs\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 * 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xs\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (0 <= width) {\n .flex-columns .xs\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 * 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xs\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (0 <= width) {\n .flex-columns .xs\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 * 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xs\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (0 <= width) {\n .flex-columns .xs\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 * 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xs\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (0 <= width) {\n .flex-columns .xs\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 * 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xs\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (576px <= width) {\n .flex-columns .sm\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 * 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .sm\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (576px <= width) {\n .flex-columns .sm\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 * 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .sm\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (576px <= width) {\n .flex-columns .sm\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 * 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .sm\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (576px <= width) {\n .flex-columns .sm\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 * 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .sm\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (576px <= width) {\n .flex-columns .sm\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 * 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .sm\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (576px <= width) {\n .flex-columns .sm\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 * 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .sm\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (576px <= width) {\n .flex-columns .sm\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 * 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .sm\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (576px <= width) {\n .flex-columns .sm\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 * 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .sm\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (576px <= width) {\n .flex-columns .sm\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 * 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .sm\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (576px <= width) {\n .flex-columns .sm\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 * 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .sm\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (576px <= width) {\n .flex-columns .sm\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 * 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .sm\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (576px <= width) {\n .flex-columns .sm\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 * 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .sm\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (768px <= width) {\n .flex-columns .md\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 * 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .md\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (768px <= width) {\n .flex-columns .md\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 * 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .md\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (768px <= width) {\n .flex-columns .md\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 * 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .md\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (768px <= width) {\n .flex-columns .md\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 * 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .md\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (768px <= width) {\n .flex-columns .md\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 * 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .md\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (768px <= width) {\n .flex-columns .md\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 * 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .md\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (768px <= width) {\n .flex-columns .md\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 * 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .md\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (768px <= width) {\n .flex-columns .md\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 * 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .md\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (768px <= width) {\n .flex-columns .md\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 * 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .md\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (768px <= width) {\n .flex-columns .md\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 * 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .md\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (768px <= width) {\n .flex-columns .md\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 * 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .md\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (768px <= width) {\n .flex-columns .md\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 * 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .md\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1024px <= width) {\n .flex-columns .lg\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 * 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .lg\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1024px <= width) {\n .flex-columns .lg\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 * 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .lg\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1024px <= width) {\n .flex-columns .lg\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 * 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .lg\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1024px <= width) {\n .flex-columns .lg\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 * 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .lg\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1024px <= width) {\n .flex-columns .lg\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 * 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .lg\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1024px <= width) {\n .flex-columns .lg\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 * 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .lg\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1024px <= width) {\n .flex-columns .lg\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 * 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .lg\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1024px <= width) {\n .flex-columns .lg\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 * 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .lg\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1024px <= width) {\n .flex-columns .lg\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 * 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .lg\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1024px <= width) {\n .flex-columns .lg\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 * 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .lg\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1024px <= width) {\n .flex-columns .lg\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 * 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .lg\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1024px <= width) {\n .flex-columns .lg\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 * 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .lg\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1280px <= width) {\n .flex-columns .xl\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 * 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xl\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1280px <= width) {\n .flex-columns .xl\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 * 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xl\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1280px <= width) {\n .flex-columns .xl\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 * 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xl\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1280px <= width) {\n .flex-columns .xl\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 * 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xl\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1280px <= width) {\n .flex-columns .xl\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 * 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xl\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1280px <= width) {\n .flex-columns .xl\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 * 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xl\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1280px <= width) {\n .flex-columns .xl\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 * 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xl\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1280px <= width) {\n .flex-columns .xl\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 * 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xl\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1280px <= width) {\n .flex-columns .xl\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 * 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xl\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1280px <= width) {\n .flex-columns .xl\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 * 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xl\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1280px <= width) {\n .flex-columns .xl\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 * 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xl\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1280px <= width) {\n .flex-columns .xl\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 * 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xl\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1500px <= width) {\n .flex-columns .hd\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 * 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .hd\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1500px <= width) {\n .flex-columns .hd\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 * 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .hd\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1500px <= width) {\n .flex-columns .hd\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 * 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .hd\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1500px <= width) {\n .flex-columns .hd\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 * 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .hd\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1500px <= width) {\n .flex-columns .hd\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 * 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .hd\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1500px <= width) {\n .flex-columns .hd\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 * 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .hd\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1500px <= width) {\n .flex-columns .hd\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 * 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .hd\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1500px <= width) {\n .flex-columns .hd\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 * 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .hd\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1500px <= width) {\n .flex-columns .hd\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 * 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .hd\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1500px <= width) {\n .flex-columns .hd\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 * 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .hd\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1500px <= width) {\n .flex-columns .hd\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 * 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .hd\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1500px <= width) {\n .flex-columns .hd\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 * 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .hd\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1921px <= width) {\n .flex-columns .qhd\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 * 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .qhd\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1921px <= width) {\n .flex-columns .qhd\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 * 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .qhd\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1921px <= width) {\n .flex-columns .qhd\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 * 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .qhd\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1921px <= width) {\n .flex-columns .qhd\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 * 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .qhd\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1921px <= width) {\n .flex-columns .qhd\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 * 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .qhd\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1921px <= width) {\n .flex-columns .qhd\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 * 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .qhd\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1921px <= width) {\n .flex-columns .qhd\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 * 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .qhd\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1921px <= width) {\n .flex-columns .qhd\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 * 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .qhd\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1921px <= width) {\n .flex-columns .qhd\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 * 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .qhd\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1921px <= width) {\n .flex-columns .qhd\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 * 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .qhd\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1921px <= width) {\n .flex-columns .qhd\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 * 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .qhd\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1921px <= width) {\n .flex-columns .qhd\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 * 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .qhd\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (2561px <= width) {\n .flex-columns .uhd\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 * 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .uhd\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (2561px <= width) {\n .flex-columns .uhd\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 * 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .uhd\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (2561px <= width) {\n .flex-columns .uhd\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 * 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .uhd\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (2561px <= width) {\n .flex-columns .uhd\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 * 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .uhd\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (2561px <= width) {\n .flex-columns .uhd\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 * 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .uhd\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (2561px <= width) {\n .flex-columns .uhd\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 * 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .uhd\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (2561px <= width) {\n .flex-columns .uhd\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 * 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .uhd\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (2561px <= width) {\n .flex-columns .uhd\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 * 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .uhd\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (2561px <= width) {\n .flex-columns .uhd\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 * 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .uhd\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (2561px <= width) {\n .flex-columns .uhd\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 * 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .uhd\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (2561px <= width) {\n .flex-columns .uhd\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 * 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .uhd\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (2561px <= width) {\n .flex-columns .uhd\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 * 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .uhd\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @container (width <= 575px) {\n .flex-columns .col-1 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n @container (width <= 575px) {\n .flex-columns .col-2 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n @container (width <= 575px) {\n .flex-columns .col-3 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n @container (width <= 575px) {\n .flex-columns .col-4 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n @container (width <= 575px) {\n .flex-columns .col-5 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n @container (width <= 575px) {\n .flex-columns .col-6 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n @container (width <= 575px) {\n .flex-columns .col-7 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n @container (width <= 575px) {\n .flex-columns .col-8 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n @container (width <= 575px) {\n .flex-columns .col-9 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n @container (width <= 575px) {\n .flex-columns .col-10 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n @container (width <= 575px) {\n .flex-columns .col-11 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n @container (width <= 575px) {\n .flex-columns .col-12 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n}\n@layer graupl.theme {\n .flex-columns {\n background: var(--graupl-flex-columns-background);\n color: var(--graupl-flex-columns-color);\n }\n}","// @graupl/core columns layout 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-columns-row-gap | var(--graupl-spacer-5) |\n// | --graupl-columns-column-gap | var(--graupl-spacer-5) |\n// | --graupl-columns-count | 3 |\n// | --graupl-columns-content-max-width | var(--graupl-content-max-width) |\n// | --graupl-columns-min-width | calc((var(--graupl-columns-content-max-width) - var(--graupl-columns-column-gap) * (var(--graupl-columns-count) - 1)) / var(--graupl-columns-count)) |\n// | --graupl-columns-max-width | 1fr |\n// | --graupl-columns-grid-template-columns | repeat(auto-fit, minmax(var(--graupl-columns-min-width), var(--graupl-columns-max-width))) |\n// | --graupl-columns-span | 1 |\n// | --graupl-columns-background | null |\n// | --graupl-columns-color | null |\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 \"sass:map\";\n\n// --graupl-columns-row-gap\n$columns-row-gap: var(\n --#{root-defaults.$prefix}columns-row-gap,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-columns-column-gap\n$columns-column-gap: var(\n --#{root-defaults.$prefix}columns-column-gap,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-columns-count\n$columns-count: var(\n --#{root-defaults.$prefix}columns-count,\n #{defaults.$columns-count}\n);\n\n// --graupl-columns-content-max-width\n$columns-content-max-width: var(\n --#{root-defaults.$prefix}columns-content-max-width,\n #{root-variables.$content-max-width}\n);\n\n// Calculate the min-width of each column based on the content-max-width and column-gap.\n// We take the maximum width of the page and subtract the gap width multiplied by the number of\n// columns minus one (to account for the gaps between columns).\n// We then divide this by the number of columns to get the min-width of each column.\n/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n// --graupl-columns-min-width\n$columns-min-width: var(\n --#{root-defaults.$prefix}columns-min-width,\n calc(\n (\n #{$columns-content-max-width} - #{$columns-column-gap} *\n (#{$columns-count} - 1)\n ) /\n #{$columns-count}\n )\n);\n/* stylelint-enable scss/operator-no-newline-after */\n// --graupl-columns-max-width\n$columns-max-width: var(\n --#{root-defaults.$prefix}columns-max-width,\n #{defaults.$columns-max-width}\n);\n\n// --graupl-columns-grid-template-columns\n$columns-grid-template-columns: var(\n --#{root-defaults.$prefix}columns-grid-template-columns,\n repeat(auto-fit, minmax(#{$columns-min-width}, #{$columns-max-width}))\n);\n\n// --graupl-columns-span\n$columns-span: var(\n --#{root-defaults.$prefix}columns-span,\n #{defaults.$columns-span}\n);\n\n// --graupl-columns-background\n$columns-background: var(--#{root-defaults.$prefix}columns-background);\n\n// --graupl-columns-color\n$columns-color: var(--#{root-defaults.$prefix}columns-color);\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 flex columns layout styles.\n//\n// This module provides the layout styles for the flex columns component.\n//\n// The flex columns component is a flex container that provides a responsive grid layout for content.\n// The flex columns will adjust their sizes accordingly based on the classes applied to them.\n//\n// These are effectively bootstrap columns, but leaning more on the way flex natively works in the browser.\n// This means that columns will size themselves taking the gap between them into account.\n//\n// The following classes are generated by default:\n// - `.flex-columns`: The main flex columns component (defaults to 12 units wide).\n// - `.col-1`: Sets the size of a column in the flex columns component to 1 unit width.\n// - `.col-2`: Sets the size of a column in the flex columns component to 2 unit width.\n// - `.col-3`: Sets the size of a column in the flex columns component to 3 unit width.\n// - `.col-4`: Sets the size of a column in the flex columns component to 4 unit width.\n// - `.col-5`: Sets the size of a column in the flex columns component to 5 unit width.\n// - `.col-6`: Sets the size of a column in the flex columns component to 6 unit width.\n// - `.col-7`: Sets the size of a column in the flex columns component to 7 unit width.\n// - `.col-8`: Sets the size of a column in the flex columns component to 8 unit width.\n// - `.col-9`: Sets the size of a column in the flex columns component to 9 unit width.\n// - `.col-10`: Sets the size of a column in the flex columns component to 10 unit width.\n// - `.col-11`: Sets the size of a column in the flex columns component to 11 unit width.\n// - `.col-12`: Sets the size of a column in the flex columns component to 12 unit width.\n// - `.xs:col-1`: Sets the size of a column in the flex columns component to 1 unit width on extra small screens.\n// - `.xs:col-2`: Sets the size of a column in the flex columns component to 2 unit width on extra small screens.\n// - `.xs:col-3`: Sets the size of a column in the flex columns component to 3 unit width on extra small screens.\n// - `.xs:col-4`: Sets the size of a column in the flex columns component to 4 unit width on extra small screens.\n// - `.xs:col-5`: Sets the size of a column in the flex columns component to 5 unit width on extra small screens.\n// - `.xs:col-6`: Sets the size of a column in the flex columns component to 6 unit width on extra small screens.\n// - `.xs:col-7`: Sets the size of a column in the flex columns component to 7 unit width on extra small screens.\n// - `.xs:col-8`: Sets the size of a column in the flex columns component to 8 unit width on extra small screens.\n// - `.xs:col-9`: Sets the size of a column in the flex columns component to 9 unit width on extra small screens.\n// - `.xs:col-10`: Sets the size of a column in the flex columns component to 10 unit width on extra small screens.\n// - `.xs:col-11`: Sets the size of a column in the flex columns component to 11 unit width on extra small screens.\n// - `.xs:col-12`: Sets the size of a column in the flex columns component to 12 unit width on extra small screens.\n// - `.sm:col-1`: Sets the size of a column in the flex columns component to 1 unit width on small screens.\n// - `.sm:col-2`: Sets the size of a column in the flex columns component to 2 unit width on small screens.\n// - `.sm:col-3`: Sets the size of a column in the flex columns component to 3 unit width on small screens.\n// - `.sm:col-4`: Sets the size of a column in the flex columns component to 4 unit width on small screens.\n// - `.sm:col-5`: Sets the size of a column in the flex columns component to 5 unit width on small screens.\n// - `.sm:col-6`: Sets the size of a column in the flex columns component to 6 unit width on small screens.\n// - `.sm:col-7`: Sets the size of a column in the flex columns component to 7 unit width on small screens.\n// - `.sm:col-8`: Sets the size of a column in the flex columns component to 8 unit width on small screens.\n// - `.sm:col-9`: Sets the size of a column in the flex columns component to 9 unit width on small screens.\n// - `.sm:col-10`: Sets the size of a column in the flex columns component to 10 unit width on small screens.\n// - `.sm:col-11`: Sets the size of a column in the flex columns component to 11 unit width on small screens.\n// - `.sm:col-12`: Sets the size of a column in the flex columns component to 12 unit width on small screens.\n// - `.md:col-1`: Sets the size of a column in the flex columns component to 1 unit width on medium screens.\n// - `.md:col-2`: Sets the size of a column in the flex columns component to 2 unit width on medium screens.\n// - `.md:col-3`: Sets the size of a column in the flex columns component to 3 unit width on medium screens.\n// - `.md:col-4`: Sets the size of a column in the flex columns component to 4 unit width on medium screens.\n// - `.md:col-5`: Sets the size of a column in the flex columns component to 5 unit width on medium screens.\n// - `.md:col-6`: Sets the size of a column in the flex columns component to 6 unit width on medium screens.\n// - `.md:col-7`: Sets the size of a column in the flex columns component to 7 unit width on medium screens.\n// - `.md:col-8`: Sets the size of a column in the flex columns component to 8 unit width on medium screens.\n// - `.md:col-9`: Sets the size of a column in the flex columns component to 9 unit width on medium screens.\n// - `.md:col-10`: Sets the size of a column in the flex columns component to 10 unit width on medium screens.\n// - `.md:col-11`: Sets the size of a column in the flex columns component to 11 unit width on medium screens.\n// - `.md:col-12`: Sets the size of a column in the flex columns component to 12 unit width on medium screens.\n// - `.lg:col-1`: Sets the size of a column in the flex columns component to 1 unit width on large screens.\n// - `.lg:col-2`: Sets the size of a column in the flex columns component to 2 unit width on large screens.\n// - `.lg:col-3`: Sets the size of a column in the flex columns component to 3 unit width on large screens.\n// - `.lg:col-4`: Sets the size of a column in the flex columns component to 4 unit width on large screens.\n// - `.lg:col-5`: Sets the size of a column in the flex columns component to 5 unit width on large screens.\n// - `.lg:col-6`: Sets the size of a column in the flex columns component to 6 unit width on large screens.\n// - `.lg:col-7`: Sets the size of a column in the flex columns component to 7 unit width on large screens.\n// - `.lg:col-8`: Sets the size of a column in the flex columns component to 8 unit width on large screens.\n// - `.lg:col-9`: Sets the size of a column in the flex columns component to 9 unit width on large screens.\n// - `.lg:col-10`: Sets the size of a column in the flex columns component to 10 unit width on large screens.\n// - `.lg:col-11`: Sets the size of a column in the flex columns component to 11 unit width on large screens.\n// - `.lg:col-12`: Sets the size of a column in the flex columns component to 12 unit width on large screens.\n// - `.xl:col-1`: Sets the size of a column in the flex columns component to 1 unit width on extra large screens.\n// - `.xl:col-2`: Sets the size of a column in the flex columns component to 2 unit width on extra large screens.\n// - `.xl:col-3`: Sets the size of a column in the flex columns component to 3 unit width on extra large screens.\n// - `.xl:col-4`: Sets the size of a column in the flex columns component to 4 unit width on extra large screens.\n// - `.xl:col-5`: Sets the size of a column in the flex columns component to 5 unit width on extra large screens.\n// - `.xl:col-6`: Sets the size of a column in the flex columns component to 6 unit width on extra large screens.\n// - `.xl:col-7`: Sets the size of a column in the flex columns component to 7 unit width on extra large screens.\n// - `.xl:col-8`: Sets the size of a column in the flex columns component to 8 unit width on extra large screens.\n// - `.xl:col-9`: Sets the size of a column in the flex columns component to 9 unit width on extra large screens.\n// - `.xl:col-10`: Sets the size of a column in the flex columns component to 10 unit width on extra large screens.\n// - `.xl:col-11`: Sets the size of a column in the flex columns component to 11 unit width on extra large screens.\n// - `.xl:col-12`: Sets the size of a column in the flex columns component to 12 unit width on extra large screens.\n// - `.cq:xs:col-1`: Sets the size of a column in the flex columns component to 1 unit width in extra small containers.\n// - `.cq:xs:col-2`: Sets the size of a column in the flex columns component to 2 unit width in extra small containers.\n// - `.cq:xs:col-3`: Sets the size of a column in the flex columns component to 3 unit width in extra small containers.\n// - `.cq:xs:col-4`: Sets the size of a column in the flex columns component to 4 unit width in extra small containers.\n// - `.cq:xs:col-5`: Sets the size of a column in the flex columns component to 5 unit width in extra small containers.\n// - `.cq:xs:col-6`: Sets the size of a column in the flex columns component to 6 unit width in extra small containers.\n// - `.cq:xs:col-7`: Sets the size of a column in the flex columns component to 7 unit width in extra small containers.\n// - `.cq:xs:col-8`: Sets the size of a column in the flex columns component to 8 unit width in extra small containers.\n// - `.cq:xs:col-9`: Sets the size of a column in the flex columns component to 9 unit width in extra small containers.\n// - `.cq:xs:col-10`: Sets the size of a column in the flex columns component to 10 unit width in extra small containers.\n// - `.cq:xs:col-11`: Sets the size of a column in the flex columns component to 11 unit width in extra small containers.\n// - `.cq:xs:col-12`: Sets the size of a column in the flex columns component to 12 unit width in extra small containers.\n// - `.cq:sm:col-1`: Sets the size of a column in the flex columns component to 1 unit width in small containers.\n// - `.cq:sm:col-2`: Sets the size of a column in the flex columns component to 2 unit width in small containers.\n// - `.cq:sm:col-3`: Sets the size of a column in the flex columns component to 3 unit width in small containers.\n// - `.cq:sm:col-4`: Sets the size of a column in the flex columns component to 4 unit width in small containers.\n// - `.cq:sm:col-5`: Sets the size of a column in the flex columns component to 5 unit width in small containers.\n// - `.cq:sm:col-6`: Sets the size of a column in the flex columns component to 6 unit width in small containers.\n// - `.cq:sm:col-7`: Sets the size of a column in the flex columns component to 7 unit width in small containers.\n// - `.cq:sm:col-8`: Sets the size of a column in the flex columns component to 8 unit width in small containers.\n// - `.cq:sm:col-9`: Sets the size of a column in the flex columns component to 9 unit width in small containers.\n// - `.cq:sm:col-10`: Sets the size of a column in the flex columns component to 10 unit width in small containers.\n// - `.cq:sm:col-11`: Sets the size of a column in the flex columns component to 11 unit width in small containers.\n// - `.cq:sm:col-12`: Sets the size of a column in the flex columns component to 12 unit width in small containers.\n// - `.cq:md:col-1`: Sets the size of a column in the flex columns component to 1 unit width in medium containers.\n// - `.cq:md:col-2`: Sets the size of a column in the flex columns component to 2 unit width in medium containers.\n// - `.cq:md:col-3`: Sets the size of a column in the flex columns component to 3 unit width in medium containers.\n// - `.cq:md:col-4`: Sets the size of a column in the flex columns component to 4 unit width in medium containers.\n// - `.cq:md:col-5`: Sets the size of a column in the flex columns component to 5 unit width in medium containers.\n// - `.cq:md:col-6`: Sets the size of a column in the flex columns component to 6 unit width in medium containers.\n// - `.cq:md:col-7`: Sets the size of a column in the flex columns component to 7 unit width in medium containers.\n// - `.cq:md:col-8`: Sets the size of a column in the flex columns component to 8 unit width in medium containers.\n// - `.cq:md:col-9`: Sets the size of a column in the flex columns component to 9 unit width in medium containers.\n// - `.cq:md:col-10`: Sets the size of a column in the flex columns component to 10 unit width in medium containers.\n// - `.cq:md:col-11`: Sets the size of a column in the flex columns component to 11 unit width in medium containers.\n// - `.cq:md:col-12`: Sets the size of a column in the flex columns component to 12 unit width in medium containers.\n// - `.cq:lg:col-1`: Sets the size of a column in the flex columns component to 1 unit width in large containers.\n// - `.cq:lg:col-2`: Sets the size of a column in the flex columns component to 2 unit width in large containers.\n// - `.cq:lg:col-3`: Sets the size of a column in the flex columns component to 3 unit width in large containers.\n// - `.cq:lg:col-4`: Sets the size of a column in the flex columns component to 4 unit width in large containers.\n// - `.cq:lg:col-5`: Sets the size of a column in the flex columns component to 5 unit width in large containers.\n// - `.cq:lg:col-6`: Sets the size of a column in the flex columns component to 6 unit width in large containers.\n// - `.cq:lg:col-7`: Sets the size of a column in the flex columns component to 7 unit width in large containers.\n// - `.cq:lg:col-8`: Sets the size of a column in the flex columns component to 8 unit width in large containers.\n// - `.cq:lg:col-9`: Sets the size of a column in the flex columns component to 9 unit width in large containers.\n// - `.cq:lg:col-10`: Sets the size of a column in the flex columns component to 10 unit width in large containers.\n// - `.cq:lg:col-11`: Sets the size of a column in the flex columns component to 11 unit width in large containers.\n// - `.cq:lg:col-12`: Sets the size of a column in the flex columns component to 12 unit width in large containers.\n// - `.cq:xl:col-1`: Sets the size of a column in the flex columns component to 1 unit width in extra large containers.\n// - `.cq:xl:col-2`: Sets the size of a column in the flex columns component to 2 unit width in extra large containers.\n// - `.cq:xl:col-3`: Sets the size of a column in the flex columns component to 3 unit width in extra large containers.\n// - `.cq:xl:col-4`: Sets the size of a column in the flex columns component to 4 unit width in extra large containers.\n// - `.cq:xl:col-5`: Sets the size of a column in the flex columns component to 5 unit width in extra large containers.\n// - `.cq:xl:col-6`: Sets the size of a column in the flex columns component to 6 unit width in extra large containers.\n// - `.cq:xl:col-7`: Sets the size of a column in the flex columns component to 7 unit width in extra large containers.\n// - `.cq:xl:col-8`: Sets the size of a column in the flex columns component to 8 unit width in extra large containers.\n// - `.cq:xl:col-9`: Sets the size of a column in the flex columns component to 9 unit width in extra large containers.\n// - `.cq:xl:col-10`: Sets the size of a column in the flex columns component to 10 unit width in extra large containers.\n// - `.cq:xl:col-11`: Sets the size of a column in the flex columns component to 11 unit width in extra large containers.\n// - `.cq:xl:col-12`: Sets the size of a column in the flex columns component to 12 unit width in extra large containers.\n// - `.fill`: A class to set a column to fill the remaining space.\n//\n// The following custom properties can be used to customize the flex columns component:\n// | Property | Description | Default Value |\n// | -------------------------------------- | --------------------------------------------------------- | -------------------------- |\n// | `--graupl-flex-columns-row-gap` | The gap between the rows of the flex columns. | `var(--graupl-spacer-5)` |\n// | `--graupl-flex-columns-column-gap` | The gap between the columns of the flex columns. | `var(--graupl-spacer-5)` |\n// | `--graupl-flex-columns-size` | The size of a column. | `auto` |\n// | `--graupl-flex-columns-max-width` | The maximum width of a column. | `unset` |\n// | `--graupl-flex-columns-container-type` | The container type applied to the flex columns component. | `inline-size` |\n// | `--graupl-flex-columns-background` | The background of the flex columns component. | `var(--graupl-background)` |\n// | `--graupl-flex-columns-color` | The text color of the flex columns component. | `var(--graupl-color)` |\n//\n// The following sass variables can be used to customize the generation of the flex columns component:\n// | Variable | Description | Default Value |\n// | -------------------------------------------------------- | ---------------------------------------------------------------- | ---------------- |\n// | `$selector-base` | The base selector for the component. | `\".\"` |\n// | `$modifier-selector-base` | The base selector for component modifiers. | `\".\"` |\n// | `$generate-base-theme-map` | Flag to generate the base theme map. | `true` |\n// | `$themeable` | Flag to generate theme modifiers. | `false` |\n// | `$screen-aware` | Enables screen-aware column variants. | `true` |\n// | `$theme-aware` | Enables theme-aware column variants. | `false` |\n// | `$scheme-aware` | Enables scheme-aware column variants. | `false` |\n// | `$state-aware` | Enables state-aware column variants. | `false` |\n// | `$container-aware` | Enables container-aware column variants. | `true` |\n// | `$flex-columns-selector-base` | The base selector for the flex columns component. | `\".\"` |\n// | `$flex-columns-selector` | The selector for the flex columns component. | `\"flex-columns\"` |\n// | `$flex-columns-theme-selector-base` | The selector base for flex columns theme modifiers. | `\".\"` |\n// | `$flex-columns-theme-selector-prefix` | The flex columns theme modifier selector prefix. | `\"\"` |\n// | `$flex-columns-column-selector-base` | The base selector for the column class. | `\".\"` |\n// | `$flex-columns-column-selector` | The selector for the column class. | `\"col-\"` |\n// | `$flex-columns-fill-selector-base` | The base selector for the fill class. | `\".\"` |\n// | `$flex-columns-fill-selector` | The selector for the fill class. | `\"fill\"` |\n// | `$flex-columns-column-screen-aware-selector-prefix` | Prefix to the screen-aware portion of column selectors. | `\"\"` |\n// | `$flex-columns-column-screen-aware-selector-suffix` | Suffix to the screen-aware portion of column selectors. | `\"\"` |\n// | `$flex-columns-column-screen-aware-selector-separator` | Separator inserted for screen-aware column selectors. | `\"\\\\:\"` |\n// | `$flex-columns-column-theme-aware-selector-prefix` | Prefix to the theme-aware portion of column selectors. | `\"\"` |\n// | `$flex-columns-column-theme-aware-selector-suffix` | Suffix to the theme-aware portion of column selectors. | `\"-theme\"` |\n// | `$flex-columns-column-theme-aware-selector-separator` | Separator inserted for theme-aware column selectors. | `\"\\\\:\"` |\n// | `$flex-columns-column-scheme-aware-selector-prefix` | Prefix to the scheme-aware portion of column selectors. | `\"\"` |\n// | `$flex-columns-column-scheme-aware-selector-suffix` | Suffix to the scheme-aware portion of column selectors. | `\"-mode\"` |\n// | `$flex-columns-column-scheme-aware-selector-separator` | Separator inserted for scheme-aware column selectors. | `\"\\\\:\"` |\n// | `$flex-columns-column-state-aware-selector-prefix` | Prefix to the state-aware portion of column selectors. | `\"\"` |\n// | `$flex-columns-column-state-aware-selector-suffix` | Suffix to the state-aware portion of column selectors. | `\"\"` |\n// | `$flex-columns-column-state-aware-selector-separator` | Separator inserted for state-aware column selectors. | `\"\\\\:\"` |\n// | `$flex-columns-column-container-aware-selector-prefix` | Prefix to the container-aware portion of column selectors. | `\"cq\\\\:\"` |\n// | `$flex-columns-column-container-aware-selector-suffix` | Suffix to the container-aware portion of column selectors. | `\"\"` |\n// | `$flex-columns-column-container-aware-selector-separator`| Separator inserted for container-aware column selectors. | `\"\\\\:\"` |\n// | `$flex-columns-min-count` | The minimum number of columns used to generate `.col-#` classes. | `1` |\n// | `$flex-columns-max-count` | The maximum number of columns used to generate `.col-#` classes. | `12` |\n// | `$flex-columns-size` | The default size of a column. | `auto` |\n// | `$flex-columns-max-width` | The default maximum width of a column. | `unset` |\n// | `$flex-columns-container-type` | The container type applied to the flex columns component. | `\"inline-size\"` |\n// | `$flex-columns-theme-mappings` | Map of properties/shades for flex columns themes. | `()` |\n// | `$flex-columns-theme-map` | Expanded map of properties/colors/shades. | `()` |\n//\n// @example\n// <div class=\"flex-columns\">\n// <div class=\"col-3\">Column 1</div>\n// <div class=\"col-6\">Column 2</div>\n// <div class=\"col-3\">Column 3</div>\n// </div>\n//\n// @example\n// <div class=\"flex-columns\">\n// <div class=\"col-3\">Column 1</div>\n// <div class=\"col-3 fill\">Column 2</div>\n// <div class=\"col-3\">Column 3</div>\n// </div>\n//\n// @example\n// <div class=\"flex-columns\">\n// <div class=\"col-3 md:col-2\">Column 1</div>\n// <div class=\"col-6 md:col-8\">Column 2</div>\n// <div class=\"col-3 md:col-2\">Column 3</div>\n// </div>\n\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/layer\" as *;\n@use \"../../mixins/screen\";\n@use \"../../mixins/container\";\n@use \"../../mixins/theme\";\n@use \"../../mixins/utility\";\n@use \"defaults\";\n@use \"sass:map\";\n@use \"variables\" as *;\n\n// Generate a utility-map for column classes.\n$flex-columns-column-map: ();\n\n@for $i\n from defaults.$flex-columns-min-count\n through defaults.$flex-columns-max-count\n{\n $flex-columns-column-map: map.merge(\n $flex-columns-column-map,\n /* stylelint-disable */\n (\n \"#{defaults.$flex-columns-column-selector}#{$i}\": (\n --#{root-defaults.$prefix}flex-columns-size: calc(\n (100% / #{defaults.$flex-columns-max-count} * #{$i}) -\n #{$flex-columns-column-gap}\n ),\n --#{root-defaults.$prefix}flex-columns-max-width: calc(\n 100% / #{defaults.$flex-columns-max-count} * #{$i}\n ),\n container-type: $flex-columns-container-type,\n ),\n )\n /* stylelint-enable */\n );\n}\n\n@include layer(layout) {\n // `.flex-columns`\n #{defaults.$flex-columns-selector-base}#{defaults.$flex-columns-selector} {\n display: flex;\n flex-wrap: wrap;\n gap: $flex-columns-row-gap $flex-columns-column-gap;\n container-type: $flex-columns-container-type;\n\n > * {\n flex: 1 1 $flex-columns-size;\n max-width: $flex-columns-max-width;\n }\n\n @include utility.generate(\n $map: $flex-columns-column-map,\n $selector-base: defaults.$flex-columns-column-selector-base,\n $selector-prefix: \"\",\n $selector-suffix: \"\",\n $screen-aware: defaults.$screen-aware,\n $screen-aware-selector-prefix:\n defaults.$flex-columns-screen-aware-selector-prefix,\n $screen-aware-selector-suffix:\n defaults.$flex-columns-screen-aware-selector-suffix,\n $screen-aware-selector-separator:\n defaults.$flex-columns-screen-aware-selector-separator,\n $theme-aware: defaults.$theme-aware,\n $theme-aware-selector-prefix:\n defaults.$flex-columns-theme-aware-selector-prefix,\n $theme-aware-selector-suffix:\n defaults.$flex-columns-theme-aware-selector-suffix,\n $theme-aware-selector-separator:\n defaults.$flex-columns-theme-aware-selector-separator,\n $scheme-aware: defaults.$scheme-aware,\n $scheme-aware-selector-prefix:\n defaults.$flex-columns-scheme-aware-selector-prefix,\n $scheme-aware-selector-suffix:\n defaults.$flex-columns-scheme-aware-selector-suffix,\n $scheme-aware-selector-separator:\n defaults.$flex-columns-scheme-aware-selector-separator,\n $state-aware: defaults.$state-aware,\n $state-aware-selector-prefix:\n defaults.$flex-columns-state-aware-selector-prefix,\n $state-aware-selector-suffix:\n defaults.$flex-columns-state-aware-selector-suffix,\n $state-aware-selector-separator:\n defaults.$flex-columns-state-aware-selector-separator,\n $container-aware: defaults.$container-aware,\n $container-aware-selector-prefix:\n defaults.$flex-columns-container-aware-selector-prefix,\n $container-aware-selector-suffix:\n defaults.$flex-columns-container-aware-selector-suffix,\n $container-aware-selector-separator:\n defaults.$flex-columns-container-aware-selector-separator,\n $important: false\n )\n using($selector, $properties, $responsive-type, $responsive-name) {\n // `&.fill`\n &#{defaults.$flex-columns-fill-selector-base}#{defaults.$flex-columns-fill-selector} {\n --#{root-defaults.$prefix}flex-columns-max-width: unset;\n }\n }\n }\n\n @for $i\n from defaults.$flex-columns-min-count\n through defaults.$flex-columns-max-count\n {\n @include container.trigger(force-single-column) {\n // `.flex-columns`\n #{defaults.$flex-columns-selector-base}#{defaults.$flex-columns-selector} {\n // e.g. `.col-1` or `.col-12`\n #{defaults.$flex-columns-column-selector-base}#{defaults.$flex-columns-column-selector}#{$i} {\n --#{root-defaults.$prefix}flex-columns-size: 100%;\n --#{root-defaults.$prefix}flex-columns-max-width: auto;\n }\n }\n }\n }\n}\n\n@include layer(theme) {\n // `.flex-columns`\n #{defaults.$flex-columns-selector-base}#{defaults.$flex-columns-selector} {\n background: $flex-columns-background;\n color: $flex-columns-color;\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$flex-columns-theme-map,\n defaults.$flex-columns-theme-selector-base,\n defaults.$flex-columns-theme-selector-prefix,\n \"flex-columns-\"\n );\n }\n }\n}\n","// @graupl/core flex columns layout 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-flex-columns-row-gap | var(--graupl-spacer-5) |\n// | --graupl-flex-columns-column-gap | var(--graupl-spacer-5) |\n// | --graupl-flex-columns-size | auto |\n// | --graupl-flex-columns-max-width | unset |\n// | --graupl-flex-columns-container-type | inline-size |\n// | --graupl-flex-columns-background | null |\n// | --graupl-flex-columns-color | null |\n\n@use \"defaults\";\n@use \"../../defaults\" as root-defaults;\n@use \"../../theme/color/variables\" as color;\n@use \"../columns/variables\" as columns-variables;\n\n// Flex columns properties.\n// --graupl-flex-columns-row-gap\n$flex-columns-row-gap: var(\n --#{root-defaults.$prefix}flex-columns-row-gap,\n #{columns-variables.$columns-row-gap}\n);\n\n// --graupl-flex-columns-column-gap\n$flex-columns-column-gap: var(\n --#{root-defaults.$prefix}flex-columns-column-gap,\n #{columns-variables.$columns-column-gap}\n);\n\n// --graupl-flex-columns-size\n$flex-columns-size: var(\n --#{root-defaults.$prefix}flex-columns-size,\n #{defaults.$flex-columns-size}\n);\n\n// --graupl-flex-columns-max-width\n$flex-columns-max-width: var(\n --#{root-defaults.$prefix}flex-columns-max-width,\n #{defaults.$flex-columns-max-width}\n);\n\n// --graupl-flex-columns-container-type\n$flex-columns-container-type: var(\n --#{root-defaults.$prefix}flex-columns-container-type,\n #{defaults.$flex-columns-container-type}\n);\n\n// --graupl-flex-columns-background\n$flex-columns-background: var(\n --#{root-defaults.$prefix}flex-columns-background\n);\n\n// --graupl-flex-columns-color\n$flex-columns-color: var(--#{root-defaults.$prefix}flex-columns-color);\n","// @graupl/core utility mixins.\n//\n// Mixins to help generate utility classes.\n\n@use \"./screen\";\n@use \"./container\";\n@use \"./state\";\n@use \"./theme\";\n@use \"../functions/important\";\n@use \"../functions/utility\";\n@use \"../defaults\" as root-defaults;\n@use \"../theme/color/defaults\" as color-defaults;\n@use \"sass:map\";\n@use \"sass:string\";\n\n/// Insert a map of properties and values into a utility class.\n///\n/// @param {Map} $map\n/// The map of properties and values to apply to the selector.\n/// @param {Boolean} $important\n/// A flag to determine if the important flag should be added.\n@mixin _insert($map, $important: null) {\n @each $prop, $value in $map {\n // Do not attempt to insert important values inside of custom properties.\n @if string.slice($prop, 1, 2) != \"--\" {\n #{$prop}: important.insert(#{$value}, $override: $important);\n } @else {\n #{$prop}: #{$value};\n }\n }\n\n // Allow for custom overrides and additional styles.\n @content;\n}\n\n/// Handles wrapping utilities with a conditional state.\n///\n/// @param {?string} $state\n/// The state to wrap.\n@mixin _handle-state($state: null) {\n @if $state {\n @include state.state($state) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional screen.\n///\n/// @param {?string} $screen\n/// The screen to wrap.\n@mixin _handle-screen($screen: null) {\n @if $screen {\n @include screen.up($screen) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional container.\n///\n/// @param {?string} $container\n/// The container to wrap.\n@mixin _handle-container($container: null) {\n @if $container {\n @include container.up($container) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional theme.\n///\n/// @param {?string} $theme\n/// The theme mode to wrap.\n@mixin _handle-theme($theme: null) {\n @if $theme {\n @include theme.theme($theme) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional scheme.\n///\n/// @param {?string} $scheme\n/// The scheme mode to wrap.\n@mixin _handle-scheme($scheme: null) {\n @if $scheme {\n @include theme.scheme($scheme) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Create a utility class with a list of properties and a single value.\n///\n/// @param {string} $selector\n/// The selector to apply the utility class to.\n/// @param {string|List} $property\n/// The property/properties to apply to the selector.\n/// @param {string} $value\n/// The value to apply to the property/properties.\n/// @param {?Boolean} $important\n/// A flag to determine if the important flag should be added.\n/// @param {?string} $screen\n/// The screen to apply the utility class to.\n/// @param {?string} $theme\n/// The theme to apply the utility class to.\n/// @param {?string} $scheme\n/// The scheme mode to apply the utility class to.\n/// @param {?string} $state\n/// The state to apply the utility class to.\n@mixin create(\n $selector,\n $property,\n $value,\n $important: null,\n $screen: null,\n $theme: null,\n $scheme: null,\n $state: null,\n $container: null\n) {\n $map: utility.convert-property-values-to-map($property, $value);\n\n @include create-mapped(\n $selector,\n $map,\n $important: $important,\n $screen: $screen,\n $theme: $theme,\n $scheme: $scheme,\n $state: $state,\n $container: $container\n ) {\n @content;\n }\n}\n\n/// Create a utility class with a map of properties and values.\n///\n/// @param {string} $selector\n/// The selector to apply the utility class to.\n/// @param {Map} $map\n/// The map of properties and values to apply to the selector.\n/// @param {?Boolean} $important\n/// A flag to determine if the important flag should be added.\n/// @param {?string} $screen\n/// The screen to apply the utility class to.\n/// @param {?string} $theme\n/// The theme to apply the utility class to.\n/// @param {?string} $scheme\n/// The scheme mode to apply the utility class to.\n/// @param {?string} $state\n/// The state to apply the utility class to.\n@mixin create-mapped(\n $selector,\n $map,\n $important: null,\n $screen: null,\n $theme: null,\n $scheme: null,\n $state: null,\n $container: null\n) {\n @include _handle-theme($theme) {\n @include _handle-scheme($scheme) {\n #{$selector} {\n @if $screen or $container {\n @if $screen {\n @include _handle-screen($screen) {\n @include _handle-state($state) {\n @include _insert($map, $important) {\n @content;\n }\n }\n }\n }\n\n @if $container {\n @include _handle-container($container) {\n @include _handle-state($state) {\n @include _insert($map, $important) {\n @content;\n }\n }\n }\n }\n } @else {\n @include _handle-state($state) {\n @include _insert($map, $important) {\n @content;\n }\n }\n }\n }\n }\n }\n}\n\n/// Create a suite of utilities for all base and responsive classes.\n///\n/// Takes a utility map that is generated by the generate-utility-map() function.\n///\n/// @param {?Map} $map [()]\n/// The utility map.\n/// @param {?string} $selector-base [root-defaults.$utility-selector-base]\n/// The selector base to use for all generated utilities.\n/// @param {?string} $selector-prefix [root-defaults.$utility-selector-prefix]\n/// The selector prefix to use for all generated utilities.\n/// @param {?string} $selector-suffix [root-defaults.$utility-selector-suffix]\n/// The selector suffix to use for all generated utilities.\n/// @param {?Boolean} $screen-aware [false]\n/// A flag to enable screen-aware utility generation.\n/// @param {?string} $screen-aware-selector-prefix [root-defaults.$utility-screen-aware-selector-prefix]\n/// The selector base to use for all generated screen-aware utilities.\n/// @param {?string} $screen-aware-selector-suffix [root-defaults.$utility-screen-aware-selector-suffix]\n/// The selector prefix to use for all generated screen-aware utilities.\n/// @param {?string} $screen-aware-selector-separator [root-defaults.$utility-screen-aware-selector-separator]\n/// The selector suffix to use for all generated screen-aware utilities.\n/// @param {?Boolean} $theme-aware [false]\n/// A flag to enable theme-aware utility generation.\n/// @param {?string} $theme-aware-selector-prefix [root-defaults.$utility-theme-aware-selector-prefix]\n/// The selector base to use for all generated theme-aware utilities.\n/// @param {?string} $theme-aware-selector-suffix [root-defaults.$utility-theme-aware-selector-suffix]\n/// The selector prefix to use for all generated theme-aware utilities.\n/// @param {?string} $theme-aware-selector-separator [root-defaults.$utility-theme-aware-selector-separator]\n/// The selector suffix to use for all generated theme-aware utilities.\n/// @param {?Boolean} $scheme-aware [false]\n/// A flag to enable scheme-aware utility generation.\n/// @param {?string} $scheme-aware-selector-prefix [root-defaults.$utility-scheme-aware-selector-prefix]\n/// The selector base to use for all generated scheme-aware utilities.\n/// @param {?string} $scheme-aware-selector-suffix [root-defaults.$utility-scheme-aware-selector-suffix]\n/// The selector prefix to use for all generated scheme-aware utilities.\n/// @param {?string} $scheme-aware-selector-separator [root-defaults.$utility-scheme-aware-selector-separator]\n/// The selector suffix to use for all generated scheme-aware utilities.\n/// @param {?Boolean} $state-aware [false]\n/// A flag to enable state-aware utility generation.\n/// @param {?string} $state-aware-selector-prefix [root-defaults.$utility-state-aware-selector-prefix]\n/// The selector base to use for all generated state-aware utilities.\n/// @param {?string} $state-aware-selector-suffix [root-defaults.$utility-state-aware-selector-suffix]\n/// The selector prefix to use for all generated state-aware utilities.\n/// @param {?string} $state-aware-selector-separator [root-defaults.$utility-state-aware-selector-separator]\n/// The selector suffix to use for all generated state-aware utilities.\n/// @param {?Boolean} $container-aware [false]\n/// A flag to enable container-aware utility generation.\n/// @param {?string} $container-aware-selector-prefix [root-defaults.$utility-container-aware-selector-prefix]\n/// The selector base to use for all generated container-aware utilities.\n/// @param {?string} $container-aware-selector-suffix [root-defaults.$utility-container-aware-selector-suffix]\n/// The selector prefix to use for all generated container-aware utilities.\n/// @param {?string} $container-aware-selector-separator [root-defaults.$utility-container-aware-selector-separator]\n/// The selector suffix to use for all generated container-aware utilities.\n/// @param {?Boolean} $important [root-defaults.$use-important]\n/// A flag to determine if the important flag should be added to all utility properties.\n@mixin generate(\n $map: (),\n $selector-base: root-defaults.$utility-selector-base,\n $selector-prefix: root-defaults.$utility-selector-prefix,\n $selector-suffix: root-defaults.$utility-selector-suffix,\n $screen-aware: false,\n $screen-aware-selector-prefix:\n root-defaults.$utility-screen-aware-selector-prefix,\n $screen-aware-selector-suffix:\n root-defaults.$utility-screen-aware-selector-suffix,\n $screen-aware-selector-separator:\n root-defaults.$utility-screen-aware-selector-separator,\n $theme-aware: false,\n $theme-aware-selector-prefix:\n root-defaults.$utility-theme-aware-selector-prefix,\n $theme-aware-selector-suffix:\n root-defaults.$utility-theme-aware-selector-suffix,\n $theme-aware-selector-separator:\n root-defaults.$utility-theme-aware-selector-separator,\n $scheme-aware: false,\n $scheme-aware-selector-prefix:\n root-defaults.$utility-scheme-aware-selector-prefix,\n $scheme-aware-selector-suffix:\n root-defaults.$utility-scheme-aware-selector-suffix,\n $scheme-aware-selector-separator:\n root-defaults.$utility-scheme-aware-selector-separator,\n $state-aware: false,\n $state-aware-selector-prefix:\n root-defaults.$utility-state-aware-selector-prefix,\n $state-aware-selector-suffix:\n root-defaults.$utility-state-aware-selector-suffix,\n $state-aware-selector-separator:\n root-defaults.$utility-state-aware-selector-separator,\n $container-aware: false,\n $container-aware-selector-prefix:\n root-defaults.$utility-container-aware-selector-prefix,\n $container-aware-selector-suffix:\n root-defaults.$utility-container-aware-selector-suffix,\n $container-aware-selector-separator:\n root-defaults.$utility-container-aware-selector-separator,\n $important: root-defaults.$use-important\n) {\n $utility-selector-prefix: $selector-base;\n\n // Generate all base utilities.\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important\n ) {\n @content ($selector, $properties, $responsive-name: null, $responsive-type: null);\n }\n }\n\n // Generate screen-aware utilities.\n @if $screen-aware and root-defaults.$screen-aware-utilities {\n @each $screen-name in map.keys(root-defaults.$screen-sizes) {\n // e.g. `.md:` or `.lg:`\n $utility-selector-prefix: #{$selector-base}#{$screen-aware-selector-prefix}#{$screen-name}#{$screen-aware-selector-suffix}#{$screen-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $screen: $screen-name\n ) {\n @content ($selector, $properties, $responsive-name: $screen-name, $responsive-type: \"screen\");\n }\n }\n }\n }\n\n // Generate theme-aware utilities.\n @if $theme-aware and root-defaults.$theme-aware-utilities {\n @each $theme-name in color-defaults.$themes {\n // e.g. `.default-theme:`\n $utility-selector-prefix: #{$selector-base}#{$theme-aware-selector-prefix}#{$theme-name}#{$theme-aware-selector-suffix}#{$theme-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $theme: $theme-name\n ) {\n @content ($selector, $properties, $responsive-name: $theme-name, $responsive-type: \"theme\");\n }\n }\n }\n }\n\n // Generate scheme-aware utilities.\n @if $scheme-aware and root-defaults.$scheme-aware-utilities {\n @each $scheme-name in color-defaults.$schemes {\n // e.g. `.light-mode:` or `.dark-mode:`\n $utility-selector-prefix: #{$selector-base}#{$scheme-aware-selector-prefix}#{$scheme-name}#{$scheme-aware-selector-suffix}#{$scheme-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $scheme: $scheme-name\n ) {\n @content ($selector, $properties, $responsive-name: $scheme-name, $responsive-type: \"scheme\");\n }\n }\n }\n }\n\n // Generate state-aware utilities.\n @if $state-aware and root-defaults.$state-aware-utilities {\n @each $state-name in root-defaults.$state-selectors {\n // e.g. `.hover:` or `.focus:`\n $utility-selector-prefix: #{$selector-base}#{$state-aware-selector-prefix}#{$state-name}#{$state-aware-selector-suffix}#{$state-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $state: $state-name\n ) {\n @content ($selector, $properties, $responsive-name: $state-name, $responsive-type: \"state\");\n }\n }\n }\n }\n\n // Generate container-aware utilities.\n @if $container-aware and root-defaults.$container-aware-utilities {\n @each $container-name in map.keys(root-defaults.$container-sizes) {\n // e.g. `.cq:md:` or `.cq:lg:`\n $utility-selector-prefix: #{$selector-base}#{$container-aware-selector-prefix}#{$container-name}#{$container-aware-selector-suffix}#{$container-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $container: $container-name\n ) {\n @content ($selector, $properties, $responsive-name: $container-name, $responsive-type: \"container\");\n }\n }\n }\n }\n}\n","// @graupl/core screen mixins.\n//\n// A series of mixins to generate breakpoints.\n\n// @use \"../defaults\" as root-defaults;\n@use \"../functions/screen\";\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n@use \"sass:meta\";\n\n// A mixin to generate a minimum screen width media query.\n@mixin up($size) {\n $screen-size: screen.min($size);\n\n @media screen and (#{$screen-size} <= width) {\n @content;\n }\n}\n\n// A mixin to generate a maximum screen width media query.\n@mixin down($size) {\n $screen-size: screen.max($size);\n\n @media screen and (width <= #{$screen-size}) {\n @content;\n }\n}\n\n// A mixin to generate a range of screen widths media query.\n@mixin between($min, $max) {\n $screen-size: screen.range($min, $max);\n $min: map.get($screen-size, \"min\");\n $max: map.get($screen-size, \"max\");\n\n @media screen and (#{$min} <= width <= #{$max}) {\n @content;\n }\n}\n\n@mixin only($size) {\n @include between($size, $size) {\n @content;\n }\n}\n\n@mixin trigger($trigger) {\n // Validate that the trigger exists.\n @if not map.has-key(root-defaults.$screen-size-triggers, $trigger) {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not exist.\";\n }\n\n $screen-size-trigger: map.get(root-defaults.$screen-size-triggers, $trigger);\n\n // If the trigger is null, assume the user has disabled it and output the content as-is.\n @if meta.type-of($screen-size-trigger) != \"null\" {\n // Validate that the trigger has the required keys.\n @if not map.has-key($screen-size-trigger, \"mixin\") {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not have a mixin key.\";\n }\n\n @if not map.has-key($screen-size-trigger, \"args\") {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not have an args key.\";\n }\n\n $mixin-name: map.get($screen-size-trigger, \"mixin\");\n $mixin-args: map.get($screen-size-trigger, \"args\");\n\n // Validate that the mixin exists.\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 // Include the mixin with the provided arguments and content.\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}\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 // Validate that the trigger exists.\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 the trigger is null, assume the user has disabled it and output the content as-is.\n @if meta.type-of($container-size-trigger) != \"null\" {\n // Validate that the trigger has the required keys.\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 // Validate that the mixin exists.\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 // Include the mixin with the provided arguments and content.\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}\n"],"names":[]}
1
+ {"version":3,"sourceRoot":null,"mappings":"AESI,qBC0PF,iXAME,mHEvFE,iUFwIA,gEExIA,iUFwIA,gEExIA,iUFwIA,gEExIA,iUFwIA,gEExIA,iUFwIA,gEExIA,iUFwIA,gEExIA,iUFwIA,gEExIA,iUFwIA,gEExIA,iUFwIA,gEExIA,oUFwIA,iEExIA,oUFwIA,iEExIA,oUFwIA,iEG5SJ,6BDoKI,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,wUFwIA,qEExIA,wUFwIA,qEExIA,wUFwIA,sEG5SJ,iCDoKI,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,wUFwIA,qEExIA,wUFwIA,qEExIA,wUFwIA,sEG5SJ,iCDoKI,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,wUFwIA,qEExIA,wUFwIA,qEExIA,wUFwIA,sEG5SJ,kCDoKI,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,wUFwIA,qEExIA,wUFwIA,qEExIA,wUFwIA,sEG5SJ,kCDoKI,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,wUFwIA,qEExIA,wUFwIA,qEExIA,wUFwIA,sEG5SJ,kCDoKI,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,qUFwIA,oEExIA,wUFwIA,qEExIA,wUFwIA,qEExIA,wUFwIA,sEG5SJ,kCDoKI,sUFwIA,qEExIA,sUFwIA,qEExIA,sUFwIA,qEExIA,sUFwIA,qEExIA,sUFwIA,qEExIA,sUFwIA,qEExIA,sUFwIA,qEExIA,sUFwIA,qEExIA,sUFwIA,qEExIA,yUFwIA,sEExIA,yUFwIA,sEExIA,yUFwIA,uEG5SJ,kCDoKI,sUFwIA,qEExIA,sUFwIA,qEExIA,sUFwIA,qEExIA,sUFwIA,qEExIA,sUFwIA,qEExIA,sUFwIA,qEExIA,sUFwIA,qEExIA,sUFwIA,qEExIA,sUFwIA,qEExIA,yUFwIA,sEExIA,yUFwIA,sEExIA,yUFwIA,uEInSJ,0BJiTM,sUD/TJ,oBC0UF","sources":["dist/css/layout/flex-columns.css","var/www/html/packages/core/src/scss/layout/columns/_variables.scss","var/www/html/packages/core/src/scss/mixins/_layer.scss","var/www/html/packages/core/src/scss/layout/flex-columns/_index.scss","var/www/html/packages/core/src/scss/layout/flex-columns/_variables.scss","var/www/html/packages/core/src/scss/mixins/_utility.scss","var/www/html/packages/core/src/scss/mixins/_screen.scss","var/www/html/packages/core/src/scss/mixins/_container.scss"],"sourcesContent":["/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n/* stylelint-enable scss/operator-no-newline-after */\n@layer graupl.layout {\n .flex-columns {\n display: flex;\n flex-wrap: wrap;\n gap: var(--graupl-flex-columns-row-gap, var(--graupl-columns-row-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))) var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))));\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns > * {\n flex: 1 1 var(--graupl-flex-columns-size, auto);\n max-width: var(--graupl-flex-columns-max-width, unset);\n }\n .flex-columns .col-1 {\n --graupl-flex-columns-size: calc(100% / 12 * 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n .flex-columns .col-2 {\n --graupl-flex-columns-size: calc(100% / 12 * 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n .flex-columns .col-3 {\n --graupl-flex-columns-size: calc(100% / 12 * 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n .flex-columns .col-4 {\n --graupl-flex-columns-size: calc(100% / 12 * 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n .flex-columns .col-5 {\n --graupl-flex-columns-size: calc(100% / 12 * 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n .flex-columns .col-6 {\n --graupl-flex-columns-size: calc(100% / 12 * 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n .flex-columns .col-7 {\n --graupl-flex-columns-size: calc(100% / 12 * 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n .flex-columns .col-8 {\n --graupl-flex-columns-size: calc(100% / 12 * 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n .flex-columns .col-9 {\n --graupl-flex-columns-size: calc(100% / 12 * 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n .flex-columns .col-10 {\n --graupl-flex-columns-size: calc(100% / 12 * 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n .flex-columns .col-11 {\n --graupl-flex-columns-size: calc(100% / 12 * 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n .flex-columns .col-12 {\n --graupl-flex-columns-size: calc(100% / 12 * 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n @media screen and (0 <= width) {\n .flex-columns .xs\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 * 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xs\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (0 <= width) {\n .flex-columns .xs\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 * 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xs\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (0 <= width) {\n .flex-columns .xs\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 * 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xs\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (0 <= width) {\n .flex-columns .xs\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 * 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xs\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (0 <= width) {\n .flex-columns .xs\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 * 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xs\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (0 <= width) {\n .flex-columns .xs\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 * 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xs\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (0 <= width) {\n .flex-columns .xs\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 * 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xs\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (0 <= width) {\n .flex-columns .xs\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 * 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xs\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (0 <= width) {\n .flex-columns .xs\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 * 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xs\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (0 <= width) {\n .flex-columns .xs\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 * 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xs\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (0 <= width) {\n .flex-columns .xs\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 * 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xs\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (0 <= width) {\n .flex-columns .xs\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 * 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xs\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (576px <= width) {\n .flex-columns .sm\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 * 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .sm\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (576px <= width) {\n .flex-columns .sm\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 * 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .sm\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (576px <= width) {\n .flex-columns .sm\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 * 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .sm\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (576px <= width) {\n .flex-columns .sm\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 * 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .sm\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (576px <= width) {\n .flex-columns .sm\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 * 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .sm\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (576px <= width) {\n .flex-columns .sm\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 * 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .sm\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (576px <= width) {\n .flex-columns .sm\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 * 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .sm\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (576px <= width) {\n .flex-columns .sm\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 * 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .sm\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (576px <= width) {\n .flex-columns .sm\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 * 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .sm\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (576px <= width) {\n .flex-columns .sm\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 * 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .sm\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (576px <= width) {\n .flex-columns .sm\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 * 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .sm\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (576px <= width) {\n .flex-columns .sm\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 * 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .sm\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (768px <= width) {\n .flex-columns .md\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 * 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .md\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (768px <= width) {\n .flex-columns .md\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 * 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .md\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (768px <= width) {\n .flex-columns .md\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 * 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .md\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (768px <= width) {\n .flex-columns .md\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 * 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .md\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (768px <= width) {\n .flex-columns .md\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 * 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .md\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (768px <= width) {\n .flex-columns .md\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 * 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .md\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (768px <= width) {\n .flex-columns .md\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 * 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .md\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (768px <= width) {\n .flex-columns .md\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 * 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .md\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (768px <= width) {\n .flex-columns .md\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 * 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .md\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (768px <= width) {\n .flex-columns .md\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 * 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .md\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (768px <= width) {\n .flex-columns .md\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 * 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .md\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (768px <= width) {\n .flex-columns .md\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 * 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .md\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1024px <= width) {\n .flex-columns .lg\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 * 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .lg\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1024px <= width) {\n .flex-columns .lg\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 * 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .lg\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1024px <= width) {\n .flex-columns .lg\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 * 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .lg\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1024px <= width) {\n .flex-columns .lg\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 * 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .lg\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1024px <= width) {\n .flex-columns .lg\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 * 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .lg\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1024px <= width) {\n .flex-columns .lg\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 * 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .lg\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1024px <= width) {\n .flex-columns .lg\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 * 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .lg\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1024px <= width) {\n .flex-columns .lg\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 * 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .lg\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1024px <= width) {\n .flex-columns .lg\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 * 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .lg\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1024px <= width) {\n .flex-columns .lg\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 * 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .lg\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1024px <= width) {\n .flex-columns .lg\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 * 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .lg\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1024px <= width) {\n .flex-columns .lg\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 * 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .lg\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1280px <= width) {\n .flex-columns .xl\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 * 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xl\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1280px <= width) {\n .flex-columns .xl\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 * 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xl\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1280px <= width) {\n .flex-columns .xl\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 * 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xl\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1280px <= width) {\n .flex-columns .xl\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 * 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xl\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1280px <= width) {\n .flex-columns .xl\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 * 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xl\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1280px <= width) {\n .flex-columns .xl\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 * 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xl\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1280px <= width) {\n .flex-columns .xl\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 * 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xl\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1280px <= width) {\n .flex-columns .xl\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 * 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xl\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1280px <= width) {\n .flex-columns .xl\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 * 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xl\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1280px <= width) {\n .flex-columns .xl\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 * 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xl\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1280px <= width) {\n .flex-columns .xl\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 * 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xl\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1280px <= width) {\n .flex-columns .xl\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 * 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .xl\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1500px <= width) {\n .flex-columns .hd\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 * 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .hd\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1500px <= width) {\n .flex-columns .hd\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 * 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .hd\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1500px <= width) {\n .flex-columns .hd\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 * 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .hd\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1500px <= width) {\n .flex-columns .hd\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 * 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .hd\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1500px <= width) {\n .flex-columns .hd\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 * 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .hd\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1500px <= width) {\n .flex-columns .hd\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 * 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .hd\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1500px <= width) {\n .flex-columns .hd\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 * 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .hd\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1500px <= width) {\n .flex-columns .hd\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 * 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .hd\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1500px <= width) {\n .flex-columns .hd\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 * 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .hd\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1500px <= width) {\n .flex-columns .hd\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 * 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .hd\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1500px <= width) {\n .flex-columns .hd\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 * 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .hd\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1500px <= width) {\n .flex-columns .hd\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 * 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .hd\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1921px <= width) {\n .flex-columns .qhd\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 * 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .qhd\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1921px <= width) {\n .flex-columns .qhd\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 * 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .qhd\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1921px <= width) {\n .flex-columns .qhd\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 * 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .qhd\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1921px <= width) {\n .flex-columns .qhd\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 * 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .qhd\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1921px <= width) {\n .flex-columns .qhd\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 * 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .qhd\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1921px <= width) {\n .flex-columns .qhd\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 * 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .qhd\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1921px <= width) {\n .flex-columns .qhd\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 * 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .qhd\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1921px <= width) {\n .flex-columns .qhd\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 * 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .qhd\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1921px <= width) {\n .flex-columns .qhd\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 * 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .qhd\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1921px <= width) {\n .flex-columns .qhd\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 * 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .qhd\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1921px <= width) {\n .flex-columns .qhd\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 * 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .qhd\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (1921px <= width) {\n .flex-columns .qhd\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 * 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .qhd\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (2561px <= width) {\n .flex-columns .uhd\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 * 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .uhd\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (2561px <= width) {\n .flex-columns .uhd\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 * 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .uhd\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (2561px <= width) {\n .flex-columns .uhd\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 * 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .uhd\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (2561px <= width) {\n .flex-columns .uhd\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 * 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .uhd\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (2561px <= width) {\n .flex-columns .uhd\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 * 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .uhd\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (2561px <= width) {\n .flex-columns .uhd\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 * 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .uhd\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (2561px <= width) {\n .flex-columns .uhd\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 * 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .uhd\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (2561px <= width) {\n .flex-columns .uhd\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 * 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .uhd\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (2561px <= width) {\n .flex-columns .uhd\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 * 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .uhd\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (2561px <= width) {\n .flex-columns .uhd\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 * 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .uhd\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (2561px <= width) {\n .flex-columns .uhd\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 * 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .uhd\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @media screen and (2561px <= width) {\n .flex-columns .uhd\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 * 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns .uhd\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n @container (width <= 575px) {\n .flex-columns .col-1 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n @container (width <= 575px) {\n .flex-columns .col-2 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n @container (width <= 575px) {\n .flex-columns .col-3 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n @container (width <= 575px) {\n .flex-columns .col-4 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n @container (width <= 575px) {\n .flex-columns .col-5 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n @container (width <= 575px) {\n .flex-columns .col-6 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n @container (width <= 575px) {\n .flex-columns .col-7 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n @container (width <= 575px) {\n .flex-columns .col-8 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n @container (width <= 575px) {\n .flex-columns .col-9 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n @container (width <= 575px) {\n .flex-columns .col-10 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n @container (width <= 575px) {\n .flex-columns .col-11 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n @container (width <= 575px) {\n .flex-columns .col-12 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n}\n@layer graupl.theme {\n .flex-columns {\n background: var(--graupl-flex-columns-background);\n color: var(--graupl-flex-columns-color);\n }\n}","// @graupl/core columns layout 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-columns-row-gap | var(--graupl-spacer-5) |\n// | --graupl-columns-column-gap | var(--graupl-spacer-5) |\n// | --graupl-columns-count | 3 |\n// | --graupl-columns-content-max-width | var(--graupl-content-max-width) |\n// | --graupl-columns-min-width | calc((var(--graupl-columns-content-max-width) - var(--graupl-columns-column-gap) * (var(--graupl-columns-count) - 1)) / var(--graupl-columns-count)) |\n// | --graupl-columns-max-width | 1fr |\n// | --graupl-columns-grid-template-columns | repeat(auto-fit, minmax(var(--graupl-columns-min-width), var(--graupl-columns-max-width))) |\n// | --graupl-columns-span | 1 |\n// | --graupl-columns-background | null |\n// | --graupl-columns-color | null |\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 \"sass:map\";\n\n// --graupl-columns-row-gap\n$columns-row-gap: var(\n --#{root-defaults.$prefix}columns-row-gap,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-columns-column-gap\n$columns-column-gap: var(\n --#{root-defaults.$prefix}columns-column-gap,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-columns-count\n$columns-count: var(\n --#{root-defaults.$prefix}columns-count,\n #{defaults.$columns-count}\n);\n\n// --graupl-columns-content-max-width\n$columns-content-max-width: var(\n --#{root-defaults.$prefix}columns-content-max-width,\n #{root-variables.$content-max-width}\n);\n\n// Calculate the min-width of each column based on the content-max-width and column-gap.\n// We take the maximum width of the page and subtract the gap width multiplied by the number of\n// columns minus one (to account for the gaps between columns).\n// We then divide this by the number of columns to get the min-width of each column.\n/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n// --graupl-columns-min-width\n$columns-min-width: var(\n --#{root-defaults.$prefix}columns-min-width,\n calc(\n (\n #{$columns-content-max-width} - #{$columns-column-gap} *\n (#{$columns-count} - 1)\n ) /\n #{$columns-count}\n )\n);\n/* stylelint-enable scss/operator-no-newline-after */\n// --graupl-columns-max-width\n$columns-max-width: var(\n --#{root-defaults.$prefix}columns-max-width,\n #{defaults.$columns-max-width}\n);\n\n// --graupl-columns-grid-template-columns\n$columns-grid-template-columns: var(\n --#{root-defaults.$prefix}columns-grid-template-columns,\n repeat(auto-fit, minmax(#{$columns-min-width}, #{$columns-max-width}))\n);\n\n// --graupl-columns-span\n$columns-span: var(\n --#{root-defaults.$prefix}columns-span,\n #{defaults.$columns-span}\n);\n\n// --graupl-columns-background\n$columns-background: var(--#{root-defaults.$prefix}columns-background);\n\n// --graupl-columns-color\n$columns-color: var(--#{root-defaults.$prefix}columns-color);\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 flex columns layout styles.\n//\n// This module provides the layout styles for the flex columns component.\n//\n// The flex columns component is a flex container that provides a responsive grid layout for content.\n// The flex columns will adjust their sizes accordingly based on the classes applied to them.\n//\n// These are effectively bootstrap columns, but leaning more on the way flex natively works in the browser.\n// This means that columns will size themselves taking the gap between them into account.\n//\n// The following classes are generated by default:\n// - `.flex-columns`: The main flex columns component (defaults to 12 units wide).\n// - `.col-1`: Sets the size of a column in the flex columns component to 1 unit width.\n// - `.col-2`: Sets the size of a column in the flex columns component to 2 unit width.\n// - `.col-3`: Sets the size of a column in the flex columns component to 3 unit width.\n// - `.col-4`: Sets the size of a column in the flex columns component to 4 unit width.\n// - `.col-5`: Sets the size of a column in the flex columns component to 5 unit width.\n// - `.col-6`: Sets the size of a column in the flex columns component to 6 unit width.\n// - `.col-7`: Sets the size of a column in the flex columns component to 7 unit width.\n// - `.col-8`: Sets the size of a column in the flex columns component to 8 unit width.\n// - `.col-9`: Sets the size of a column in the flex columns component to 9 unit width.\n// - `.col-10`: Sets the size of a column in the flex columns component to 10 unit width.\n// - `.col-11`: Sets the size of a column in the flex columns component to 11 unit width.\n// - `.col-12`: Sets the size of a column in the flex columns component to 12 unit width.\n// - `.xs:col-1`: Sets the size of a column in the flex columns component to 1 unit width on extra small screens.\n// - `.xs:col-2`: Sets the size of a column in the flex columns component to 2 unit width on extra small screens.\n// - `.xs:col-3`: Sets the size of a column in the flex columns component to 3 unit width on extra small screens.\n// - `.xs:col-4`: Sets the size of a column in the flex columns component to 4 unit width on extra small screens.\n// - `.xs:col-5`: Sets the size of a column in the flex columns component to 5 unit width on extra small screens.\n// - `.xs:col-6`: Sets the size of a column in the flex columns component to 6 unit width on extra small screens.\n// - `.xs:col-7`: Sets the size of a column in the flex columns component to 7 unit width on extra small screens.\n// - `.xs:col-8`: Sets the size of a column in the flex columns component to 8 unit width on extra small screens.\n// - `.xs:col-9`: Sets the size of a column in the flex columns component to 9 unit width on extra small screens.\n// - `.xs:col-10`: Sets the size of a column in the flex columns component to 10 unit width on extra small screens.\n// - `.xs:col-11`: Sets the size of a column in the flex columns component to 11 unit width on extra small screens.\n// - `.xs:col-12`: Sets the size of a column in the flex columns component to 12 unit width on extra small screens.\n// - `.sm:col-1`: Sets the size of a column in the flex columns component to 1 unit width on small screens.\n// - `.sm:col-2`: Sets the size of a column in the flex columns component to 2 unit width on small screens.\n// - `.sm:col-3`: Sets the size of a column in the flex columns component to 3 unit width on small screens.\n// - `.sm:col-4`: Sets the size of a column in the flex columns component to 4 unit width on small screens.\n// - `.sm:col-5`: Sets the size of a column in the flex columns component to 5 unit width on small screens.\n// - `.sm:col-6`: Sets the size of a column in the flex columns component to 6 unit width on small screens.\n// - `.sm:col-7`: Sets the size of a column in the flex columns component to 7 unit width on small screens.\n// - `.sm:col-8`: Sets the size of a column in the flex columns component to 8 unit width on small screens.\n// - `.sm:col-9`: Sets the size of a column in the flex columns component to 9 unit width on small screens.\n// - `.sm:col-10`: Sets the size of a column in the flex columns component to 10 unit width on small screens.\n// - `.sm:col-11`: Sets the size of a column in the flex columns component to 11 unit width on small screens.\n// - `.sm:col-12`: Sets the size of a column in the flex columns component to 12 unit width on small screens.\n// - `.md:col-1`: Sets the size of a column in the flex columns component to 1 unit width on medium screens.\n// - `.md:col-2`: Sets the size of a column in the flex columns component to 2 unit width on medium screens.\n// - `.md:col-3`: Sets the size of a column in the flex columns component to 3 unit width on medium screens.\n// - `.md:col-4`: Sets the size of a column in the flex columns component to 4 unit width on medium screens.\n// - `.md:col-5`: Sets the size of a column in the flex columns component to 5 unit width on medium screens.\n// - `.md:col-6`: Sets the size of a column in the flex columns component to 6 unit width on medium screens.\n// - `.md:col-7`: Sets the size of a column in the flex columns component to 7 unit width on medium screens.\n// - `.md:col-8`: Sets the size of a column in the flex columns component to 8 unit width on medium screens.\n// - `.md:col-9`: Sets the size of a column in the flex columns component to 9 unit width on medium screens.\n// - `.md:col-10`: Sets the size of a column in the flex columns component to 10 unit width on medium screens.\n// - `.md:col-11`: Sets the size of a column in the flex columns component to 11 unit width on medium screens.\n// - `.md:col-12`: Sets the size of a column in the flex columns component to 12 unit width on medium screens.\n// - `.lg:col-1`: Sets the size of a column in the flex columns component to 1 unit width on large screens.\n// - `.lg:col-2`: Sets the size of a column in the flex columns component to 2 unit width on large screens.\n// - `.lg:col-3`: Sets the size of a column in the flex columns component to 3 unit width on large screens.\n// - `.lg:col-4`: Sets the size of a column in the flex columns component to 4 unit width on large screens.\n// - `.lg:col-5`: Sets the size of a column in the flex columns component to 5 unit width on large screens.\n// - `.lg:col-6`: Sets the size of a column in the flex columns component to 6 unit width on large screens.\n// - `.lg:col-7`: Sets the size of a column in the flex columns component to 7 unit width on large screens.\n// - `.lg:col-8`: Sets the size of a column in the flex columns component to 8 unit width on large screens.\n// - `.lg:col-9`: Sets the size of a column in the flex columns component to 9 unit width on large screens.\n// - `.lg:col-10`: Sets the size of a column in the flex columns component to 10 unit width on large screens.\n// - `.lg:col-11`: Sets the size of a column in the flex columns component to 11 unit width on large screens.\n// - `.lg:col-12`: Sets the size of a column in the flex columns component to 12 unit width on large screens.\n// - `.xl:col-1`: Sets the size of a column in the flex columns component to 1 unit width on extra large screens.\n// - `.xl:col-2`: Sets the size of a column in the flex columns component to 2 unit width on extra large screens.\n// - `.xl:col-3`: Sets the size of a column in the flex columns component to 3 unit width on extra large screens.\n// - `.xl:col-4`: Sets the size of a column in the flex columns component to 4 unit width on extra large screens.\n// - `.xl:col-5`: Sets the size of a column in the flex columns component to 5 unit width on extra large screens.\n// - `.xl:col-6`: Sets the size of a column in the flex columns component to 6 unit width on extra large screens.\n// - `.xl:col-7`: Sets the size of a column in the flex columns component to 7 unit width on extra large screens.\n// - `.xl:col-8`: Sets the size of a column in the flex columns component to 8 unit width on extra large screens.\n// - `.xl:col-9`: Sets the size of a column in the flex columns component to 9 unit width on extra large screens.\n// - `.xl:col-10`: Sets the size of a column in the flex columns component to 10 unit width on extra large screens.\n// - `.xl:col-11`: Sets the size of a column in the flex columns component to 11 unit width on extra large screens.\n// - `.xl:col-12`: Sets the size of a column in the flex columns component to 12 unit width on extra large screens.\n// - `.cq:xs:col-1`: Sets the size of a column in the flex columns component to 1 unit width in extra small containers.\n// - `.cq:xs:col-2`: Sets the size of a column in the flex columns component to 2 unit width in extra small containers.\n// - `.cq:xs:col-3`: Sets the size of a column in the flex columns component to 3 unit width in extra small containers.\n// - `.cq:xs:col-4`: Sets the size of a column in the flex columns component to 4 unit width in extra small containers.\n// - `.cq:xs:col-5`: Sets the size of a column in the flex columns component to 5 unit width in extra small containers.\n// - `.cq:xs:col-6`: Sets the size of a column in the flex columns component to 6 unit width in extra small containers.\n// - `.cq:xs:col-7`: Sets the size of a column in the flex columns component to 7 unit width in extra small containers.\n// - `.cq:xs:col-8`: Sets the size of a column in the flex columns component to 8 unit width in extra small containers.\n// - `.cq:xs:col-9`: Sets the size of a column in the flex columns component to 9 unit width in extra small containers.\n// - `.cq:xs:col-10`: Sets the size of a column in the flex columns component to 10 unit width in extra small containers.\n// - `.cq:xs:col-11`: Sets the size of a column in the flex columns component to 11 unit width in extra small containers.\n// - `.cq:xs:col-12`: Sets the size of a column in the flex columns component to 12 unit width in extra small containers.\n// - `.cq:sm:col-1`: Sets the size of a column in the flex columns component to 1 unit width in small containers.\n// - `.cq:sm:col-2`: Sets the size of a column in the flex columns component to 2 unit width in small containers.\n// - `.cq:sm:col-3`: Sets the size of a column in the flex columns component to 3 unit width in small containers.\n// - `.cq:sm:col-4`: Sets the size of a column in the flex columns component to 4 unit width in small containers.\n// - `.cq:sm:col-5`: Sets the size of a column in the flex columns component to 5 unit width in small containers.\n// - `.cq:sm:col-6`: Sets the size of a column in the flex columns component to 6 unit width in small containers.\n// - `.cq:sm:col-7`: Sets the size of a column in the flex columns component to 7 unit width in small containers.\n// - `.cq:sm:col-8`: Sets the size of a column in the flex columns component to 8 unit width in small containers.\n// - `.cq:sm:col-9`: Sets the size of a column in the flex columns component to 9 unit width in small containers.\n// - `.cq:sm:col-10`: Sets the size of a column in the flex columns component to 10 unit width in small containers.\n// - `.cq:sm:col-11`: Sets the size of a column in the flex columns component to 11 unit width in small containers.\n// - `.cq:sm:col-12`: Sets the size of a column in the flex columns component to 12 unit width in small containers.\n// - `.cq:md:col-1`: Sets the size of a column in the flex columns component to 1 unit width in medium containers.\n// - `.cq:md:col-2`: Sets the size of a column in the flex columns component to 2 unit width in medium containers.\n// - `.cq:md:col-3`: Sets the size of a column in the flex columns component to 3 unit width in medium containers.\n// - `.cq:md:col-4`: Sets the size of a column in the flex columns component to 4 unit width in medium containers.\n// - `.cq:md:col-5`: Sets the size of a column in the flex columns component to 5 unit width in medium containers.\n// - `.cq:md:col-6`: Sets the size of a column in the flex columns component to 6 unit width in medium containers.\n// - `.cq:md:col-7`: Sets the size of a column in the flex columns component to 7 unit width in medium containers.\n// - `.cq:md:col-8`: Sets the size of a column in the flex columns component to 8 unit width in medium containers.\n// - `.cq:md:col-9`: Sets the size of a column in the flex columns component to 9 unit width in medium containers.\n// - `.cq:md:col-10`: Sets the size of a column in the flex columns component to 10 unit width in medium containers.\n// - `.cq:md:col-11`: Sets the size of a column in the flex columns component to 11 unit width in medium containers.\n// - `.cq:md:col-12`: Sets the size of a column in the flex columns component to 12 unit width in medium containers.\n// - `.cq:lg:col-1`: Sets the size of a column in the flex columns component to 1 unit width in large containers.\n// - `.cq:lg:col-2`: Sets the size of a column in the flex columns component to 2 unit width in large containers.\n// - `.cq:lg:col-3`: Sets the size of a column in the flex columns component to 3 unit width in large containers.\n// - `.cq:lg:col-4`: Sets the size of a column in the flex columns component to 4 unit width in large containers.\n// - `.cq:lg:col-5`: Sets the size of a column in the flex columns component to 5 unit width in large containers.\n// - `.cq:lg:col-6`: Sets the size of a column in the flex columns component to 6 unit width in large containers.\n// - `.cq:lg:col-7`: Sets the size of a column in the flex columns component to 7 unit width in large containers.\n// - `.cq:lg:col-8`: Sets the size of a column in the flex columns component to 8 unit width in large containers.\n// - `.cq:lg:col-9`: Sets the size of a column in the flex columns component to 9 unit width in large containers.\n// - `.cq:lg:col-10`: Sets the size of a column in the flex columns component to 10 unit width in large containers.\n// - `.cq:lg:col-11`: Sets the size of a column in the flex columns component to 11 unit width in large containers.\n// - `.cq:lg:col-12`: Sets the size of a column in the flex columns component to 12 unit width in large containers.\n// - `.cq:xl:col-1`: Sets the size of a column in the flex columns component to 1 unit width in extra large containers.\n// - `.cq:xl:col-2`: Sets the size of a column in the flex columns component to 2 unit width in extra large containers.\n// - `.cq:xl:col-3`: Sets the size of a column in the flex columns component to 3 unit width in extra large containers.\n// - `.cq:xl:col-4`: Sets the size of a column in the flex columns component to 4 unit width in extra large containers.\n// - `.cq:xl:col-5`: Sets the size of a column in the flex columns component to 5 unit width in extra large containers.\n// - `.cq:xl:col-6`: Sets the size of a column in the flex columns component to 6 unit width in extra large containers.\n// - `.cq:xl:col-7`: Sets the size of a column in the flex columns component to 7 unit width in extra large containers.\n// - `.cq:xl:col-8`: Sets the size of a column in the flex columns component to 8 unit width in extra large containers.\n// - `.cq:xl:col-9`: Sets the size of a column in the flex columns component to 9 unit width in extra large containers.\n// - `.cq:xl:col-10`: Sets the size of a column in the flex columns component to 10 unit width in extra large containers.\n// - `.cq:xl:col-11`: Sets the size of a column in the flex columns component to 11 unit width in extra large containers.\n// - `.cq:xl:col-12`: Sets the size of a column in the flex columns component to 12 unit width in extra large containers.\n// - `.fill`: A class to set a column to fill the remaining space.\n//\n// The following custom properties can be used to customize the flex columns component:\n// | Property | Description | Default Value |\n// | -------------------------------------- | --------------------------------------------------------- | -------------------------- |\n// | `--graupl-flex-columns-row-gap` | The gap between the rows of the flex columns. | `var(--graupl-spacer-5)` |\n// | `--graupl-flex-columns-column-gap` | The gap between the columns of the flex columns. | `var(--graupl-spacer-5)` |\n// | `--graupl-flex-columns-size` | The size of a column. | `auto` |\n// | `--graupl-flex-columns-max-width` | The maximum width of a column. | `unset` |\n// | `--graupl-flex-columns-container-type` | The container type applied to the flex columns component. | `inline-size` |\n// | `--graupl-flex-columns-background` | The background of the flex columns component. | `var(--graupl-background)` |\n// | `--graupl-flex-columns-color` | The text color of the flex columns component. | `var(--graupl-color)` |\n//\n// The following sass variables can be used to customize the generation of the flex columns component:\n// | Variable | Description | Default Value |\n// | --------------------------------------------------------- | ---------------------------------------------------------------- | ---------------- |\n// | `$selector-base` | The base selector for the component. | `\".\"` |\n// | `$modifier-selector-base` | The base selector for component modifiers. | `\".\"` |\n// | `$generate-base-theme-map` | Flag to generate the base theme map. | `true` |\n// | `$themeable` | Flag to generate theme modifiers. | `false` |\n// | `$screen-aware` | Enables screen-aware column variants. | `true` |\n// | `$theme-aware` | Enables theme-aware column variants. | `false` |\n// | `$scheme-aware` | Enables scheme-aware column variants. | `false` |\n// | `$state-aware` | Enables state-aware column variants. | `false` |\n// | `$container-aware` | Enables container-aware column variants. | `true` |\n// | `$flex-columns-selector-base` | The base selector for the flex columns component. | `\".\"` |\n// | `$flex-columns-selector` | The selector for the flex columns component. | `\"flex-columns\"` |\n// | `$flex-columns-theme-selector-base` | The selector base for flex columns theme modifiers. | `\".\"` |\n// | `$flex-columns-theme-selector-prefix` | The flex columns theme modifier selector prefix. | `\"\"` |\n// | `$flex-columns-column-selector-base` | The base selector for the column class. | `\".\"` |\n// | `$flex-columns-column-selector` | The selector for the column class. | `\"col-\"` |\n// | `$flex-columns-fill-selector-base` | The base selector for the fill class. | `\".\"` |\n// | `$flex-columns-fill-selector` | The selector for the fill class. | `\"fill\"` |\n// | `$flex-columns-column-screen-aware-selector-prefix` | Prefix to the screen-aware portion of column selectors. | `\"\"` |\n// | `$flex-columns-column-screen-aware-selector-suffix` | Suffix to the screen-aware portion of column selectors. | `\"\"` |\n// | `$flex-columns-column-screen-aware-selector-separator` | Separator inserted for screen-aware column selectors. | `\"\\\\:\"` |\n// | `$flex-columns-column-theme-aware-selector-prefix` | Prefix to the theme-aware portion of column selectors. | `\"\"` |\n// | `$flex-columns-column-theme-aware-selector-suffix` | Suffix to the theme-aware portion of column selectors. | `\"-theme\"` |\n// | `$flex-columns-column-theme-aware-selector-separator` | Separator inserted for theme-aware column selectors. | `\"\\\\:\"` |\n// | `$flex-columns-column-scheme-aware-selector-prefix` | Prefix to the scheme-aware portion of column selectors. | `\"\"` |\n// | `$flex-columns-column-scheme-aware-selector-suffix` | Suffix to the scheme-aware portion of column selectors. | `\"-mode\"` |\n// | `$flex-columns-column-scheme-aware-selector-separator` | Separator inserted for scheme-aware column selectors. | `\"\\\\:\"` |\n// | `$flex-columns-column-state-aware-selector-prefix` | Prefix to the state-aware portion of column selectors. | `\"\"` |\n// | `$flex-columns-column-state-aware-selector-suffix` | Suffix to the state-aware portion of column selectors. | `\"\"` |\n// | `$flex-columns-column-state-aware-selector-separator` | Separator inserted for state-aware column selectors. | `\"\\\\:\"` |\n// | `$flex-columns-column-container-aware-selector-prefix` | Prefix to the container-aware portion of column selectors. | `\"cq\\\\:\"` |\n// | `$flex-columns-column-container-aware-selector-suffix` | Suffix to the container-aware portion of column selectors. | `\"\"` |\n// | `$flex-columns-column-container-aware-selector-separator` | Separator inserted for container-aware column selectors. | `\"\\\\:\"` |\n// | `$flex-columns-min-count` | The minimum number of columns used to generate `.col-#` classes. | `1` |\n// | `$flex-columns-max-count` | The maximum number of columns used to generate `.col-#` classes. | `12` |\n// | `$flex-columns-size` | The default size of a column. | `auto` |\n// | `$flex-columns-max-width` | The default maximum width of a column. | `unset` |\n// | `$flex-columns-container-type` | The container type applied to the flex columns component. | `\"inline-size\"` |\n// | `$flex-columns-theme-mappings` | Map of properties/shades for flex columns themes. | `()` |\n// | `$flex-columns-theme-map` | Expanded map of properties/colors/shades. | `()` |\n//\n// @example\n// <div class=\"flex-columns\">\n// <div class=\"col-3\">Column 1</div>\n// <div class=\"col-6\">Column 2</div>\n// <div class=\"col-3\">Column 3</div>\n// </div>\n//\n// @example\n// <div class=\"flex-columns\">\n// <div class=\"col-3\">Column 1</div>\n// <div class=\"col-3 fill\">Column 2</div>\n// <div class=\"col-3\">Column 3</div>\n// </div>\n//\n// @example\n// <div class=\"flex-columns\">\n// <div class=\"col-3 md:col-2\">Column 1</div>\n// <div class=\"col-6 md:col-8\">Column 2</div>\n// <div class=\"col-3 md:col-2\">Column 3</div>\n// </div>\n\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/layer\" as *;\n@use \"../../mixins/screen\";\n@use \"../../mixins/container\";\n@use \"../../mixins/theme\";\n@use \"../../mixins/utility\";\n@use \"defaults\";\n@use \"sass:map\";\n@use \"variables\" as *;\n\n// Generate a utility-map for column classes.\n$flex-columns-column-map: ();\n\n@for $i\n from defaults.$flex-columns-min-count\n through defaults.$flex-columns-max-count\n{\n $flex-columns-column-map: map.merge(\n $flex-columns-column-map,\n /* stylelint-disable */\n (\n \"#{defaults.$flex-columns-column-selector}#{$i}\": (\n --#{root-defaults.$prefix}flex-columns-size: calc(\n (100% / #{defaults.$flex-columns-max-count} * #{$i}) -\n #{$flex-columns-column-gap}\n ),\n --#{root-defaults.$prefix}flex-columns-max-width: calc(\n 100% / #{defaults.$flex-columns-max-count} * #{$i}\n ),\n container-type: $flex-columns-container-type,\n ),\n )\n /* stylelint-enable */\n );\n}\n\n@include layer(layout) {\n // `.flex-columns`\n #{defaults.$flex-columns-selector-base}#{defaults.$flex-columns-selector} {\n display: flex;\n flex-wrap: wrap;\n gap: $flex-columns-row-gap $flex-columns-column-gap;\n container-type: $flex-columns-container-type;\n\n > * {\n flex: 1 1 $flex-columns-size;\n max-width: $flex-columns-max-width;\n }\n\n @include utility.generate(\n $map: $flex-columns-column-map,\n $selector-base: defaults.$flex-columns-column-selector-base,\n $selector-prefix: \"\",\n $selector-suffix: \"\",\n $screen-aware: defaults.$screen-aware,\n $screen-aware-selector-prefix:\n defaults.$flex-columns-screen-aware-selector-prefix,\n $screen-aware-selector-suffix:\n defaults.$flex-columns-screen-aware-selector-suffix,\n $screen-aware-selector-separator:\n defaults.$flex-columns-screen-aware-selector-separator,\n $theme-aware: defaults.$theme-aware,\n $theme-aware-selector-prefix:\n defaults.$flex-columns-theme-aware-selector-prefix,\n $theme-aware-selector-suffix:\n defaults.$flex-columns-theme-aware-selector-suffix,\n $theme-aware-selector-separator:\n defaults.$flex-columns-theme-aware-selector-separator,\n $scheme-aware: defaults.$scheme-aware,\n $scheme-aware-selector-prefix:\n defaults.$flex-columns-scheme-aware-selector-prefix,\n $scheme-aware-selector-suffix:\n defaults.$flex-columns-scheme-aware-selector-suffix,\n $scheme-aware-selector-separator:\n defaults.$flex-columns-scheme-aware-selector-separator,\n $state-aware: defaults.$state-aware,\n $state-aware-selector-prefix:\n defaults.$flex-columns-state-aware-selector-prefix,\n $state-aware-selector-suffix:\n defaults.$flex-columns-state-aware-selector-suffix,\n $state-aware-selector-separator:\n defaults.$flex-columns-state-aware-selector-separator,\n $container-aware: defaults.$container-aware,\n $container-aware-selector-prefix:\n defaults.$flex-columns-container-aware-selector-prefix,\n $container-aware-selector-suffix:\n defaults.$flex-columns-container-aware-selector-suffix,\n $container-aware-selector-separator:\n defaults.$flex-columns-container-aware-selector-separator,\n $important: false\n )\n using($selector, $properties, $responsive-type, $responsive-name) {\n // `&.fill`\n &#{defaults.$flex-columns-fill-selector-base}#{defaults.$flex-columns-fill-selector} {\n --#{root-defaults.$prefix}flex-columns-max-width: unset;\n }\n }\n }\n\n @for $i\n from defaults.$flex-columns-min-count\n through defaults.$flex-columns-max-count\n {\n @include container.trigger(force-single-column) {\n // `.flex-columns`\n #{defaults.$flex-columns-selector-base}#{defaults.$flex-columns-selector} {\n // e.g. `.col-1` or `.col-12`\n #{defaults.$flex-columns-column-selector-base}#{defaults.$flex-columns-column-selector}#{$i} {\n --#{root-defaults.$prefix}flex-columns-size: 100%;\n --#{root-defaults.$prefix}flex-columns-max-width: auto;\n }\n }\n }\n }\n}\n\n@include layer(theme) {\n // `.flex-columns`\n #{defaults.$flex-columns-selector-base}#{defaults.$flex-columns-selector} {\n background: $flex-columns-background;\n color: $flex-columns-color;\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$flex-columns-theme-map,\n defaults.$flex-columns-theme-selector-base,\n defaults.$flex-columns-theme-selector-prefix,\n \"flex-columns-\"\n );\n }\n }\n}\n","// @graupl/core flex columns layout 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-flex-columns-row-gap | var(--graupl-spacer-5) |\n// | --graupl-flex-columns-column-gap | var(--graupl-spacer-5) |\n// | --graupl-flex-columns-size | auto |\n// | --graupl-flex-columns-max-width | unset |\n// | --graupl-flex-columns-container-type | inline-size |\n// | --graupl-flex-columns-background | null |\n// | --graupl-flex-columns-color | null |\n\n@use \"defaults\";\n@use \"../../defaults\" as root-defaults;\n@use \"../../theme/color/variables\" as color;\n@use \"../columns/variables\" as columns-variables;\n\n// Flex columns properties.\n// --graupl-flex-columns-row-gap\n$flex-columns-row-gap: var(\n --#{root-defaults.$prefix}flex-columns-row-gap,\n #{columns-variables.$columns-row-gap}\n);\n\n// --graupl-flex-columns-column-gap\n$flex-columns-column-gap: var(\n --#{root-defaults.$prefix}flex-columns-column-gap,\n #{columns-variables.$columns-column-gap}\n);\n\n// --graupl-flex-columns-size\n$flex-columns-size: var(\n --#{root-defaults.$prefix}flex-columns-size,\n #{defaults.$flex-columns-size}\n);\n\n// --graupl-flex-columns-max-width\n$flex-columns-max-width: var(\n --#{root-defaults.$prefix}flex-columns-max-width,\n #{defaults.$flex-columns-max-width}\n);\n\n// --graupl-flex-columns-container-type\n$flex-columns-container-type: var(\n --#{root-defaults.$prefix}flex-columns-container-type,\n #{defaults.$flex-columns-container-type}\n);\n\n// --graupl-flex-columns-background\n$flex-columns-background: var(\n --#{root-defaults.$prefix}flex-columns-background\n);\n\n// --graupl-flex-columns-color\n$flex-columns-color: var(--#{root-defaults.$prefix}flex-columns-color);\n","// @graupl/core utility mixins.\n//\n// Mixins to help generate utility classes.\n\n@use \"./screen\";\n@use \"./container\";\n@use \"./state\";\n@use \"./theme\";\n@use \"../functions/important\";\n@use \"../functions/utility\";\n@use \"../defaults\" as root-defaults;\n@use \"../theme/color/defaults\" as color-defaults;\n@use \"sass:map\";\n@use \"sass:string\";\n\n/// Insert a map of properties and values into a utility class.\n///\n/// @param {Map} $map\n/// The map of properties and values to apply to the selector.\n/// @param {Boolean} $important\n/// A flag to determine if the important flag should be added.\n@mixin _insert($map, $important: null) {\n @each $prop, $value in $map {\n // Do not attempt to insert important values inside of custom properties.\n @if string.slice($prop, 1, 2) != \"--\" {\n #{$prop}: important.insert(#{$value}, $override: $important);\n } @else {\n #{$prop}: #{$value};\n }\n }\n\n // Allow for custom overrides and additional styles.\n @content;\n}\n\n/// Handles wrapping utilities with a conditional state.\n///\n/// @param {?string} $state\n/// The state to wrap.\n@mixin _handle-state($state: null) {\n @if $state {\n @include state.state($state) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional screen.\n///\n/// @param {?string} $screen\n/// The screen to wrap.\n@mixin _handle-screen($screen: null) {\n @if $screen {\n @include screen.up($screen) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional container.\n///\n/// @param {?string} $container\n/// The container to wrap.\n@mixin _handle-container($container: null) {\n @if $container {\n @include container.up($container) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional theme.\n///\n/// @param {?string} $theme\n/// The theme mode to wrap.\n@mixin _handle-theme($theme: null) {\n @if $theme {\n @include theme.theme($theme) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional scheme.\n///\n/// @param {?string} $scheme\n/// The scheme mode to wrap.\n@mixin _handle-scheme($scheme: null) {\n @if $scheme {\n @include theme.scheme($scheme) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Create a utility class with a list of properties and a single value.\n///\n/// @param {string} $selector\n/// The selector to apply the utility class to.\n/// @param {string|List} $property\n/// The property/properties to apply to the selector.\n/// @param {string} $value\n/// The value to apply to the property/properties.\n/// @param {?Boolean} $important\n/// A flag to determine if the important flag should be added.\n/// @param {?string} $screen\n/// The screen to apply the utility class to.\n/// @param {?string} $theme\n/// The theme to apply the utility class to.\n/// @param {?string} $scheme\n/// The scheme mode to apply the utility class to.\n/// @param {?string} $state\n/// The state to apply the utility class to.\n@mixin create(\n $selector,\n $property,\n $value,\n $important: null,\n $screen: null,\n $theme: null,\n $scheme: null,\n $state: null,\n $container: null\n) {\n $map: utility.convert-property-values-to-map($property, $value);\n\n @include create-mapped(\n $selector,\n $map,\n $important: $important,\n $screen: $screen,\n $theme: $theme,\n $scheme: $scheme,\n $state: $state,\n $container: $container\n ) {\n @content;\n }\n}\n\n/// Create a utility class with a map of properties and values.\n///\n/// @param {string} $selector\n/// The selector to apply the utility class to.\n/// @param {Map} $map\n/// The map of properties and values to apply to the selector.\n/// @param {?Boolean} $important\n/// A flag to determine if the important flag should be added.\n/// @param {?string} $screen\n/// The screen to apply the utility class to.\n/// @param {?string} $theme\n/// The theme to apply the utility class to.\n/// @param {?string} $scheme\n/// The scheme mode to apply the utility class to.\n/// @param {?string} $state\n/// The state to apply the utility class to.\n@mixin create-mapped(\n $selector,\n $map,\n $important: null,\n $screen: null,\n $theme: null,\n $scheme: null,\n $state: null,\n $container: null\n) {\n @include _handle-theme($theme) {\n @include _handle-scheme($scheme) {\n #{$selector} {\n @if $screen or $container {\n @if $screen {\n @include _handle-screen($screen) {\n @include _handle-state($state) {\n @include _insert($map, $important) {\n @content;\n }\n }\n }\n }\n\n @if $container {\n @include _handle-container($container) {\n @include _handle-state($state) {\n @include _insert($map, $important) {\n @content;\n }\n }\n }\n }\n } @else {\n @include _handle-state($state) {\n @include _insert($map, $important) {\n @content;\n }\n }\n }\n }\n }\n }\n}\n\n/// Create a suite of utilities for all base and responsive classes.\n///\n/// Takes a utility map that is generated by the generate-utility-map() function.\n///\n/// @param {?Map} $map [()]\n/// The utility map.\n/// @param {?string} $selector-base [root-defaults.$utility-selector-base]\n/// The selector base to use for all generated utilities.\n/// @param {?string} $selector-prefix [root-defaults.$utility-selector-prefix]\n/// The selector prefix to use for all generated utilities.\n/// @param {?string} $selector-suffix [root-defaults.$utility-selector-suffix]\n/// The selector suffix to use for all generated utilities.\n/// @param {?Boolean} $screen-aware [false]\n/// A flag to enable screen-aware utility generation.\n/// @param {?string} $screen-aware-selector-prefix [root-defaults.$utility-screen-aware-selector-prefix]\n/// The selector base to use for all generated screen-aware utilities.\n/// @param {?string} $screen-aware-selector-suffix [root-defaults.$utility-screen-aware-selector-suffix]\n/// The selector prefix to use for all generated screen-aware utilities.\n/// @param {?string} $screen-aware-selector-separator [root-defaults.$utility-screen-aware-selector-separator]\n/// The selector suffix to use for all generated screen-aware utilities.\n/// @param {?Boolean} $theme-aware [false]\n/// A flag to enable theme-aware utility generation.\n/// @param {?string} $theme-aware-selector-prefix [root-defaults.$utility-theme-aware-selector-prefix]\n/// The selector base to use for all generated theme-aware utilities.\n/// @param {?string} $theme-aware-selector-suffix [root-defaults.$utility-theme-aware-selector-suffix]\n/// The selector prefix to use for all generated theme-aware utilities.\n/// @param {?string} $theme-aware-selector-separator [root-defaults.$utility-theme-aware-selector-separator]\n/// The selector suffix to use for all generated theme-aware utilities.\n/// @param {?Boolean} $scheme-aware [false]\n/// A flag to enable scheme-aware utility generation.\n/// @param {?string} $scheme-aware-selector-prefix [root-defaults.$utility-scheme-aware-selector-prefix]\n/// The selector base to use for all generated scheme-aware utilities.\n/// @param {?string} $scheme-aware-selector-suffix [root-defaults.$utility-scheme-aware-selector-suffix]\n/// The selector prefix to use for all generated scheme-aware utilities.\n/// @param {?string} $scheme-aware-selector-separator [root-defaults.$utility-scheme-aware-selector-separator]\n/// The selector suffix to use for all generated scheme-aware utilities.\n/// @param {?Boolean} $state-aware [false]\n/// A flag to enable state-aware utility generation.\n/// @param {?string} $state-aware-selector-prefix [root-defaults.$utility-state-aware-selector-prefix]\n/// The selector base to use for all generated state-aware utilities.\n/// @param {?string} $state-aware-selector-suffix [root-defaults.$utility-state-aware-selector-suffix]\n/// The selector prefix to use for all generated state-aware utilities.\n/// @param {?string} $state-aware-selector-separator [root-defaults.$utility-state-aware-selector-separator]\n/// The selector suffix to use for all generated state-aware utilities.\n/// @param {?Boolean} $container-aware [false]\n/// A flag to enable container-aware utility generation.\n/// @param {?string} $container-aware-selector-prefix [root-defaults.$utility-container-aware-selector-prefix]\n/// The selector base to use for all generated container-aware utilities.\n/// @param {?string} $container-aware-selector-suffix [root-defaults.$utility-container-aware-selector-suffix]\n/// The selector prefix to use for all generated container-aware utilities.\n/// @param {?string} $container-aware-selector-separator [root-defaults.$utility-container-aware-selector-separator]\n/// The selector suffix to use for all generated container-aware utilities.\n/// @param {?Boolean} $important [root-defaults.$use-important]\n/// A flag to determine if the important flag should be added to all utility properties.\n@mixin generate(\n $map: (),\n $selector-base: root-defaults.$utility-selector-base,\n $selector-prefix: root-defaults.$utility-selector-prefix,\n $selector-suffix: root-defaults.$utility-selector-suffix,\n $screen-aware: false,\n $screen-aware-selector-prefix:\n root-defaults.$utility-screen-aware-selector-prefix,\n $screen-aware-selector-suffix:\n root-defaults.$utility-screen-aware-selector-suffix,\n $screen-aware-selector-separator:\n root-defaults.$utility-screen-aware-selector-separator,\n $theme-aware: false,\n $theme-aware-selector-prefix:\n root-defaults.$utility-theme-aware-selector-prefix,\n $theme-aware-selector-suffix:\n root-defaults.$utility-theme-aware-selector-suffix,\n $theme-aware-selector-separator:\n root-defaults.$utility-theme-aware-selector-separator,\n $scheme-aware: false,\n $scheme-aware-selector-prefix:\n root-defaults.$utility-scheme-aware-selector-prefix,\n $scheme-aware-selector-suffix:\n root-defaults.$utility-scheme-aware-selector-suffix,\n $scheme-aware-selector-separator:\n root-defaults.$utility-scheme-aware-selector-separator,\n $state-aware: false,\n $state-aware-selector-prefix:\n root-defaults.$utility-state-aware-selector-prefix,\n $state-aware-selector-suffix:\n root-defaults.$utility-state-aware-selector-suffix,\n $state-aware-selector-separator:\n root-defaults.$utility-state-aware-selector-separator,\n $container-aware: false,\n $container-aware-selector-prefix:\n root-defaults.$utility-container-aware-selector-prefix,\n $container-aware-selector-suffix:\n root-defaults.$utility-container-aware-selector-suffix,\n $container-aware-selector-separator:\n root-defaults.$utility-container-aware-selector-separator,\n $important: root-defaults.$use-important\n) {\n $utility-selector-prefix: $selector-base;\n\n // Generate all base utilities.\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important\n ) {\n @content ($selector, $properties, $responsive-name: null, $responsive-type: null);\n }\n }\n\n // Generate screen-aware utilities.\n @if $screen-aware and root-defaults.$screen-aware-utilities {\n @each $screen-name in map.keys(root-defaults.$screen-sizes) {\n // e.g. `.md:` or `.lg:`\n $utility-selector-prefix: #{$selector-base}#{$screen-aware-selector-prefix}#{$screen-name}#{$screen-aware-selector-suffix}#{$screen-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $screen: $screen-name\n ) {\n @content ($selector, $properties, $responsive-name: $screen-name, $responsive-type: \"screen\");\n }\n }\n }\n }\n\n // Generate theme-aware utilities.\n @if $theme-aware and root-defaults.$theme-aware-utilities {\n @each $theme-name in color-defaults.$themes {\n // e.g. `.default-theme:`\n $utility-selector-prefix: #{$selector-base}#{$theme-aware-selector-prefix}#{$theme-name}#{$theme-aware-selector-suffix}#{$theme-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $theme: $theme-name\n ) {\n @content ($selector, $properties, $responsive-name: $theme-name, $responsive-type: \"theme\");\n }\n }\n }\n }\n\n // Generate scheme-aware utilities.\n @if $scheme-aware and root-defaults.$scheme-aware-utilities {\n @each $scheme-name in color-defaults.$schemes {\n // e.g. `.light-mode:` or `.dark-mode:`\n $utility-selector-prefix: #{$selector-base}#{$scheme-aware-selector-prefix}#{$scheme-name}#{$scheme-aware-selector-suffix}#{$scheme-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $scheme: $scheme-name\n ) {\n @content ($selector, $properties, $responsive-name: $scheme-name, $responsive-type: \"scheme\");\n }\n }\n }\n }\n\n // Generate state-aware utilities.\n @if $state-aware and root-defaults.$state-aware-utilities {\n @each $state-name in root-defaults.$state-selectors {\n // e.g. `.hover:` or `.focus:`\n $utility-selector-prefix: #{$selector-base}#{$state-aware-selector-prefix}#{$state-name}#{$state-aware-selector-suffix}#{$state-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $state: $state-name\n ) {\n @content ($selector, $properties, $responsive-name: $state-name, $responsive-type: \"state\");\n }\n }\n }\n }\n\n // Generate container-aware utilities.\n @if $container-aware and root-defaults.$container-aware-utilities {\n @each $container-name in map.keys(root-defaults.$container-sizes) {\n // e.g. `.cq:md:` or `.cq:lg:`\n $utility-selector-prefix: #{$selector-base}#{$container-aware-selector-prefix}#{$container-name}#{$container-aware-selector-suffix}#{$container-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $container: $container-name\n ) {\n @content ($selector, $properties, $responsive-name: $container-name, $responsive-type: \"container\");\n }\n }\n }\n }\n}\n","// @graupl/core screen mixins.\n//\n// A series of mixins to generate breakpoints.\n\n// @use \"../defaults\" as root-defaults;\n@use \"../functions/screen\";\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n@use \"sass:meta\";\n\n// A mixin to generate a minimum screen width media query.\n@mixin up($size) {\n $screen-size: screen.min($size);\n\n @media screen and (#{$screen-size} <= width) {\n @content;\n }\n}\n\n// A mixin to generate a maximum screen width media query.\n@mixin down($size) {\n $screen-size: screen.max($size);\n\n @media screen and (width <= #{$screen-size}) {\n @content;\n }\n}\n\n// A mixin to generate a range of screen widths media query.\n@mixin between($min, $max) {\n $screen-size: screen.range($min, $max);\n $min: map.get($screen-size, \"min\");\n $max: map.get($screen-size, \"max\");\n\n @media screen and (#{$min} <= width <= #{$max}) {\n @content;\n }\n}\n\n@mixin only($size) {\n @include between($size, $size) {\n @content;\n }\n}\n\n@mixin trigger($trigger) {\n // Validate that the trigger exists.\n @if not map.has-key(root-defaults.$screen-size-triggers, $trigger) {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not exist.\";\n }\n\n $screen-size-trigger: map.get(root-defaults.$screen-size-triggers, $trigger);\n\n // If the trigger is null, assume the user has disabled it and output the content as-is.\n @if meta.type-of($screen-size-trigger) != \"null\" {\n // Validate that the trigger has the required keys.\n @if not map.has-key($screen-size-trigger, \"mixin\") {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not have a mixin key.\";\n }\n\n @if not map.has-key($screen-size-trigger, \"args\") {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not have an args key.\";\n }\n\n $mixin-name: map.get($screen-size-trigger, \"mixin\");\n $mixin-args: map.get($screen-size-trigger, \"args\");\n\n // Validate that the mixin exists.\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 // Include the mixin with the provided arguments and content.\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}\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 // Validate that the trigger exists.\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 the trigger is null, assume the user has disabled it and output the content as-is.\n @if meta.type-of($container-size-trigger) != \"null\" {\n // Validate that the trigger has the required keys.\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 // Validate that the mixin exists.\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 // Include the mixin with the provided arguments and content.\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}\n"],"names":[]}