@graupl/graupl 1.0.0-beta.22 → 1.0.0-beta.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (206) hide show
  1. package/dist/css/base/button.css +2 -2
  2. package/dist/css/base/button.css.map +1 -1
  3. package/dist/css/base/form.css +2 -2
  4. package/dist/css/base/form.css.map +1 -1
  5. package/dist/css/base/link.css +2 -2
  6. package/dist/css/base/link.css.map +1 -1
  7. package/dist/css/base/table.css +2 -2
  8. package/dist/css/base/table.css.map +1 -1
  9. package/dist/css/base.css +2 -2
  10. package/dist/css/base.css.map +1 -1
  11. package/dist/css/component/accordion.css +2 -5
  12. package/dist/css/component/accordion.css.map +1 -1
  13. package/dist/css/component/alert.css +2 -2
  14. package/dist/css/component/alert.css.map +1 -1
  15. package/dist/css/component/badge.css +2 -2
  16. package/dist/css/component/badge.css.map +1 -1
  17. package/dist/css/component/card.css +2 -2
  18. package/dist/css/component/card.css.map +1 -1
  19. package/dist/css/component/carousel.css +2 -2
  20. package/dist/css/component/carousel.css.map +1 -1
  21. package/dist/css/component/disclosure.css +2 -2
  22. package/dist/css/component/disclosure.css.map +1 -1
  23. package/dist/css/component/input-group.css +2 -2
  24. package/dist/css/component/input-group.css.map +1 -1
  25. package/dist/css/component/list.css +2 -2
  26. package/dist/css/component/list.css.map +1 -1
  27. package/dist/css/component/menu.css +2 -2
  28. package/dist/css/component/menu.css.map +1 -1
  29. package/dist/css/component/navigation.css +2 -2
  30. package/dist/css/component/navigation.css.map +1 -1
  31. package/dist/css/component.css +2 -5
  32. package/dist/css/component.css.map +1 -1
  33. package/dist/css/graupl.css +2 -5
  34. package/dist/css/graupl.css.map +1 -1
  35. package/dist/css/init.css +2 -2
  36. package/dist/css/init.css.map +1 -1
  37. package/dist/css/layout/columns.css +2 -2
  38. package/dist/css/layout/columns.css.map +1 -1
  39. package/dist/css/layout/container.css +2 -2
  40. package/dist/css/layout/container.css.map +1 -1
  41. package/dist/css/layout/flex-columns.css +2 -2
  42. package/dist/css/layout/flex-columns.css.map +1 -1
  43. package/dist/css/layout.css +2 -5
  44. package/dist/css/layout.css.map +1 -1
  45. package/dist/css/normalize.css +2 -2
  46. package/dist/css/normalize.css.map +1 -1
  47. package/dist/css/state/focus.css +2 -2
  48. package/dist/css/state/focus.css.map +1 -1
  49. package/dist/css/state.css +2 -2
  50. package/dist/css/state.css.map +1 -1
  51. package/dist/css/theme/color.css +2 -2
  52. package/dist/css/theme/color.css.map +1 -1
  53. package/dist/css/theme/typography.css +2 -2
  54. package/dist/css/theme/typography.css.map +1 -1
  55. package/dist/css/theme.css +2 -2
  56. package/dist/css/theme.css.map +1 -1
  57. package/dist/css/utilities/alignment.css +1 -1
  58. package/dist/css/utilities/alignment.css.map +1 -1
  59. package/dist/css/utilities/background.css +2 -2
  60. package/dist/css/utilities/background.css.map +1 -1
  61. package/dist/css/utilities/border.css +2 -2
  62. package/dist/css/utilities/border.css.map +1 -1
  63. package/dist/css/utilities/color.css +2 -2
  64. package/dist/css/utilities/color.css.map +1 -1
  65. package/dist/css/utilities/container.css +1 -1
  66. package/dist/css/utilities/container.css.map +1 -1
  67. package/dist/css/utilities/display.css +2 -2
  68. package/dist/css/utilities/display.css.map +1 -1
  69. package/dist/css/utilities/flex.css +2 -2
  70. package/dist/css/utilities/flex.css.map +1 -1
  71. package/dist/css/utilities/gradient.css +2 -2
  72. package/dist/css/utilities/gradient.css.map +1 -1
  73. package/dist/css/utilities/height.css +2 -2
  74. package/dist/css/utilities/height.css.map +1 -1
  75. package/dist/css/utilities/inset.css +2 -2
  76. package/dist/css/utilities/inset.css.map +1 -1
  77. package/dist/css/utilities/justification.css +1 -1
  78. package/dist/css/utilities/justification.css.map +1 -1
  79. package/dist/css/utilities/list.css +1 -1
  80. package/dist/css/utilities/list.css.map +1 -1
  81. package/dist/css/utilities/order.css +2 -2
  82. package/dist/css/utilities/order.css.map +1 -1
  83. package/dist/css/utilities/position.css +2 -2
  84. package/dist/css/utilities/position.css.map +1 -1
  85. package/dist/css/utilities/ratio.css +2 -2
  86. package/dist/css/utilities/ratio.css.map +1 -1
  87. package/dist/css/utilities/spacing.css +2 -2
  88. package/dist/css/utilities/spacing.css.map +1 -1
  89. package/dist/css/utilities/typography.css +2 -2
  90. package/dist/css/utilities/typography.css.map +1 -1
  91. package/dist/css/utilities/visibility.css +2 -2
  92. package/dist/css/utilities/visibility.css.map +1 -1
  93. package/dist/css/utilities/visually-hidden.css +2 -2
  94. package/dist/css/utilities/visually-hidden.css.map +1 -1
  95. package/dist/css/utilities/width.css +2 -2
  96. package/dist/css/utilities/width.css.map +1 -1
  97. package/dist/css/utilities/z-index.css +1 -1
  98. package/dist/css/utilities/z-index.css.map +1 -1
  99. package/dist/css/utilities.css +2 -2
  100. package/dist/css/utilities.css.map +1 -1
  101. package/dist/js/accordion.js.map +1 -1
  102. package/dist/js/alert.js.map +1 -1
  103. package/dist/js/carousel.js.map +1 -1
  104. package/dist/js/component/accordion.cjs.js.map +1 -1
  105. package/dist/js/component/accordion.es.js.map +1 -1
  106. package/dist/js/component/accordion.iife.js.map +1 -1
  107. package/dist/js/component/alert.cjs.js.map +1 -1
  108. package/dist/js/component/alert.es.js.map +1 -1
  109. package/dist/js/component/alert.iife.js.map +1 -1
  110. package/dist/js/component/carousel.cjs.js.map +1 -1
  111. package/dist/js/component/carousel.es.js.map +1 -1
  112. package/dist/js/component/carousel.iife.js.map +1 -1
  113. package/dist/js/component/disclosure.cjs.js +2 -2
  114. package/dist/js/component/disclosure.cjs.js.map +1 -1
  115. package/dist/js/component/disclosure.es.js +2 -2
  116. package/dist/js/component/disclosure.es.js.map +1 -1
  117. package/dist/js/component/disclosure.iife.js +2 -2
  118. package/dist/js/component/disclosure.iife.js.map +1 -1
  119. package/dist/js/component/tabs.cjs.js +5 -0
  120. package/dist/js/component/tabs.cjs.js.map +1 -0
  121. package/dist/js/component/tabs.es.js +5 -0
  122. package/dist/js/component/tabs.es.js.map +1 -0
  123. package/dist/js/component/tabs.iife.js +5 -0
  124. package/dist/js/component/tabs.iife.js.map +1 -0
  125. package/dist/js/disclosure.js +2 -2
  126. package/dist/js/disclosure.js.map +1 -1
  127. package/dist/js/generator/accordion.cjs.js.map +1 -1
  128. package/dist/js/generator/accordion.es.js.map +1 -1
  129. package/dist/js/generator/accordion.iife.js.map +1 -1
  130. package/dist/js/generator/alert.cjs.js.map +1 -1
  131. package/dist/js/generator/alert.es.js.map +1 -1
  132. package/dist/js/generator/alert.iife.js.map +1 -1
  133. package/dist/js/generator/carousel.cjs.js.map +1 -1
  134. package/dist/js/generator/carousel.es.js.map +1 -1
  135. package/dist/js/generator/carousel.iife.js.map +1 -1
  136. package/dist/js/generator/disclosure.cjs.js +2 -2
  137. package/dist/js/generator/disclosure.cjs.js.map +1 -1
  138. package/dist/js/generator/disclosure.es.js +2 -2
  139. package/dist/js/generator/disclosure.es.js.map +1 -1
  140. package/dist/js/generator/disclosure.iife.js +2 -2
  141. package/dist/js/generator/disclosure.iife.js.map +1 -1
  142. package/dist/js/generator/navigation.cjs.js.map +1 -1
  143. package/dist/js/generator/navigation.es.js.map +1 -1
  144. package/dist/js/generator/navigation.iife.js.map +1 -1
  145. package/dist/js/generator/tabs.cjs.js +5 -0
  146. package/dist/js/generator/tabs.cjs.js.map +1 -0
  147. package/dist/js/generator/tabs.es.js +5 -0
  148. package/dist/js/generator/tabs.es.js.map +1 -0
  149. package/dist/js/generator/tabs.iife.js +5 -0
  150. package/dist/js/generator/tabs.iife.js.map +1 -0
  151. package/dist/js/graupl.js +5 -5
  152. package/dist/js/graupl.js.map +1 -1
  153. package/dist/js/navigation.js.map +1 -1
  154. package/dist/js/tabs.js +5 -0
  155. package/dist/js/tabs.js.map +1 -0
  156. package/package.json +6 -11
  157. package/scss/base/button.scss +1 -1
  158. package/scss/base/form.scss +1 -1
  159. package/scss/base/link.scss +1 -1
  160. package/scss/base/table.scss +1 -1
  161. package/scss/base.scss +1 -1
  162. package/scss/component/accordion.scss +1 -1
  163. package/scss/component/alert.scss +1 -1
  164. package/scss/component/badge.scss +1 -1
  165. package/scss/component/card.scss +1 -1
  166. package/scss/component/carousel.scss +1 -1
  167. package/scss/component/disclosure.scss +1 -1
  168. package/scss/component/input-group.scss +1 -1
  169. package/scss/component/list.scss +1 -1
  170. package/scss/component/menu.scss +1 -1
  171. package/scss/component/navigation.scss +1 -1
  172. package/scss/component.scss +1 -1
  173. package/scss/graupl.scss +1 -1
  174. package/scss/init.scss +1 -1
  175. package/scss/layout/columns.scss +1 -1
  176. package/scss/layout/container.scss +1 -1
  177. package/scss/layout/flex-columns.scss +1 -1
  178. package/scss/layout.scss +1 -1
  179. package/scss/normalize.scss +1 -1
  180. package/scss/state/focus.scss +1 -1
  181. package/scss/state.scss +1 -1
  182. package/scss/theme/color.scss +1 -1
  183. package/scss/theme/typography.scss +1 -1
  184. package/scss/theme.scss +1 -1
  185. package/scss/utilities/alignment.scss +1 -1
  186. package/scss/utilities/background.scss +1 -1
  187. package/scss/utilities/border.scss +1 -1
  188. package/scss/utilities/color.scss +1 -1
  189. package/scss/utilities/container.scss +1 -1
  190. package/scss/utilities/display.scss +1 -1
  191. package/scss/utilities/flex.scss +1 -1
  192. package/scss/utilities/gradient.scss +1 -1
  193. package/scss/utilities/height.scss +1 -1
  194. package/scss/utilities/inset.scss +1 -1
  195. package/scss/utilities/justification.scss +1 -1
  196. package/scss/utilities/list.scss +1 -1
  197. package/scss/utilities/order.scss +1 -1
  198. package/scss/utilities/position.scss +1 -1
  199. package/scss/utilities/ratio.scss +1 -1
  200. package/scss/utilities/spacing.scss +1 -1
  201. package/scss/utilities/typography.scss +1 -1
  202. package/scss/utilities/visibility.scss +1 -1
  203. package/scss/utilities/visually-hidden.scss +1 -1
  204. package/scss/utilities/width.scss +1 -1
  205. package/scss/utilities/z-index.scss +1 -1
  206. package/scss/utilities.scss +1 -1
package/dist/css/init.css CHANGED
@@ -1,2 +1,2 @@
1
- @layer graupl.normalize, graupl.base, graupl.layout, graupl.component, graupl.theme, graupl.utilities, graupl.state;
2
- /*# sourceMappingURL=init.css.map */
1
+ @layer graupl.normalize,graupl.base,graupl.layout,graupl.component,graupl.theme,graupl.utilities,graupl.state;
2
+ /*# sourceMappingURL=init.css.map */
package/dist/css/init.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../node_modules/@graupl/core/src/scss/_init.scss"],"names":[],"mappings":"AAKA,mHAAA","file":"init.css"}
1
+ {"version":3,"sourceRoot":null,"mappings":"ACKA","sources":["dist/css/init.css","var/www/html/node_modules/@graupl/core/src/scss/_init.scss"],"sourcesContent":["@layer graupl.normalize, graupl.base, graupl.layout, graupl.component, graupl.theme, graupl.utilities, graupl.state;","// @graupl/core layer initialization styles.\n\n@use \"defaults\" as root-defaults;\n\n// Layer initialization.\n@layer #{root-defaults.$id}.normalize, #{root-defaults.$id}.base, #{root-defaults.$id}.layout, #{root-defaults.$id}.component, #{root-defaults.$id}.theme, #{root-defaults.$id}.utilities, #{root-defaults.$id}.state;\n"],"names":[]}
package/dist/css/layout/columns.css CHANGED
@@ -1,2 +1,2 @@
1
- @layer graupl.layout{.columns{display:grid;gap:var(--graupl-columns-row-gap,var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))) var(--graupl-columns-column-gap,var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1)));grid-template-columns:var(--graupl-columns-grid-template-columns,repeat(auto-fit,minmax(var(--graupl-columns-min-width,calc((var(--graupl-columns-content-max-width, var(--graupl-content-max-width, 96ch)) - var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3))),var(--graupl-columns-max-width,1fr))))}.columns>*{grid-column:span var(--graupl-columns-span,1)}.columns .columns{grid-template-columns:subgrid}.count-1{--graupl-columns-count:1}.count-1 .span-2,.count-1 .span-3,.count-1 .span-4,.count-1 .span-5,.count-1 .span-6,.span-1{--graupl-columns-span:1}.count-2{--graupl-columns-count:2}.count-2 .span-3,.count-2 .span-4,.count-2 .span-5,.count-2 .span-6,.span-2{--graupl-columns-span:2}.count-3{--graupl-columns-count:3}.count-3 .span-4,.count-3 .span-5,.count-3 .span-6,.span-3{--graupl-columns-span:3}.count-4{--graupl-columns-count:4}.count-4 .span-5,.count-4 .span-6,.span-4{--graupl-columns-span:4}.count-5{--graupl-columns-count:5}.count-5 .span-6,.span-5{--graupl-columns-span:5}.count-6{--graupl-columns-count:6}.count-6 .span-6,.count-6 .span-7,.span-6{--graupl-columns-span:6}@container (width <= 47ch){.columns{--graupl-columns-min-width:1fr}.columns .span-1,.columns .span-2,.columns .span-3,.columns .span-4,.columns .span-5,.columns .span-6,.columns>*{--graupl-columns-span:1}}}
2
- /*# sourceMappingURL=columns.css.map */
1
+ @layer graupl.layout{.columns{grid-template-columns:var(--graupl-columns-grid-template-columns,repeat(auto-fit,minmax(var(--graupl-columns-min-width,calc((var(--graupl-columns-content-max-width,var(--graupl-content-max-width,96ch)) - var(--graupl-columns-column-gap,var(--graupl-spacer-5,calc(1*var(--graupl-spacer,1rem))))*(var(--graupl-columns-count,3) - 1))/var(--graupl-columns-count,3))),var(--graupl-columns-max-width,1fr))));gap:var(--graupl-columns-row-gap,var(--graupl-spacer-5,calc(1*var(--graupl-spacer,1rem))))var(--graupl-columns-column-gap,var(--graupl-spacer-5,calc(1*var(--graupl-spacer,1rem))));display:grid}.columns>*{grid-column:span var(--graupl-columns-span,1)}.columns .columns{grid-template-columns:subgrid}.count-1{--graupl-columns-count:1}.count-1 .span-2,.count-1 .span-3,.count-1 .span-4,.count-1 .span-5,.count-1 .span-6,.span-1{--graupl-columns-span:1}.count-2{--graupl-columns-count:2}.count-2 .span-3,.count-2 .span-4,.count-2 .span-5,.count-2 .span-6,.span-2{--graupl-columns-span:2}.count-3{--graupl-columns-count:3}.count-3 .span-4,.count-3 .span-5,.count-3 .span-6,.span-3{--graupl-columns-span:3}.count-4{--graupl-columns-count:4}.count-4 .span-5,.count-4 .span-6,.span-4{--graupl-columns-span:4}.count-5{--graupl-columns-count:5}.count-5 .span-6,.span-5{--graupl-columns-span:5}.count-6{--graupl-columns-count:6}.count-6 .span-7,.count-6 .span-6,.span-6{--graupl-columns-span:6}@container (width<=575px){.columns{--graupl-columns-min-width:1fr}.columns>*,.columns .span-1,.columns .span-2,.columns .span-3,.columns .span-4,.columns .span-5,.columns .span-6{--graupl-columns-span:1}}}
2
+ /*# sourceMappingURL=columns.css.map */
package/dist/css/layout/columns.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../node_modules/@graupl/core/src/scss/mixins/_layer.scss","../../../node_modules/@graupl/core/src/scss/layout/columns/_index.scss","columns.css","../../../node_modules/@graupl/core/src/scss/mixins/_container.scss"],"names":[],"mappings":"AASI,qBCkEF,SACE,YAAA,CAEA,sLAAA,CADA,8ZCtEF,CDyEE,WACE,6CCvEJ,CD8EE,kBACE,6BC5EJ,CDkFE,SACE,wBChFJ,CD6FE,6FACE,uBC5EJ,CD6DE,SACE,wBC3DJ,CDwEE,4EACE,uBC1DJ,CD2CE,SACE,wBCzCJ,CDsDE,2DACE,uBC3CJ,CD4BE,SACE,wBC1BJ,CDuCE,0CACE,uBC/BJ,CDgBE,SACE,wBCdJ,CD2BE,yBACE,uBCtBJ,CDOE,SACE,wBCLJ,CDkBE,0CACE,uBCVJ,CC7EA,2BF8FE,SACE,8BCdF,CD0BI,iHACE,uBCNN,CACF,CACF","file":"columns.css"}
1
+ {"version":3,"sourceRoot":null,"mappings":"AESI,qBCwEF,4lBAKE,yDAQA,gDAOA,kCAOI,qHAPJ,kCAOI,oGAPJ,kCAOI,mFAPJ,kCAOI,kEAPJ,kCAOI,iDAPJ,kCAOI,kECrFN,0BDoGE,wCAGE","sources":["dist/css/layout/columns.css","var/www/html/node_modules/@graupl/core/src/scss/layout/columns/_variables.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_layer.scss","var/www/html/node_modules/@graupl/core/src/scss/layout/columns/_index.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_container.scss"],"sourcesContent":["/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n/* stylelint-enable scss/operator-no-newline-after */\n@layer graupl.layout {\n .columns {\n display: grid;\n grid-template-columns: var(--graupl-columns-grid-template-columns, repeat(auto-fit, minmax(var(--graupl-columns-min-width, calc((var(--graupl-columns-content-max-width, var(--graupl-content-max-width, 96ch)) - var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3))), var(--graupl-columns-max-width, 1fr))));\n gap: var(--graupl-columns-row-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))));\n }\n .columns > * {\n grid-column: span var(--graupl-columns-span, 1);\n }\n .columns .columns {\n grid-template-columns: subgrid;\n }\n .count-1 {\n --graupl-columns-count: 1;\n }\n .count-1 .span-2 {\n --graupl-columns-span: 1;\n }\n .count-1 .span-3 {\n --graupl-columns-span: 1;\n }\n .count-1 .span-4 {\n --graupl-columns-span: 1;\n }\n .count-1 .span-5 {\n --graupl-columns-span: 1;\n }\n .count-1 .span-6 {\n --graupl-columns-span: 1;\n }\n .span-1 {\n --graupl-columns-span: 1;\n }\n .count-2 {\n --graupl-columns-count: 2;\n }\n .count-2 .span-3 {\n --graupl-columns-span: 2;\n }\n .count-2 .span-4 {\n --graupl-columns-span: 2;\n }\n .count-2 .span-5 {\n --graupl-columns-span: 2;\n }\n .count-2 .span-6 {\n --graupl-columns-span: 2;\n }\n .span-2 {\n --graupl-columns-span: 2;\n }\n .count-3 {\n --graupl-columns-count: 3;\n }\n .count-3 .span-4 {\n --graupl-columns-span: 3;\n }\n .count-3 .span-5 {\n --graupl-columns-span: 3;\n }\n .count-3 .span-6 {\n --graupl-columns-span: 3;\n }\n .span-3 {\n --graupl-columns-span: 3;\n }\n .count-4 {\n --graupl-columns-count: 4;\n }\n .count-4 .span-5 {\n --graupl-columns-span: 4;\n }\n .count-4 .span-6 {\n --graupl-columns-span: 4;\n }\n .span-4 {\n --graupl-columns-span: 4;\n }\n .count-5 {\n --graupl-columns-count: 5;\n }\n .count-5 .span-6 {\n --graupl-columns-span: 5;\n }\n .span-5 {\n --graupl-columns-span: 5;\n }\n .count-6 {\n --graupl-columns-count: 6;\n }\n .count-6 .span-7 {\n --graupl-columns-span: 6;\n }\n .count-6 .span-6 {\n --graupl-columns-span: 6;\n }\n .span-6 {\n --graupl-columns-span: 6;\n }\n @container (width <= 575px) {\n .columns {\n --graupl-columns-min-width: 1fr;\n }\n .columns > * {\n --graupl-columns-span: 1;\n }\n .columns .span-1 {\n --graupl-columns-span: 1;\n }\n .columns .span-2 {\n --graupl-columns-span: 1;\n }\n .columns .span-3 {\n --graupl-columns-span: 1;\n }\n .columns .span-4 {\n --graupl-columns-span: 1;\n }\n .columns .span-5 {\n --graupl-columns-span: 1;\n }\n .columns .span-6 {\n --graupl-columns-span: 1;\n }\n }\n}","// @graupl/core columns layout variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n\n@use \"defaults\";\n@use \"../../variables\" as root-variables;\n@use \"../../defaults\" as root-defaults;\n@use \"sass:map\";\n\n// --graupl-columns-row-gap\n$columns-row-gap: var(\n --#{root-defaults.$prefix}columns-row-gap,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-columns-column-gap\n$columns-column-gap: var(\n --#{root-defaults.$prefix}columns-column-gap,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-columns-count\n$columns-count: var(\n --#{root-defaults.$prefix}columns-count,\n #{defaults.$columns-count}\n);\n\n// --graupl-columns-content-max-width\n$columns-content-max-width: var(\n --#{root-defaults.$prefix}columns-content-max-width,\n #{root-variables.$content-max-width}\n);\n\n// Calculate the min-width of each column based on the content-max-width and column-gap.\n// We take the maximum width of the page and subtract the gap width multiplied by the number of\n// columns minus one (to account for the gaps between columns).\n// We then divide this by the number of columns to get the min-width of each column.\n/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n// --graupl-columns-min-width\n$columns-min-width: var(\n --#{root-defaults.$prefix}columns-min-width,\n calc(\n (\n #{$columns-content-max-width} - #{$columns-column-gap} *\n (#{$columns-count} - 1)\n ) /\n #{$columns-count}\n )\n);\n/* stylelint-enable scss/operator-no-newline-after */\n// --graupl-columns-max-width\n$columns-max-width: var(\n --#{root-defaults.$prefix}columns-max-width,\n #{defaults.$columns-max-width}\n);\n\n// --graupl-columns-grid-template-columns\n$columns-grid-template-columns: var(\n --#{root-defaults.$prefix}columns-grid-template-columns,\n repeat(auto-fit, minmax(#{$columns-min-width}, #{$columns-max-width}))\n);\n\n// --graupl-columns-span\n$columns-span: var(\n --#{root-defaults.$prefix}columns-span,\n #{defaults.$columns-span}\n);\n","// @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 columns layout styles.\n//\n// This module provides the layout styles for the columns component.\n//\n// The columns component is a grid container that provides a responsive grid layout for content.\n// The columns will automatically adjust their size and number of columns based on the available space.\n//\n// Nesting a columns component directly inside of another columns component will implement a subgrid\n// area. In standard usage, this effectively locks the child columns to be a single column layout.\n// This happens because the maximum width allowed for columns uses `--graupl-content-max-width` to calculate\n// the columns widths, not the columns' parent width. This works as designed.\n//\n// At a certain breakpoint, columns will be forced to be a single column layout to avoid horizontal bleeding.\n// This is controlled by the `force-single-column` screen trigger.\n//\n// The following classes are generated by default:\n// - `.columns`: The main columns component.\n// - `.count-1`: Sets the number of columns in the columns component to 1.\n// - `.count-2`: Sets the number of columns in the columns component to 2.\n// - `.count-3`: Sets the number of columns in the columns component to 3.\n// - `.count-4`: Sets the number of columns in the columns component to 4.\n// - `.count-5`: Sets the number of columns in the columns component to 5.\n// - `.count-6`: Sets the number of columns in the columns component to 6.\n// - `.span-1`: Sets the span of a column in the columns component to 1.\n// - `.span-2`: Sets the span of a column in the columns component to 2.\n// - `.span-3`: Sets the span of a column in the columns component to 3.\n// - `.span-4`: Sets the span of a column in the columns component to 4.\n// - `.span-5`: Sets the span of a column in the columns component to 5.\n// - `.span-6`: Sets the span of a column in the columns component to 6.\n//\n// The following custom properties can be used to customize the columns component:\n// | Property | Description | Default Value |\n// | --- | --- | --- |\n// | `--graupl-columns-row-gap` | The gap between the rows of the columns. | `var(--graupl-spacer-5)` |\n// | `--graupl-columns-column-gap` | The gap between the columns of the columns. | `var(--graupl-spacer-5)` |\n// | `--graupl-columns-count` | The maximum number of columns. | `3` |\n// | `--graupl-columns-content-max-width` | The maximum width of the content inside the columns. | `var(--graupl-content-max-width)` |\n// | `--graupl-columns-min-width` | The minimum width of each column. | `calc((var(--graupl-columns-content-max-width) - var(--graupl-columns-column-gap) * (var(--graupl-columns-count) - 1)) / var(--graupl-columns-count))` |\n// | `--graupl-columns-max-width` | The maximum width of each column. | `1fr` |\n// | `--graupl-columns-grid-template-columns` | The grid template columns for the columns. | `repeat(auto-fit, minmax(var(--graupl-columns-min-width), var(--graupl-columns-max-width)))` |\n// | `--graupl-columns-span` | The span of each column. | `1` |\n//\n// The following sass variables can be used to customize the generation of the columns component:\n// | Variable | Description | Default Value |\n// | --- | --- | --- |\n// | `$selector-base` | The base selector for the component. | `\".\"` |\n// | `$modifier-selector-base` | The base selector for component modifiers. | `\".\"` |\n// | `$columns-selector-base` | The base selector for the columns component. | `$selector-base` |\n// | `$columns-selector` | The selector for the columns component. | `\"columns\"` |\n// | `$columns-count-selector-base` | The base selector for the count class. | `$selector-base` |\n// | `$columns-count-selector-prefix` | The prefix for the count class. | `\"count-\"` |\n// | `$columns-span-selector-base` | The base selector for the span class. | `$selector-base` |\n// | `$columns-span-selector-prefix` | The prefix for the span class. | `\"span-\"` |\n// | `$columns-max-width` | The maximum width of each column. | `1fr` |\n// | `$columns-count` | The default number of columns. | `3` |\n// | `$columns-min-count` | The minimum number of columns used to generate `.count-#` classes. | `1` |\n// | `$columns-max-count` | The maximum number of columns used to generate `.count-#` classes. | `6` |\n// | `$columns-span` | The default span of each column. | `1` |\n//\n// @example\n// <div class=\"columns\">\n// <div>Column 1</div>\n// <div>Column 2</div>\n// <div>Column 3</div>\n// </div>\n//\n// @example\n// <div class=\"columns count-4\">\n// <div>Column 1</div>\n// <div class=\"span-2\">Column 2</div>\n// <div>Column 3</div>\n// </div>\n\n@use \"variables\" as *;\n@use \"defaults\";\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/layer\" as *;\n@use \"../../mixins/container\";\n\n@include layer(layout) {\n // .columns\n #{defaults.$columns-selector-base}#{defaults.$columns-selector} {\n display: grid;\n grid-template-columns: $columns-grid-template-columns;\n gap: $columns-row-gap $columns-column-gap;\n\n > * {\n grid-column: span $columns-span;\n }\n\n // Set any child columns to subgrid.\n // This is necessary to avoid breaking the layout.\n //\n // .columns\n #{defaults.$columns-selector-base}#{defaults.$columns-selector} {\n grid-template-columns: subgrid;\n }\n }\n\n @for $i from defaults.$columns-min-count through defaults.$columns-max-count {\n // .count-#{$i}\n #{defaults.$columns-count-selector-base}#{defaults.$columns-count-selector-prefix}#{$i} {\n --#{root-defaults.$prefix}columns-count: #{$i};\n\n // For span values bigger than the actual column count, set them to the\n // maximum column count so they don't break the layout.\n @for $j from $i + 1 through defaults.$columns-max-count {\n // .span-#{$j}\n #{defaults.$columns-span-selector-base}#{defaults.$columns-span-selector-prefix}#{$j} {\n --#{root-defaults.$prefix}columns-span: #{$i};\n }\n }\n }\n\n // .span-#{$i}\n #{defaults.$columns-span-selector-base}#{defaults.$columns-span-selector-prefix}#{$i} {\n --#{root-defaults.$prefix}columns-span: #{$i};\n }\n }\n\n // Disable columns on small screens to avoid horizontal bleeding.\n @include container.trigger(force-single-column) {\n // .columns\n #{defaults.$columns-selector-base}#{defaults.$columns-selector} {\n --#{root-defaults.$prefix}columns-min-width: #{defaults.$columns-max-width};\n\n > * {\n --#{root-defaults.$prefix}columns-span: 1;\n }\n\n // All spans should be set to 1 to avoid adding columns.\n @for $i\n from defaults.$columns-min-count\n through defaults.$columns-max-count\n {\n // .span-#{$i}\n #{defaults.$columns-span-selector-base}#{defaults.$columns-span-selector-prefix}#{$i} {\n --#{root-defaults.$prefix}columns-span: 1;\n }\n }\n }\n }\n}\n","// @graupl/core container mixins.\n//\n// A series of mixins to generate breakpoints.\n\n// @use \"../defaults\" as root-defaults;\n@use \"../functions/container\";\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n@use \"sass:meta\";\n\n// A mixin to generate a minimum container width media query.\n@mixin up($size) {\n $container-size: container.min($size);\n\n @container (#{$container-size} <= width) {\n @content;\n }\n}\n\n// A mixin to generate a maximum container width media query.\n@mixin down($size) {\n $container-size: container.max($size);\n\n @container (width <= #{$container-size}) {\n @content;\n }\n}\n\n// A mixin to generate a range of container widths media query.\n@mixin between($min, $max) {\n $container-size: container.range($min, $max);\n $min: map.get($container-size, \"min\");\n $max: map.get($container-size, \"max\");\n\n @container (#{$min} <= width <= #{$max}) {\n @content;\n }\n}\n\n@mixin only($size) {\n @include between($size, $size) {\n @content;\n }\n}\n\n@mixin trigger($trigger) {\n @if not map.has-key(root-defaults.$container-size-triggers, $trigger) {\n @error \"The container size trigger \\\"#{$trigger}\\\" does not exist.\";\n }\n\n $container-size-trigger: map.get(\n root-defaults.$container-size-triggers,\n $trigger\n );\n\n @if not map.has-key($container-size-trigger, \"mixin\") {\n @error \"The container size trigger \\\"#{$trigger}\\\" does not have a mixin key.\";\n }\n\n @if not map.has-key($container-size-trigger, \"args\") {\n @error \"The container size trigger \\\"#{$trigger}\\\" does not have an args key.\";\n }\n\n $mixin-name: map.get($container-size-trigger, \"mixin\");\n $mixin-args: map.get($container-size-trigger, \"args\");\n\n @if not meta.mixin-exists($mixin-name) {\n @error \"The mixin \\\"#{$mixin-name}\\\" does not exist.\";\n }\n\n $mixin: meta.get-mixin($mixin-name);\n\n @if meta.accepts-content($mixin) {\n @include meta.apply($mixin, $mixin-args...) {\n @content;\n }\n } @else {\n @warn \"The mixin \\\"#{$mixin-name}\\\" does not accept content.\";\n }\n}\n"],"names":[]}
package/dist/css/layout/container.css CHANGED
@@ -1,2 +1,2 @@
1
- @layer graupl.layout{.container{container-type:inline-size;display:grid;grid-template-columns:[full-width-start] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-container-gap,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,0),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)) + 15ch)) + 20ch)) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch))) / 2)))) [breakout-start] var(--graupl-container-breakout-section-width,minmax(var(--graupl-container-breakout-section-min-width,0),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)) + 15ch)) - 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-container-gap, 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,0),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)) + 15ch)) - 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,0),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)) + 15ch)) + 20ch)) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch))) / 2)))) [feature-end] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-container-gap,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer, 1rem))))),var(--graupl-container-full-width-section-max-width,1fr))) [full-width-end]}.container>.container{container-type:normal;grid-column:1/-1;grid-template-columns:subgrid}.container>:not(.container,.breakout,.full-width,.feature){grid-column:content}.container .contain{display:grid;grid-template-columns:subgrid}.container .contain>:not(.container,.breakout,.full-width,.feature){grid-column:content}.container .breakout{grid-column:breakout}.container .feature{grid-column:feature}.container .full-width{grid-column:full-width}.container.sidebars .sidebar-left{display:grid;grid-column:1/-1;grid-template-columns:subgrid}.container.sidebars .sidebar-left>:not(.container,.breakout,.full-width,.feature,.sidebar-left){grid-column:content}.container.sidebars .sidebar-right{display:grid;grid-column:1/-1;grid-template-columns:subgrid}.container.sidebars .sidebar-right>:not(.container,.breakout,.full-width,.feature,.sidebar-right){grid-column:content}.container.sidebars .content-right{display:grid;grid-column:1/-1;grid-template-columns:subgrid}.container.sidebars .content-right .contain>:not(.container,.breakout,.full-width,.feature,.sidebar-right),.container.sidebars .content-right>:not(.container,.breakout,.full-width,.feature,.sidebar-right){grid-column:content}.container.sidebars .content-left{display:grid;grid-column:1/-1;grid-template-columns:subgrid}.container.sidebars .content-left .contain>:not(.container,.breakout,.full-width,.feature,.sidebar-left,.sidebar-right),.container.sidebars .content-left>:not(.container,.breakout,.full-width,.feature,.sidebar-left,.sidebar-right){grid-column:content}.container.sidebars .inner-content{display:grid;grid-column:1/-1;grid-template-columns:subgrid}.container.sidebars .inner-content .contain>:not(.container,.breakout,.full-width,.feature,.sidebar-left,.sidebar-right),.container.sidebars .inner-content>:not(.container,.breakout,.full-width,.feature,.sidebar-left,.sidebar-right){grid-column:content}@media screen and (108ch <= width){.container.sidebars{grid-template-columns:[full-width-start] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-container-gap,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,0),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)) + 15ch)) + 20ch)) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch))) / 2)))) [breakout-start] var(--graupl-container-breakout-section-width,minmax(var(--graupl-container-breakout-section-min-width,0),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)) + 15ch)) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)))) [content-start sidebar-left-start content-left-start] var(--graupl-container-sidebar-left-section-width,var(--graupl-container-sidebar-width,20ch)) [sidebar-left-end inner-content-start content-right-start] var(--graupl-container-inner-content-section-width,calc(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-container-gap, 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))))) - var(--graupl-container-sidebar-left-section-width, var(--graupl-container-sidebar-width, 20ch)) - var(--graupl-container-sidebar-right-section-width, var(--graupl-container-sidebar-width, 20ch)))) [content-left-end inner-content-end sidebar-right-start] var(--graupl-container-sidebar-right-section-width,var(--graupl-container-sidebar-width,20ch)) [content-right-end sidebar-right-end content-end] var(--graupl-container-breakout-section-width,minmax(var(--graupl-container-breakout-section-min-width,0),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)) + 15ch)) - 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,0),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)) + 15ch)) + 20ch)) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch))) / 2)))) [feature-end] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-container-gap,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer, 1rem))))),var(--graupl-container-full-width-section-max-width,1fr))) [full-width-end]}.container.sidebars .sidebar-left{grid-row:1}.container.sidebars .sidebar-left:not(.container),.container.sidebars .sidebar-left:not(.container) .breakout,.container.sidebars .sidebar-left:not(.container) .container,.container.sidebars .sidebar-left:not(.container) .feature,.container.sidebars .sidebar-left:not(.container) .full-width{grid-column-end:sidebar-left-end}.container.sidebars .sidebar-left .contain>:not(.container,.breakout,.full-width,.feature),.container.sidebars .sidebar-left>:not(.container,.breakout,.full-width,.feature){grid-column:sidebar-left}.container.sidebars .sidebar-right{grid-row:1}.container.sidebars .sidebar-right:not(.container),.container.sidebars .sidebar-right:not(.container) .breakout,.container.sidebars .sidebar-right:not(.container) .container,.container.sidebars .sidebar-right:not(.container) .feature,.container.sidebars .sidebar-right:not(.container) .full-width{grid-column-start:sidebar-right-start}.container.sidebars .sidebar-right .contain>:not(.container,.breakout,.full-width,.feature),.container.sidebars .sidebar-right>:not(.container,.breakout,.full-width,.feature){grid-column:sidebar-right}.container.sidebars .content-right{grid-row:1}.container.sidebars .content-right:not(.container),.container.sidebars .content-right:not(.container) .breakout,.container.sidebars .content-right:not(.container) .container,.container.sidebars .content-right:not(.container) .feature,.container.sidebars .content-right:not(.container) .full-width{grid-column-start:content-right-start}.container.sidebars .content-right .contain>:not(.container,.breakout,.full-width,.feature),.container.sidebars .content-right>:not(.container,.breakout,.full-width,.feature){grid-column:content-right}.container.sidebars .content-left{grid-row:1}.container.sidebars .content-left:not(.container),.container.sidebars .content-left:not(.container) .breakout,.container.sidebars .content-left:not(.container) .container,.container.sidebars .content-left:not(.container) .feature,.container.sidebars .content-left:not(.container) .full-width{grid-column-end:content-left-end}.container.sidebars .content-left .contain>:not(.container,.breakout,.full-width,.feature),.container.sidebars .content-left>:not(.container,.breakout,.full-width,.feature){grid-column:content-left}.container.sidebars .inner-content{grid-row:1}.container.sidebars .inner-content .contain>:not(.container,.breakout,.full-width,.feature),.container.sidebars .inner-content:not(.container),.container.sidebars .inner-content:not(.container) .breakout,.container.sidebars .inner-content:not(.container) .container,.container.sidebars .inner-content:not(.container) .feature,.container.sidebars .inner-content:not(.container) .full-width,.container.sidebars .inner-content>:not(.container,.breakout,.full-width,.feature){grid-column:inner-content}}}
2
- /*# sourceMappingURL=container.css.map */
1
+ @layer graupl.layout{.container{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];overflow-wrap:break-word;display:grid;container-type:inline-size}.container>.container{grid-column:1/-1;grid-template-columns:subgrid;container-type:normal}.container>:not(.container,.breakout,.full-width,.feature){grid-column:content}.container .contain{grid-template-columns:subgrid;display:grid}.container .contain>:not(.container,.breakout,.full-width,.feature){grid-column:content}.container .breakout{grid-column:breakout}.container .feature{grid-column:feature}.container .full-width{grid-column:full-width}.container.sidebars .sidebar-left{grid-column:1/-1;grid-template-columns:subgrid;align-content:flex-start;display:grid}.container.sidebars .sidebar-left>:not(.container,.breakout,.full-width,.feature,.sidebar-left){grid-column:content}.container.sidebars .sidebar-right{grid-column:1/-1;grid-template-columns:subgrid;align-content:flex-start;display:grid}.container.sidebars .sidebar-right>:not(.container,.breakout,.full-width,.feature,.sidebar-right){grid-column:content}.container.sidebars .content{grid-column:1/-1;grid-template-columns:subgrid;align-content:flex-start;display:grid}.container.sidebars .content>:not(.container,.breakout,.full-width,.feature,.sidebar-left,.sidebar-right),.container.sidebars .content .contain>:not(.container,.breakout,.full-width,.feature,.sidebar-left,.sidebar-right){grid-column:content}.container.sidebars-left .sidebar{grid-column:1/-1;grid-template-columns:subgrid;align-content:flex-start;display:grid}.container.sidebars-left .sidebar>:not(.container,.breakout,.full-width,.feature,.sidebar){grid-column:content}.container.sidebars-left .content{grid-column:1/-1;grid-template-columns:subgrid;align-content:flex-start;display:grid}.container.sidebars-left .content>:not(.container,.breakout,.full-width,.feature,.sidebar),.container.sidebars-left .content .contain>:not(.container,.breakout,.full-width,.feature,.sidebar){grid-column:content}.container.sidebars-right .sidebar{grid-column:1/-1;grid-template-columns:subgrid;align-content:flex-start;display:grid}.container.sidebars-right .sidebar>:not(.container,.breakout,.full-width,.feature,.sidebar){grid-column:content}.container.sidebars-right .content{grid-column:1/-1;grid-template-columns:subgrid;align-content:flex-start;display:grid}.container.sidebars-right .content>:not(.container,.breakout,.full-width,.feature,.sidebar),.container.sidebars-right .content .contain>:not(.container,.breakout,.full-width,.feature,.sidebar){grid-column:content}@media screen and (width>=1024px){.container.sidebars{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]}.container.sidebars>.sidebar-left{grid-row:1/-1;grid-template:subgrid}.container.sidebars>.sidebar-left:not(.container),.container.sidebars>.sidebar-left:not(.container) .container,.container.sidebars>.sidebar-left:not(.container) .breakout,.container.sidebars>.sidebar-left:not(.container) .full-width,.container.sidebars>.sidebar-left:not(.container) .feature{grid-column-end:content-start}.container.sidebars>.sidebar-left>:not(.container,.breakout,.full-width,.feature),.container.sidebars>.sidebar-left .contain>:not(.container,.breakout,.full-width,.feature){grid-column:sidebar-left}.container.sidebars>.sidebar-right{grid-row:1/-1;grid-template:subgrid}.container.sidebars>.sidebar-right:not(.container),.container.sidebars>.sidebar-right:not(.container) .container,.container.sidebars>.sidebar-right:not(.container) .breakout,.container.sidebars>.sidebar-right:not(.container) .full-width,.container.sidebars>.sidebar-right:not(.container) .feature{grid-column-start:content-end}.container.sidebars>.sidebar-right>:not(.container,.breakout,.full-width,.feature),.container.sidebars>.sidebar-right .contain>:not(.container,.breakout,.full-width,.feature){grid-column:sidebar-right}.container.sidebars>.content>.content{grid-row:1}.container.sidebars-left{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]}.container.sidebars-left>.sidebar{grid-row:1/-1;grid-template:subgrid}.container.sidebars-left>.sidebar:not(.container),.container.sidebars-left>.sidebar:not(.container) .container,.container.sidebars-left>.sidebar:not(.container) .breakout,.container.sidebars-left>.sidebar:not(.container) .full-width,.container.sidebars-left>.sidebar:not(.container) .feature{grid-column-end:content-start}.container.sidebars-left>.sidebar>:not(.container,.breakout,.full-width,.feature),.container.sidebars-left>.sidebar .contain>:not(.container,.breakout,.full-width,.feature){grid-column:sidebar}.container.sidebars-left>.content{grid-row:1}.container.sidebars-right{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]}.container.sidebars-right>.sidebar{grid-row:1/-1;grid-template:subgrid}.container.sidebars-right>.sidebar:not(.container),.container.sidebars-right>.sidebar:not(.container) .container,.container.sidebars-right>.sidebar:not(.container) .breakout,.container.sidebars-right>.sidebar:not(.container) .full-width,.container.sidebars-right>.sidebar:not(.container) .feature{grid-column-start:content-end}.container.sidebars-right>.sidebar>:not(.container,.breakout,.full-width,.feature),.container.sidebars-right>.sidebar .contain>:not(.container,.breakout,.full-width,.feature){grid-column:sidebar}.container.sidebars-right>.content{grid-row:1}}}
2
+ /*# sourceMappingURL=container.css.map */
package/dist/css/layout/container.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../node_modules/@graupl/core/src/scss/mixins/_layer.scss","../../../node_modules/@graupl/core/src/scss/layout/container/_index.scss","container.css","../../../node_modules/@graupl/core/src/scss/mixins/_screen.scss"],"names":[],"mappings":"AASI,qBCwIF,WAWE,0BAAA,CAVA,YAAA,CACA,m5FC1IF,CDyJE,sBAGE,qBAAA,CAFA,gBAAA,CACA,6BCtJJ,CD8JE,2DAME,mBC9JJ,CDqKE,oBACE,YAAA,CACA,6BCnKJ,CDsKI,oEAME,mBCtKN,CD6KE,qBACE,oBC3KJ,CD+KE,oBACE,mBC7KJ,CDiLE,uBACE,sBC/KJ,CDqLI,kCACE,YAAA,CACA,gBAAA,CACA,6BCnLN,CDsLM,gGAOE,mBCtLR,CD2LI,mCACE,YAAA,CACA,gBAAA,CACA,6BCzLN,CD4LM,kGAOE,mBC5LR,CDiMI,mCACE,YAAA,CACA,gBAAA,CACA,6BC/LN,CDkNQ,6MAOE,mBC3MV,CDiNI,kCACE,YAAA,CACA,gBAAA,CACA,6BC/MN,CDmOQ,uOAQE,mBC3NV,CDiOI,mCACE,YAAA,CACA,gBAAA,CACA,6BC/NN,CDmPQ,yOAQE,mBC3OV,CC9GA,mCFiWI,oBACE,mhHChPJ,CD6PI,kCACE,UC3PN,CDoQQ,oSAKE,gCClQV,CDwRQ,6KAME,wBClRV,CDwRI,mCACE,UCtRN,CD+RQ,ySAKE,qCC7RV,CDmTQ,+KAME,yBC7SV,CDmTI,mCACE,UCjTN,CD0TQ,ySAKE,qCCxTV,CD8UQ,+KAME,yBCxUV,CD8UI,kCACE,UC5UN,CDqVQ,oSAKE,gCCnVV,CDyWQ,6KAME,wBCnWV,CDyWI,mCACE,UCvWN,CD2YQ,wdAME,yBC9XV,CACF,CACF","file":"container.css"}
1
+ {"version":3,"sourceRoot":null,"mappings":"AESI,qBCuMF,soGAkBE,2FAUA,+EAoDA,+DAKE,wFAaF,0CAKA,wCAKA,8CAOE,uHAOE,oHAYF,wHAOE,sHAYF,kHAOE,iPAkCF,uHAOE,+GAYF,uHAOE,mNAgCF,wHAOE,gHAYF,wHAOE,qNCxdN,kCDufI,61NAYE,sEAWI,kUAYF,sMA2BF,uEAWI,uUAYF,yMA0BF,iDAOF,4tKAYE,sEAWI,kUAYF,iMA2BF,6CAMF,muKAYE,uEAWI,uUAYF,mMA2BF","sources":["dist/css/layout/container.css","var/www/html/node_modules/@graupl/core/src/scss/layout/container/_variables.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_layer.scss","var/www/html/node_modules/@graupl/core/src/scss/layout/container/_index.scss","var/www/html/node_modules/@graupl/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 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 > .content {\n grid-row: 1;\n }\n .container.sidebars-left {\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 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}","// @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@use \"defaults\";\n@use \"../../variables\" as root-variables;\n@use \"../../defaults\" as root-defaults;\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/* 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//\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// | `$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. | `$selector-base` |\n// | `$container-selector` | The selector for the container component. | `container` |\n// | `$container-breakout-selector-base` | The base selector for the breakout container component. | `$selector-base` |\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. | `$selector-base` |\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. | `$selector-base` |\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. | `$modifier-selector-base` |\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. | `$modifier-selector-base` |\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. | `$selector-base` |\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. | `$selector-base` |\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//\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 \"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 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 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 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","// @graupl/core screen mixins.\n//\n// A series of mixins to generate breakpoints.\n\n// @use \"../defaults\" as root-defaults;\n@use \"../functions/screen\";\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n@use \"sass:meta\";\n\n// A mixin to generate a minimum screen width media query.\n@mixin up($size) {\n $screen-size: screen.min($size);\n\n @media screen and (#{$screen-size} <= width) {\n @content;\n }\n}\n\n// A mixin to generate a maximum screen width media query.\n@mixin down($size) {\n $screen-size: screen.max($size);\n\n @media screen and (width <= #{$screen-size}) {\n @content;\n }\n}\n\n// A mixin to generate a range of screen widths media query.\n@mixin between($min, $max) {\n $screen-size: screen.range($min, $max);\n $min: map.get($screen-size, \"min\");\n $max: map.get($screen-size, \"max\");\n\n @media screen and (#{$min} <= width <= #{$max}) {\n @content;\n }\n}\n\n@mixin only($size) {\n @include between($size, $size) {\n @content;\n }\n}\n\n@mixin trigger($trigger) {\n @if not map.has-key(root-defaults.$screen-size-triggers, $trigger) {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not exist.\";\n }\n\n $screen-size-trigger: map.get(root-defaults.$screen-size-triggers, $trigger);\n\n @if not map.has-key($screen-size-trigger, \"mixin\") {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not have a mixin key.\";\n }\n\n @if not map.has-key($screen-size-trigger, \"args\") {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not have an args key.\";\n }\n\n $mixin-name: map.get($screen-size-trigger, \"mixin\");\n $mixin-args: map.get($screen-size-trigger, \"args\");\n\n @if not meta.mixin-exists($mixin-name) {\n @error \"The mixin \\\"#{$mixin-name}\\\" does not exist.\";\n }\n\n $mixin: meta.get-mixin($mixin-name);\n\n @if meta.accepts-content($mixin) {\n @include meta.apply($mixin, $mixin-args...) {\n @content;\n }\n } @else {\n @warn \"The mixin \\\"#{$mixin-name}\\\" does not accept content.\";\n }\n}\n"],"names":[]}