@graupl/core 1.0.0-beta.41 → 1.0.0-beta.43

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 (24) hide show
  1. package/dist/css/component/accordion.css.map +1 -1
  2. package/dist/css/component/card.css +1 -1
  3. package/dist/css/component/card.css.map +1 -1
  4. package/dist/css/component.css +1 -1
  5. package/dist/css/component.css.map +1 -1
  6. package/dist/css/graupl.css +1 -1
  7. package/dist/css/graupl.css.map +1 -1
  8. package/dist/css/layout/columns.css +1 -1
  9. package/dist/css/layout/columns.css.map +1 -1
  10. package/dist/css/layout/container.css +1 -1
  11. package/dist/css/layout/container.css.map +1 -1
  12. package/dist/css/layout/flex-columns.css +1 -1
  13. package/dist/css/layout/flex-columns.css.map +1 -1
  14. package/dist/css/layout.css +1 -1
  15. package/dist/css/layout.css.map +1 -1
  16. package/package.json +1 -1
  17. package/src/scss/component/accordion/_index.scss +125 -125
  18. package/src/scss/component/card/_index.scss +54 -0
  19. package/src/scss/layout/columns/_index.scss +1 -1
  20. package/src/scss/layout/columns/_variables.scss +4 -7
  21. package/src/scss/layout/container/_index.scss +1 -1
  22. package/src/scss/layout/container/_variables.scss +4 -10
  23. package/src/scss/layout/flex-columns/_index.scss +1 -1
  24. package/src/scss/layout/flex-columns/_variables.scss +11 -15
package/dist/css/layout/container.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":null,"mappings":"AESI,qBCiNF,+qGAkBE,2FAUA,+EAoDA,+DAKE,wFAaF,0CAKA,wCAKA,8CAOE,uHAOE,oHAYF,wHAOE,sHAYF,kHAOE,iPAkCF,uHAOE,+GAYF,uHAOE,mNAgCF,wHAOE,gHAYF,wHAOE,qNCleN,kCDigBI,44SAcE,sEAWI,kUAYF,sMA2BF,uEAWI,uUAYF,yMA2BF,wCAMF,8nNAcE,sEAWI,kUAYF,iMA2BF,6CAMF,uoNAcE,uEAWI,uUAYF,mMA2BF,gDDpwBJ,oBC8wBF","sources":["dist/css/layout/container.css","Users/nickdjm/Development/contrib/graupl/graupl/packages/core/src/scss/layout/container/_variables.scss","Users/nickdjm/Development/contrib/graupl/graupl/packages/core/src/scss/mixins/_layer.scss","Users/nickdjm/Development/contrib/graupl/graupl/packages/core/src/scss/layout/container/_index.scss","Users/nickdjm/Development/contrib/graupl/graupl/packages/core/src/scss/mixins/_screen.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/* 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 .container {\n display: grid;\n grid-template-columns: [full-width-start] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [feature-start] var(--graupl-container-feature-section-width, minmax(var(--graupl-container-feature-section-min-width, 0rem), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [breakout-start] var(--graupl-container-breakout-section-width, minmax(var(--graupl-container-breakout-section-min-width, 0rem), var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)))) [content-start] var(--graupl-container-content-section-width, min(var(--graupl-container-content-section-min-width, calc(100% - var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * 2 - var(--graupl-container-feature-section-min-width, 0rem) * 2 - var(--graupl-container-breakout-section-min-width, 0rem) * 2)), var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))))) [content-end] var(--graupl-container-breakout-section-width, minmax(var(--graupl-container-breakout-section-min-width, 0rem), var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)))) [breakout-end] var(--graupl-container-feature-section-width, minmax(var(--graupl-container-feature-section-min-width, 0rem), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [feature-end] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [full-width-end];\n container-type: inline-size;\n overflow-wrap: break-word;\n }\n .container > .container {\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n container-type: normal;\n }\n .container > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: content;\n }\n .container .contain {\n display: grid;\n grid-template-columns: subgrid;\n }\n .container .contain > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: content;\n }\n .container .breakout {\n grid-column: breakout;\n }\n .container .feature {\n grid-column: feature;\n }\n .container .full-width {\n grid-column: full-width;\n }\n .container.sidebars .sidebar-left {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n }\n .container.sidebars .sidebar-left > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar-left) {\n grid-column: content;\n }\n .container.sidebars .sidebar-right {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n }\n .container.sidebars .sidebar-right > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar-right) {\n grid-column: content;\n }\n .container.sidebars .content {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n }\n .container.sidebars .content > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar-left,\n .sidebar-right) {\n grid-column: content;\n }\n .container.sidebars .content .contain > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar-left,\n .sidebar-right) {\n grid-column: content;\n }\n .container.sidebars-left .sidebar {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n }\n .container.sidebars-left .sidebar > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar) {\n grid-column: content;\n }\n .container.sidebars-left .content {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n }\n .container.sidebars-left .content > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar) {\n grid-column: content;\n }\n .container.sidebars-left .content .contain > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar) {\n grid-column: content;\n }\n .container.sidebars-right .sidebar {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n }\n .container.sidebars-right .sidebar > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar) {\n grid-column: content;\n }\n .container.sidebars-right .content {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n }\n .container.sidebars-right .content > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar) {\n grid-column: content;\n }\n .container.sidebars-right .content .contain > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar) {\n grid-column: content;\n }\n @media screen and (1024px <= width) {\n .container.sidebars {\n --graupl-columns-content-max-width: var(--graupl-container-sidebars-content-section-max-width, calc(var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) - var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) - var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))));\n grid-template-columns: [full-width-start] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [sidebar-left-start feature-start] var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [sidebar-left-end breakout-start] var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) [content-start] var(--graupl-container-sidebars-content-section-width, min(var(--graupl-container-sidebars-content-section-min-width, calc(100% - var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * 2 - var(--graupl-container-feature-section-min-width, 0rem) * 2 - var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) * 2 - var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) - var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))))), var(--graupl-container-sidebars-content-section-max-width, calc(var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) - var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) - var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2))))))) [content-end] var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) [breakout-end sidebar-right-start] var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [feature-end sidebar-right-end] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [full-width-end];\n }\n .container.sidebars > .sidebar-left {\n grid-row: 1/-1;\n grid-template: subgrid;\n }\n .container.sidebars > .sidebar-left:not(.container),\n .container.sidebars > .sidebar-left:not(.container) .container,\n .container.sidebars > .sidebar-left:not(.container) .breakout,\n .container.sidebars > .sidebar-left:not(.container) .full-width,\n .container.sidebars > .sidebar-left:not(.container) .feature {\n grid-column-end: content-start;\n }\n .container.sidebars > .sidebar-left > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar-left;\n }\n .container.sidebars > .sidebar-left .contain > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar-left;\n }\n .container.sidebars > .sidebar-right {\n grid-row: 1/-1;\n grid-template: subgrid;\n }\n .container.sidebars > .sidebar-right:not(.container),\n .container.sidebars > .sidebar-right:not(.container) .container,\n .container.sidebars > .sidebar-right:not(.container) .breakout,\n .container.sidebars > .sidebar-right:not(.container) .full-width,\n .container.sidebars > .sidebar-right:not(.container) .feature {\n grid-column-start: content-end;\n }\n .container.sidebars > .sidebar-right > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar-right;\n }\n .container.sidebars > .sidebar-right .contain > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar-right;\n }\n .container.sidebars > .content {\n grid-row: 1;\n }\n .container.sidebars-left {\n --graupl-columns-content-max-width: var(--graupl-container-sidebars-left-content-section-max-width, calc(var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) - var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))));\n grid-template-columns: [full-width-start] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [sidebar-start feature-start] var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [sidebar-end breakout-start] var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) [content-start] var(--graupl-container-sidebars-left-content-section-width, min(var(--graupl-container-sidebars-left-content-section-min-width, calc(100% - var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * 2 - var(--graupl-container-feature-section-min-width, 0rem) * 2 - var(--graupl-container-breakout-section-min-width, 0rem) - var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) - var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))))), var(--graupl-container-sidebars-left-content-section-max-width, calc(var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) - var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2))))))) [content-end] var(--graupl-container-breakout-section-width, minmax(var(--graupl-container-breakout-section-min-width, 0rem), var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)))) [breakout-end] var(--graupl-container-feature-section-width, minmax(var(--graupl-container-feature-section-min-width, 0rem), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [feature-end] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [full-width-end];\n }\n .container.sidebars-left > .sidebar {\n grid-row: 1/-1;\n grid-template: subgrid;\n }\n .container.sidebars-left > .sidebar:not(.container),\n .container.sidebars-left > .sidebar:not(.container) .container,\n .container.sidebars-left > .sidebar:not(.container) .breakout,\n .container.sidebars-left > .sidebar:not(.container) .full-width,\n .container.sidebars-left > .sidebar:not(.container) .feature {\n grid-column-end: content-start;\n }\n .container.sidebars-left > .sidebar > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar;\n }\n .container.sidebars-left > .sidebar .contain > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar;\n }\n .container.sidebars-left > .content {\n grid-row: 1;\n }\n .container.sidebars-right {\n --graupl-columns-content-max-width: var(--graupl-container-sidebars-right-content-section-max-width, calc(var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) - var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))));\n grid-template-columns: [full-width-start] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [feature-start] var(--graupl-container-feature-section-width, minmax(var(--graupl-container-feature-section-min-width, 0rem), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [breakout-start] var(--graupl-container-breakout-section-width, minmax(var(--graupl-container-breakout-section-min-width, 0rem), var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)))) [content-start] var(--graupl-container-sidebars-right-content-section-width, min(var(--graupl-container-sidebars-right-content-section-min-width, calc(100% - var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * 2 - var(--graupl-container-feature-section-min-width, 0rem) * 2 - var(--graupl-container-breakout-section-min-width, 0rem) - var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) - var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))))), var(--graupl-container-sidebars-right-content-section-max-width, calc(var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) - var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2))))))) [content-end] var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) [breakout-end sidebar-start] var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [feature-end sidebar-end] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [full-width-end];\n }\n .container.sidebars-right > .sidebar {\n grid-row: 1/-1;\n grid-template: subgrid;\n }\n .container.sidebars-right > .sidebar:not(.container),\n .container.sidebars-right > .sidebar:not(.container) .container,\n .container.sidebars-right > .sidebar:not(.container) .breakout,\n .container.sidebars-right > .sidebar:not(.container) .full-width,\n .container.sidebars-right > .sidebar:not(.container) .feature {\n grid-column-start: content-end;\n }\n .container.sidebars-right > .sidebar > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar;\n }\n .container.sidebars-right > .sidebar .contain > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar;\n }\n .container.sidebars-right > .content {\n grid-row: 1;\n }\n }\n}\n@layer graupl.theme {\n .container {\n background-color: var(--graupl-container-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-container-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n }\n}","// @graupl/core container 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-container-sidebar-width | 26ch |\n// | --graupl-container-breakout-width | 4ch |\n// | --graupl-container-feature-width | 10ch |\n// | --graupl-container-content-max-width | var(--graupl-content-max-width) |\n// | --graupl-container-breakout-max-width | calc(var(--graupl-container-content-max-width) + var(--graupl-container-breakout-width)) |\n// | --graupl-container-feature-max-width | calc(var(--graupl-container-breakout-max-width) + var(--graupl-container-feature-width)) |\n// | --graupl-container-full-width-section-min-width | var(--graupl-spacer-5) |\n// | --graupl-container-full-width-section-max-width | 1fr |\n// | --graupl-container-feature-section-min-width | 0rem |\n// | --graupl-container-feature-section-max-width | calc((var(--graupl-container-feature-max-width) - var(--graupl-container-breakout-max-width)) / 2) |\n// | --graupl-container-breakout-section-min-width | 0rem |\n// | --graupl-container-breakout-section-max-width | calc((var(--graupl-container-breakout-max-width) - var(--graupl-container-content-max-width)) / 2) |\n// | --graupl-container-content-section-min-width | calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - (var(--graupl-container-breakout-section-min-width) * 2)) |\n// | --graupl-container-content-section-max-width | var(--graupl-container-content-max-width) |\n// | --graupl-container-full-width-section-width | minmax(var(--graupl-container-full-width-section-min-width), var(--graupl-container-full-width-section-max-width)) |\n// | --graupl-container-feature-section-width | minmax(var(--graupl-container-feature-section-min-width), var(--graupl-container-feature-section-max-width)) |\n// | --graupl-container-breakout-section-width | minmax(var(--graupl-container-breakout-section-min-width), var(--graupl-container-breakout-section-max-width)) |\n// | --graupl-container-content-section-width | min(var(--graupl-container-content-section-min-width), var(--graupl-container-content-section-max-width)) |\n// | --graupl-container-sidebar-left-section-width | max(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)) |\n// | --graupl-container-sidebar-right-section-width | max(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)) |\n// | --graupl-container-sidebars-breakout-section-width | var(--graupl-container-breakout-section-max-width) |\n// | --graupl-container-sidebars-content-section-min-width | calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - (var(--graupl-container-sidebars-breakout-section-width) * 2) - var(--graupl-container-sidebar-left-section-width) - var(--graupl-container-sidebar-right-section-width)) |\n// | --graupl-container-sidebars-content-section-max-width | calc(var(--graupl-container-content-section-max-width) - var(--graupl-container-sidebar-left-section-width) - var(--graupl-container-sidebar-right-section-width) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width))) |\n// | --graupl-container-sidebars-content-section-width | min(var(--graupl-container-sidebars-content-section-min-width), var(--graupl-container-sidebars-content-section-max-width)) |\n// | --graupl-container-sidebars-right-content-section-min-width | calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - var(--graupl-container-breakout-section-min-width) - var(--graupl-container-sidebars-breakout-section-width) - var(--graupl-container-sidebar-right-section-width)) |\n// | --graupl-container-sidebars-right-content-section-max-width | calc(var(--graupl-container-content-section-max-width) - var(--graupl-container-sidebar-right-section-width) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width))) |\n// | --graupl-container-sidebars-right-content-section-width | min(var(--graupl-container-sidebars-right-content-section-min-width), var(--graupl-container-sidebars-right-content-section-max-width)) |\n// | --graupl-container-sidebars-left-content-section-min-width | calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - var(--graupl-container-breakout-section-min-width) - var(--graupl-container-sidebars-breakout-section-width) - var(--graupl-container-sidebar-left-section-width)) |\n// | --graupl-container-sidebars-left-content-section-max-width | calc(var(--graupl-container-content-section-max-width) - var(--graupl-container-sidebar-left-section-width) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width))) |\n// | --graupl-container-sidebars-left-content-section-width | min(var(--graupl-container-sidebars-left-content-section-min-width), var(--graupl-container-sidebars-left-content-section-max-width)) |\n// | --graupl-container-background | var(--graupl-background) |\n// | --graupl-container-color | var(--graupl-color) |\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-container-sidebar-width\n$container-sidebar-width: var(\n --#{root-defaults.$prefix}container-sidebar-width,\n #{defaults.$container-sidebar-width}\n);\n\n// --graupl-container-breakout-width\n$container-breakout-width: var(\n --#{root-defaults.$prefix}container-breakout-width,\n #{defaults.$container-breakout-width}\n);\n\n// --graupl-container-feature-width\n$container-feature-width: var(\n --#{root-defaults.$prefix}container-feature-width,\n #{defaults.$container-feature-width}\n);\n\n// --graupl-container-content-max-width\n$container-content-max-width: var(\n --#{root-defaults.$prefix}container-content-max-width,\n #{root-variables.$content-max-width}\n);\n\n// --graupl-container-breakout-max-width\n$container-breakout-max-width: var(\n --#{root-defaults.$prefix}container-breakout-max-width,\n calc(#{$container-content-max-width} + #{$container-breakout-width})\n);\n\n// --graupl-container-feature-max-width\n$container-feature-max-width: var(\n --#{root-defaults.$prefix}container-feature-max-width,\n calc(#{$container-breakout-max-width} + #{$container-feature-width})\n);\n\n// --graupl-container-full-width-section-min-width\n$container-full-width-section-min-width: var(\n --#{root-defaults.$prefix}container-full-width-section-min-width,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-container-full-width-section-max-width\n$container-full-width-section-max-width: var(\n --#{root-defaults.$prefix}container-full-width-section-max-width,\n 1fr\n);\n\n// --graupl-container-feature-section-min-width\n$container-feature-section-min-width: var(\n --#{root-defaults.$prefix}container-feature-section-min-width,\n 0rem\n);\n\n// --graupl-container-feature-section-max-width\n$container-feature-section-max-width: var(\n --#{root-defaults.$prefix}container-feature-section-max-width,\n calc((#{$container-feature-max-width} - #{$container-breakout-max-width}) / 2)\n);\n\n// --graupl-container-breakout-section-min-width\n$container-breakout-section-min-width: var(\n --#{root-defaults.$prefix}container-breakout-section-min-width,\n 0rem\n);\n\n// --graupl-container-breakout-section-max-width\n$container-breakout-section-max-width: var(\n --#{root-defaults.$prefix}container-breakout-section-max-width,\n calc((#{$container-breakout-max-width} - #{$container-content-max-width}) / 2)\n);\n/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n// --graupl-container-content-section-min-width\n$container-content-section-min-width: var(\n --#{root-defaults.$prefix}container-content-section-min-width,\n calc(\n 100% - (#{$container-full-width-section-min-width} * 2) -\n (#{$container-feature-section-min-width} * 2) -\n (#{$container-breakout-section-min-width} * 2)\n )\n);\n/* stylelint-enable scss/operator-no-newline-after */\n// --graupl-container-content-section-max-width\n$container-content-section-max-width: var(\n --#{root-defaults.$prefix}container-content-section-max-width,\n #{$container-content-max-width}\n);\n\n// --graupl-container-full-width-section-width\n$container-full-width-section-width: var(\n --#{root-defaults.$prefix}container-full-width-section-width,\n minmax(\n #{$container-full-width-section-min-width},\n #{$container-full-width-section-max-width}\n )\n);\n\n// --graupl-container-feature-section-width\n$container-feature-section-width: var(\n --#{root-defaults.$prefix}container-feature-section-width,\n minmax(\n #{$container-feature-section-min-width},\n #{$container-feature-section-max-width}\n )\n);\n\n// --graupl-container-breakout-section-width\n$container-breakout-section-width: var(\n --#{root-defaults.$prefix}container-breakout-section-width,\n minmax(\n #{$container-breakout-section-min-width},\n #{$container-breakout-section-max-width}\n )\n);\n\n// --graupl-container-content-section-width\n$container-content-section-width: var(\n --#{root-defaults.$prefix}container-content-section-width,\n min(\n #{$container-content-section-min-width},\n #{$container-content-section-max-width}\n )\n);\n\n// --graupl-container-sidebar-left-section-width\n$container-sidebar-left-section-width: var(\n --#{root-defaults.$prefix}container-sidebar-left-section-width,\n max($container-sidebar-width, $container-feature-section-max-width)\n);\n\n// --graupl-container-sidebar-right-section-width\n$container-sidebar-right-section-width: var(\n --#{root-defaults.$prefix}container-sidebar-right-section-width,\n max($container-sidebar-width, $container-feature-section-max-width)\n);\n\n// --graupl-container-sidebars-breakout-section-width\n$container-sidebars-breakout-section-width: var(\n --#{root-defaults.$prefix}container-sidebars-breakout-section-width,\n #{$container-breakout-section-max-width}\n);\n/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n// --graupl-container-sidebars-content-section-min-width\n$container-sidebars-content-section-min-width: var(\n --#{root-defaults.$prefix}container-sidebars-content-section-min-width,\n calc(\n 100% - (#{$container-full-width-section-min-width} * 2) -\n (#{$container-feature-section-min-width} * 2) -\n (#{$container-sidebars-breakout-section-width} * 2) -\n #{$container-sidebar-left-section-width} -\n #{$container-sidebar-right-section-width}\n )\n);\n\n// --graupl-container-sidebars-content-section-max-width\n$container-sidebars-content-section-max-width: var(\n --#{root-defaults.$prefix}container-sidebars-content-section-max-width,\n calc(\n #{$container-content-section-max-width} -\n #{$container-sidebar-left-section-width} -\n #{$container-sidebar-right-section-width} +\n min($container-sidebar-width, $container-feature-section-max-width) +\n min($container-sidebar-width, $container-feature-section-max-width)\n )\n);\n\n// --graupl-container-sidebars-content-section-width\n$container-sidebars-content-section-width: var(\n --#{root-defaults.$prefix}container-sidebars-content-section-width,\n min(\n #{$container-sidebars-content-section-min-width},\n #{$container-sidebars-content-section-max-width}\n )\n);\n\n// --graupl-container-sidebars-right-content-section-min-width\n$container-sidebars-right-content-section-min-width: var(\n --#{root-defaults.$prefix}container-sidebars-right-content-section-min-width,\n calc(\n 100% - (#{$container-full-width-section-min-width} * 2) -\n (#{$container-feature-section-min-width} * 2) -\n #{$container-breakout-section-min-width} -\n #{$container-sidebars-breakout-section-width} -\n #{$container-sidebar-right-section-width}\n )\n);\n\n// --graupl-container-sidebars-right-content-section-max-width\n$container-sidebars-right-content-section-max-width: var(\n --#{root-defaults.$prefix}container-sidebars-right-content-section-max-width,\n calc(\n #{$container-content-section-max-width} -\n #{$container-sidebar-right-section-width} +\n min($container-sidebar-width, $container-feature-section-max-width)\n )\n);\n\n// --graupl-container-sidebars-right-content-section-width\n$container-sidebars-right-content-section-width: var(\n --#{root-defaults.$prefix}container-sidebars-right-content-section-width,\n min(\n $container-sidebars-right-content-section-min-width,\n $container-sidebars-right-content-section-max-width\n )\n);\n\n// --graupl-container-sidebars-left-content-section-min-width\n$container-sidebars-left-content-section-min-width: var(\n --#{root-defaults.$prefix}container-sidebars-left-content-section-min-width,\n calc(\n 100% - (#{$container-full-width-section-min-width} * 2) -\n (#{$container-feature-section-min-width} * 2) -\n #{$container-breakout-section-min-width} -\n #{$container-sidebars-breakout-section-width} -\n #{$container-sidebar-left-section-width}\n )\n);\n\n// --graupl-container-sidebars-left-content-section-max-width\n$container-sidebars-left-content-section-max-width: var(\n --#{root-defaults.$prefix}container-sidebars-left-content-section-max-width,\n calc(\n #{$container-content-section-max-width} -\n #{$container-sidebar-left-section-width} +\n min($container-sidebar-width, $container-feature-section-max-width)\n )\n);\n\n// --graupl-container-sidebars-left-content-section-width\n$container-sidebars-left-content-section-width: var(\n --#{root-defaults.$prefix}container-sidebars-left-content-section-width,\n min(\n $container-sidebars-left-content-section-min-width,\n $container-sidebars-left-content-section-max-width\n )\n);\n\n// --graupl-container-background\n$container-background: var(\n --#{root-defaults.$prefix}container-background,\n #{color.$background}\n);\n\n// --graupl-container-color\n$container-color: var(\n --#{root-defaults.$prefix}container-color,\n #{color.$color}\n);\n/* stylelint-enable scss/operator-no-newline-after */\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 container layout styles.\n//\n// This module provides the layout styles for the container component.\n//\n// The container component is a grid container that provides a layout for the main content of a page.\n// It is divided into four sections:\n// - Full-width: A full-width section that spans the entire width of the container.\n// - Feature: A feature section that is used for feature content.\n// - Breakout: A breakout section that is used for breakout content.\n// - Content: The main content section that contains all other content.\n//\n// Optionally, the container component can have sidebars, which divides the content section into five sections:\n// - Sidebar-left: A left sidebar section that is used for sidebar content.\n// - Sidebar-right: A right sidebar section that is used for sidebar content.\n// - Inner-content: A section that contains the main content of the page.\n// - Content-left: A section that contains the sidebar-left and inner-content sections.\n// - Content-right: A section that contains the inner-content and sidebar-right sections.\n//\n// The container layout is as follows:\n// | full-width | feature | breakout | content | breakout | feature | full-width |\n//\n// Nesting a container directly inside of another container will cause the\n// nested container to inherit the grid columns of the parent container.\n//\n// The following classes are generated by default:\n// - `.container`: The main container component.\n// - `.full-width`: A full-width container component.\n// - `.feature`: A feature container component.\n// - `.breakout`: A breakout container component.\n// - `.contain`: A utility class to contain child elements to the content section of the container grid.\n// - `.sidebars`: A utility class to enable two sidebars in the container.\n// - `.sidebars-left`: A utility class to enable a left sidebar in the container.\n// - `.sidebars-right`: A utility class to enable a right sidebar in the container.\n// - `.sidebar-left`: A left sidebar container component used directly inside of a container with sidebars.\n// - `.sidebar-right`: A right sidebar container component used directly inside of a container with sidebars.\n// - `.sidebar`: A sidebar container component used directly inside of a container with sidebars.\n// - `.content`: A content container component used directly inside of a container with sidebars.\n//\n// The following custom properties can be used to customize the container component:\n// | Property | Description | Default Value |\n// | ------------------------------------------------------------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | `--graupl-container-sidebar-width` | The width of the sidebar sections. | `26ch` |\n// | `--graupl-container-breakout-width` | The width that the breakout section will extend beyond the content. | `4ch` |\n// | `--graupl-container-feature-width` | The width that the feature section will extend beyond the breakout. | `10ch` |\n// | `--graupl-container-content-max-width` | The maximum width of the content section. | `var(--graupl-content-max-width)` |\n// | `--graupl-container-breakout-max-width` | The maximum width of the breakout section. | `calc(var(--graupl-container-content-max-width) + var(--graupl-container-breakout-width))` |\n// | `--graupl-container-feature-max-width` | The maximum width of the feature section. | `calc(var(--graupl-container-breakout-max-width) + var(--graupl-container-feature-width))` |\n// | `--graupl-container-full-width-section-min-width` | The minimum width of one side of the full-width section. | `var(--graupl-spacer-5)` |\n// | `--graupl-container-full-width-section-max-width` | The maximum width of one side of the full-width section. | `1fr` |\n// | `--graupl-container-feature-section-min-width` | The minimum width of one side of the feature section. | `0rem` |\n// | `--graupl-container-feature-section-max-width` | The maximum width of one side of the feature section. | `calc((var(--graupl-container-feature-max-width) - var(--graupl-container-breakout-max-width)) / 2)` |\n// | `--graupl-container-breakout-section-min-width` | The minimum width of one side of the breakout section. | `0rem` |\n// | `--graupl-container-breakout-section-max-width` | The maximum width of one side of the breakout section. | `calc((var(--graupl-container-breakout-max-width) - var(--graupl-container-content-max-width)) / 2)` |\n// | `--graupl-container-content-section-min-width` | The minimum width of the content section. | `calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - (var(--graupl-container-breakout-section-min-width) * 2))` |\n// | `--graupl-container-content-section-max-width` | The maximum width of the content section. | `var(--graupl-container-content-max-width)` |\n// | `--graupl-container-full-width-section-width` | The calculated minmax width of the full-width section. | `minmax(var(--graupl-container-full-width-section-min-width), var(--graupl-container-full-width-section-max-width))` |\n// | `--graupl-container-feature-section-width` | The calculated minmax width of the feature section. | `minmax(var(--graupl-container-feature-section-min-width), var(--graupl-container-feature-section-max-width))` |\n// | `--graupl-container-breakout-section-width` | The calculated minmax width of the breakout section. | `minmax(var(--graupl-container-breakout-section-min-width), var(--graupl-container-breakout-section-max-width))` |\n// | `--graupl-container-content-section-width` | The calculated width of the content section. | `min(var(--graupl-container-content-section-min-width), var(--graupl-container-content-section-max-width))` |\n// | `--graupl-container-sidebar-left-section-width` | The width of the left sidebar section. | `max(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width))` |\n// | `--graupl-container-sidebar-right-section-width` | The width of the right sidebar section. | `max(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width))` |\n// | `--graupl-container-sidebars-breakout-section-width` | The breakout width when both sidebars are enabled. | `var(--graupl-container-breakout-section-max-width)` |\n// | `--graupl-container-sidebars-content-section-min-width` | The minimum width of the content section when both sidebars are enabled. | `calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - (var(--graupl-container-sidebars-breakout-section-width) * 2) - var(--graupl-container-sidebar-left-section-width) - var(--graupl-container-sidebar-right-section-width))` |\n// | `--graupl-container-sidebars-content-section-max-width` | The maximum width of the content section when both sidebars are enabled. | `calc(var(--graupl-container-content-section-max-width) - var(--graupl-container-sidebar-left-section-width) - var(--graupl-container-sidebar-right-section-width) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)))` |\n// | `--graupl-container-sidebars-content-section-width` | The calculated width of the content section when both sidebars are enabled. | `min(var(--graupl-container-sidebars-content-section-min-width), var(--graupl-container-sidebars-content-section-max-width))` |\n// | `--graupl-container-sidebars-right-content-section-min-width` | The minimum width of the content section when only the right sidebar is enabled. | `calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - var(--graupl-container-breakout-section-min-width) - var(--graupl-container-sidebars-breakout-section-width) - var(--graupl-container-sidebar-right-section-width))` |\n// | `--graupl-container-sidebars-right-content-section-max-width` | The maximum width of the content section when only the right sidebar is enabled. | `calc(var(--graupl-container-content-section-max-width) - var(--graupl-container-sidebar-right-section-width) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)))` |\n// | `--graupl-container-sidebars-right-content-section-width` | The calculated width of the content section when only the right sidebar is enabled. | `min(var(--graupl-container-sidebars-right-content-section-min-width), var(--graupl-container-sidebars-right-content-section-max-width))` |\n// | `--graupl-container-sidebars-left-content-section-min-width` | The minimum width of the content section when only the left sidebar is enabled. | `calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - var(--graupl-container-breakout-section-min-width) - var(--graupl-container-sidebars-breakout-section-width) - var(--graupl-container-sidebar-left-section-width))` |\n// | `--graupl-container-sidebars-left-content-section-max-width` | The maximum width of the content section when only the left sidebar is enabled. | `calc(var(--graupl-container-content-section-max-width) - var(--graupl-container-sidebar-left-section-width) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)))` |\n// | `--graupl-container-sidebars-left-content-section-width` | The calculated width of the content section when only the left sidebar is enabled. | `min(var(--graupl-container-sidebars-left-content-section-min-width), var(--graupl-container-sidebars-left-content-section-max-width))` |\n// | `--graupl-container-background` | The background of the container component. | `var(--graupl-background)` |\n// | `--graupl-container-color` | The text color of the container component. | `var(--graupl-color)` |\n//\n// The following sass variables can be used to customize the generation of the container component:\n// | Variable | Description | Default Value |\n// | -------------------------------------- | ---------------------------------------------------------------------------- | ------------------------- |\n// | `$selector-base` | The selector base for the component. | `\".\"` |\n// | `$modifier-selector-base` | The selector base for component modifiers. | `\".\"` |\n// | `$generate-base-theme-map` | Flag to generate the base theme map. | `true` |\n// | `$themeable` | Flag to generate theme modifiers. | `false` |\n// | `$force-container-chaining` | A flag to force container chaining in all containers. | `false` |\n// | `$generate-forced-container-selectors` | A flag to generate a set of default selectors for forced container chaining. | `true` |\n// | `$show-warnings` | A flag to show any built-in warnings that may be output during compiling. | `true` |\n// | `$container-selector-base` | The base selector for the container component. | `\".\"` |\n// | `$container-selector` | The selector for the container component. | `\"container\"` |\n// | `$container-theme-selector-base` | The selector base for container theme modifiers. | `\".\"` |\n// | `$container-theme-selector-prefix` | The container theme modifier selector prefix. | `\"\"` |\n// | `$container-breakout-selector-base` | The base selector for the breakout container component. | `\".\"` |\n// | `$container-breakout-selector` | The selector for the breakout container component. | `\"breakout\"` |\n// | `$container-feature-selector-base` | The base selector for the feature container component. | `\".\"` |\n// | `$container-feature-selector` | The selector for the feature container component. | `\"feature\"` |\n// | `$container-full-width-selector-base` | The base selector for the full-width container component. | `\".\"` |\n// | `$container-full-width-selector` | The selector for the full-width container component. | `\"full-width\"` |\n// | `$container-contain-selector-base` | The base selector for the contain utility class. | `\".\"` |\n// | `$container-contain-selector` | The selector for the contain utility class. | `\"contain\"` |\n// | `$container-sidebars-selector-base` | The base selector for the sidebars utility class. | `\".\"` |\n// | `$container-sidebars-selector` | The selector for the sidebars utility class. | `\"sidebars\"` |\n// | `$container-content-selector-base` | The base selector for the content container component. | `\".\"` |\n// | `$container-content-selector` | The selector for the content container component. | `\"content\"` |\n// | `$container-sidebar-selector-base` | The base selector for the sidebar container component. | `\".\"` |\n// | `$container-sidebar-selector` | The selector for the sidebar container component. | `\"sidebar\"` |\n// | `$container-left-selector-suffix` | The suffix for the left sidebar selector. | `\"-left\"` |\n// | `$container-right-selector-suffix` | The suffix for the right sidebar selector. | `\"-right\"` |\n// | `$container-inner-selector-prefix` | The prefix for the inner content selector. | `\"inner-\"` |\n// | `$container-breakout-width` | The width of the breakout section will extend from the content section. | `4ch` |\n// | `$container-feature-width` | The width of the feature section will extend from the breakout section. | `10ch` |\n// | `$container-sidebar-width` | The width of the sidebar sections. | `26ch` |\n// | `$forced-container-selectors` | Additional selectors included in forced container chaining. | `()` |\n// | `$container-theme-mappings` | Map of properties/shades for container themes. | `()` |\n// | `$container-theme-map` | Expanded map of properties/colors/shades. | `()` |\n//\n// ## What is container chaining?\n//\n// Container chaining is a structural setup in the DOM in which you make sure that if you have nested containers or container-level elements (breakouts, features, etc.), you never allow them to be contained in anything other than a container.\n//\n// What do I mean by this?\n//\n// If you have to following setup in your DOM:\n//\n// ```\n// <div class=\"container\">\n// <p>Some content here...</p>\n// <section>\n// <p>Some content here...</p>\n// <div class=\"breakout\">\n// <p>Some content here that I would like to breakout...</p>\n// </div>\n// <p>Some content here...</p>\n// </section>\n// </div>\n// ```\n//\n// To achieve a breakout of the content inside of the <section>, you need to make sure the section is also a container, otherwise the breakout class will have no effect.\n//\n// ```\n// <div class=\"container\">\n// <p>Some content here...</p>\n// <section class=\"container\">\n// <p>Some content here...</p>\n// <div class=\"breakout\">\n// <p>Some content here that I would like to breakout...</p>\n// </div>\n// <p>Some content here...</p>\n// </section>\n// </div>\n// ```\n//\n// There _is_ a feature flag (`$force-container-chaining`) which automatically set up container chaining for you.\n//\n// This works by selecting all elements between a parent and child container and making them inherit the parent's layout.\n//\n// Because you have control over how this is limited, it can result in using an unrestricted :has() selector, which can be slow.\n//\n// @example\n// <div class=\"container\">\n// Regular content\n// <div class=\"full-width\">\n// Full-width content\n// </div>\n// <div class=\"feature\">\n// Feature content\n// </div>\n// <div class=\"breakout\">\n// Breakout content\n// </div>\n// </div>\n//\n// @example\n// <div class=\"container\">\n// Regular content\n// <div class=\"feature contain\">\n// Contained feature content\n// </div>\n// </div>\n//\n// @example\n// <div class=\"container sidebars-left\">\n// <div class=\"sidebar\">\n// Left sidebar content\n// </div>\n// <div class=\"content\">\n// Content right content\n// </div>\n// </div>\n//\n// @example\n// <div class=\"container sidebars-right\">\n// <div class=\"content\">\n// Content left content\n// </div>\n// <div class=\"sidebar\">\n// Right sidebar content\n// </div>\n// </div>\n//\n// @example\n// <div class=\"container sidebars\">\n// <div class=\"sidebar-left\">\n// Left sidebar content\n// </div>\n// <div class=\"content\">\n// Inner content content\n// </div>\n// <div class=\"sidebar-right\">\n// Right sidebar content\n// </div>\n// </div>\n\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/layer\" as *;\n@use \"../../mixins/screen\";\n@use \"../../mixins/theme\";\n@use \"defaults\";\n@use \"variables\" as *;\n\n@include layer(layout) {\n // .container\n #{defaults.$container-selector-base}#{defaults.$container-selector} {\n display: grid;\n grid-template-columns:\n [full-width-start] $container-full-width-section-width\n [feature-start] $container-feature-section-width\n [breakout-start] $container-breakout-section-width\n [content-start] $container-content-section-width\n [content-end]\n $container-breakout-section-width [breakout-end]\n $container-feature-section-width [feature-end]\n $container-full-width-section-width [full-width-end];\n container-type: inline-size;\n overflow-wrap: break-word;\n\n // Container components should span the full width of their parent container\n // and inherit the grid columns.\n //\n // > .container\n > #{defaults.$container-selector-base}#{defaults.$container-selector} {\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n container-type: normal;\n }\n\n // Everything in the container that isn't a container component should\n // be in the content section.\n //\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: content;\n }\n\n // Handle force chaining.\n //\n // This works by selecting all elements between a parent and child container\n // and making them inherit the parent's layout.\n //\n // Because you have control over how this is limited, it can result in using\n // an unrestricted :has() selector, which can be slow.\n @if defaults.$force-container-chaining {\n @if defaults.$show-warnings and root-defaults.$show-warnings {\n @warn (\"You have enabled automatic container chaining. This can result in an unrestricted :has() selector if you customize $forced-container-selectors to be too broad, which can be slow. Make sure you know what you're doing with this.\");\n }\n\n // .container :is(article,aside,div,section):not(.container):has(&)\n #{defaults.$container-selector-base}#{defaults.$container-selector}\n :is(#{defaults.$forced-container-selectors}):not(\n #{defaults.$container-selector-base}#{defaults.$container-selector}\n ):has(&) {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n container-type: normal;\n\n // .container\n #{defaults.$container-selector-base}#{defaults.$container-selector} {\n grid-column: 1/-1;\n container-type: normal;\n\n // &:not(.sidebars, .sidebars-left, .sidebars-right)\n &:not(\n #{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector},\n #{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-left-selector-suffix},\n #{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-right-selector-suffix}\n ) {\n grid-template-columns: subgrid;\n }\n }\n }\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the content section.\n //\n // > .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n display: grid;\n grid-template-columns: subgrid;\n\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: content;\n }\n }\n\n // Set up the container components to span the appropriate grid columns.\n //\n // .breakout\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector} {\n grid-column: breakout;\n }\n\n // .feature\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {\n grid-column: feature;\n }\n\n // .full-width\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector} {\n grid-column: full-width;\n }\n\n // &.sidebars\n &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector} {\n // .sidebar-left\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix} {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n\n // > :not(.container, .breakout, .feature, .full-width, .sidebar-left)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix}\n ) {\n grid-column: content;\n }\n }\n\n // .sidebar-right\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix} {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n\n // > :not(.container, .breakout, .feature, .full-width, .sidebar-right)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}\n ) {\n grid-column: content;\n }\n }\n\n // .content\n #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n\n // > :not(.container, .breakout, .feature, .full-width, .sidebar-left, .sidebar-right)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}\n ) {\n grid-column: content;\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the content section.\n //\n // .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n // > :not(.container, .breakout, .feature, .full-width, .sidebar-left, .sidebar-right)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}\n ) {\n grid-column: content;\n }\n }\n }\n }\n\n // &.sidebars-left\n &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-left-selector-suffix} {\n // .sidebar\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector} {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n\n // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n ) {\n grid-column: content;\n }\n }\n\n // .content\n #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n\n // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n ) {\n grid-column: content;\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the content section.\n //\n // .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n ) {\n grid-column: content;\n }\n }\n }\n }\n\n // &.sidebars-right\n &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-right-selector-suffix} {\n // .sidebar\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector} {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n\n // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n ) {\n grid-column: content;\n }\n }\n\n // .content\n #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n\n // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n ) {\n grid-column: content;\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the content section.\n //\n // .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n ) {\n grid-column: content;\n }\n }\n }\n }\n\n @include screen.trigger(allow-sidebars) {\n // &.sidebars\n &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector} {\n --#{root-defaults.$prefix}columns-content-max-width: #{$container-sidebars-content-section-max-width};\n\n grid-template-columns:\n [full-width-start] $container-full-width-section-width\n [sidebar-left-start feature-start] $container-sidebar-left-section-width\n [sidebar-left-end breakout-start] $container-sidebars-breakout-section-width\n [content-start] $container-sidebars-content-section-width\n [content-end] $container-sidebars-breakout-section-width\n [breakout-end sidebar-right-start] $container-sidebar-right-section-width\n [feature-end sidebar-right-end] $container-full-width-section-width\n [full-width-end];\n\n // > .sidebar-left\n > #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix} {\n grid-row: 1 / -1;\n grid-template: subgrid;\n\n // Make sure other container classes do not break the layout inside of the sidebar.\n //\n // &:not(.container)\n &:not(\n #{defaults.$container-selector-base}#{defaults.$container-selector}\n ) {\n // &, .container, .breakout, .feature, .full-width\n &,\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {\n grid-column-end: content-start;\n }\n }\n\n // Lock content to the sidebar-left section.\n //\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar-left;\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the sidebar-left section.\n //\n // > .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar-left;\n }\n }\n }\n\n // > .sidebar-right\n > #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix} {\n grid-row: 1 / -1;\n grid-template: subgrid;\n\n // Make sure other container classes do not break the layout inside of the sidebar.\n //\n // &:not(.container)\n &:not(\n #{defaults.$container-selector-base}#{defaults.$container-selector}\n ) {\n // &, .container, .breakout, .feature, .full-width\n &,\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {\n grid-column-start: content-end;\n }\n }\n\n // Lock content to the sidebar-right section.\n //\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar-right;\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the sidebar-right section.\n //\n // > .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar-right;\n }\n }\n }\n\n // > .content\n > #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n grid-row: 1;\n }\n }\n\n // &.sidebars-left\n &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-left-selector-suffix} {\n --#{root-defaults.$prefix}columns-content-max-width: #{$container-sidebars-left-content-section-max-width};\n\n grid-template-columns:\n [full-width-start] $container-full-width-section-width\n [sidebar-start feature-start] $container-sidebar-left-section-width\n [sidebar-end breakout-start] $container-sidebars-breakout-section-width\n [content-start] $container-sidebars-left-content-section-width\n [content-end] $container-breakout-section-width\n [breakout-end] $container-feature-section-width\n [feature-end] $container-full-width-section-width\n [full-width-end];\n\n // > .sidebar\n > #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector} {\n grid-row: 1 / -1;\n grid-template: subgrid;\n\n // Make sure other container classes do not break the layout inside of the sidebar.\n //\n // &:not(.container)\n &:not(\n #{defaults.$container-selector-base}#{defaults.$container-selector}\n ) {\n // &, .container, .breakout, .feature, .full-width\n &,\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {\n grid-column-end: content-start;\n }\n }\n\n // Lock content to the sidebar section.\n //\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar;\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the sidebar section.\n //\n // > .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar;\n }\n }\n }\n\n // > .content\n > #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n grid-row: 1;\n }\n }\n\n // &.sidebars-right\n &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-right-selector-suffix} {\n --#{root-defaults.$prefix}columns-content-max-width: #{$container-sidebars-right-content-section-max-width};\n\n grid-template-columns:\n [full-width-start] $container-full-width-section-width\n [feature-start] $container-feature-section-width\n [breakout-start] $container-breakout-section-width\n [content-start] $container-sidebars-right-content-section-width\n [content-end] $container-sidebars-breakout-section-width\n [breakout-end sidebar-start] $container-sidebar-right-section-width\n [feature-end sidebar-end] $container-full-width-section-width\n [full-width-end];\n\n // > .sidebar\n > #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector} {\n grid-row: 1 / -1;\n grid-template: subgrid;\n\n // Make sure other container classes do not break the layout inside of the sidebar.\n //\n // &:not(.container)\n &:not(\n #{defaults.$container-selector-base}#{defaults.$container-selector}\n ) {\n // &, .container, .breakout, .feature, .full-width\n &,\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {\n grid-column-start: content-end;\n }\n }\n\n // Lock content to the sidebar section.\n //\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar;\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the sidebar section.\n //\n // > .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar;\n }\n }\n }\n\n // > .content\n > #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n grid-row: 1;\n }\n }\n }\n }\n}\n\n@include layer(theme) {\n // .container\n #{defaults.$container-selector-base}#{defaults.$container-selector} {\n background-color: $container-background;\n color: $container-color;\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$container-theme-map,\n defaults.$container-theme-selector-base,\n defaults.$container-theme-selector-prefix,\n \"container-\"\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"],"names":[]}
1
+ {"version":3,"sourceRoot":null,"mappings":"AESI,qBCiNF,+qGAkBE,2FAUA,+EAoDA,+DAKE,wFAaF,0CAKA,wCAKA,8CAOE,uHAOE,oHAYF,wHAOE,sHAYF,kHAOE,iPAkCF,uHAOE,+GAYF,uHAOE,mNAgCF,wHAOE,gHAYF,wHAOE,qNCleN,kCDigBI,44SAcE,sEAWI,kUAYF,sMA2BF,uEAWI,uUAYF,yMA2BF,wCAMF,8nNAcE,sEAWI,kUAYF,iMA2BF,6CAMF,uoNAcE,uEAWI,uUAYF,mMA2BF,gDDpwBJ,oBC8wBF","sources":["dist/css/layout/container.css","Users/nickdjm/Development/contrib/graupl/graupl/packages/core/src/scss/layout/container/_variables.scss","Users/nickdjm/Development/contrib/graupl/graupl/packages/core/src/scss/mixins/_layer.scss","Users/nickdjm/Development/contrib/graupl/graupl/packages/core/src/scss/layout/container/_index.scss","Users/nickdjm/Development/contrib/graupl/graupl/packages/core/src/scss/mixins/_screen.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/* 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 .container {\n display: grid;\n grid-template-columns: [full-width-start] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [feature-start] var(--graupl-container-feature-section-width, minmax(var(--graupl-container-feature-section-min-width, 0rem), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [breakout-start] var(--graupl-container-breakout-section-width, minmax(var(--graupl-container-breakout-section-min-width, 0rem), var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)))) [content-start] var(--graupl-container-content-section-width, min(var(--graupl-container-content-section-min-width, calc(100% - var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * 2 - var(--graupl-container-feature-section-min-width, 0rem) * 2 - var(--graupl-container-breakout-section-min-width, 0rem) * 2)), var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))))) [content-end] var(--graupl-container-breakout-section-width, minmax(var(--graupl-container-breakout-section-min-width, 0rem), var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)))) [breakout-end] var(--graupl-container-feature-section-width, minmax(var(--graupl-container-feature-section-min-width, 0rem), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [feature-end] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [full-width-end];\n container-type: inline-size;\n overflow-wrap: break-word;\n }\n .container > .container {\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n container-type: normal;\n }\n .container > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: content;\n }\n .container .contain {\n display: grid;\n grid-template-columns: subgrid;\n }\n .container .contain > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: content;\n }\n .container .breakout {\n grid-column: breakout;\n }\n .container .feature {\n grid-column: feature;\n }\n .container .full-width {\n grid-column: full-width;\n }\n .container.sidebars .sidebar-left {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n }\n .container.sidebars .sidebar-left > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar-left) {\n grid-column: content;\n }\n .container.sidebars .sidebar-right {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n }\n .container.sidebars .sidebar-right > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar-right) {\n grid-column: content;\n }\n .container.sidebars .content {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n }\n .container.sidebars .content > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar-left,\n .sidebar-right) {\n grid-column: content;\n }\n .container.sidebars .content .contain > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar-left,\n .sidebar-right) {\n grid-column: content;\n }\n .container.sidebars-left .sidebar {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n }\n .container.sidebars-left .sidebar > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar) {\n grid-column: content;\n }\n .container.sidebars-left .content {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n }\n .container.sidebars-left .content > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar) {\n grid-column: content;\n }\n .container.sidebars-left .content .contain > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar) {\n grid-column: content;\n }\n .container.sidebars-right .sidebar {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n }\n .container.sidebars-right .sidebar > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar) {\n grid-column: content;\n }\n .container.sidebars-right .content {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n }\n .container.sidebars-right .content > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar) {\n grid-column: content;\n }\n .container.sidebars-right .content .contain > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar) {\n grid-column: content;\n }\n @media screen and (1024px <= width) {\n .container.sidebars {\n --graupl-columns-content-max-width: var(--graupl-container-sidebars-content-section-max-width, calc(var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) - var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) - var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))));\n grid-template-columns: [full-width-start] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [sidebar-left-start feature-start] var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [sidebar-left-end breakout-start] var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) [content-start] var(--graupl-container-sidebars-content-section-width, min(var(--graupl-container-sidebars-content-section-min-width, calc(100% - var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * 2 - var(--graupl-container-feature-section-min-width, 0rem) * 2 - var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) * 2 - var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) - var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))))), var(--graupl-container-sidebars-content-section-max-width, calc(var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) - var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) - var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2))))))) [content-end] var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) [breakout-end sidebar-right-start] var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [feature-end sidebar-right-end] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [full-width-end];\n }\n .container.sidebars > .sidebar-left {\n grid-row: 1/-1;\n grid-template: subgrid;\n }\n .container.sidebars > .sidebar-left:not(.container),\n .container.sidebars > .sidebar-left:not(.container) .container,\n .container.sidebars > .sidebar-left:not(.container) .breakout,\n .container.sidebars > .sidebar-left:not(.container) .full-width,\n .container.sidebars > .sidebar-left:not(.container) .feature {\n grid-column-end: content-start;\n }\n .container.sidebars > .sidebar-left > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar-left;\n }\n .container.sidebars > .sidebar-left .contain > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar-left;\n }\n .container.sidebars > .sidebar-right {\n grid-row: 1/-1;\n grid-template: subgrid;\n }\n .container.sidebars > .sidebar-right:not(.container),\n .container.sidebars > .sidebar-right:not(.container) .container,\n .container.sidebars > .sidebar-right:not(.container) .breakout,\n .container.sidebars > .sidebar-right:not(.container) .full-width,\n .container.sidebars > .sidebar-right:not(.container) .feature {\n grid-column-start: content-end;\n }\n .container.sidebars > .sidebar-right > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar-right;\n }\n .container.sidebars > .sidebar-right .contain > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar-right;\n }\n .container.sidebars > .content {\n grid-row: 1;\n }\n .container.sidebars-left {\n --graupl-columns-content-max-width: var(--graupl-container-sidebars-left-content-section-max-width, calc(var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) - var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))));\n grid-template-columns: [full-width-start] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [sidebar-start feature-start] var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [sidebar-end breakout-start] var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) [content-start] var(--graupl-container-sidebars-left-content-section-width, min(var(--graupl-container-sidebars-left-content-section-min-width, calc(100% - var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * 2 - var(--graupl-container-feature-section-min-width, 0rem) * 2 - var(--graupl-container-breakout-section-min-width, 0rem) - var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) - var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))))), var(--graupl-container-sidebars-left-content-section-max-width, calc(var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) - var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2))))))) [content-end] var(--graupl-container-breakout-section-width, minmax(var(--graupl-container-breakout-section-min-width, 0rem), var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)))) [breakout-end] var(--graupl-container-feature-section-width, minmax(var(--graupl-container-feature-section-min-width, 0rem), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [feature-end] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [full-width-end];\n }\n .container.sidebars-left > .sidebar {\n grid-row: 1/-1;\n grid-template: subgrid;\n }\n .container.sidebars-left > .sidebar:not(.container),\n .container.sidebars-left > .sidebar:not(.container) .container,\n .container.sidebars-left > .sidebar:not(.container) .breakout,\n .container.sidebars-left > .sidebar:not(.container) .full-width,\n .container.sidebars-left > .sidebar:not(.container) .feature {\n grid-column-end: content-start;\n }\n .container.sidebars-left > .sidebar > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar;\n }\n .container.sidebars-left > .sidebar .contain > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar;\n }\n .container.sidebars-left > .content {\n grid-row: 1;\n }\n .container.sidebars-right {\n --graupl-columns-content-max-width: var(--graupl-container-sidebars-right-content-section-max-width, calc(var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) - var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))));\n grid-template-columns: [full-width-start] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [feature-start] var(--graupl-container-feature-section-width, minmax(var(--graupl-container-feature-section-min-width, 0rem), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [breakout-start] var(--graupl-container-breakout-section-width, minmax(var(--graupl-container-breakout-section-min-width, 0rem), var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)))) [content-start] var(--graupl-container-sidebars-right-content-section-width, min(var(--graupl-container-sidebars-right-content-section-min-width, calc(100% - var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * 2 - var(--graupl-container-feature-section-min-width, 0rem) * 2 - var(--graupl-container-breakout-section-min-width, 0rem) - var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) - var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))))), var(--graupl-container-sidebars-right-content-section-max-width, calc(var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) - var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2))))))) [content-end] var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) [breakout-end sidebar-start] var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [feature-end sidebar-end] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [full-width-end];\n }\n .container.sidebars-right > .sidebar {\n grid-row: 1/-1;\n grid-template: subgrid;\n }\n .container.sidebars-right > .sidebar:not(.container),\n .container.sidebars-right > .sidebar:not(.container) .container,\n .container.sidebars-right > .sidebar:not(.container) .breakout,\n .container.sidebars-right > .sidebar:not(.container) .full-width,\n .container.sidebars-right > .sidebar:not(.container) .feature {\n grid-column-start: content-end;\n }\n .container.sidebars-right > .sidebar > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar;\n }\n .container.sidebars-right > .sidebar .contain > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar;\n }\n .container.sidebars-right > .content {\n grid-row: 1;\n }\n }\n}\n@layer graupl.theme {\n .container {\n background: var(--graupl-container-background);\n color: var(--graupl-container-color);\n }\n}","// @graupl/core container 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-container-sidebar-width | 26ch |\n// | --graupl-container-breakout-width | 4ch |\n// | --graupl-container-feature-width | 10ch |\n// | --graupl-container-content-max-width | var(--graupl-content-max-width) |\n// | --graupl-container-breakout-max-width | calc(var(--graupl-container-content-max-width) + var(--graupl-container-breakout-width)) |\n// | --graupl-container-feature-max-width | calc(var(--graupl-container-breakout-max-width) + var(--graupl-container-feature-width)) |\n// | --graupl-container-full-width-section-min-width | var(--graupl-spacer-5) |\n// | --graupl-container-full-width-section-max-width | 1fr |\n// | --graupl-container-feature-section-min-width | 0rem |\n// | --graupl-container-feature-section-max-width | calc((var(--graupl-container-feature-max-width) - var(--graupl-container-breakout-max-width)) / 2) |\n// | --graupl-container-breakout-section-min-width | 0rem |\n// | --graupl-container-breakout-section-max-width | calc((var(--graupl-container-breakout-max-width) - var(--graupl-container-content-max-width)) / 2) |\n// | --graupl-container-content-section-min-width | calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - (var(--graupl-container-breakout-section-min-width) * 2)) |\n// | --graupl-container-content-section-max-width | var(--graupl-container-content-max-width) |\n// | --graupl-container-full-width-section-width | minmax(var(--graupl-container-full-width-section-min-width), var(--graupl-container-full-width-section-max-width)) |\n// | --graupl-container-feature-section-width | minmax(var(--graupl-container-feature-section-min-width), var(--graupl-container-feature-section-max-width)) |\n// | --graupl-container-breakout-section-width | minmax(var(--graupl-container-breakout-section-min-width), var(--graupl-container-breakout-section-max-width)) |\n// | --graupl-container-content-section-width | min(var(--graupl-container-content-section-min-width), var(--graupl-container-content-section-max-width)) |\n// | --graupl-container-sidebar-left-section-width | max(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)) |\n// | --graupl-container-sidebar-right-section-width | max(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)) |\n// | --graupl-container-sidebars-breakout-section-width | var(--graupl-container-breakout-section-max-width) |\n// | --graupl-container-sidebars-content-section-min-width | calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - (var(--graupl-container-sidebars-breakout-section-width) * 2) - var(--graupl-container-sidebar-left-section-width) - var(--graupl-container-sidebar-right-section-width)) |\n// | --graupl-container-sidebars-content-section-max-width | calc(var(--graupl-container-content-section-max-width) - var(--graupl-container-sidebar-left-section-width) - var(--graupl-container-sidebar-right-section-width) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width))) |\n// | --graupl-container-sidebars-content-section-width | min(var(--graupl-container-sidebars-content-section-min-width), var(--graupl-container-sidebars-content-section-max-width)) |\n// | --graupl-container-sidebars-right-content-section-min-width | calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - var(--graupl-container-breakout-section-min-width) - var(--graupl-container-sidebars-breakout-section-width) - var(--graupl-container-sidebar-right-section-width)) |\n// | --graupl-container-sidebars-right-content-section-max-width | calc(var(--graupl-container-content-section-max-width) - var(--graupl-container-sidebar-right-section-width) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width))) |\n// | --graupl-container-sidebars-right-content-section-width | min(var(--graupl-container-sidebars-right-content-section-min-width), var(--graupl-container-sidebars-right-content-section-max-width)) |\n// | --graupl-container-sidebars-left-content-section-min-width | calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - var(--graupl-container-breakout-section-min-width) - var(--graupl-container-sidebars-breakout-section-width) - var(--graupl-container-sidebar-left-section-width)) |\n// | --graupl-container-sidebars-left-content-section-max-width | calc(var(--graupl-container-content-section-max-width) - var(--graupl-container-sidebar-left-section-width) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width))) |\n// | --graupl-container-sidebars-left-content-section-width | min(var(--graupl-container-sidebars-left-content-section-min-width), var(--graupl-container-sidebars-left-content-section-max-width)) |\n// | --graupl-container-background | null |\n// | --graupl-container-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-container-sidebar-width\n$container-sidebar-width: var(\n --#{root-defaults.$prefix}container-sidebar-width,\n #{defaults.$container-sidebar-width}\n);\n\n// --graupl-container-breakout-width\n$container-breakout-width: var(\n --#{root-defaults.$prefix}container-breakout-width,\n #{defaults.$container-breakout-width}\n);\n\n// --graupl-container-feature-width\n$container-feature-width: var(\n --#{root-defaults.$prefix}container-feature-width,\n #{defaults.$container-feature-width}\n);\n\n// --graupl-container-content-max-width\n$container-content-max-width: var(\n --#{root-defaults.$prefix}container-content-max-width,\n #{root-variables.$content-max-width}\n);\n\n// --graupl-container-breakout-max-width\n$container-breakout-max-width: var(\n --#{root-defaults.$prefix}container-breakout-max-width,\n calc(#{$container-content-max-width} + #{$container-breakout-width})\n);\n\n// --graupl-container-feature-max-width\n$container-feature-max-width: var(\n --#{root-defaults.$prefix}container-feature-max-width,\n calc(#{$container-breakout-max-width} + #{$container-feature-width})\n);\n\n// --graupl-container-full-width-section-min-width\n$container-full-width-section-min-width: var(\n --#{root-defaults.$prefix}container-full-width-section-min-width,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-container-full-width-section-max-width\n$container-full-width-section-max-width: var(\n --#{root-defaults.$prefix}container-full-width-section-max-width,\n 1fr\n);\n\n// --graupl-container-feature-section-min-width\n$container-feature-section-min-width: var(\n --#{root-defaults.$prefix}container-feature-section-min-width,\n 0rem\n);\n\n// --graupl-container-feature-section-max-width\n$container-feature-section-max-width: var(\n --#{root-defaults.$prefix}container-feature-section-max-width,\n calc((#{$container-feature-max-width} - #{$container-breakout-max-width}) / 2)\n);\n\n// --graupl-container-breakout-section-min-width\n$container-breakout-section-min-width: var(\n --#{root-defaults.$prefix}container-breakout-section-min-width,\n 0rem\n);\n\n// --graupl-container-breakout-section-max-width\n$container-breakout-section-max-width: var(\n --#{root-defaults.$prefix}container-breakout-section-max-width,\n calc((#{$container-breakout-max-width} - #{$container-content-max-width}) / 2)\n);\n/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n// --graupl-container-content-section-min-width\n$container-content-section-min-width: var(\n --#{root-defaults.$prefix}container-content-section-min-width,\n calc(\n 100% - (#{$container-full-width-section-min-width} * 2) -\n (#{$container-feature-section-min-width} * 2) -\n (#{$container-breakout-section-min-width} * 2)\n )\n);\n/* stylelint-enable scss/operator-no-newline-after */\n// --graupl-container-content-section-max-width\n$container-content-section-max-width: var(\n --#{root-defaults.$prefix}container-content-section-max-width,\n #{$container-content-max-width}\n);\n\n// --graupl-container-full-width-section-width\n$container-full-width-section-width: var(\n --#{root-defaults.$prefix}container-full-width-section-width,\n minmax(\n #{$container-full-width-section-min-width},\n #{$container-full-width-section-max-width}\n )\n);\n\n// --graupl-container-feature-section-width\n$container-feature-section-width: var(\n --#{root-defaults.$prefix}container-feature-section-width,\n minmax(\n #{$container-feature-section-min-width},\n #{$container-feature-section-max-width}\n )\n);\n\n// --graupl-container-breakout-section-width\n$container-breakout-section-width: var(\n --#{root-defaults.$prefix}container-breakout-section-width,\n minmax(\n #{$container-breakout-section-min-width},\n #{$container-breakout-section-max-width}\n )\n);\n\n// --graupl-container-content-section-width\n$container-content-section-width: var(\n --#{root-defaults.$prefix}container-content-section-width,\n min(\n #{$container-content-section-min-width},\n #{$container-content-section-max-width}\n )\n);\n\n// --graupl-container-sidebar-left-section-width\n$container-sidebar-left-section-width: var(\n --#{root-defaults.$prefix}container-sidebar-left-section-width,\n max($container-sidebar-width, $container-feature-section-max-width)\n);\n\n// --graupl-container-sidebar-right-section-width\n$container-sidebar-right-section-width: var(\n --#{root-defaults.$prefix}container-sidebar-right-section-width,\n max($container-sidebar-width, $container-feature-section-max-width)\n);\n\n// --graupl-container-sidebars-breakout-section-width\n$container-sidebars-breakout-section-width: var(\n --#{root-defaults.$prefix}container-sidebars-breakout-section-width,\n #{$container-breakout-section-max-width}\n);\n/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n// --graupl-container-sidebars-content-section-min-width\n$container-sidebars-content-section-min-width: var(\n --#{root-defaults.$prefix}container-sidebars-content-section-min-width,\n calc(\n 100% - (#{$container-full-width-section-min-width} * 2) -\n (#{$container-feature-section-min-width} * 2) -\n (#{$container-sidebars-breakout-section-width} * 2) -\n #{$container-sidebar-left-section-width} -\n #{$container-sidebar-right-section-width}\n )\n);\n\n// --graupl-container-sidebars-content-section-max-width\n$container-sidebars-content-section-max-width: var(\n --#{root-defaults.$prefix}container-sidebars-content-section-max-width,\n calc(\n #{$container-content-section-max-width} -\n #{$container-sidebar-left-section-width} -\n #{$container-sidebar-right-section-width} +\n min($container-sidebar-width, $container-feature-section-max-width) +\n min($container-sidebar-width, $container-feature-section-max-width)\n )\n);\n\n// --graupl-container-sidebars-content-section-width\n$container-sidebars-content-section-width: var(\n --#{root-defaults.$prefix}container-sidebars-content-section-width,\n min(\n #{$container-sidebars-content-section-min-width},\n #{$container-sidebars-content-section-max-width}\n )\n);\n\n// --graupl-container-sidebars-right-content-section-min-width\n$container-sidebars-right-content-section-min-width: var(\n --#{root-defaults.$prefix}container-sidebars-right-content-section-min-width,\n calc(\n 100% - (#{$container-full-width-section-min-width} * 2) -\n (#{$container-feature-section-min-width} * 2) -\n #{$container-breakout-section-min-width} -\n #{$container-sidebars-breakout-section-width} -\n #{$container-sidebar-right-section-width}\n )\n);\n\n// --graupl-container-sidebars-right-content-section-max-width\n$container-sidebars-right-content-section-max-width: var(\n --#{root-defaults.$prefix}container-sidebars-right-content-section-max-width,\n calc(\n #{$container-content-section-max-width} -\n #{$container-sidebar-right-section-width} +\n min($container-sidebar-width, $container-feature-section-max-width)\n )\n);\n\n// --graupl-container-sidebars-right-content-section-width\n$container-sidebars-right-content-section-width: var(\n --#{root-defaults.$prefix}container-sidebars-right-content-section-width,\n min(\n $container-sidebars-right-content-section-min-width,\n $container-sidebars-right-content-section-max-width\n )\n);\n\n// --graupl-container-sidebars-left-content-section-min-width\n$container-sidebars-left-content-section-min-width: var(\n --#{root-defaults.$prefix}container-sidebars-left-content-section-min-width,\n calc(\n 100% - (#{$container-full-width-section-min-width} * 2) -\n (#{$container-feature-section-min-width} * 2) -\n #{$container-breakout-section-min-width} -\n #{$container-sidebars-breakout-section-width} -\n #{$container-sidebar-left-section-width}\n )\n);\n\n// --graupl-container-sidebars-left-content-section-max-width\n$container-sidebars-left-content-section-max-width: var(\n --#{root-defaults.$prefix}container-sidebars-left-content-section-max-width,\n calc(\n #{$container-content-section-max-width} -\n #{$container-sidebar-left-section-width} +\n min($container-sidebar-width, $container-feature-section-max-width)\n )\n);\n\n// --graupl-container-sidebars-left-content-section-width\n$container-sidebars-left-content-section-width: var(\n --#{root-defaults.$prefix}container-sidebars-left-content-section-width,\n min(\n $container-sidebars-left-content-section-min-width,\n $container-sidebars-left-content-section-max-width\n )\n);\n\n// --graupl-container-background\n$container-background: var(--#{root-defaults.$prefix}container-background);\n\n// --graupl-container-color\n$container-color: var(--#{root-defaults.$prefix}container-color);\n/* stylelint-enable scss/operator-no-newline-after */\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 container layout styles.\n//\n// This module provides the layout styles for the container component.\n//\n// The container component is a grid container that provides a layout for the main content of a page.\n// It is divided into four sections:\n// - Full-width: A full-width section that spans the entire width of the container.\n// - Feature: A feature section that is used for feature content.\n// - Breakout: A breakout section that is used for breakout content.\n// - Content: The main content section that contains all other content.\n//\n// Optionally, the container component can have sidebars, which divides the content section into five sections:\n// - Sidebar-left: A left sidebar section that is used for sidebar content.\n// - Sidebar-right: A right sidebar section that is used for sidebar content.\n// - Inner-content: A section that contains the main content of the page.\n// - Content-left: A section that contains the sidebar-left and inner-content sections.\n// - Content-right: A section that contains the inner-content and sidebar-right sections.\n//\n// The container layout is as follows:\n// | full-width | feature | breakout | content | breakout | feature | full-width |\n//\n// Nesting a container directly inside of another container will cause the\n// nested container to inherit the grid columns of the parent container.\n//\n// The following classes are generated by default:\n// - `.container`: The main container component.\n// - `.full-width`: A full-width container component.\n// - `.feature`: A feature container component.\n// - `.breakout`: A breakout container component.\n// - `.contain`: A utility class to contain child elements to the content section of the container grid.\n// - `.sidebars`: A utility class to enable two sidebars in the container.\n// - `.sidebars-left`: A utility class to enable a left sidebar in the container.\n// - `.sidebars-right`: A utility class to enable a right sidebar in the container.\n// - `.sidebar-left`: A left sidebar container component used directly inside of a container with sidebars.\n// - `.sidebar-right`: A right sidebar container component used directly inside of a container with sidebars.\n// - `.sidebar`: A sidebar container component used directly inside of a container with sidebars.\n// - `.content`: A content container component used directly inside of a container with sidebars.\n//\n// The following custom properties can be used to customize the container component:\n// | Property | Description | Default Value |\n// | ------------------------------------------------------------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | `--graupl-container-sidebar-width` | The width of the sidebar sections. | `26ch` |\n// | `--graupl-container-breakout-width` | The width that the breakout section will extend beyond the content. | `4ch` |\n// | `--graupl-container-feature-width` | The width that the feature section will extend beyond the breakout. | `10ch` |\n// | `--graupl-container-content-max-width` | The maximum width of the content section. | `var(--graupl-content-max-width)` |\n// | `--graupl-container-breakout-max-width` | The maximum width of the breakout section. | `calc(var(--graupl-container-content-max-width) + var(--graupl-container-breakout-width))` |\n// | `--graupl-container-feature-max-width` | The maximum width of the feature section. | `calc(var(--graupl-container-breakout-max-width) + var(--graupl-container-feature-width))` |\n// | `--graupl-container-full-width-section-min-width` | The minimum width of one side of the full-width section. | `var(--graupl-spacer-5)` |\n// | `--graupl-container-full-width-section-max-width` | The maximum width of one side of the full-width section. | `1fr` |\n// | `--graupl-container-feature-section-min-width` | The minimum width of one side of the feature section. | `0rem` |\n// | `--graupl-container-feature-section-max-width` | The maximum width of one side of the feature section. | `calc((var(--graupl-container-feature-max-width) - var(--graupl-container-breakout-max-width)) / 2)` |\n// | `--graupl-container-breakout-section-min-width` | The minimum width of one side of the breakout section. | `0rem` |\n// | `--graupl-container-breakout-section-max-width` | The maximum width of one side of the breakout section. | `calc((var(--graupl-container-breakout-max-width) - var(--graupl-container-content-max-width)) / 2)` |\n// | `--graupl-container-content-section-min-width` | The minimum width of the content section. | `calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - (var(--graupl-container-breakout-section-min-width) * 2))` |\n// | `--graupl-container-content-section-max-width` | The maximum width of the content section. | `var(--graupl-container-content-max-width)` |\n// | `--graupl-container-full-width-section-width` | The calculated minmax width of the full-width section. | `minmax(var(--graupl-container-full-width-section-min-width), var(--graupl-container-full-width-section-max-width))` |\n// | `--graupl-container-feature-section-width` | The calculated minmax width of the feature section. | `minmax(var(--graupl-container-feature-section-min-width), var(--graupl-container-feature-section-max-width))` |\n// | `--graupl-container-breakout-section-width` | The calculated minmax width of the breakout section. | `minmax(var(--graupl-container-breakout-section-min-width), var(--graupl-container-breakout-section-max-width))` |\n// | `--graupl-container-content-section-width` | The calculated width of the content section. | `min(var(--graupl-container-content-section-min-width), var(--graupl-container-content-section-max-width))` |\n// | `--graupl-container-sidebar-left-section-width` | The width of the left sidebar section. | `max(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width))` |\n// | `--graupl-container-sidebar-right-section-width` | The width of the right sidebar section. | `max(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width))` |\n// | `--graupl-container-sidebars-breakout-section-width` | The breakout width when both sidebars are enabled. | `var(--graupl-container-breakout-section-max-width)` |\n// | `--graupl-container-sidebars-content-section-min-width` | The minimum width of the content section when both sidebars are enabled. | `calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - (var(--graupl-container-sidebars-breakout-section-width) * 2) - var(--graupl-container-sidebar-left-section-width) - var(--graupl-container-sidebar-right-section-width))` |\n// | `--graupl-container-sidebars-content-section-max-width` | The maximum width of the content section when both sidebars are enabled. | `calc(var(--graupl-container-content-section-max-width) - var(--graupl-container-sidebar-left-section-width) - var(--graupl-container-sidebar-right-section-width) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)))` |\n// | `--graupl-container-sidebars-content-section-width` | The calculated width of the content section when both sidebars are enabled. | `min(var(--graupl-container-sidebars-content-section-min-width), var(--graupl-container-sidebars-content-section-max-width))` |\n// | `--graupl-container-sidebars-right-content-section-min-width` | The minimum width of the content section when only the right sidebar is enabled. | `calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - var(--graupl-container-breakout-section-min-width) - var(--graupl-container-sidebars-breakout-section-width) - var(--graupl-container-sidebar-right-section-width))` |\n// | `--graupl-container-sidebars-right-content-section-max-width` | The maximum width of the content section when only the right sidebar is enabled. | `calc(var(--graupl-container-content-section-max-width) - var(--graupl-container-sidebar-right-section-width) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)))` |\n// | `--graupl-container-sidebars-right-content-section-width` | The calculated width of the content section when only the right sidebar is enabled. | `min(var(--graupl-container-sidebars-right-content-section-min-width), var(--graupl-container-sidebars-right-content-section-max-width))` |\n// | `--graupl-container-sidebars-left-content-section-min-width` | The minimum width of the content section when only the left sidebar is enabled. | `calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - var(--graupl-container-breakout-section-min-width) - var(--graupl-container-sidebars-breakout-section-width) - var(--graupl-container-sidebar-left-section-width))` |\n// | `--graupl-container-sidebars-left-content-section-max-width` | The maximum width of the content section when only the left sidebar is enabled. | `calc(var(--graupl-container-content-section-max-width) - var(--graupl-container-sidebar-left-section-width) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)))` |\n// | `--graupl-container-sidebars-left-content-section-width` | The calculated width of the content section when only the left sidebar is enabled. | `min(var(--graupl-container-sidebars-left-content-section-min-width), var(--graupl-container-sidebars-left-content-section-max-width))` |\n// | `--graupl-container-background` | The background of the container component. | `var(--graupl-background)` |\n// | `--graupl-container-color` | The text color of the container component. | `var(--graupl-color)` |\n//\n// The following sass variables can be used to customize the generation of the container component:\n// | Variable | Description | Default Value |\n// | -------------------------------------- | ---------------------------------------------------------------------------- | ------------------------- |\n// | `$selector-base` | The selector base for the component. | `\".\"` |\n// | `$modifier-selector-base` | The selector base for component modifiers. | `\".\"` |\n// | `$generate-base-theme-map` | Flag to generate the base theme map. | `true` |\n// | `$themeable` | Flag to generate theme modifiers. | `false` |\n// | `$force-container-chaining` | A flag to force container chaining in all containers. | `false` |\n// | `$generate-forced-container-selectors` | A flag to generate a set of default selectors for forced container chaining. | `true` |\n// | `$show-warnings` | A flag to show any built-in warnings that may be output during compiling. | `true` |\n// | `$container-selector-base` | The base selector for the container component. | `\".\"` |\n// | `$container-selector` | The selector for the container component. | `\"container\"` |\n// | `$container-theme-selector-base` | The selector base for container theme modifiers. | `\".\"` |\n// | `$container-theme-selector-prefix` | The container theme modifier selector prefix. | `\"\"` |\n// | `$container-breakout-selector-base` | The base selector for the breakout container component. | `\".\"` |\n// | `$container-breakout-selector` | The selector for the breakout container component. | `\"breakout\"` |\n// | `$container-feature-selector-base` | The base selector for the feature container component. | `\".\"` |\n// | `$container-feature-selector` | The selector for the feature container component. | `\"feature\"` |\n// | `$container-full-width-selector-base` | The base selector for the full-width container component. | `\".\"` |\n// | `$container-full-width-selector` | The selector for the full-width container component. | `\"full-width\"` |\n// | `$container-contain-selector-base` | The base selector for the contain utility class. | `\".\"` |\n// | `$container-contain-selector` | The selector for the contain utility class. | `\"contain\"` |\n// | `$container-sidebars-selector-base` | The base selector for the sidebars utility class. | `\".\"` |\n// | `$container-sidebars-selector` | The selector for the sidebars utility class. | `\"sidebars\"` |\n// | `$container-content-selector-base` | The base selector for the content container component. | `\".\"` |\n// | `$container-content-selector` | The selector for the content container component. | `\"content\"` |\n// | `$container-sidebar-selector-base` | The base selector for the sidebar container component. | `\".\"` |\n// | `$container-sidebar-selector` | The selector for the sidebar container component. | `\"sidebar\"` |\n// | `$container-left-selector-suffix` | The suffix for the left sidebar selector. | `\"-left\"` |\n// | `$container-right-selector-suffix` | The suffix for the right sidebar selector. | `\"-right\"` |\n// | `$container-inner-selector-prefix` | The prefix for the inner content selector. | `\"inner-\"` |\n// | `$container-breakout-width` | The width of the breakout section will extend from the content section. | `4ch` |\n// | `$container-feature-width` | The width of the feature section will extend from the breakout section. | `10ch` |\n// | `$container-sidebar-width` | The width of the sidebar sections. | `26ch` |\n// | `$forced-container-selectors` | Additional selectors included in forced container chaining. | `()` |\n// | `$container-theme-mappings` | Map of properties/shades for container themes. | `()` |\n// | `$container-theme-map` | Expanded map of properties/colors/shades. | `()` |\n//\n// ## What is container chaining?\n//\n// Container chaining is a structural setup in the DOM in which you make sure that if you have nested containers or container-level elements (breakouts, features, etc.), you never allow them to be contained in anything other than a container.\n//\n// What do I mean by this?\n//\n// If you have to following setup in your DOM:\n//\n// ```\n// <div class=\"container\">\n// <p>Some content here...</p>\n// <section>\n// <p>Some content here...</p>\n// <div class=\"breakout\">\n// <p>Some content here that I would like to breakout...</p>\n// </div>\n// <p>Some content here...</p>\n// </section>\n// </div>\n// ```\n//\n// To achieve a breakout of the content inside of the <section>, you need to make sure the section is also a container, otherwise the breakout class will have no effect.\n//\n// ```\n// <div class=\"container\">\n// <p>Some content here...</p>\n// <section class=\"container\">\n// <p>Some content here...</p>\n// <div class=\"breakout\">\n// <p>Some content here that I would like to breakout...</p>\n// </div>\n// <p>Some content here...</p>\n// </section>\n// </div>\n// ```\n//\n// There _is_ a feature flag (`$force-container-chaining`) which automatically set up container chaining for you.\n//\n// This works by selecting all elements between a parent and child container and making them inherit the parent's layout.\n//\n// Because you have control over how this is limited, it can result in using an unrestricted :has() selector, which can be slow.\n//\n// @example\n// <div class=\"container\">\n// Regular content\n// <div class=\"full-width\">\n// Full-width content\n// </div>\n// <div class=\"feature\">\n// Feature content\n// </div>\n// <div class=\"breakout\">\n// Breakout content\n// </div>\n// </div>\n//\n// @example\n// <div class=\"container\">\n// Regular content\n// <div class=\"feature contain\">\n// Contained feature content\n// </div>\n// </div>\n//\n// @example\n// <div class=\"container sidebars-left\">\n// <div class=\"sidebar\">\n// Left sidebar content\n// </div>\n// <div class=\"content\">\n// Content right content\n// </div>\n// </div>\n//\n// @example\n// <div class=\"container sidebars-right\">\n// <div class=\"content\">\n// Content left content\n// </div>\n// <div class=\"sidebar\">\n// Right sidebar content\n// </div>\n// </div>\n//\n// @example\n// <div class=\"container sidebars\">\n// <div class=\"sidebar-left\">\n// Left sidebar content\n// </div>\n// <div class=\"content\">\n// Inner content content\n// </div>\n// <div class=\"sidebar-right\">\n// Right sidebar content\n// </div>\n// </div>\n\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/layer\" as *;\n@use \"../../mixins/screen\";\n@use \"../../mixins/theme\";\n@use \"defaults\";\n@use \"variables\" as *;\n\n@include layer(layout) {\n // .container\n #{defaults.$container-selector-base}#{defaults.$container-selector} {\n display: grid;\n grid-template-columns:\n [full-width-start] $container-full-width-section-width\n [feature-start] $container-feature-section-width\n [breakout-start] $container-breakout-section-width\n [content-start] $container-content-section-width\n [content-end]\n $container-breakout-section-width [breakout-end]\n $container-feature-section-width [feature-end]\n $container-full-width-section-width [full-width-end];\n container-type: inline-size;\n overflow-wrap: break-word;\n\n // Container components should span the full width of their parent container\n // and inherit the grid columns.\n //\n // > .container\n > #{defaults.$container-selector-base}#{defaults.$container-selector} {\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n container-type: normal;\n }\n\n // Everything in the container that isn't a container component should\n // be in the content section.\n //\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: content;\n }\n\n // Handle force chaining.\n //\n // This works by selecting all elements between a parent and child container\n // and making them inherit the parent's layout.\n //\n // Because you have control over how this is limited, it can result in using\n // an unrestricted :has() selector, which can be slow.\n @if defaults.$force-container-chaining {\n @if defaults.$show-warnings and root-defaults.$show-warnings {\n @warn (\"You have enabled automatic container chaining. This can result in an unrestricted :has() selector if you customize $forced-container-selectors to be too broad, which can be slow. Make sure you know what you're doing with this.\");\n }\n\n // .container :is(article,aside,div,section):not(.container):has(&)\n #{defaults.$container-selector-base}#{defaults.$container-selector}\n :is(#{defaults.$forced-container-selectors}):not(\n #{defaults.$container-selector-base}#{defaults.$container-selector}\n ):has(&) {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n container-type: normal;\n\n // .container\n #{defaults.$container-selector-base}#{defaults.$container-selector} {\n grid-column: 1/-1;\n container-type: normal;\n\n // &:not(.sidebars, .sidebars-left, .sidebars-right)\n &:not(\n #{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector},\n #{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-left-selector-suffix},\n #{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-right-selector-suffix}\n ) {\n grid-template-columns: subgrid;\n }\n }\n }\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the content section.\n //\n // > .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n display: grid;\n grid-template-columns: subgrid;\n\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: content;\n }\n }\n\n // Set up the container components to span the appropriate grid columns.\n //\n // .breakout\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector} {\n grid-column: breakout;\n }\n\n // .feature\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {\n grid-column: feature;\n }\n\n // .full-width\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector} {\n grid-column: full-width;\n }\n\n // &.sidebars\n &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector} {\n // .sidebar-left\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix} {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n\n // > :not(.container, .breakout, .feature, .full-width, .sidebar-left)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix}\n ) {\n grid-column: content;\n }\n }\n\n // .sidebar-right\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix} {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n\n // > :not(.container, .breakout, .feature, .full-width, .sidebar-right)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}\n ) {\n grid-column: content;\n }\n }\n\n // .content\n #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n\n // > :not(.container, .breakout, .feature, .full-width, .sidebar-left, .sidebar-right)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}\n ) {\n grid-column: content;\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the content section.\n //\n // .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n // > :not(.container, .breakout, .feature, .full-width, .sidebar-left, .sidebar-right)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}\n ) {\n grid-column: content;\n }\n }\n }\n }\n\n // &.sidebars-left\n &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-left-selector-suffix} {\n // .sidebar\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector} {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n\n // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n ) {\n grid-column: content;\n }\n }\n\n // .content\n #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n\n // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n ) {\n grid-column: content;\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the content section.\n //\n // .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n ) {\n grid-column: content;\n }\n }\n }\n }\n\n // &.sidebars-right\n &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-right-selector-suffix} {\n // .sidebar\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector} {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n\n // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n ) {\n grid-column: content;\n }\n }\n\n // .content\n #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n\n // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n ) {\n grid-column: content;\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the content section.\n //\n // .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n ) {\n grid-column: content;\n }\n }\n }\n }\n\n @include screen.trigger(allow-sidebars) {\n // &.sidebars\n &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector} {\n --#{root-defaults.$prefix}columns-content-max-width: #{$container-sidebars-content-section-max-width};\n\n grid-template-columns:\n [full-width-start] $container-full-width-section-width\n [sidebar-left-start feature-start] $container-sidebar-left-section-width\n [sidebar-left-end breakout-start] $container-sidebars-breakout-section-width\n [content-start] $container-sidebars-content-section-width\n [content-end] $container-sidebars-breakout-section-width\n [breakout-end sidebar-right-start] $container-sidebar-right-section-width\n [feature-end sidebar-right-end] $container-full-width-section-width\n [full-width-end];\n\n // > .sidebar-left\n > #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix} {\n grid-row: 1 / -1;\n grid-template: subgrid;\n\n // Make sure other container classes do not break the layout inside of the sidebar.\n //\n // &:not(.container)\n &:not(\n #{defaults.$container-selector-base}#{defaults.$container-selector}\n ) {\n // &, .container, .breakout, .feature, .full-width\n &,\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {\n grid-column-end: content-start;\n }\n }\n\n // Lock content to the sidebar-left section.\n //\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar-left;\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the sidebar-left section.\n //\n // > .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar-left;\n }\n }\n }\n\n // > .sidebar-right\n > #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix} {\n grid-row: 1 / -1;\n grid-template: subgrid;\n\n // Make sure other container classes do not break the layout inside of the sidebar.\n //\n // &:not(.container)\n &:not(\n #{defaults.$container-selector-base}#{defaults.$container-selector}\n ) {\n // &, .container, .breakout, .feature, .full-width\n &,\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {\n grid-column-start: content-end;\n }\n }\n\n // Lock content to the sidebar-right section.\n //\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar-right;\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the sidebar-right section.\n //\n // > .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar-right;\n }\n }\n }\n\n // > .content\n > #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n grid-row: 1;\n }\n }\n\n // &.sidebars-left\n &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-left-selector-suffix} {\n --#{root-defaults.$prefix}columns-content-max-width: #{$container-sidebars-left-content-section-max-width};\n\n grid-template-columns:\n [full-width-start] $container-full-width-section-width\n [sidebar-start feature-start] $container-sidebar-left-section-width\n [sidebar-end breakout-start] $container-sidebars-breakout-section-width\n [content-start] $container-sidebars-left-content-section-width\n [content-end] $container-breakout-section-width\n [breakout-end] $container-feature-section-width\n [feature-end] $container-full-width-section-width\n [full-width-end];\n\n // > .sidebar\n > #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector} {\n grid-row: 1 / -1;\n grid-template: subgrid;\n\n // Make sure other container classes do not break the layout inside of the sidebar.\n //\n // &:not(.container)\n &:not(\n #{defaults.$container-selector-base}#{defaults.$container-selector}\n ) {\n // &, .container, .breakout, .feature, .full-width\n &,\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {\n grid-column-end: content-start;\n }\n }\n\n // Lock content to the sidebar section.\n //\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar;\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the sidebar section.\n //\n // > .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar;\n }\n }\n }\n\n // > .content\n > #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n grid-row: 1;\n }\n }\n\n // &.sidebars-right\n &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-right-selector-suffix} {\n --#{root-defaults.$prefix}columns-content-max-width: #{$container-sidebars-right-content-section-max-width};\n\n grid-template-columns:\n [full-width-start] $container-full-width-section-width\n [feature-start] $container-feature-section-width\n [breakout-start] $container-breakout-section-width\n [content-start] $container-sidebars-right-content-section-width\n [content-end] $container-sidebars-breakout-section-width\n [breakout-end sidebar-start] $container-sidebar-right-section-width\n [feature-end sidebar-end] $container-full-width-section-width\n [full-width-end];\n\n // > .sidebar\n > #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector} {\n grid-row: 1 / -1;\n grid-template: subgrid;\n\n // Make sure other container classes do not break the layout inside of the sidebar.\n //\n // &:not(.container)\n &:not(\n #{defaults.$container-selector-base}#{defaults.$container-selector}\n ) {\n // &, .container, .breakout, .feature, .full-width\n &,\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {\n grid-column-start: content-end;\n }\n }\n\n // Lock content to the sidebar section.\n //\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar;\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the sidebar section.\n //\n // > .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar;\n }\n }\n }\n\n // > .content\n > #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n grid-row: 1;\n }\n }\n }\n }\n}\n\n@include layer(theme) {\n // .container\n #{defaults.$container-selector-base}#{defaults.$container-selector} {\n background: $container-background;\n color: $container-color;\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$container-theme-map,\n defaults.$container-theme-selector-base,\n defaults.$container-theme-selector-prefix,\n \"container-\"\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"],"names":[]}