@nldd/design-system 0.8.44 → 0.8.46

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 (384) hide show
  1. package/dist/components/actions/button/button.d.ts +3 -0
  2. package/dist/components/actions/button/button.d.ts.map +1 -1
  3. package/dist/components/actions/button/button.js +26 -0
  4. package/dist/components/actions/button/button.js.map +1 -1
  5. package/dist/components/actions/button/button.styles.d.ts.map +1 -1
  6. package/dist/components/actions/button/button.styles.js +170 -292
  7. package/dist/components/actions/button/button.styles.js.map +1 -1
  8. package/dist/components/actions/button/button.template.d.ts.map +1 -1
  9. package/dist/components/actions/button/button.template.js +4 -1
  10. package/dist/components/actions/button/button.template.js.map +1 -1
  11. package/dist/components/actions/button-bar/button-bar.styles.d.ts.map +1 -1
  12. package/dist/components/actions/button-bar/button-bar.styles.js +33 -79
  13. package/dist/components/actions/button-bar/button-bar.styles.js.map +1 -1
  14. package/dist/components/actions/button-group/button-group.styles.d.ts.map +1 -1
  15. package/dist/components/actions/button-group/button-group.styles.js +24 -37
  16. package/dist/components/actions/button-group/button-group.styles.js.map +1 -1
  17. package/dist/components/actions/icon-button/icon-button.d.ts +2 -0
  18. package/dist/components/actions/icon-button/icon-button.d.ts.map +1 -1
  19. package/dist/components/actions/icon-button/icon-button.js +23 -0
  20. package/dist/components/actions/icon-button/icon-button.js.map +1 -1
  21. package/dist/components/actions/icon-button/icon-button.styles.d.ts.map +1 -1
  22. package/dist/components/actions/icon-button/icon-button.styles.js +166 -292
  23. package/dist/components/actions/icon-button/icon-button.styles.js.map +1 -1
  24. package/dist/components/actions/split-button/split-button.styles.d.ts.map +1 -1
  25. package/dist/components/actions/split-button/split-button.styles.js +32 -67
  26. package/dist/components/actions/split-button/split-button.styles.js.map +1 -1
  27. package/dist/components/actions/toolbar/toolbar.d.ts.map +1 -1
  28. package/dist/components/actions/toolbar/toolbar.js +1 -0
  29. package/dist/components/actions/toolbar/toolbar.js.map +1 -1
  30. package/dist/components/actions/toolbar/toolbar.styles.d.ts.map +1 -1
  31. package/dist/components/actions/toolbar/toolbar.styles.js +42 -95
  32. package/dist/components/actions/toolbar/toolbar.styles.js.map +1 -1
  33. package/dist/components/components.js +1 -1
  34. package/dist/components/content/blockquote/blockquote.d.ts +1 -9
  35. package/dist/components/content/blockquote/blockquote.d.ts.map +1 -1
  36. package/dist/components/content/blockquote/blockquote.js +1 -6
  37. package/dist/components/content/blockquote/blockquote.js.map +1 -1
  38. package/dist/components/content/blockquote/blockquote.styles.d.ts.map +1 -1
  39. package/dist/components/content/blockquote/blockquote.styles.js +11 -10
  40. package/dist/components/content/blockquote/blockquote.styles.js.map +1 -1
  41. package/dist/components/content/blockquote/blockquote.template.d.ts.map +1 -1
  42. package/dist/components/content/blockquote/blockquote.template.js +4 -7
  43. package/dist/components/content/blockquote/blockquote.template.js.map +1 -1
  44. package/dist/components/content/code/code.d.ts +4 -0
  45. package/dist/components/content/code/code.d.ts.map +1 -1
  46. package/dist/components/content/code/code.js +20 -0
  47. package/dist/components/content/code/code.js.map +1 -1
  48. package/dist/components/content/code/code.styles.d.ts.map +1 -1
  49. package/dist/components/content/code/code.styles.js +7 -23
  50. package/dist/components/content/code/code.styles.js.map +1 -1
  51. package/dist/components/content/icon/icon-aliases.d.ts.map +1 -1
  52. package/dist/components/content/icon/icon-aliases.js +16 -7
  53. package/dist/components/content/icon/icon-aliases.js.map +1 -1
  54. package/dist/components/content/icon/icon-registry.d.ts.map +1 -1
  55. package/dist/components/content/icon/icon-registry.js +7 -1
  56. package/dist/components/content/icon/icon-registry.js.map +1 -1
  57. package/dist/components/content/icon/icon.d.ts +26 -1
  58. package/dist/components/content/icon/icon.d.ts.map +1 -1
  59. package/dist/components/content/icon/icon.js +30 -1
  60. package/dist/components/content/icon/icon.js.map +1 -1
  61. package/dist/components/content/icon/icon.styles.d.ts.map +1 -1
  62. package/dist/components/content/icon/icon.styles.js +65 -14
  63. package/dist/components/content/icon/icon.styles.js.map +1 -1
  64. package/dist/components/content/icon/icon.template.d.ts.map +1 -1
  65. package/dist/components/content/icon/icon.template.js +1 -5
  66. package/dist/components/content/icon/icon.template.js.map +1 -1
  67. package/dist/components/content/keyboard-shortcut/keyboard-shortcut.styles.d.ts.map +1 -1
  68. package/dist/components/content/keyboard-shortcut/keyboard-shortcut.styles.js +7 -13
  69. package/dist/components/content/keyboard-shortcut/keyboard-shortcut.styles.js.map +1 -1
  70. package/dist/components/content/tag/tag.d.ts +5 -0
  71. package/dist/components/content/tag/tag.d.ts.map +1 -1
  72. package/dist/components/content/tag/tag.js +22 -0
  73. package/dist/components/content/tag/tag.js.map +1 -1
  74. package/dist/components/content/tag/tag.styles.d.ts.map +1 -1
  75. package/dist/components/content/tag/tag.styles.js +12 -23
  76. package/dist/components/content/tag/tag.styles.js.map +1 -1
  77. package/dist/components/content/tag/tag.template.d.ts.map +1 -1
  78. package/dist/components/content/tag/tag.template.js +12 -8
  79. package/dist/components/content/tag/tag.template.js.map +1 -1
  80. package/dist/components/content/title/title.styles.d.ts.map +1 -1
  81. package/dist/components/content/title/title.styles.js +84 -97
  82. package/dist/components/content/title/title.styles.js.map +1 -1
  83. package/dist/components/content/tooltip/tooltip.styles.d.ts.map +1 -1
  84. package/dist/components/content/tooltip/tooltip.styles.js +12 -15
  85. package/dist/components/content/tooltip/tooltip.styles.js.map +1 -1
  86. package/dist/components/forms/form-actions/form-actions.styles.d.ts.map +1 -1
  87. package/dist/components/forms/form-actions/form-actions.styles.js +16 -16
  88. package/dist/components/forms/form-actions/form-actions.styles.js.map +1 -1
  89. package/dist/components/forms/form-field/form-field.styles.d.ts.map +1 -1
  90. package/dist/components/forms/form-field/form-field.styles.js +42 -49
  91. package/dist/components/forms/form-field/form-field.styles.js.map +1 -1
  92. package/dist/components/{index-1v33GjGX.js → index-BvNDgQGM.js} +3494 -5439
  93. package/dist/components/inputs/checkbox/checkbox.styles.d.ts.map +1 -1
  94. package/dist/components/inputs/checkbox/checkbox.styles.js +4 -25
  95. package/dist/components/inputs/checkbox/checkbox.styles.js.map +1 -1
  96. package/dist/components/inputs/checkbox-field/checkbox-field.styles.d.ts.map +1 -1
  97. package/dist/components/inputs/checkbox-field/checkbox-field.styles.js +3 -6
  98. package/dist/components/inputs/checkbox-field/checkbox-field.styles.js.map +1 -1
  99. package/dist/components/inputs/code-editor/code-editor.styles.d.ts.map +1 -1
  100. package/dist/components/inputs/code-editor/code-editor.styles.js +15 -17
  101. package/dist/components/inputs/code-editor/code-editor.styles.js.map +1 -1
  102. package/dist/components/inputs/combo-box/combo-box.d.ts +2 -0
  103. package/dist/components/inputs/combo-box/combo-box.d.ts.map +1 -1
  104. package/dist/components/inputs/combo-box/combo-box.js +5 -0
  105. package/dist/components/inputs/combo-box/combo-box.js.map +1 -1
  106. package/dist/components/inputs/combo-box/combo-box.styles.d.ts.map +1 -1
  107. package/dist/components/inputs/combo-box/combo-box.styles.js +33 -61
  108. package/dist/components/inputs/combo-box/combo-box.styles.js.map +1 -1
  109. package/dist/components/inputs/combo-box/combo-box.template.d.ts.map +1 -1
  110. package/dist/components/inputs/combo-box/combo-box.template.js +1 -0
  111. package/dist/components/inputs/combo-box/combo-box.template.js.map +1 -1
  112. package/dist/components/inputs/dropdown/dropdown.d.ts +8 -0
  113. package/dist/components/inputs/dropdown/dropdown.d.ts.map +1 -1
  114. package/dist/components/inputs/dropdown/dropdown.js +17 -0
  115. package/dist/components/inputs/dropdown/dropdown.js.map +1 -1
  116. package/dist/components/inputs/dropdown/dropdown.styles.d.ts.map +1 -1
  117. package/dist/components/inputs/dropdown/dropdown.styles.js +82 -97
  118. package/dist/components/inputs/dropdown/dropdown.styles.js.map +1 -1
  119. package/dist/components/inputs/multi-line-text-field/multi-line-text-field.d.ts +2 -0
  120. package/dist/components/inputs/multi-line-text-field/multi-line-text-field.d.ts.map +1 -1
  121. package/dist/components/inputs/multi-line-text-field/multi-line-text-field.js +5 -0
  122. package/dist/components/inputs/multi-line-text-field/multi-line-text-field.js.map +1 -1
  123. package/dist/components/inputs/multi-line-text-field/multi-line-text-field.styles.d.ts.map +1 -1
  124. package/dist/components/inputs/multi-line-text-field/multi-line-text-field.styles.js +32 -59
  125. package/dist/components/inputs/multi-line-text-field/multi-line-text-field.styles.js.map +1 -1
  126. package/dist/components/inputs/multi-line-text-field/multi-line-text-field.template.d.ts.map +1 -1
  127. package/dist/components/inputs/multi-line-text-field/multi-line-text-field.template.js +1 -0
  128. package/dist/components/inputs/multi-line-text-field/multi-line-text-field.template.js.map +1 -1
  129. package/dist/components/inputs/number-field/number-field.styles.d.ts.map +1 -1
  130. package/dist/components/inputs/number-field/number-field.styles.js +27 -52
  131. package/dist/components/inputs/number-field/number-field.styles.js.map +1 -1
  132. package/dist/components/inputs/password-field/password-field.styles.d.ts.map +1 -1
  133. package/dist/components/inputs/password-field/password-field.styles.js +42 -89
  134. package/dist/components/inputs/password-field/password-field.styles.js.map +1 -1
  135. package/dist/components/inputs/password-field/password-field.template.d.ts.map +1 -1
  136. package/dist/components/inputs/password-field/password-field.template.js +1 -0
  137. package/dist/components/inputs/password-field/password-field.template.js.map +1 -1
  138. package/dist/components/inputs/radio-button/radio-button.styles.d.ts.map +1 -1
  139. package/dist/components/inputs/radio-button/radio-button.styles.js +5 -26
  140. package/dist/components/inputs/radio-button/radio-button.styles.js.map +1 -1
  141. package/dist/components/inputs/radio-button-field/radio-button-field.styles.d.ts.map +1 -1
  142. package/dist/components/inputs/radio-button-field/radio-button-field.styles.js +3 -6
  143. package/dist/components/inputs/radio-button-field/radio-button-field.styles.js.map +1 -1
  144. package/dist/components/inputs/search-field/search-field.d.ts +2 -0
  145. package/dist/components/inputs/search-field/search-field.d.ts.map +1 -1
  146. package/dist/components/inputs/search-field/search-field.js +5 -0
  147. package/dist/components/inputs/search-field/search-field.js.map +1 -1
  148. package/dist/components/inputs/search-field/search-field.styles.d.ts.map +1 -1
  149. package/dist/components/inputs/search-field/search-field.styles.js +38 -73
  150. package/dist/components/inputs/search-field/search-field.styles.js.map +1 -1
  151. package/dist/components/inputs/search-field/search-field.template.d.ts.map +1 -1
  152. package/dist/components/inputs/search-field/search-field.template.js +1 -0
  153. package/dist/components/inputs/search-field/search-field.template.js.map +1 -1
  154. package/dist/components/inputs/segmented-control/segmented-control.styles.d.ts.map +1 -1
  155. package/dist/components/inputs/segmented-control/segmented-control.styles.js +44 -55
  156. package/dist/components/inputs/segmented-control/segmented-control.styles.js.map +1 -1
  157. package/dist/components/inputs/segmented-control/segmented-control.template.js +1 -1
  158. package/dist/components/inputs/segmented-control/segmented-control.template.js.map +1 -1
  159. package/dist/components/inputs/stepper/stepper.styles.d.ts.map +1 -1
  160. package/dist/components/inputs/stepper/stepper.styles.js +16 -30
  161. package/dist/components/inputs/stepper/stepper.styles.js.map +1 -1
  162. package/dist/components/inputs/switch/switch.styles.d.ts.map +1 -1
  163. package/dist/components/inputs/switch/switch.styles.js +26 -69
  164. package/dist/components/inputs/switch/switch.styles.js.map +1 -1
  165. package/dist/components/inputs/switch-field/switch-field.styles.d.ts.map +1 -1
  166. package/dist/components/inputs/switch-field/switch-field.styles.js +3 -6
  167. package/dist/components/inputs/switch-field/switch-field.styles.js.map +1 -1
  168. package/dist/components/inputs/text-field/text-field.d.ts +2 -0
  169. package/dist/components/inputs/text-field/text-field.d.ts.map +1 -1
  170. package/dist/components/inputs/text-field/text-field.js +5 -0
  171. package/dist/components/inputs/text-field/text-field.js.map +1 -1
  172. package/dist/components/inputs/text-field/text-field.styles.d.ts.map +1 -1
  173. package/dist/components/inputs/text-field/text-field.styles.js +30 -67
  174. package/dist/components/inputs/text-field/text-field.styles.js.map +1 -1
  175. package/dist/components/inputs/text-field/text-field.template.d.ts.map +1 -1
  176. package/dist/components/inputs/text-field/text-field.template.js +1 -0
  177. package/dist/components/inputs/text-field/text-field.template.js.map +1 -1
  178. package/dist/components/inputs/toggle-button/toggle-button.d.ts +5 -1
  179. package/dist/components/inputs/toggle-button/toggle-button.d.ts.map +1 -1
  180. package/dist/components/inputs/toggle-button/toggle-button.js +16 -2
  181. package/dist/components/inputs/toggle-button/toggle-button.js.map +1 -1
  182. package/dist/components/inputs/toggle-button/toggle-button.styles.d.ts.map +1 -1
  183. package/dist/components/inputs/toggle-button/toggle-button.styles.js +61 -96
  184. package/dist/components/inputs/toggle-button/toggle-button.styles.js.map +1 -1
  185. package/dist/components/inputs/toggle-button/toggle-button.template.d.ts.map +1 -1
  186. package/dist/components/inputs/toggle-button/toggle-button.template.js +10 -4
  187. package/dist/components/inputs/toggle-button/toggle-button.template.js.map +1 -1
  188. package/dist/components/inputs/token/token.styles.d.ts.map +1 -1
  189. package/dist/components/inputs/token/token.styles.js +33 -49
  190. package/dist/components/inputs/token/token.styles.js.map +1 -1
  191. package/dist/components/layout/app-view/app-view.styles.d.ts.map +1 -1
  192. package/dist/components/layout/app-view/app-view.styles.js +13 -7
  193. package/dist/components/layout/app-view/app-view.styles.js.map +1 -1
  194. package/dist/components/layout/card/card.styles.d.ts.map +1 -1
  195. package/dist/components/layout/card/card.styles.js +1 -7
  196. package/dist/components/layout/card/card.styles.js.map +1 -1
  197. package/dist/components/layout/collection/collection.styles.d.ts.map +1 -1
  198. package/dist/components/layout/collection/collection.styles.js +17 -39
  199. package/dist/components/layout/collection/collection.styles.js.map +1 -1
  200. package/dist/components/layout/collection/collection.template.d.ts.map +1 -1
  201. package/dist/components/layout/collection/collection.template.js +1 -0
  202. package/dist/components/layout/collection/collection.template.js.map +1 -1
  203. package/dist/components/layout/container/container.d.ts +41 -43
  204. package/dist/components/layout/container/container.d.ts.map +1 -1
  205. package/dist/components/layout/container/container.js +143 -132
  206. package/dist/components/layout/container/container.js.map +1 -1
  207. package/dist/components/layout/container/container.styles.d.ts.map +1 -1
  208. package/dist/components/layout/container/container.styles.js +87 -1133
  209. package/dist/components/layout/container/container.styles.js.map +1 -1
  210. package/dist/components/layout/container/container.template.d.ts.map +1 -1
  211. package/dist/components/layout/container/container.template.js +1 -5
  212. package/dist/components/layout/container/container.template.js.map +1 -1
  213. package/dist/components/layout/divider/divider.styles.d.ts.map +1 -1
  214. package/dist/components/layout/divider/divider.styles.js +3 -1
  215. package/dist/components/layout/divider/divider.styles.js.map +1 -1
  216. package/dist/components/layout/page/page.styles.d.ts.map +1 -1
  217. package/dist/components/layout/page/page.styles.js +13 -19
  218. package/dist/components/layout/page/page.styles.js.map +1 -1
  219. package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.styles.d.ts.map +1 -1
  220. package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.styles.js +6 -15
  221. package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.styles.js.map +1 -1
  222. package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.d.ts.map +1 -1
  223. package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.js +12 -11
  224. package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.js.map +1 -1
  225. package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.styles.d.ts.map +1 -1
  226. package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.styles.js +12 -11
  227. package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.styles.js.map +1 -1
  228. package/dist/components/layout/page-sections/simple-section/simple-section.styles.d.ts.map +1 -1
  229. package/dist/components/layout/page-sections/simple-section/simple-section.styles.js +6 -15
  230. package/dist/components/layout/page-sections/simple-section/simple-section.styles.js.map +1 -1
  231. package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.d.ts.map +1 -1
  232. package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.js +12 -11
  233. package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.js.map +1 -1
  234. package/dist/components/layout/popover/popover.d.ts +2 -1
  235. package/dist/components/layout/popover/popover.d.ts.map +1 -1
  236. package/dist/components/layout/popover/popover.js +21 -4
  237. package/dist/components/layout/popover/popover.js.map +1 -1
  238. package/dist/components/layout/popover/popover.styles.d.ts.map +1 -1
  239. package/dist/components/layout/popover/popover.styles.js +7 -12
  240. package/dist/components/layout/popover/popover.styles.js.map +1 -1
  241. package/dist/components/layout/sheet/sheet.styles.d.ts.map +1 -1
  242. package/dist/components/layout/sheet/sheet.styles.js +27 -38
  243. package/dist/components/layout/sheet/sheet.styles.js.map +1 -1
  244. package/dist/components/layout/spacer/spacer.styles.d.ts.map +1 -1
  245. package/dist/components/layout/spacer/spacer.styles.js +12 -4
  246. package/dist/components/layout/spacer/spacer.styles.js.map +1 -1
  247. package/dist/components/layout/split-views/bar-split-view/bar-split-view.styles.d.ts.map +1 -1
  248. package/dist/components/layout/split-views/bar-split-view/bar-split-view.styles.js +23 -20
  249. package/dist/components/layout/split-views/bar-split-view/bar-split-view.styles.js.map +1 -1
  250. package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.styles.d.ts.map +1 -1
  251. package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.styles.js +65 -78
  252. package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.styles.js.map +1 -1
  253. package/dist/components/layout/split-views/side-by-side-split-view/side-by-side-split-view.styles.d.ts.map +1 -1
  254. package/dist/components/layout/split-views/side-by-side-split-view/side-by-side-split-view.styles.js +19 -12
  255. package/dist/components/layout/split-views/side-by-side-split-view/side-by-side-split-view.styles.js.map +1 -1
  256. package/dist/components/layout/split-views/split-view-divider/split-view-divider.styles.d.ts.map +1 -1
  257. package/dist/components/layout/split-views/split-view-divider/split-view-divider.styles.js +25 -45
  258. package/dist/components/layout/split-views/split-view-divider/split-view-divider.styles.js.map +1 -1
  259. package/dist/components/layout/split-views/split-view-pane/split-view-pane.styles.d.ts.map +1 -1
  260. package/dist/components/layout/split-views/split-view-pane/split-view-pane.styles.js +21 -7
  261. package/dist/components/layout/split-views/split-view-pane/split-view-pane.styles.js.map +1 -1
  262. package/dist/components/layout/split-views/stacked-split-view/stacked-split-view.styles.d.ts.map +1 -1
  263. package/dist/components/layout/split-views/stacked-split-view/stacked-split-view.styles.js +19 -12
  264. package/dist/components/layout/split-views/stacked-split-view/stacked-split-view.styles.js.map +1 -1
  265. package/dist/components/layout/window/window.styles.d.ts.map +1 -1
  266. package/dist/components/layout/window/window.styles.js +18 -26
  267. package/dist/components/layout/window/window.styles.js.map +1 -1
  268. package/dist/components/lists-and-menus/cells/cell/cell.styles.d.ts.map +1 -1
  269. package/dist/components/lists-and-menus/cells/cell/cell.styles.js +12 -11
  270. package/dist/components/lists-and-menus/cells/cell/cell.styles.js.map +1 -1
  271. package/dist/components/lists-and-menus/cells/description-cell/description-cell.styles.d.ts.map +1 -1
  272. package/dist/components/lists-and-menus/cells/description-cell/description-cell.styles.js +23 -26
  273. package/dist/components/lists-and-menus/cells/description-cell/description-cell.styles.js.map +1 -1
  274. package/dist/components/lists-and-menus/cells/drag-handle-cell/drag-handle-cell.styles.d.ts.map +1 -1
  275. package/dist/components/lists-and-menus/cells/drag-handle-cell/drag-handle-cell.styles.js +15 -21
  276. package/dist/components/lists-and-menus/cells/drag-handle-cell/drag-handle-cell.styles.js.map +1 -1
  277. package/dist/components/lists-and-menus/cells/icon-cell/icon-cell.styles.d.ts.map +1 -1
  278. package/dist/components/lists-and-menus/cells/icon-cell/icon-cell.styles.js +40 -92
  279. package/dist/components/lists-and-menus/cells/icon-cell/icon-cell.styles.js.map +1 -1
  280. package/dist/components/lists-and-menus/cells/spacer-cell/spacer-cell.styles.d.ts.map +1 -1
  281. package/dist/components/lists-and-menus/cells/spacer-cell/spacer-cell.styles.js +26 -25
  282. package/dist/components/lists-and-menus/cells/spacer-cell/spacer-cell.styles.js.map +1 -1
  283. package/dist/components/lists-and-menus/cells/text-cell/text-cell.styles.d.ts.map +1 -1
  284. package/dist/components/lists-and-menus/cells/text-cell/text-cell.styles.js +64 -125
  285. package/dist/components/lists-and-menus/cells/text-cell/text-cell.styles.js.map +1 -1
  286. package/dist/components/lists-and-menus/cells/title-cell/title-cell.styles.d.ts.map +1 -1
  287. package/dist/components/lists-and-menus/cells/title-cell/title-cell.styles.js +71 -132
  288. package/dist/components/lists-and-menus/cells/title-cell/title-cell.styles.js.map +1 -1
  289. package/dist/components/lists-and-menus/list/list.styles.d.ts.map +1 -1
  290. package/dist/components/lists-and-menus/list/list.styles.js +20 -47
  291. package/dist/components/lists-and-menus/list/list.styles.js.map +1 -1
  292. package/dist/components/lists-and-menus/list-item/list-item.styles.d.ts.map +1 -1
  293. package/dist/components/lists-and-menus/list-item/list-item.styles.js +29 -20
  294. package/dist/components/lists-and-menus/list-item/list-item.styles.js.map +1 -1
  295. package/dist/components/lists-and-menus/menu/menu.d.ts +28 -9
  296. package/dist/components/lists-and-menus/menu/menu.d.ts.map +1 -1
  297. package/dist/components/lists-and-menus/menu/menu.js +105 -26
  298. package/dist/components/lists-and-menus/menu/menu.js.map +1 -1
  299. package/dist/components/lists-and-menus/menu/menu.styles.d.ts.map +1 -1
  300. package/dist/components/lists-and-menus/menu/menu.styles.js +88 -135
  301. package/dist/components/lists-and-menus/menu/menu.styles.js.map +1 -1
  302. package/dist/components/lists-and-menus/menu/menu.template.js +2 -2
  303. package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.d.ts.map +1 -1
  304. package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.js +10 -6
  305. package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.js.map +1 -1
  306. package/dist/components/navigation/link/link.styles.d.ts.map +1 -1
  307. package/dist/components/navigation/link/link.styles.js +24 -33
  308. package/dist/components/navigation/link/link.styles.js.map +1 -1
  309. package/dist/components/navigation/menu-bar/menu-bar.d.ts +8 -8
  310. package/dist/components/navigation/menu-bar/menu-bar.d.ts.map +1 -1
  311. package/dist/components/navigation/menu-bar/menu-bar.js +34 -15
  312. package/dist/components/navigation/menu-bar/menu-bar.js.map +1 -1
  313. package/dist/components/navigation/menu-bar/menu-bar.styles.d.ts.map +1 -1
  314. package/dist/components/navigation/menu-bar/menu-bar.styles.js +3 -2
  315. package/dist/components/navigation/menu-bar/menu-bar.styles.js.map +1 -1
  316. package/dist/components/navigation/menu-bar/menu-bar.template.d.ts.map +1 -1
  317. package/dist/components/navigation/menu-bar/menu-bar.template.js +1 -0
  318. package/dist/components/navigation/menu-bar/menu-bar.template.js.map +1 -1
  319. package/dist/components/navigation/menu-bar-item/menu-bar-item.d.ts +2 -1
  320. package/dist/components/navigation/menu-bar-item/menu-bar-item.d.ts.map +1 -1
  321. package/dist/components/navigation/menu-bar-item/menu-bar-item.js +13 -5
  322. package/dist/components/navigation/menu-bar-item/menu-bar-item.js.map +1 -1
  323. package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.d.ts.map +1 -1
  324. package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.js +9 -11
  325. package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.js.map +1 -1
  326. package/dist/components/navigation/pagination/pagination.d.ts +8 -0
  327. package/dist/components/navigation/pagination/pagination.d.ts.map +1 -1
  328. package/dist/components/navigation/pagination/pagination.js +11 -0
  329. package/dist/components/navigation/pagination/pagination.js.map +1 -1
  330. package/dist/components/navigation/pagination/pagination.styles.d.ts.map +1 -1
  331. package/dist/components/navigation/pagination/pagination.styles.js +80 -27
  332. package/dist/components/navigation/pagination/pagination.styles.js.map +1 -1
  333. package/dist/components/navigation/pagination/pagination.template.d.ts.map +1 -1
  334. package/dist/components/navigation/pagination/pagination.template.js +1 -0
  335. package/dist/components/navigation/pagination/pagination.template.js.map +1 -1
  336. package/dist/components/navigation/skip-link/skip-link.styles.d.ts.map +1 -1
  337. package/dist/components/navigation/skip-link/skip-link.styles.js +6 -8
  338. package/dist/components/navigation/skip-link/skip-link.styles.js.map +1 -1
  339. package/dist/components/navigation/tab-bar/tab-bar.d.ts +3 -10
  340. package/dist/components/navigation/tab-bar/tab-bar.d.ts.map +1 -1
  341. package/dist/components/navigation/tab-bar/tab-bar.js +3 -28
  342. package/dist/components/navigation/tab-bar/tab-bar.js.map +1 -1
  343. package/dist/components/navigation/tab-bar/tab-bar.styles.d.ts.map +1 -1
  344. package/dist/components/navigation/tab-bar/tab-bar.styles.js +22 -65
  345. package/dist/components/navigation/tab-bar/tab-bar.styles.js.map +1 -1
  346. package/dist/components/navigation/tab-bar/tab-bar.template.js +1 -1
  347. package/dist/components/navigation/tab-bar/tab-bar.template.js.map +1 -1
  348. package/dist/components/navigation/top-navigation-bar/top-navigation-bar.d.ts +9 -1
  349. package/dist/components/navigation/top-navigation-bar/top-navigation-bar.d.ts.map +1 -1
  350. package/dist/components/navigation/top-navigation-bar/top-navigation-bar.js +56 -17
  351. package/dist/components/navigation/top-navigation-bar/top-navigation-bar.js.map +1 -1
  352. package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.d.ts.map +1 -1
  353. package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.js +13 -7
  354. package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.js.map +1 -1
  355. package/dist/components/navigation/top-navigation-bar/top-navigation-bar.template.d.ts.map +1 -1
  356. package/dist/components/navigation/top-navigation-bar/top-navigation-bar.template.js +6 -10
  357. package/dist/components/navigation/top-navigation-bar/top-navigation-bar.template.js.map +1 -1
  358. package/dist/components/navigation/top-title-bar/top-title-bar.styles.d.ts.map +1 -1
  359. package/dist/components/navigation/top-title-bar/top-title-bar.styles.js +13 -34
  360. package/dist/components/navigation/top-title-bar/top-title-bar.styles.js.map +1 -1
  361. package/dist/components/{prism-typescript-D2EqsCqV.js → prism-typescript-BX4tFNFm.js} +1 -1
  362. package/dist/components/status-and-feedback/badge/badge.styles.d.ts.map +1 -1
  363. package/dist/components/status-and-feedback/badge/badge.styles.js +21 -34
  364. package/dist/components/status-and-feedback/badge/badge.styles.js.map +1 -1
  365. package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.d.ts.map +1 -1
  366. package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.js +32 -33
  367. package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.js.map +1 -1
  368. package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.d.ts.map +1 -1
  369. package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.js +18 -22
  370. package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.js.map +1 -1
  371. package/dist/css/settings.css +33 -7
  372. package/dist/utilities/color-scheme-repaint.d.ts +44 -0
  373. package/dist/utilities/color-scheme-repaint.d.ts.map +1 -0
  374. package/dist/utilities/color-scheme-repaint.js +88 -0
  375. package/dist/utilities/color-scheme-repaint.js.map +1 -0
  376. package/package.json +11 -8
  377. package/dist/components/content/blockquote/blockquote.i18n.d.ts +0 -5
  378. package/dist/components/content/blockquote/blockquote.i18n.d.ts.map +0 -1
  379. package/dist/components/content/blockquote/blockquote.i18n.js +0 -4
  380. package/dist/components/content/blockquote/blockquote.i18n.js.map +0 -1
  381. package/dist/utilities/popover-guard.d.ts +0 -10
  382. package/dist/utilities/popover-guard.d.ts.map +0 -1
  383. package/dist/utilities/popover-guard.js +0 -10
  384. package/dist/utilities/popover-guard.js.map +0 -1
package/dist/components/layout/container/container.styles.js CHANGED
@@ -10,1146 +10,100 @@ export const containerStyles = css `
10
10
  /* # Host */
11
11
 
12
12
  :host {
13
- display: block;
13
+ --_justify-content: initial;
14
+ --_align-items: initial;
15
+ --_gap: 0;
16
+ --_sm-gap: var(--_gap);
17
+ --_md-gap: var(--_gap);
18
+ --_lg-gap: var(--_gap);
19
+ --_padding-top: 0;
20
+ --_padding-right: 0;
21
+ --_padding-bottom: 0;
22
+ --_padding-left: 0;
23
+ --_sm-padding-top: var(--_padding-top);
24
+ --_sm-padding-right: var(--_padding-right);
25
+ --_sm-padding-bottom: var(--_padding-bottom);
26
+ --_sm-padding-left: var(--_padding-left);
27
+ --_md-padding-top: var(--_padding-top);
28
+ --_md-padding-right: var(--_padding-right);
29
+ --_md-padding-bottom: var(--_padding-bottom);
30
+ --_md-padding-left: var(--_padding-left);
31
+ --_lg-padding-top: var(--_padding-top);
32
+ --_lg-padding-right: var(--_padding-right);
33
+ --_lg-padding-bottom: var(--_padding-bottom);
34
+ --_lg-padding-left: var(--_padding-left);
35
+
36
+ display: flex;
37
+ height: auto;
38
+ flex-direction: column;
39
+ flex-wrap: nowrap;
40
+ justify-content: var(--_justify-content);
41
+ align-items: var(--_align-items);
42
+ gap: var(--_gap);
43
+ padding-top: var(--_padding-top);
44
+ padding-right: var(--_padding-right);
45
+ padding-bottom: var(--_padding-bottom);
46
+ padding-left: var(--_padding-left);
47
+
48
+ @media (max-width: ${smMax}) {
49
+ gap: var(--_sm-gap);
50
+ padding-top: var(--_sm-padding-top);
51
+ padding-right: var(--_sm-padding-right);
52
+ padding-bottom: var(--_sm-padding-bottom);
53
+ padding-left: var(--_sm-padding-left);
54
+ }
55
+
56
+ @media (min-width: ${mdMin}) and (max-width: ${mdMax}) {
57
+ gap: var(--_md-gap);
58
+ padding-top: var(--_md-padding-top);
59
+ padding-right: var(--_md-padding-right);
60
+ padding-bottom: var(--_md-padding-bottom);
61
+ padding-left: var(--_md-padding-left);
62
+ }
63
+
64
+ @media (min-width: ${lgMin}) {
65
+ gap: var(--_lg-gap);
66
+ padding-top: var(--_lg-padding-top);
67
+ padding-right: var(--_lg-padding-right);
68
+ padding-bottom: var(--_lg-padding-bottom);
69
+ padding-left: var(--_lg-padding-left);
70
+ }
71
+
72
+ @container layout-container (max-width: ${smMax}) {
73
+ gap: var(--_sm-gap);
74
+ padding-top: var(--_sm-padding-top);
75
+ padding-right: var(--_sm-padding-right);
76
+ padding-bottom: var(--_sm-padding-bottom);
77
+ padding-left: var(--_sm-padding-left);
78
+ }
79
+
80
+ @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
81
+ gap: var(--_md-gap);
82
+ padding-top: var(--_md-padding-top);
83
+ padding-right: var(--_md-padding-right);
84
+ padding-bottom: var(--_md-padding-bottom);
85
+ padding-left: var(--_md-padding-left);
86
+ }
87
+
88
+ @container layout-container (min-width: ${lgMin}) {
89
+ gap: var(--_lg-gap);
90
+ padding-top: var(--_lg-padding-top);
91
+ padding-right: var(--_lg-padding-right);
92
+ padding-bottom: var(--_lg-padding-bottom);
93
+ padding-left: var(--_lg-padding-left);
94
+ }
14
95
  }
15
96
 
16
97
  :host([hidden]) {
17
98
  display: none;
18
99
  }
19
100
 
20
-
21
- /* # Block */
22
-
23
- .container {
24
- height: 100%;
101
+ :host([direction="row"]) {
102
+ flex-direction: row;
25
103
  }
26
104
 
27
-
28
- /* # Padding — base */
29
-
30
- :host([padding="0"]) .container { padding: 0; }
31
- :host([padding="2"]) .container { padding: var(--primitives-space-2); }
32
- :host([padding="4"]) .container { padding: var(--primitives-space-4); }
33
- :host([padding="6"]) .container { padding: var(--primitives-space-6); }
34
- :host([padding="8"]) .container { padding: var(--primitives-space-8); }
35
- :host([padding="10"]) .container { padding: var(--primitives-space-10); }
36
- :host([padding="12"]) .container { padding: var(--primitives-space-12); }
37
- :host([padding="16"]) .container { padding: var(--primitives-space-16); }
38
- :host([padding="20"]) .container { padding: var(--primitives-space-20); }
39
- :host([padding="24"]) .container { padding: var(--primitives-space-24); }
40
- :host([padding="28"]) .container { padding: var(--primitives-space-28); }
41
- :host([padding="32"]) .container { padding: var(--primitives-space-32); }
42
- :host([padding="40"]) .container { padding: var(--primitives-space-40); }
43
- :host([padding="44"]) .container { padding: var(--primitives-space-44); }
44
- :host([padding="48"]) .container { padding: var(--primitives-space-48); }
45
- :host([padding="56"]) .container { padding: var(--primitives-space-56); }
46
- :host([padding="64"]) .container { padding: var(--primitives-space-64); }
47
- :host([padding="80"]) .container { padding: var(--primitives-space-80); }
48
- :host([padding="96"]) .container { padding: var(--primitives-space-96); }
49
-
50
-
51
- /* # Padding — sm viewport */
52
-
53
- :host([sm-padding="0"]) .container { @media (max-width: ${smMax}) { padding: 0; } }
54
- :host([sm-padding="2"]) .container { @media (max-width: ${smMax}) { padding: var(--primitives-space-2); } }
55
- :host([sm-padding="4"]) .container { @media (max-width: ${smMax}) { padding: var(--primitives-space-4); } }
56
- :host([sm-padding="6"]) .container { @media (max-width: ${smMax}) { padding: var(--primitives-space-6); } }
57
- :host([sm-padding="8"]) .container { @media (max-width: ${smMax}) { padding: var(--primitives-space-8); } }
58
- :host([sm-padding="10"]) .container { @media (max-width: ${smMax}) { padding: var(--primitives-space-10); } }
59
- :host([sm-padding="12"]) .container { @media (max-width: ${smMax}) { padding: var(--primitives-space-12); } }
60
- :host([sm-padding="16"]) .container { @media (max-width: ${smMax}) { padding: var(--primitives-space-16); } }
61
- :host([sm-padding="20"]) .container { @media (max-width: ${smMax}) { padding: var(--primitives-space-20); } }
62
- :host([sm-padding="24"]) .container { @media (max-width: ${smMax}) { padding: var(--primitives-space-24); } }
63
- :host([sm-padding="28"]) .container { @media (max-width: ${smMax}) { padding: var(--primitives-space-28); } }
64
- :host([sm-padding="32"]) .container { @media (max-width: ${smMax}) { padding: var(--primitives-space-32); } }
65
- :host([sm-padding="40"]) .container { @media (max-width: ${smMax}) { padding: var(--primitives-space-40); } }
66
- :host([sm-padding="44"]) .container { @media (max-width: ${smMax}) { padding: var(--primitives-space-44); } }
67
- :host([sm-padding="48"]) .container { @media (max-width: ${smMax}) { padding: var(--primitives-space-48); } }
68
- :host([sm-padding="56"]) .container { @media (max-width: ${smMax}) { padding: var(--primitives-space-56); } }
69
- :host([sm-padding="64"]) .container { @media (max-width: ${smMax}) { padding: var(--primitives-space-64); } }
70
- :host([sm-padding="80"]) .container { @media (max-width: ${smMax}) { padding: var(--primitives-space-80); } }
71
- :host([sm-padding="96"]) .container { @media (max-width: ${smMax}) { padding: var(--primitives-space-96); } }
72
-
73
-
74
- /* # Padding — md viewport */
75
-
76
- :host([md-padding="0"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: 0; } }
77
- :host([md-padding="2"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-2); } }
78
- :host([md-padding="4"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-4); } }
79
- :host([md-padding="6"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-6); } }
80
- :host([md-padding="8"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-8); } }
81
- :host([md-padding="10"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-10); } }
82
- :host([md-padding="12"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-12); } }
83
- :host([md-padding="16"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-16); } }
84
- :host([md-padding="20"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-20); } }
85
- :host([md-padding="24"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-24); } }
86
- :host([md-padding="28"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-28); } }
87
- :host([md-padding="32"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-32); } }
88
- :host([md-padding="40"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-40); } }
89
- :host([md-padding="44"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-44); } }
90
- :host([md-padding="48"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-48); } }
91
- :host([md-padding="56"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-56); } }
92
- :host([md-padding="64"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-64); } }
93
- :host([md-padding="80"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-80); } }
94
- :host([md-padding="96"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-96); } }
95
-
96
-
97
- /* # Padding — lg viewport */
98
-
99
- :host([lg-padding="0"]) .container { @media (min-width: ${lgMin}) { padding: 0; } }
100
- :host([lg-padding="2"]) .container { @media (min-width: ${lgMin}) { padding: var(--primitives-space-2); } }
101
- :host([lg-padding="4"]) .container { @media (min-width: ${lgMin}) { padding: var(--primitives-space-4); } }
102
- :host([lg-padding="6"]) .container { @media (min-width: ${lgMin}) { padding: var(--primitives-space-6); } }
103
- :host([lg-padding="8"]) .container { @media (min-width: ${lgMin}) { padding: var(--primitives-space-8); } }
104
- :host([lg-padding="10"]) .container { @media (min-width: ${lgMin}) { padding: var(--primitives-space-10); } }
105
- :host([lg-padding="12"]) .container { @media (min-width: ${lgMin}) { padding: var(--primitives-space-12); } }
106
- :host([lg-padding="16"]) .container { @media (min-width: ${lgMin}) { padding: var(--primitives-space-16); } }
107
- :host([lg-padding="20"]) .container { @media (min-width: ${lgMin}) { padding: var(--primitives-space-20); } }
108
- :host([lg-padding="24"]) .container { @media (min-width: ${lgMin}) { padding: var(--primitives-space-24); } }
109
- :host([lg-padding="28"]) .container { @media (min-width: ${lgMin}) { padding: var(--primitives-space-28); } }
110
- :host([lg-padding="32"]) .container { @media (min-width: ${lgMin}) { padding: var(--primitives-space-32); } }
111
- :host([lg-padding="40"]) .container { @media (min-width: ${lgMin}) { padding: var(--primitives-space-40); } }
112
- :host([lg-padding="44"]) .container { @media (min-width: ${lgMin}) { padding: var(--primitives-space-44); } }
113
- :host([lg-padding="48"]) .container { @media (min-width: ${lgMin}) { padding: var(--primitives-space-48); } }
114
- :host([lg-padding="56"]) .container { @media (min-width: ${lgMin}) { padding: var(--primitives-space-56); } }
115
- :host([lg-padding="64"]) .container { @media (min-width: ${lgMin}) { padding: var(--primitives-space-64); } }
116
- :host([lg-padding="80"]) .container { @media (min-width: ${lgMin}) { padding: var(--primitives-space-80); } }
117
- :host([lg-padding="96"]) .container { @media (min-width: ${lgMin}) { padding: var(--primitives-space-96); } }
118
-
119
-
120
- /* # Padding — sm container */
121
-
122
- :host([layout-container-sm-padding="0"]) .container { @container layout-container (max-width: ${smMax}) { padding: 0; } }
123
- :host([layout-container-sm-padding="2"]) .container { @container layout-container (max-width: ${smMax}) { padding: var(--primitives-space-2); } }
124
- :host([layout-container-sm-padding="4"]) .container { @container layout-container (max-width: ${smMax}) { padding: var(--primitives-space-4); } }
125
- :host([layout-container-sm-padding="6"]) .container { @container layout-container (max-width: ${smMax}) { padding: var(--primitives-space-6); } }
126
- :host([layout-container-sm-padding="8"]) .container { @container layout-container (max-width: ${smMax}) { padding: var(--primitives-space-8); } }
127
- :host([layout-container-sm-padding="10"]) .container { @container layout-container (max-width: ${smMax}) { padding: var(--primitives-space-10); } }
128
- :host([layout-container-sm-padding="12"]) .container { @container layout-container (max-width: ${smMax}) { padding: var(--primitives-space-12); } }
129
- :host([layout-container-sm-padding="16"]) .container { @container layout-container (max-width: ${smMax}) { padding: var(--primitives-space-16); } }
130
- :host([layout-container-sm-padding="20"]) .container { @container layout-container (max-width: ${smMax}) { padding: var(--primitives-space-20); } }
131
- :host([layout-container-sm-padding="24"]) .container { @container layout-container (max-width: ${smMax}) { padding: var(--primitives-space-24); } }
132
- :host([layout-container-sm-padding="28"]) .container { @container layout-container (max-width: ${smMax}) { padding: var(--primitives-space-28); } }
133
- :host([layout-container-sm-padding="32"]) .container { @container layout-container (max-width: ${smMax}) { padding: var(--primitives-space-32); } }
134
- :host([layout-container-sm-padding="40"]) .container { @container layout-container (max-width: ${smMax}) { padding: var(--primitives-space-40); } }
135
- :host([layout-container-sm-padding="44"]) .container { @container layout-container (max-width: ${smMax}) { padding: var(--primitives-space-44); } }
136
- :host([layout-container-sm-padding="48"]) .container { @container layout-container (max-width: ${smMax}) { padding: var(--primitives-space-48); } }
137
- :host([layout-container-sm-padding="56"]) .container { @container layout-container (max-width: ${smMax}) { padding: var(--primitives-space-56); } }
138
- :host([layout-container-sm-padding="64"]) .container { @container layout-container (max-width: ${smMax}) { padding: var(--primitives-space-64); } }
139
- :host([layout-container-sm-padding="80"]) .container { @container layout-container (max-width: ${smMax}) { padding: var(--primitives-space-80); } }
140
- :host([layout-container-sm-padding="96"]) .container { @container layout-container (max-width: ${smMax}) { padding: var(--primitives-space-96); } }
141
-
142
-
143
- /* # Padding — md container */
144
-
145
- :host([layout-container-md-padding="0"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: 0; } }
146
- :host([layout-container-md-padding="2"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-2); } }
147
- :host([layout-container-md-padding="4"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-4); } }
148
- :host([layout-container-md-padding="6"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-6); } }
149
- :host([layout-container-md-padding="8"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-8); } }
150
- :host([layout-container-md-padding="10"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-10); } }
151
- :host([layout-container-md-padding="12"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-12); } }
152
- :host([layout-container-md-padding="16"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-16); } }
153
- :host([layout-container-md-padding="20"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-20); } }
154
- :host([layout-container-md-padding="24"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-24); } }
155
- :host([layout-container-md-padding="28"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-28); } }
156
- :host([layout-container-md-padding="32"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-32); } }
157
- :host([layout-container-md-padding="40"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-40); } }
158
- :host([layout-container-md-padding="44"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-44); } }
159
- :host([layout-container-md-padding="48"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-48); } }
160
- :host([layout-container-md-padding="56"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-56); } }
161
- :host([layout-container-md-padding="64"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-64); } }
162
- :host([layout-container-md-padding="80"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-80); } }
163
- :host([layout-container-md-padding="96"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding: var(--primitives-space-96); } }
164
-
165
-
166
- /* # Padding — lg container */
167
-
168
- :host([layout-container-lg-padding="0"]) .container { @container layout-container (min-width: ${lgMin}) { padding: 0; } }
169
- :host([layout-container-lg-padding="2"]) .container { @container layout-container (min-width: ${lgMin}) { padding: var(--primitives-space-2); } }
170
- :host([layout-container-lg-padding="4"]) .container { @container layout-container (min-width: ${lgMin}) { padding: var(--primitives-space-4); } }
171
- :host([layout-container-lg-padding="6"]) .container { @container layout-container (min-width: ${lgMin}) { padding: var(--primitives-space-6); } }
172
- :host([layout-container-lg-padding="8"]) .container { @container layout-container (min-width: ${lgMin}) { padding: var(--primitives-space-8); } }
173
- :host([layout-container-lg-padding="10"]) .container { @container layout-container (min-width: ${lgMin}) { padding: var(--primitives-space-10); } }
174
- :host([layout-container-lg-padding="12"]) .container { @container layout-container (min-width: ${lgMin}) { padding: var(--primitives-space-12); } }
175
- :host([layout-container-lg-padding="16"]) .container { @container layout-container (min-width: ${lgMin}) { padding: var(--primitives-space-16); } }
176
- :host([layout-container-lg-padding="20"]) .container { @container layout-container (min-width: ${lgMin}) { padding: var(--primitives-space-20); } }
177
- :host([layout-container-lg-padding="24"]) .container { @container layout-container (min-width: ${lgMin}) { padding: var(--primitives-space-24); } }
178
- :host([layout-container-lg-padding="28"]) .container { @container layout-container (min-width: ${lgMin}) { padding: var(--primitives-space-28); } }
179
- :host([layout-container-lg-padding="32"]) .container { @container layout-container (min-width: ${lgMin}) { padding: var(--primitives-space-32); } }
180
- :host([layout-container-lg-padding="40"]) .container { @container layout-container (min-width: ${lgMin}) { padding: var(--primitives-space-40); } }
181
- :host([layout-container-lg-padding="44"]) .container { @container layout-container (min-width: ${lgMin}) { padding: var(--primitives-space-44); } }
182
- :host([layout-container-lg-padding="48"]) .container { @container layout-container (min-width: ${lgMin}) { padding: var(--primitives-space-48); } }
183
- :host([layout-container-lg-padding="56"]) .container { @container layout-container (min-width: ${lgMin}) { padding: var(--primitives-space-56); } }
184
- :host([layout-container-lg-padding="64"]) .container { @container layout-container (min-width: ${lgMin}) { padding: var(--primitives-space-64); } }
185
- :host([layout-container-lg-padding="80"]) .container { @container layout-container (min-width: ${lgMin}) { padding: var(--primitives-space-80); } }
186
- :host([layout-container-lg-padding="96"]) .container { @container layout-container (min-width: ${lgMin}) { padding: var(--primitives-space-96); } }
187
-
188
-
189
- /* # Padding Inline — base */
190
-
191
- :host([padding-inline="0"]) .container { padding-inline: 0; }
192
- :host([padding-inline="2"]) .container { padding-inline: var(--primitives-space-2); }
193
- :host([padding-inline="4"]) .container { padding-inline: var(--primitives-space-4); }
194
- :host([padding-inline="6"]) .container { padding-inline: var(--primitives-space-6); }
195
- :host([padding-inline="8"]) .container { padding-inline: var(--primitives-space-8); }
196
- :host([padding-inline="10"]) .container { padding-inline: var(--primitives-space-10); }
197
- :host([padding-inline="12"]) .container { padding-inline: var(--primitives-space-12); }
198
- :host([padding-inline="16"]) .container { padding-inline: var(--primitives-space-16); }
199
- :host([padding-inline="20"]) .container { padding-inline: var(--primitives-space-20); }
200
- :host([padding-inline="24"]) .container { padding-inline: var(--primitives-space-24); }
201
- :host([padding-inline="28"]) .container { padding-inline: var(--primitives-space-28); }
202
- :host([padding-inline="32"]) .container { padding-inline: var(--primitives-space-32); }
203
- :host([padding-inline="40"]) .container { padding-inline: var(--primitives-space-40); }
204
- :host([padding-inline="44"]) .container { padding-inline: var(--primitives-space-44); }
205
- :host([padding-inline="48"]) .container { padding-inline: var(--primitives-space-48); }
206
- :host([padding-inline="56"]) .container { padding-inline: var(--primitives-space-56); }
207
- :host([padding-inline="64"]) .container { padding-inline: var(--primitives-space-64); }
208
- :host([padding-inline="80"]) .container { padding-inline: var(--primitives-space-80); }
209
- :host([padding-inline="96"]) .container { padding-inline: var(--primitives-space-96); }
210
-
211
-
212
- /* # Padding Inline — sm viewport */
213
-
214
- :host([sm-padding-inline="0"]) .container { @media (max-width: ${smMax}) { padding-inline: 0; } }
215
- :host([sm-padding-inline="2"]) .container { @media (max-width: ${smMax}) { padding-inline: var(--primitives-space-2); } }
216
- :host([sm-padding-inline="4"]) .container { @media (max-width: ${smMax}) { padding-inline: var(--primitives-space-4); } }
217
- :host([sm-padding-inline="6"]) .container { @media (max-width: ${smMax}) { padding-inline: var(--primitives-space-6); } }
218
- :host([sm-padding-inline="8"]) .container { @media (max-width: ${smMax}) { padding-inline: var(--primitives-space-8); } }
219
- :host([sm-padding-inline="10"]) .container { @media (max-width: ${smMax}) { padding-inline: var(--primitives-space-10); } }
220
- :host([sm-padding-inline="12"]) .container { @media (max-width: ${smMax}) { padding-inline: var(--primitives-space-12); } }
221
- :host([sm-padding-inline="16"]) .container { @media (max-width: ${smMax}) { padding-inline: var(--primitives-space-16); } }
222
- :host([sm-padding-inline="20"]) .container { @media (max-width: ${smMax}) { padding-inline: var(--primitives-space-20); } }
223
- :host([sm-padding-inline="24"]) .container { @media (max-width: ${smMax}) { padding-inline: var(--primitives-space-24); } }
224
- :host([sm-padding-inline="28"]) .container { @media (max-width: ${smMax}) { padding-inline: var(--primitives-space-28); } }
225
- :host([sm-padding-inline="32"]) .container { @media (max-width: ${smMax}) { padding-inline: var(--primitives-space-32); } }
226
- :host([sm-padding-inline="40"]) .container { @media (max-width: ${smMax}) { padding-inline: var(--primitives-space-40); } }
227
- :host([sm-padding-inline="44"]) .container { @media (max-width: ${smMax}) { padding-inline: var(--primitives-space-44); } }
228
- :host([sm-padding-inline="48"]) .container { @media (max-width: ${smMax}) { padding-inline: var(--primitives-space-48); } }
229
- :host([sm-padding-inline="56"]) .container { @media (max-width: ${smMax}) { padding-inline: var(--primitives-space-56); } }
230
- :host([sm-padding-inline="64"]) .container { @media (max-width: ${smMax}) { padding-inline: var(--primitives-space-64); } }
231
- :host([sm-padding-inline="80"]) .container { @media (max-width: ${smMax}) { padding-inline: var(--primitives-space-80); } }
232
- :host([sm-padding-inline="96"]) .container { @media (max-width: ${smMax}) { padding-inline: var(--primitives-space-96); } }
233
-
234
-
235
- /* # Padding Inline — md viewport */
236
-
237
- :host([md-padding-inline="0"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: 0; } }
238
- :host([md-padding-inline="2"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-2); } }
239
- :host([md-padding-inline="4"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-4); } }
240
- :host([md-padding-inline="6"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-6); } }
241
- :host([md-padding-inline="8"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-8); } }
242
- :host([md-padding-inline="10"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-10); } }
243
- :host([md-padding-inline="12"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-12); } }
244
- :host([md-padding-inline="16"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-16); } }
245
- :host([md-padding-inline="20"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-20); } }
246
- :host([md-padding-inline="24"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-24); } }
247
- :host([md-padding-inline="28"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-28); } }
248
- :host([md-padding-inline="32"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-32); } }
249
- :host([md-padding-inline="40"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-40); } }
250
- :host([md-padding-inline="44"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-44); } }
251
- :host([md-padding-inline="48"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-48); } }
252
- :host([md-padding-inline="56"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-56); } }
253
- :host([md-padding-inline="64"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-64); } }
254
- :host([md-padding-inline="80"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-80); } }
255
- :host([md-padding-inline="96"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-96); } }
256
-
257
-
258
- /* # Padding Inline — lg viewport */
259
-
260
- :host([lg-padding-inline="0"]) .container { @media (min-width: ${lgMin}) { padding-inline: 0; } }
261
- :host([lg-padding-inline="2"]) .container { @media (min-width: ${lgMin}) { padding-inline: var(--primitives-space-2); } }
262
- :host([lg-padding-inline="4"]) .container { @media (min-width: ${lgMin}) { padding-inline: var(--primitives-space-4); } }
263
- :host([lg-padding-inline="6"]) .container { @media (min-width: ${lgMin}) { padding-inline: var(--primitives-space-6); } }
264
- :host([lg-padding-inline="8"]) .container { @media (min-width: ${lgMin}) { padding-inline: var(--primitives-space-8); } }
265
- :host([lg-padding-inline="10"]) .container { @media (min-width: ${lgMin}) { padding-inline: var(--primitives-space-10); } }
266
- :host([lg-padding-inline="12"]) .container { @media (min-width: ${lgMin}) { padding-inline: var(--primitives-space-12); } }
267
- :host([lg-padding-inline="16"]) .container { @media (min-width: ${lgMin}) { padding-inline: var(--primitives-space-16); } }
268
- :host([lg-padding-inline="20"]) .container { @media (min-width: ${lgMin}) { padding-inline: var(--primitives-space-20); } }
269
- :host([lg-padding-inline="24"]) .container { @media (min-width: ${lgMin}) { padding-inline: var(--primitives-space-24); } }
270
- :host([lg-padding-inline="28"]) .container { @media (min-width: ${lgMin}) { padding-inline: var(--primitives-space-28); } }
271
- :host([lg-padding-inline="32"]) .container { @media (min-width: ${lgMin}) { padding-inline: var(--primitives-space-32); } }
272
- :host([lg-padding-inline="40"]) .container { @media (min-width: ${lgMin}) { padding-inline: var(--primitives-space-40); } }
273
- :host([lg-padding-inline="44"]) .container { @media (min-width: ${lgMin}) { padding-inline: var(--primitives-space-44); } }
274
- :host([lg-padding-inline="48"]) .container { @media (min-width: ${lgMin}) { padding-inline: var(--primitives-space-48); } }
275
- :host([lg-padding-inline="56"]) .container { @media (min-width: ${lgMin}) { padding-inline: var(--primitives-space-56); } }
276
- :host([lg-padding-inline="64"]) .container { @media (min-width: ${lgMin}) { padding-inline: var(--primitives-space-64); } }
277
- :host([lg-padding-inline="80"]) .container { @media (min-width: ${lgMin}) { padding-inline: var(--primitives-space-80); } }
278
- :host([lg-padding-inline="96"]) .container { @media (min-width: ${lgMin}) { padding-inline: var(--primitives-space-96); } }
279
-
280
-
281
- /* # Padding Inline — sm container */
282
-
283
- :host([layout-container-sm-padding-inline="0"]) .container { @container layout-container (max-width: ${smMax}) { padding-inline: 0; } }
284
- :host([layout-container-sm-padding-inline="2"]) .container { @container layout-container (max-width: ${smMax}) { padding-inline: var(--primitives-space-2); } }
285
- :host([layout-container-sm-padding-inline="4"]) .container { @container layout-container (max-width: ${smMax}) { padding-inline: var(--primitives-space-4); } }
286
- :host([layout-container-sm-padding-inline="6"]) .container { @container layout-container (max-width: ${smMax}) { padding-inline: var(--primitives-space-6); } }
287
- :host([layout-container-sm-padding-inline="8"]) .container { @container layout-container (max-width: ${smMax}) { padding-inline: var(--primitives-space-8); } }
288
- :host([layout-container-sm-padding-inline="10"]) .container { @container layout-container (max-width: ${smMax}) { padding-inline: var(--primitives-space-10); } }
289
- :host([layout-container-sm-padding-inline="12"]) .container { @container layout-container (max-width: ${smMax}) { padding-inline: var(--primitives-space-12); } }
290
- :host([layout-container-sm-padding-inline="16"]) .container { @container layout-container (max-width: ${smMax}) { padding-inline: var(--primitives-space-16); } }
291
- :host([layout-container-sm-padding-inline="20"]) .container { @container layout-container (max-width: ${smMax}) { padding-inline: var(--primitives-space-20); } }
292
- :host([layout-container-sm-padding-inline="24"]) .container { @container layout-container (max-width: ${smMax}) { padding-inline: var(--primitives-space-24); } }
293
- :host([layout-container-sm-padding-inline="28"]) .container { @container layout-container (max-width: ${smMax}) { padding-inline: var(--primitives-space-28); } }
294
- :host([layout-container-sm-padding-inline="32"]) .container { @container layout-container (max-width: ${smMax}) { padding-inline: var(--primitives-space-32); } }
295
- :host([layout-container-sm-padding-inline="40"]) .container { @container layout-container (max-width: ${smMax}) { padding-inline: var(--primitives-space-40); } }
296
- :host([layout-container-sm-padding-inline="44"]) .container { @container layout-container (max-width: ${smMax}) { padding-inline: var(--primitives-space-44); } }
297
- :host([layout-container-sm-padding-inline="48"]) .container { @container layout-container (max-width: ${smMax}) { padding-inline: var(--primitives-space-48); } }
298
- :host([layout-container-sm-padding-inline="56"]) .container { @container layout-container (max-width: ${smMax}) { padding-inline: var(--primitives-space-56); } }
299
- :host([layout-container-sm-padding-inline="64"]) .container { @container layout-container (max-width: ${smMax}) { padding-inline: var(--primitives-space-64); } }
300
- :host([layout-container-sm-padding-inline="80"]) .container { @container layout-container (max-width: ${smMax}) { padding-inline: var(--primitives-space-80); } }
301
- :host([layout-container-sm-padding-inline="96"]) .container { @container layout-container (max-width: ${smMax}) { padding-inline: var(--primitives-space-96); } }
302
-
303
-
304
- /* # Padding Inline — md container */
305
-
306
- :host([layout-container-md-padding-inline="0"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: 0; } }
307
- :host([layout-container-md-padding-inline="2"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-2); } }
308
- :host([layout-container-md-padding-inline="4"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-4); } }
309
- :host([layout-container-md-padding-inline="6"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-6); } }
310
- :host([layout-container-md-padding-inline="8"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-8); } }
311
- :host([layout-container-md-padding-inline="10"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-10); } }
312
- :host([layout-container-md-padding-inline="12"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-12); } }
313
- :host([layout-container-md-padding-inline="16"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-16); } }
314
- :host([layout-container-md-padding-inline="20"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-20); } }
315
- :host([layout-container-md-padding-inline="24"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-24); } }
316
- :host([layout-container-md-padding-inline="28"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-28); } }
317
- :host([layout-container-md-padding-inline="32"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-32); } }
318
- :host([layout-container-md-padding-inline="40"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-40); } }
319
- :host([layout-container-md-padding-inline="44"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-44); } }
320
- :host([layout-container-md-padding-inline="48"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-48); } }
321
- :host([layout-container-md-padding-inline="56"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-56); } }
322
- :host([layout-container-md-padding-inline="64"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-64); } }
323
- :host([layout-container-md-padding-inline="80"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-80); } }
324
- :host([layout-container-md-padding-inline="96"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-inline: var(--primitives-space-96); } }
325
-
326
-
327
- /* # Padding Inline — lg container */
328
-
329
- :host([layout-container-lg-padding-inline="0"]) .container { @container layout-container (min-width: ${lgMin}) { padding-inline: 0; } }
330
- :host([layout-container-lg-padding-inline="2"]) .container { @container layout-container (min-width: ${lgMin}) { padding-inline: var(--primitives-space-2); } }
331
- :host([layout-container-lg-padding-inline="4"]) .container { @container layout-container (min-width: ${lgMin}) { padding-inline: var(--primitives-space-4); } }
332
- :host([layout-container-lg-padding-inline="6"]) .container { @container layout-container (min-width: ${lgMin}) { padding-inline: var(--primitives-space-6); } }
333
- :host([layout-container-lg-padding-inline="8"]) .container { @container layout-container (min-width: ${lgMin}) { padding-inline: var(--primitives-space-8); } }
334
- :host([layout-container-lg-padding-inline="10"]) .container { @container layout-container (min-width: ${lgMin}) { padding-inline: var(--primitives-space-10); } }
335
- :host([layout-container-lg-padding-inline="12"]) .container { @container layout-container (min-width: ${lgMin}) { padding-inline: var(--primitives-space-12); } }
336
- :host([layout-container-lg-padding-inline="16"]) .container { @container layout-container (min-width: ${lgMin}) { padding-inline: var(--primitives-space-16); } }
337
- :host([layout-container-lg-padding-inline="20"]) .container { @container layout-container (min-width: ${lgMin}) { padding-inline: var(--primitives-space-20); } }
338
- :host([layout-container-lg-padding-inline="24"]) .container { @container layout-container (min-width: ${lgMin}) { padding-inline: var(--primitives-space-24); } }
339
- :host([layout-container-lg-padding-inline="28"]) .container { @container layout-container (min-width: ${lgMin}) { padding-inline: var(--primitives-space-28); } }
340
- :host([layout-container-lg-padding-inline="32"]) .container { @container layout-container (min-width: ${lgMin}) { padding-inline: var(--primitives-space-32); } }
341
- :host([layout-container-lg-padding-inline="40"]) .container { @container layout-container (min-width: ${lgMin}) { padding-inline: var(--primitives-space-40); } }
342
- :host([layout-container-lg-padding-inline="44"]) .container { @container layout-container (min-width: ${lgMin}) { padding-inline: var(--primitives-space-44); } }
343
- :host([layout-container-lg-padding-inline="48"]) .container { @container layout-container (min-width: ${lgMin}) { padding-inline: var(--primitives-space-48); } }
344
- :host([layout-container-lg-padding-inline="56"]) .container { @container layout-container (min-width: ${lgMin}) { padding-inline: var(--primitives-space-56); } }
345
- :host([layout-container-lg-padding-inline="64"]) .container { @container layout-container (min-width: ${lgMin}) { padding-inline: var(--primitives-space-64); } }
346
- :host([layout-container-lg-padding-inline="80"]) .container { @container layout-container (min-width: ${lgMin}) { padding-inline: var(--primitives-space-80); } }
347
- :host([layout-container-lg-padding-inline="96"]) .container { @container layout-container (min-width: ${lgMin}) { padding-inline: var(--primitives-space-96); } }
348
-
349
-
350
- /* # Padding Block — base */
351
-
352
- :host([padding-block="0"]) .container { padding-block: 0; }
353
- :host([padding-block="2"]) .container { padding-block: var(--primitives-space-2); }
354
- :host([padding-block="4"]) .container { padding-block: var(--primitives-space-4); }
355
- :host([padding-block="6"]) .container { padding-block: var(--primitives-space-6); }
356
- :host([padding-block="8"]) .container { padding-block: var(--primitives-space-8); }
357
- :host([padding-block="10"]) .container { padding-block: var(--primitives-space-10); }
358
- :host([padding-block="12"]) .container { padding-block: var(--primitives-space-12); }
359
- :host([padding-block="16"]) .container { padding-block: var(--primitives-space-16); }
360
- :host([padding-block="20"]) .container { padding-block: var(--primitives-space-20); }
361
- :host([padding-block="24"]) .container { padding-block: var(--primitives-space-24); }
362
- :host([padding-block="28"]) .container { padding-block: var(--primitives-space-28); }
363
- :host([padding-block="32"]) .container { padding-block: var(--primitives-space-32); }
364
- :host([padding-block="40"]) .container { padding-block: var(--primitives-space-40); }
365
- :host([padding-block="44"]) .container { padding-block: var(--primitives-space-44); }
366
- :host([padding-block="48"]) .container { padding-block: var(--primitives-space-48); }
367
- :host([padding-block="56"]) .container { padding-block: var(--primitives-space-56); }
368
- :host([padding-block="64"]) .container { padding-block: var(--primitives-space-64); }
369
- :host([padding-block="80"]) .container { padding-block: var(--primitives-space-80); }
370
- :host([padding-block="96"]) .container { padding-block: var(--primitives-space-96); }
371
-
372
-
373
- /* # Padding Block — sm viewport */
374
-
375
- :host([sm-padding-block="0"]) .container { @media (max-width: ${smMax}) { padding-block: 0; } }
376
- :host([sm-padding-block="2"]) .container { @media (max-width: ${smMax}) { padding-block: var(--primitives-space-2); } }
377
- :host([sm-padding-block="4"]) .container { @media (max-width: ${smMax}) { padding-block: var(--primitives-space-4); } }
378
- :host([sm-padding-block="6"]) .container { @media (max-width: ${smMax}) { padding-block: var(--primitives-space-6); } }
379
- :host([sm-padding-block="8"]) .container { @media (max-width: ${smMax}) { padding-block: var(--primitives-space-8); } }
380
- :host([sm-padding-block="10"]) .container { @media (max-width: ${smMax}) { padding-block: var(--primitives-space-10); } }
381
- :host([sm-padding-block="12"]) .container { @media (max-width: ${smMax}) { padding-block: var(--primitives-space-12); } }
382
- :host([sm-padding-block="16"]) .container { @media (max-width: ${smMax}) { padding-block: var(--primitives-space-16); } }
383
- :host([sm-padding-block="20"]) .container { @media (max-width: ${smMax}) { padding-block: var(--primitives-space-20); } }
384
- :host([sm-padding-block="24"]) .container { @media (max-width: ${smMax}) { padding-block: var(--primitives-space-24); } }
385
- :host([sm-padding-block="28"]) .container { @media (max-width: ${smMax}) { padding-block: var(--primitives-space-28); } }
386
- :host([sm-padding-block="32"]) .container { @media (max-width: ${smMax}) { padding-block: var(--primitives-space-32); } }
387
- :host([sm-padding-block="40"]) .container { @media (max-width: ${smMax}) { padding-block: var(--primitives-space-40); } }
388
- :host([sm-padding-block="44"]) .container { @media (max-width: ${smMax}) { padding-block: var(--primitives-space-44); } }
389
- :host([sm-padding-block="48"]) .container { @media (max-width: ${smMax}) { padding-block: var(--primitives-space-48); } }
390
- :host([sm-padding-block="56"]) .container { @media (max-width: ${smMax}) { padding-block: var(--primitives-space-56); } }
391
- :host([sm-padding-block="64"]) .container { @media (max-width: ${smMax}) { padding-block: var(--primitives-space-64); } }
392
- :host([sm-padding-block="80"]) .container { @media (max-width: ${smMax}) { padding-block: var(--primitives-space-80); } }
393
- :host([sm-padding-block="96"]) .container { @media (max-width: ${smMax}) { padding-block: var(--primitives-space-96); } }
394
-
395
-
396
- /* # Padding Block — md viewport */
397
-
398
- :host([md-padding-block="0"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: 0; } }
399
- :host([md-padding-block="2"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-2); } }
400
- :host([md-padding-block="4"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-4); } }
401
- :host([md-padding-block="6"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-6); } }
402
- :host([md-padding-block="8"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-8); } }
403
- :host([md-padding-block="10"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-10); } }
404
- :host([md-padding-block="12"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-12); } }
405
- :host([md-padding-block="16"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-16); } }
406
- :host([md-padding-block="20"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-20); } }
407
- :host([md-padding-block="24"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-24); } }
408
- :host([md-padding-block="28"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-28); } }
409
- :host([md-padding-block="32"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-32); } }
410
- :host([md-padding-block="40"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-40); } }
411
- :host([md-padding-block="44"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-44); } }
412
- :host([md-padding-block="48"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-48); } }
413
- :host([md-padding-block="56"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-56); } }
414
- :host([md-padding-block="64"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-64); } }
415
- :host([md-padding-block="80"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-80); } }
416
- :host([md-padding-block="96"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-96); } }
417
-
418
-
419
- /* # Padding Block — lg viewport */
420
-
421
- :host([lg-padding-block="0"]) .container { @media (min-width: ${lgMin}) { padding-block: 0; } }
422
- :host([lg-padding-block="2"]) .container { @media (min-width: ${lgMin}) { padding-block: var(--primitives-space-2); } }
423
- :host([lg-padding-block="4"]) .container { @media (min-width: ${lgMin}) { padding-block: var(--primitives-space-4); } }
424
- :host([lg-padding-block="6"]) .container { @media (min-width: ${lgMin}) { padding-block: var(--primitives-space-6); } }
425
- :host([lg-padding-block="8"]) .container { @media (min-width: ${lgMin}) { padding-block: var(--primitives-space-8); } }
426
- :host([lg-padding-block="10"]) .container { @media (min-width: ${lgMin}) { padding-block: var(--primitives-space-10); } }
427
- :host([lg-padding-block="12"]) .container { @media (min-width: ${lgMin}) { padding-block: var(--primitives-space-12); } }
428
- :host([lg-padding-block="16"]) .container { @media (min-width: ${lgMin}) { padding-block: var(--primitives-space-16); } }
429
- :host([lg-padding-block="20"]) .container { @media (min-width: ${lgMin}) { padding-block: var(--primitives-space-20); } }
430
- :host([lg-padding-block="24"]) .container { @media (min-width: ${lgMin}) { padding-block: var(--primitives-space-24); } }
431
- :host([lg-padding-block="28"]) .container { @media (min-width: ${lgMin}) { padding-block: var(--primitives-space-28); } }
432
- :host([lg-padding-block="32"]) .container { @media (min-width: ${lgMin}) { padding-block: var(--primitives-space-32); } }
433
- :host([lg-padding-block="40"]) .container { @media (min-width: ${lgMin}) { padding-block: var(--primitives-space-40); } }
434
- :host([lg-padding-block="44"]) .container { @media (min-width: ${lgMin}) { padding-block: var(--primitives-space-44); } }
435
- :host([lg-padding-block="48"]) .container { @media (min-width: ${lgMin}) { padding-block: var(--primitives-space-48); } }
436
- :host([lg-padding-block="56"]) .container { @media (min-width: ${lgMin}) { padding-block: var(--primitives-space-56); } }
437
- :host([lg-padding-block="64"]) .container { @media (min-width: ${lgMin}) { padding-block: var(--primitives-space-64); } }
438
- :host([lg-padding-block="80"]) .container { @media (min-width: ${lgMin}) { padding-block: var(--primitives-space-80); } }
439
- :host([lg-padding-block="96"]) .container { @media (min-width: ${lgMin}) { padding-block: var(--primitives-space-96); } }
440
-
441
-
442
- /* # Padding Block — sm container */
443
-
444
- :host([layout-container-sm-padding-block="0"]) .container { @container layout-container (max-width: ${smMax}) { padding-block: 0; } }
445
- :host([layout-container-sm-padding-block="2"]) .container { @container layout-container (max-width: ${smMax}) { padding-block: var(--primitives-space-2); } }
446
- :host([layout-container-sm-padding-block="4"]) .container { @container layout-container (max-width: ${smMax}) { padding-block: var(--primitives-space-4); } }
447
- :host([layout-container-sm-padding-block="6"]) .container { @container layout-container (max-width: ${smMax}) { padding-block: var(--primitives-space-6); } }
448
- :host([layout-container-sm-padding-block="8"]) .container { @container layout-container (max-width: ${smMax}) { padding-block: var(--primitives-space-8); } }
449
- :host([layout-container-sm-padding-block="10"]) .container { @container layout-container (max-width: ${smMax}) { padding-block: var(--primitives-space-10); } }
450
- :host([layout-container-sm-padding-block="12"]) .container { @container layout-container (max-width: ${smMax}) { padding-block: var(--primitives-space-12); } }
451
- :host([layout-container-sm-padding-block="16"]) .container { @container layout-container (max-width: ${smMax}) { padding-block: var(--primitives-space-16); } }
452
- :host([layout-container-sm-padding-block="20"]) .container { @container layout-container (max-width: ${smMax}) { padding-block: var(--primitives-space-20); } }
453
- :host([layout-container-sm-padding-block="24"]) .container { @container layout-container (max-width: ${smMax}) { padding-block: var(--primitives-space-24); } }
454
- :host([layout-container-sm-padding-block="28"]) .container { @container layout-container (max-width: ${smMax}) { padding-block: var(--primitives-space-28); } }
455
- :host([layout-container-sm-padding-block="32"]) .container { @container layout-container (max-width: ${smMax}) { padding-block: var(--primitives-space-32); } }
456
- :host([layout-container-sm-padding-block="40"]) .container { @container layout-container (max-width: ${smMax}) { padding-block: var(--primitives-space-40); } }
457
- :host([layout-container-sm-padding-block="44"]) .container { @container layout-container (max-width: ${smMax}) { padding-block: var(--primitives-space-44); } }
458
- :host([layout-container-sm-padding-block="48"]) .container { @container layout-container (max-width: ${smMax}) { padding-block: var(--primitives-space-48); } }
459
- :host([layout-container-sm-padding-block="56"]) .container { @container layout-container (max-width: ${smMax}) { padding-block: var(--primitives-space-56); } }
460
- :host([layout-container-sm-padding-block="64"]) .container { @container layout-container (max-width: ${smMax}) { padding-block: var(--primitives-space-64); } }
461
- :host([layout-container-sm-padding-block="80"]) .container { @container layout-container (max-width: ${smMax}) { padding-block: var(--primitives-space-80); } }
462
- :host([layout-container-sm-padding-block="96"]) .container { @container layout-container (max-width: ${smMax}) { padding-block: var(--primitives-space-96); } }
463
-
464
-
465
- /* # Padding Block — md container */
466
-
467
- :host([layout-container-md-padding-block="0"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: 0; } }
468
- :host([layout-container-md-padding-block="2"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-2); } }
469
- :host([layout-container-md-padding-block="4"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-4); } }
470
- :host([layout-container-md-padding-block="6"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-6); } }
471
- :host([layout-container-md-padding-block="8"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-8); } }
472
- :host([layout-container-md-padding-block="10"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-10); } }
473
- :host([layout-container-md-padding-block="12"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-12); } }
474
- :host([layout-container-md-padding-block="16"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-16); } }
475
- :host([layout-container-md-padding-block="20"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-20); } }
476
- :host([layout-container-md-padding-block="24"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-24); } }
477
- :host([layout-container-md-padding-block="28"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-28); } }
478
- :host([layout-container-md-padding-block="32"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-32); } }
479
- :host([layout-container-md-padding-block="40"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-40); } }
480
- :host([layout-container-md-padding-block="44"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-44); } }
481
- :host([layout-container-md-padding-block="48"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-48); } }
482
- :host([layout-container-md-padding-block="56"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-56); } }
483
- :host([layout-container-md-padding-block="64"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-64); } }
484
- :host([layout-container-md-padding-block="80"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-80); } }
485
- :host([layout-container-md-padding-block="96"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-block: var(--primitives-space-96); } }
486
-
487
-
488
- /* # Padding Block — lg container */
489
-
490
- :host([layout-container-lg-padding-block="0"]) .container { @container layout-container (min-width: ${lgMin}) { padding-block: 0; } }
491
- :host([layout-container-lg-padding-block="2"]) .container { @container layout-container (min-width: ${lgMin}) { padding-block: var(--primitives-space-2); } }
492
- :host([layout-container-lg-padding-block="4"]) .container { @container layout-container (min-width: ${lgMin}) { padding-block: var(--primitives-space-4); } }
493
- :host([layout-container-lg-padding-block="6"]) .container { @container layout-container (min-width: ${lgMin}) { padding-block: var(--primitives-space-6); } }
494
- :host([layout-container-lg-padding-block="8"]) .container { @container layout-container (min-width: ${lgMin}) { padding-block: var(--primitives-space-8); } }
495
- :host([layout-container-lg-padding-block="10"]) .container { @container layout-container (min-width: ${lgMin}) { padding-block: var(--primitives-space-10); } }
496
- :host([layout-container-lg-padding-block="12"]) .container { @container layout-container (min-width: ${lgMin}) { padding-block: var(--primitives-space-12); } }
497
- :host([layout-container-lg-padding-block="16"]) .container { @container layout-container (min-width: ${lgMin}) { padding-block: var(--primitives-space-16); } }
498
- :host([layout-container-lg-padding-block="20"]) .container { @container layout-container (min-width: ${lgMin}) { padding-block: var(--primitives-space-20); } }
499
- :host([layout-container-lg-padding-block="24"]) .container { @container layout-container (min-width: ${lgMin}) { padding-block: var(--primitives-space-24); } }
500
- :host([layout-container-lg-padding-block="28"]) .container { @container layout-container (min-width: ${lgMin}) { padding-block: var(--primitives-space-28); } }
501
- :host([layout-container-lg-padding-block="32"]) .container { @container layout-container (min-width: ${lgMin}) { padding-block: var(--primitives-space-32); } }
502
- :host([layout-container-lg-padding-block="40"]) .container { @container layout-container (min-width: ${lgMin}) { padding-block: var(--primitives-space-40); } }
503
- :host([layout-container-lg-padding-block="44"]) .container { @container layout-container (min-width: ${lgMin}) { padding-block: var(--primitives-space-44); } }
504
- :host([layout-container-lg-padding-block="48"]) .container { @container layout-container (min-width: ${lgMin}) { padding-block: var(--primitives-space-48); } }
505
- :host([layout-container-lg-padding-block="56"]) .container { @container layout-container (min-width: ${lgMin}) { padding-block: var(--primitives-space-56); } }
506
- :host([layout-container-lg-padding-block="64"]) .container { @container layout-container (min-width: ${lgMin}) { padding-block: var(--primitives-space-64); } }
507
- :host([layout-container-lg-padding-block="80"]) .container { @container layout-container (min-width: ${lgMin}) { padding-block: var(--primitives-space-80); } }
508
- :host([layout-container-lg-padding-block="96"]) .container { @container layout-container (min-width: ${lgMin}) { padding-block: var(--primitives-space-96); } }
509
-
510
-
511
- /* # Padding Top — base */
512
-
513
- :host([padding-top="0"]) .container { padding-top: 0; }
514
- :host([padding-top="2"]) .container { padding-top: var(--primitives-space-2); }
515
- :host([padding-top="4"]) .container { padding-top: var(--primitives-space-4); }
516
- :host([padding-top="6"]) .container { padding-top: var(--primitives-space-6); }
517
- :host([padding-top="8"]) .container { padding-top: var(--primitives-space-8); }
518
- :host([padding-top="10"]) .container { padding-top: var(--primitives-space-10); }
519
- :host([padding-top="12"]) .container { padding-top: var(--primitives-space-12); }
520
- :host([padding-top="16"]) .container { padding-top: var(--primitives-space-16); }
521
- :host([padding-top="20"]) .container { padding-top: var(--primitives-space-20); }
522
- :host([padding-top="24"]) .container { padding-top: var(--primitives-space-24); }
523
- :host([padding-top="28"]) .container { padding-top: var(--primitives-space-28); }
524
- :host([padding-top="32"]) .container { padding-top: var(--primitives-space-32); }
525
- :host([padding-top="40"]) .container { padding-top: var(--primitives-space-40); }
526
- :host([padding-top="44"]) .container { padding-top: var(--primitives-space-44); }
527
- :host([padding-top="48"]) .container { padding-top: var(--primitives-space-48); }
528
- :host([padding-top="56"]) .container { padding-top: var(--primitives-space-56); }
529
- :host([padding-top="64"]) .container { padding-top: var(--primitives-space-64); }
530
- :host([padding-top="80"]) .container { padding-top: var(--primitives-space-80); }
531
- :host([padding-top="96"]) .container { padding-top: var(--primitives-space-96); }
532
-
533
-
534
- /* # Padding Top — sm viewport */
535
-
536
- :host([sm-padding-top="0"]) .container { @media (max-width: ${smMax}) { padding-top: 0; } }
537
- :host([sm-padding-top="2"]) .container { @media (max-width: ${smMax}) { padding-top: var(--primitives-space-2); } }
538
- :host([sm-padding-top="4"]) .container { @media (max-width: ${smMax}) { padding-top: var(--primitives-space-4); } }
539
- :host([sm-padding-top="6"]) .container { @media (max-width: ${smMax}) { padding-top: var(--primitives-space-6); } }
540
- :host([sm-padding-top="8"]) .container { @media (max-width: ${smMax}) { padding-top: var(--primitives-space-8); } }
541
- :host([sm-padding-top="10"]) .container { @media (max-width: ${smMax}) { padding-top: var(--primitives-space-10); } }
542
- :host([sm-padding-top="12"]) .container { @media (max-width: ${smMax}) { padding-top: var(--primitives-space-12); } }
543
- :host([sm-padding-top="16"]) .container { @media (max-width: ${smMax}) { padding-top: var(--primitives-space-16); } }
544
- :host([sm-padding-top="20"]) .container { @media (max-width: ${smMax}) { padding-top: var(--primitives-space-20); } }
545
- :host([sm-padding-top="24"]) .container { @media (max-width: ${smMax}) { padding-top: var(--primitives-space-24); } }
546
- :host([sm-padding-top="28"]) .container { @media (max-width: ${smMax}) { padding-top: var(--primitives-space-28); } }
547
- :host([sm-padding-top="32"]) .container { @media (max-width: ${smMax}) { padding-top: var(--primitives-space-32); } }
548
- :host([sm-padding-top="40"]) .container { @media (max-width: ${smMax}) { padding-top: var(--primitives-space-40); } }
549
- :host([sm-padding-top="44"]) .container { @media (max-width: ${smMax}) { padding-top: var(--primitives-space-44); } }
550
- :host([sm-padding-top="48"]) .container { @media (max-width: ${smMax}) { padding-top: var(--primitives-space-48); } }
551
- :host([sm-padding-top="56"]) .container { @media (max-width: ${smMax}) { padding-top: var(--primitives-space-56); } }
552
- :host([sm-padding-top="64"]) .container { @media (max-width: ${smMax}) { padding-top: var(--primitives-space-64); } }
553
- :host([sm-padding-top="80"]) .container { @media (max-width: ${smMax}) { padding-top: var(--primitives-space-80); } }
554
- :host([sm-padding-top="96"]) .container { @media (max-width: ${smMax}) { padding-top: var(--primitives-space-96); } }
555
-
556
-
557
- /* # Padding Top — md viewport */
558
-
559
- :host([md-padding-top="0"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: 0; } }
560
- :host([md-padding-top="2"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-2); } }
561
- :host([md-padding-top="4"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-4); } }
562
- :host([md-padding-top="6"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-6); } }
563
- :host([md-padding-top="8"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-8); } }
564
- :host([md-padding-top="10"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-10); } }
565
- :host([md-padding-top="12"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-12); } }
566
- :host([md-padding-top="16"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-16); } }
567
- :host([md-padding-top="20"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-20); } }
568
- :host([md-padding-top="24"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-24); } }
569
- :host([md-padding-top="28"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-28); } }
570
- :host([md-padding-top="32"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-32); } }
571
- :host([md-padding-top="40"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-40); } }
572
- :host([md-padding-top="44"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-44); } }
573
- :host([md-padding-top="48"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-48); } }
574
- :host([md-padding-top="56"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-56); } }
575
- :host([md-padding-top="64"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-64); } }
576
- :host([md-padding-top="80"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-80); } }
577
- :host([md-padding-top="96"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-96); } }
578
-
579
-
580
- /* # Padding Top — lg viewport */
581
-
582
- :host([lg-padding-top="0"]) .container { @media (min-width: ${lgMin}) { padding-top: 0; } }
583
- :host([lg-padding-top="2"]) .container { @media (min-width: ${lgMin}) { padding-top: var(--primitives-space-2); } }
584
- :host([lg-padding-top="4"]) .container { @media (min-width: ${lgMin}) { padding-top: var(--primitives-space-4); } }
585
- :host([lg-padding-top="6"]) .container { @media (min-width: ${lgMin}) { padding-top: var(--primitives-space-6); } }
586
- :host([lg-padding-top="8"]) .container { @media (min-width: ${lgMin}) { padding-top: var(--primitives-space-8); } }
587
- :host([lg-padding-top="10"]) .container { @media (min-width: ${lgMin}) { padding-top: var(--primitives-space-10); } }
588
- :host([lg-padding-top="12"]) .container { @media (min-width: ${lgMin}) { padding-top: var(--primitives-space-12); } }
589
- :host([lg-padding-top="16"]) .container { @media (min-width: ${lgMin}) { padding-top: var(--primitives-space-16); } }
590
- :host([lg-padding-top="20"]) .container { @media (min-width: ${lgMin}) { padding-top: var(--primitives-space-20); } }
591
- :host([lg-padding-top="24"]) .container { @media (min-width: ${lgMin}) { padding-top: var(--primitives-space-24); } }
592
- :host([lg-padding-top="28"]) .container { @media (min-width: ${lgMin}) { padding-top: var(--primitives-space-28); } }
593
- :host([lg-padding-top="32"]) .container { @media (min-width: ${lgMin}) { padding-top: var(--primitives-space-32); } }
594
- :host([lg-padding-top="40"]) .container { @media (min-width: ${lgMin}) { padding-top: var(--primitives-space-40); } }
595
- :host([lg-padding-top="44"]) .container { @media (min-width: ${lgMin}) { padding-top: var(--primitives-space-44); } }
596
- :host([lg-padding-top="48"]) .container { @media (min-width: ${lgMin}) { padding-top: var(--primitives-space-48); } }
597
- :host([lg-padding-top="56"]) .container { @media (min-width: ${lgMin}) { padding-top: var(--primitives-space-56); } }
598
- :host([lg-padding-top="64"]) .container { @media (min-width: ${lgMin}) { padding-top: var(--primitives-space-64); } }
599
- :host([lg-padding-top="80"]) .container { @media (min-width: ${lgMin}) { padding-top: var(--primitives-space-80); } }
600
- :host([lg-padding-top="96"]) .container { @media (min-width: ${lgMin}) { padding-top: var(--primitives-space-96); } }
601
-
602
-
603
- /* # Padding Top — sm container */
604
-
605
- :host([layout-container-sm-padding-top="0"]) .container { @container layout-container (max-width: ${smMax}) { padding-top: 0; } }
606
- :host([layout-container-sm-padding-top="2"]) .container { @container layout-container (max-width: ${smMax}) { padding-top: var(--primitives-space-2); } }
607
- :host([layout-container-sm-padding-top="4"]) .container { @container layout-container (max-width: ${smMax}) { padding-top: var(--primitives-space-4); } }
608
- :host([layout-container-sm-padding-top="6"]) .container { @container layout-container (max-width: ${smMax}) { padding-top: var(--primitives-space-6); } }
609
- :host([layout-container-sm-padding-top="8"]) .container { @container layout-container (max-width: ${smMax}) { padding-top: var(--primitives-space-8); } }
610
- :host([layout-container-sm-padding-top="10"]) .container { @container layout-container (max-width: ${smMax}) { padding-top: var(--primitives-space-10); } }
611
- :host([layout-container-sm-padding-top="12"]) .container { @container layout-container (max-width: ${smMax}) { padding-top: var(--primitives-space-12); } }
612
- :host([layout-container-sm-padding-top="16"]) .container { @container layout-container (max-width: ${smMax}) { padding-top: var(--primitives-space-16); } }
613
- :host([layout-container-sm-padding-top="20"]) .container { @container layout-container (max-width: ${smMax}) { padding-top: var(--primitives-space-20); } }
614
- :host([layout-container-sm-padding-top="24"]) .container { @container layout-container (max-width: ${smMax}) { padding-top: var(--primitives-space-24); } }
615
- :host([layout-container-sm-padding-top="28"]) .container { @container layout-container (max-width: ${smMax}) { padding-top: var(--primitives-space-28); } }
616
- :host([layout-container-sm-padding-top="32"]) .container { @container layout-container (max-width: ${smMax}) { padding-top: var(--primitives-space-32); } }
617
- :host([layout-container-sm-padding-top="40"]) .container { @container layout-container (max-width: ${smMax}) { padding-top: var(--primitives-space-40); } }
618
- :host([layout-container-sm-padding-top="44"]) .container { @container layout-container (max-width: ${smMax}) { padding-top: var(--primitives-space-44); } }
619
- :host([layout-container-sm-padding-top="48"]) .container { @container layout-container (max-width: ${smMax}) { padding-top: var(--primitives-space-48); } }
620
- :host([layout-container-sm-padding-top="56"]) .container { @container layout-container (max-width: ${smMax}) { padding-top: var(--primitives-space-56); } }
621
- :host([layout-container-sm-padding-top="64"]) .container { @container layout-container (max-width: ${smMax}) { padding-top: var(--primitives-space-64); } }
622
- :host([layout-container-sm-padding-top="80"]) .container { @container layout-container (max-width: ${smMax}) { padding-top: var(--primitives-space-80); } }
623
- :host([layout-container-sm-padding-top="96"]) .container { @container layout-container (max-width: ${smMax}) { padding-top: var(--primitives-space-96); } }
624
-
625
-
626
- /* # Padding Top — md container */
627
-
628
- :host([layout-container-md-padding-top="0"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: 0; } }
629
- :host([layout-container-md-padding-top="2"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-2); } }
630
- :host([layout-container-md-padding-top="4"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-4); } }
631
- :host([layout-container-md-padding-top="6"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-6); } }
632
- :host([layout-container-md-padding-top="8"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-8); } }
633
- :host([layout-container-md-padding-top="10"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-10); } }
634
- :host([layout-container-md-padding-top="12"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-12); } }
635
- :host([layout-container-md-padding-top="16"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-16); } }
636
- :host([layout-container-md-padding-top="20"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-20); } }
637
- :host([layout-container-md-padding-top="24"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-24); } }
638
- :host([layout-container-md-padding-top="28"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-28); } }
639
- :host([layout-container-md-padding-top="32"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-32); } }
640
- :host([layout-container-md-padding-top="40"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-40); } }
641
- :host([layout-container-md-padding-top="44"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-44); } }
642
- :host([layout-container-md-padding-top="48"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-48); } }
643
- :host([layout-container-md-padding-top="56"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-56); } }
644
- :host([layout-container-md-padding-top="64"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-64); } }
645
- :host([layout-container-md-padding-top="80"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-80); } }
646
- :host([layout-container-md-padding-top="96"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-top: var(--primitives-space-96); } }
647
-
648
-
649
- /* # Padding Top — lg container */
650
-
651
- :host([layout-container-lg-padding-top="0"]) .container { @container layout-container (min-width: ${lgMin}) { padding-top: 0; } }
652
- :host([layout-container-lg-padding-top="2"]) .container { @container layout-container (min-width: ${lgMin}) { padding-top: var(--primitives-space-2); } }
653
- :host([layout-container-lg-padding-top="4"]) .container { @container layout-container (min-width: ${lgMin}) { padding-top: var(--primitives-space-4); } }
654
- :host([layout-container-lg-padding-top="6"]) .container { @container layout-container (min-width: ${lgMin}) { padding-top: var(--primitives-space-6); } }
655
- :host([layout-container-lg-padding-top="8"]) .container { @container layout-container (min-width: ${lgMin}) { padding-top: var(--primitives-space-8); } }
656
- :host([layout-container-lg-padding-top="10"]) .container { @container layout-container (min-width: ${lgMin}) { padding-top: var(--primitives-space-10); } }
657
- :host([layout-container-lg-padding-top="12"]) .container { @container layout-container (min-width: ${lgMin}) { padding-top: var(--primitives-space-12); } }
658
- :host([layout-container-lg-padding-top="16"]) .container { @container layout-container (min-width: ${lgMin}) { padding-top: var(--primitives-space-16); } }
659
- :host([layout-container-lg-padding-top="20"]) .container { @container layout-container (min-width: ${lgMin}) { padding-top: var(--primitives-space-20); } }
660
- :host([layout-container-lg-padding-top="24"]) .container { @container layout-container (min-width: ${lgMin}) { padding-top: var(--primitives-space-24); } }
661
- :host([layout-container-lg-padding-top="28"]) .container { @container layout-container (min-width: ${lgMin}) { padding-top: var(--primitives-space-28); } }
662
- :host([layout-container-lg-padding-top="32"]) .container { @container layout-container (min-width: ${lgMin}) { padding-top: var(--primitives-space-32); } }
663
- :host([layout-container-lg-padding-top="40"]) .container { @container layout-container (min-width: ${lgMin}) { padding-top: var(--primitives-space-40); } }
664
- :host([layout-container-lg-padding-top="44"]) .container { @container layout-container (min-width: ${lgMin}) { padding-top: var(--primitives-space-44); } }
665
- :host([layout-container-lg-padding-top="48"]) .container { @container layout-container (min-width: ${lgMin}) { padding-top: var(--primitives-space-48); } }
666
- :host([layout-container-lg-padding-top="56"]) .container { @container layout-container (min-width: ${lgMin}) { padding-top: var(--primitives-space-56); } }
667
- :host([layout-container-lg-padding-top="64"]) .container { @container layout-container (min-width: ${lgMin}) { padding-top: var(--primitives-space-64); } }
668
- :host([layout-container-lg-padding-top="80"]) .container { @container layout-container (min-width: ${lgMin}) { padding-top: var(--primitives-space-80); } }
669
- :host([layout-container-lg-padding-top="96"]) .container { @container layout-container (min-width: ${lgMin}) { padding-top: var(--primitives-space-96); } }
670
-
671
-
672
- /* # Padding Right — base */
673
-
674
- :host([padding-right="0"]) .container { padding-right: 0; }
675
- :host([padding-right="2"]) .container { padding-right: var(--primitives-space-2); }
676
- :host([padding-right="4"]) .container { padding-right: var(--primitives-space-4); }
677
- :host([padding-right="6"]) .container { padding-right: var(--primitives-space-6); }
678
- :host([padding-right="8"]) .container { padding-right: var(--primitives-space-8); }
679
- :host([padding-right="10"]) .container { padding-right: var(--primitives-space-10); }
680
- :host([padding-right="12"]) .container { padding-right: var(--primitives-space-12); }
681
- :host([padding-right="16"]) .container { padding-right: var(--primitives-space-16); }
682
- :host([padding-right="20"]) .container { padding-right: var(--primitives-space-20); }
683
- :host([padding-right="24"]) .container { padding-right: var(--primitives-space-24); }
684
- :host([padding-right="28"]) .container { padding-right: var(--primitives-space-28); }
685
- :host([padding-right="32"]) .container { padding-right: var(--primitives-space-32); }
686
- :host([padding-right="40"]) .container { padding-right: var(--primitives-space-40); }
687
- :host([padding-right="44"]) .container { padding-right: var(--primitives-space-44); }
688
- :host([padding-right="48"]) .container { padding-right: var(--primitives-space-48); }
689
- :host([padding-right="56"]) .container { padding-right: var(--primitives-space-56); }
690
- :host([padding-right="64"]) .container { padding-right: var(--primitives-space-64); }
691
- :host([padding-right="80"]) .container { padding-right: var(--primitives-space-80); }
692
- :host([padding-right="96"]) .container { padding-right: var(--primitives-space-96); }
693
-
694
-
695
- /* # Padding Right — sm viewport */
696
-
697
- :host([sm-padding-right="0"]) .container { @media (max-width: ${smMax}) { padding-right: 0; } }
698
- :host([sm-padding-right="2"]) .container { @media (max-width: ${smMax}) { padding-right: var(--primitives-space-2); } }
699
- :host([sm-padding-right="4"]) .container { @media (max-width: ${smMax}) { padding-right: var(--primitives-space-4); } }
700
- :host([sm-padding-right="6"]) .container { @media (max-width: ${smMax}) { padding-right: var(--primitives-space-6); } }
701
- :host([sm-padding-right="8"]) .container { @media (max-width: ${smMax}) { padding-right: var(--primitives-space-8); } }
702
- :host([sm-padding-right="10"]) .container { @media (max-width: ${smMax}) { padding-right: var(--primitives-space-10); } }
703
- :host([sm-padding-right="12"]) .container { @media (max-width: ${smMax}) { padding-right: var(--primitives-space-12); } }
704
- :host([sm-padding-right="16"]) .container { @media (max-width: ${smMax}) { padding-right: var(--primitives-space-16); } }
705
- :host([sm-padding-right="20"]) .container { @media (max-width: ${smMax}) { padding-right: var(--primitives-space-20); } }
706
- :host([sm-padding-right="24"]) .container { @media (max-width: ${smMax}) { padding-right: var(--primitives-space-24); } }
707
- :host([sm-padding-right="28"]) .container { @media (max-width: ${smMax}) { padding-right: var(--primitives-space-28); } }
708
- :host([sm-padding-right="32"]) .container { @media (max-width: ${smMax}) { padding-right: var(--primitives-space-32); } }
709
- :host([sm-padding-right="40"]) .container { @media (max-width: ${smMax}) { padding-right: var(--primitives-space-40); } }
710
- :host([sm-padding-right="44"]) .container { @media (max-width: ${smMax}) { padding-right: var(--primitives-space-44); } }
711
- :host([sm-padding-right="48"]) .container { @media (max-width: ${smMax}) { padding-right: var(--primitives-space-48); } }
712
- :host([sm-padding-right="56"]) .container { @media (max-width: ${smMax}) { padding-right: var(--primitives-space-56); } }
713
- :host([sm-padding-right="64"]) .container { @media (max-width: ${smMax}) { padding-right: var(--primitives-space-64); } }
714
- :host([sm-padding-right="80"]) .container { @media (max-width: ${smMax}) { padding-right: var(--primitives-space-80); } }
715
- :host([sm-padding-right="96"]) .container { @media (max-width: ${smMax}) { padding-right: var(--primitives-space-96); } }
716
-
717
-
718
- /* # Padding Right — md viewport */
719
-
720
- :host([md-padding-right="0"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: 0; } }
721
- :host([md-padding-right="2"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-2); } }
722
- :host([md-padding-right="4"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-4); } }
723
- :host([md-padding-right="6"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-6); } }
724
- :host([md-padding-right="8"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-8); } }
725
- :host([md-padding-right="10"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-10); } }
726
- :host([md-padding-right="12"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-12); } }
727
- :host([md-padding-right="16"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-16); } }
728
- :host([md-padding-right="20"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-20); } }
729
- :host([md-padding-right="24"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-24); } }
730
- :host([md-padding-right="28"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-28); } }
731
- :host([md-padding-right="32"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-32); } }
732
- :host([md-padding-right="40"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-40); } }
733
- :host([md-padding-right="44"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-44); } }
734
- :host([md-padding-right="48"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-48); } }
735
- :host([md-padding-right="56"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-56); } }
736
- :host([md-padding-right="64"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-64); } }
737
- :host([md-padding-right="80"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-80); } }
738
- :host([md-padding-right="96"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-96); } }
739
-
740
-
741
- /* # Padding Right — lg viewport */
742
-
743
- :host([lg-padding-right="0"]) .container { @media (min-width: ${lgMin}) { padding-right: 0; } }
744
- :host([lg-padding-right="2"]) .container { @media (min-width: ${lgMin}) { padding-right: var(--primitives-space-2); } }
745
- :host([lg-padding-right="4"]) .container { @media (min-width: ${lgMin}) { padding-right: var(--primitives-space-4); } }
746
- :host([lg-padding-right="6"]) .container { @media (min-width: ${lgMin}) { padding-right: var(--primitives-space-6); } }
747
- :host([lg-padding-right="8"]) .container { @media (min-width: ${lgMin}) { padding-right: var(--primitives-space-8); } }
748
- :host([lg-padding-right="10"]) .container { @media (min-width: ${lgMin}) { padding-right: var(--primitives-space-10); } }
749
- :host([lg-padding-right="12"]) .container { @media (min-width: ${lgMin}) { padding-right: var(--primitives-space-12); } }
750
- :host([lg-padding-right="16"]) .container { @media (min-width: ${lgMin}) { padding-right: var(--primitives-space-16); } }
751
- :host([lg-padding-right="20"]) .container { @media (min-width: ${lgMin}) { padding-right: var(--primitives-space-20); } }
752
- :host([lg-padding-right="24"]) .container { @media (min-width: ${lgMin}) { padding-right: var(--primitives-space-24); } }
753
- :host([lg-padding-right="28"]) .container { @media (min-width: ${lgMin}) { padding-right: var(--primitives-space-28); } }
754
- :host([lg-padding-right="32"]) .container { @media (min-width: ${lgMin}) { padding-right: var(--primitives-space-32); } }
755
- :host([lg-padding-right="40"]) .container { @media (min-width: ${lgMin}) { padding-right: var(--primitives-space-40); } }
756
- :host([lg-padding-right="44"]) .container { @media (min-width: ${lgMin}) { padding-right: var(--primitives-space-44); } }
757
- :host([lg-padding-right="48"]) .container { @media (min-width: ${lgMin}) { padding-right: var(--primitives-space-48); } }
758
- :host([lg-padding-right="56"]) .container { @media (min-width: ${lgMin}) { padding-right: var(--primitives-space-56); } }
759
- :host([lg-padding-right="64"]) .container { @media (min-width: ${lgMin}) { padding-right: var(--primitives-space-64); } }
760
- :host([lg-padding-right="80"]) .container { @media (min-width: ${lgMin}) { padding-right: var(--primitives-space-80); } }
761
- :host([lg-padding-right="96"]) .container { @media (min-width: ${lgMin}) { padding-right: var(--primitives-space-96); } }
762
-
763
-
764
- /* # Padding Right — sm container */
765
-
766
- :host([layout-container-sm-padding-right="0"]) .container { @container layout-container (max-width: ${smMax}) { padding-right: 0; } }
767
- :host([layout-container-sm-padding-right="2"]) .container { @container layout-container (max-width: ${smMax}) { padding-right: var(--primitives-space-2); } }
768
- :host([layout-container-sm-padding-right="4"]) .container { @container layout-container (max-width: ${smMax}) { padding-right: var(--primitives-space-4); } }
769
- :host([layout-container-sm-padding-right="6"]) .container { @container layout-container (max-width: ${smMax}) { padding-right: var(--primitives-space-6); } }
770
- :host([layout-container-sm-padding-right="8"]) .container { @container layout-container (max-width: ${smMax}) { padding-right: var(--primitives-space-8); } }
771
- :host([layout-container-sm-padding-right="10"]) .container { @container layout-container (max-width: ${smMax}) { padding-right: var(--primitives-space-10); } }
772
- :host([layout-container-sm-padding-right="12"]) .container { @container layout-container (max-width: ${smMax}) { padding-right: var(--primitives-space-12); } }
773
- :host([layout-container-sm-padding-right="16"]) .container { @container layout-container (max-width: ${smMax}) { padding-right: var(--primitives-space-16); } }
774
- :host([layout-container-sm-padding-right="20"]) .container { @container layout-container (max-width: ${smMax}) { padding-right: var(--primitives-space-20); } }
775
- :host([layout-container-sm-padding-right="24"]) .container { @container layout-container (max-width: ${smMax}) { padding-right: var(--primitives-space-24); } }
776
- :host([layout-container-sm-padding-right="28"]) .container { @container layout-container (max-width: ${smMax}) { padding-right: var(--primitives-space-28); } }
777
- :host([layout-container-sm-padding-right="32"]) .container { @container layout-container (max-width: ${smMax}) { padding-right: var(--primitives-space-32); } }
778
- :host([layout-container-sm-padding-right="40"]) .container { @container layout-container (max-width: ${smMax}) { padding-right: var(--primitives-space-40); } }
779
- :host([layout-container-sm-padding-right="44"]) .container { @container layout-container (max-width: ${smMax}) { padding-right: var(--primitives-space-44); } }
780
- :host([layout-container-sm-padding-right="48"]) .container { @container layout-container (max-width: ${smMax}) { padding-right: var(--primitives-space-48); } }
781
- :host([layout-container-sm-padding-right="56"]) .container { @container layout-container (max-width: ${smMax}) { padding-right: var(--primitives-space-56); } }
782
- :host([layout-container-sm-padding-right="64"]) .container { @container layout-container (max-width: ${smMax}) { padding-right: var(--primitives-space-64); } }
783
- :host([layout-container-sm-padding-right="80"]) .container { @container layout-container (max-width: ${smMax}) { padding-right: var(--primitives-space-80); } }
784
- :host([layout-container-sm-padding-right="96"]) .container { @container layout-container (max-width: ${smMax}) { padding-right: var(--primitives-space-96); } }
785
-
786
-
787
- /* # Padding Right — md container */
788
-
789
- :host([layout-container-md-padding-right="0"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: 0; } }
790
- :host([layout-container-md-padding-right="2"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-2); } }
791
- :host([layout-container-md-padding-right="4"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-4); } }
792
- :host([layout-container-md-padding-right="6"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-6); } }
793
- :host([layout-container-md-padding-right="8"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-8); } }
794
- :host([layout-container-md-padding-right="10"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-10); } }
795
- :host([layout-container-md-padding-right="12"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-12); } }
796
- :host([layout-container-md-padding-right="16"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-16); } }
797
- :host([layout-container-md-padding-right="20"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-20); } }
798
- :host([layout-container-md-padding-right="24"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-24); } }
799
- :host([layout-container-md-padding-right="28"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-28); } }
800
- :host([layout-container-md-padding-right="32"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-32); } }
801
- :host([layout-container-md-padding-right="40"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-40); } }
802
- :host([layout-container-md-padding-right="44"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-44); } }
803
- :host([layout-container-md-padding-right="48"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-48); } }
804
- :host([layout-container-md-padding-right="56"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-56); } }
805
- :host([layout-container-md-padding-right="64"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-64); } }
806
- :host([layout-container-md-padding-right="80"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-80); } }
807
- :host([layout-container-md-padding-right="96"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-right: var(--primitives-space-96); } }
808
-
809
-
810
- /* # Padding Right — lg container */
811
-
812
- :host([layout-container-lg-padding-right="0"]) .container { @container layout-container (min-width: ${lgMin}) { padding-right: 0; } }
813
- :host([layout-container-lg-padding-right="2"]) .container { @container layout-container (min-width: ${lgMin}) { padding-right: var(--primitives-space-2); } }
814
- :host([layout-container-lg-padding-right="4"]) .container { @container layout-container (min-width: ${lgMin}) { padding-right: var(--primitives-space-4); } }
815
- :host([layout-container-lg-padding-right="6"]) .container { @container layout-container (min-width: ${lgMin}) { padding-right: var(--primitives-space-6); } }
816
- :host([layout-container-lg-padding-right="8"]) .container { @container layout-container (min-width: ${lgMin}) { padding-right: var(--primitives-space-8); } }
817
- :host([layout-container-lg-padding-right="10"]) .container { @container layout-container (min-width: ${lgMin}) { padding-right: var(--primitives-space-10); } }
818
- :host([layout-container-lg-padding-right="12"]) .container { @container layout-container (min-width: ${lgMin}) { padding-right: var(--primitives-space-12); } }
819
- :host([layout-container-lg-padding-right="16"]) .container { @container layout-container (min-width: ${lgMin}) { padding-right: var(--primitives-space-16); } }
820
- :host([layout-container-lg-padding-right="20"]) .container { @container layout-container (min-width: ${lgMin}) { padding-right: var(--primitives-space-20); } }
821
- :host([layout-container-lg-padding-right="24"]) .container { @container layout-container (min-width: ${lgMin}) { padding-right: var(--primitives-space-24); } }
822
- :host([layout-container-lg-padding-right="28"]) .container { @container layout-container (min-width: ${lgMin}) { padding-right: var(--primitives-space-28); } }
823
- :host([layout-container-lg-padding-right="32"]) .container { @container layout-container (min-width: ${lgMin}) { padding-right: var(--primitives-space-32); } }
824
- :host([layout-container-lg-padding-right="40"]) .container { @container layout-container (min-width: ${lgMin}) { padding-right: var(--primitives-space-40); } }
825
- :host([layout-container-lg-padding-right="44"]) .container { @container layout-container (min-width: ${lgMin}) { padding-right: var(--primitives-space-44); } }
826
- :host([layout-container-lg-padding-right="48"]) .container { @container layout-container (min-width: ${lgMin}) { padding-right: var(--primitives-space-48); } }
827
- :host([layout-container-lg-padding-right="56"]) .container { @container layout-container (min-width: ${lgMin}) { padding-right: var(--primitives-space-56); } }
828
- :host([layout-container-lg-padding-right="64"]) .container { @container layout-container (min-width: ${lgMin}) { padding-right: var(--primitives-space-64); } }
829
- :host([layout-container-lg-padding-right="80"]) .container { @container layout-container (min-width: ${lgMin}) { padding-right: var(--primitives-space-80); } }
830
- :host([layout-container-lg-padding-right="96"]) .container { @container layout-container (min-width: ${lgMin}) { padding-right: var(--primitives-space-96); } }
831
-
832
-
833
- /* # Padding Bottom — base */
834
-
835
- :host([padding-bottom="0"]) .container { padding-bottom: 0; }
836
- :host([padding-bottom="2"]) .container { padding-bottom: var(--primitives-space-2); }
837
- :host([padding-bottom="4"]) .container { padding-bottom: var(--primitives-space-4); }
838
- :host([padding-bottom="6"]) .container { padding-bottom: var(--primitives-space-6); }
839
- :host([padding-bottom="8"]) .container { padding-bottom: var(--primitives-space-8); }
840
- :host([padding-bottom="10"]) .container { padding-bottom: var(--primitives-space-10); }
841
- :host([padding-bottom="12"]) .container { padding-bottom: var(--primitives-space-12); }
842
- :host([padding-bottom="16"]) .container { padding-bottom: var(--primitives-space-16); }
843
- :host([padding-bottom="20"]) .container { padding-bottom: var(--primitives-space-20); }
844
- :host([padding-bottom="24"]) .container { padding-bottom: var(--primitives-space-24); }
845
- :host([padding-bottom="28"]) .container { padding-bottom: var(--primitives-space-28); }
846
- :host([padding-bottom="32"]) .container { padding-bottom: var(--primitives-space-32); }
847
- :host([padding-bottom="40"]) .container { padding-bottom: var(--primitives-space-40); }
848
- :host([padding-bottom="44"]) .container { padding-bottom: var(--primitives-space-44); }
849
- :host([padding-bottom="48"]) .container { padding-bottom: var(--primitives-space-48); }
850
- :host([padding-bottom="56"]) .container { padding-bottom: var(--primitives-space-56); }
851
- :host([padding-bottom="64"]) .container { padding-bottom: var(--primitives-space-64); }
852
- :host([padding-bottom="80"]) .container { padding-bottom: var(--primitives-space-80); }
853
- :host([padding-bottom="96"]) .container { padding-bottom: var(--primitives-space-96); }
854
-
855
-
856
- /* # Padding Bottom — sm viewport */
857
-
858
- :host([sm-padding-bottom="0"]) .container { @media (max-width: ${smMax}) { padding-bottom: 0; } }
859
- :host([sm-padding-bottom="2"]) .container { @media (max-width: ${smMax}) { padding-bottom: var(--primitives-space-2); } }
860
- :host([sm-padding-bottom="4"]) .container { @media (max-width: ${smMax}) { padding-bottom: var(--primitives-space-4); } }
861
- :host([sm-padding-bottom="6"]) .container { @media (max-width: ${smMax}) { padding-bottom: var(--primitives-space-6); } }
862
- :host([sm-padding-bottom="8"]) .container { @media (max-width: ${smMax}) { padding-bottom: var(--primitives-space-8); } }
863
- :host([sm-padding-bottom="10"]) .container { @media (max-width: ${smMax}) { padding-bottom: var(--primitives-space-10); } }
864
- :host([sm-padding-bottom="12"]) .container { @media (max-width: ${smMax}) { padding-bottom: var(--primitives-space-12); } }
865
- :host([sm-padding-bottom="16"]) .container { @media (max-width: ${smMax}) { padding-bottom: var(--primitives-space-16); } }
866
- :host([sm-padding-bottom="20"]) .container { @media (max-width: ${smMax}) { padding-bottom: var(--primitives-space-20); } }
867
- :host([sm-padding-bottom="24"]) .container { @media (max-width: ${smMax}) { padding-bottom: var(--primitives-space-24); } }
868
- :host([sm-padding-bottom="28"]) .container { @media (max-width: ${smMax}) { padding-bottom: var(--primitives-space-28); } }
869
- :host([sm-padding-bottom="32"]) .container { @media (max-width: ${smMax}) { padding-bottom: var(--primitives-space-32); } }
870
- :host([sm-padding-bottom="40"]) .container { @media (max-width: ${smMax}) { padding-bottom: var(--primitives-space-40); } }
871
- :host([sm-padding-bottom="44"]) .container { @media (max-width: ${smMax}) { padding-bottom: var(--primitives-space-44); } }
872
- :host([sm-padding-bottom="48"]) .container { @media (max-width: ${smMax}) { padding-bottom: var(--primitives-space-48); } }
873
- :host([sm-padding-bottom="56"]) .container { @media (max-width: ${smMax}) { padding-bottom: var(--primitives-space-56); } }
874
- :host([sm-padding-bottom="64"]) .container { @media (max-width: ${smMax}) { padding-bottom: var(--primitives-space-64); } }
875
- :host([sm-padding-bottom="80"]) .container { @media (max-width: ${smMax}) { padding-bottom: var(--primitives-space-80); } }
876
- :host([sm-padding-bottom="96"]) .container { @media (max-width: ${smMax}) { padding-bottom: var(--primitives-space-96); } }
877
-
878
-
879
- /* # Padding Bottom — md viewport */
880
-
881
- :host([md-padding-bottom="0"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: 0; } }
882
- :host([md-padding-bottom="2"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-2); } }
883
- :host([md-padding-bottom="4"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-4); } }
884
- :host([md-padding-bottom="6"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-6); } }
885
- :host([md-padding-bottom="8"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-8); } }
886
- :host([md-padding-bottom="10"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-10); } }
887
- :host([md-padding-bottom="12"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-12); } }
888
- :host([md-padding-bottom="16"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-16); } }
889
- :host([md-padding-bottom="20"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-20); } }
890
- :host([md-padding-bottom="24"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-24); } }
891
- :host([md-padding-bottom="28"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-28); } }
892
- :host([md-padding-bottom="32"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-32); } }
893
- :host([md-padding-bottom="40"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-40); } }
894
- :host([md-padding-bottom="44"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-44); } }
895
- :host([md-padding-bottom="48"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-48); } }
896
- :host([md-padding-bottom="56"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-56); } }
897
- :host([md-padding-bottom="64"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-64); } }
898
- :host([md-padding-bottom="80"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-80); } }
899
- :host([md-padding-bottom="96"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-96); } }
900
-
901
-
902
- /* # Padding Bottom — lg viewport */
903
-
904
- :host([lg-padding-bottom="0"]) .container { @media (min-width: ${lgMin}) { padding-bottom: 0; } }
905
- :host([lg-padding-bottom="2"]) .container { @media (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-2); } }
906
- :host([lg-padding-bottom="4"]) .container { @media (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-4); } }
907
- :host([lg-padding-bottom="6"]) .container { @media (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-6); } }
908
- :host([lg-padding-bottom="8"]) .container { @media (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-8); } }
909
- :host([lg-padding-bottom="10"]) .container { @media (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-10); } }
910
- :host([lg-padding-bottom="12"]) .container { @media (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-12); } }
911
- :host([lg-padding-bottom="16"]) .container { @media (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-16); } }
912
- :host([lg-padding-bottom="20"]) .container { @media (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-20); } }
913
- :host([lg-padding-bottom="24"]) .container { @media (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-24); } }
914
- :host([lg-padding-bottom="28"]) .container { @media (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-28); } }
915
- :host([lg-padding-bottom="32"]) .container { @media (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-32); } }
916
- :host([lg-padding-bottom="40"]) .container { @media (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-40); } }
917
- :host([lg-padding-bottom="44"]) .container { @media (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-44); } }
918
- :host([lg-padding-bottom="48"]) .container { @media (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-48); } }
919
- :host([lg-padding-bottom="56"]) .container { @media (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-56); } }
920
- :host([lg-padding-bottom="64"]) .container { @media (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-64); } }
921
- :host([lg-padding-bottom="80"]) .container { @media (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-80); } }
922
- :host([lg-padding-bottom="96"]) .container { @media (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-96); } }
923
-
924
-
925
- /* # Padding Bottom — sm container */
926
-
927
- :host([layout-container-sm-padding-bottom="0"]) .container { @container layout-container (max-width: ${smMax}) { padding-bottom: 0; } }
928
- :host([layout-container-sm-padding-bottom="2"]) .container { @container layout-container (max-width: ${smMax}) { padding-bottom: var(--primitives-space-2); } }
929
- :host([layout-container-sm-padding-bottom="4"]) .container { @container layout-container (max-width: ${smMax}) { padding-bottom: var(--primitives-space-4); } }
930
- :host([layout-container-sm-padding-bottom="6"]) .container { @container layout-container (max-width: ${smMax}) { padding-bottom: var(--primitives-space-6); } }
931
- :host([layout-container-sm-padding-bottom="8"]) .container { @container layout-container (max-width: ${smMax}) { padding-bottom: var(--primitives-space-8); } }
932
- :host([layout-container-sm-padding-bottom="10"]) .container { @container layout-container (max-width: ${smMax}) { padding-bottom: var(--primitives-space-10); } }
933
- :host([layout-container-sm-padding-bottom="12"]) .container { @container layout-container (max-width: ${smMax}) { padding-bottom: var(--primitives-space-12); } }
934
- :host([layout-container-sm-padding-bottom="16"]) .container { @container layout-container (max-width: ${smMax}) { padding-bottom: var(--primitives-space-16); } }
935
- :host([layout-container-sm-padding-bottom="20"]) .container { @container layout-container (max-width: ${smMax}) { padding-bottom: var(--primitives-space-20); } }
936
- :host([layout-container-sm-padding-bottom="24"]) .container { @container layout-container (max-width: ${smMax}) { padding-bottom: var(--primitives-space-24); } }
937
- :host([layout-container-sm-padding-bottom="28"]) .container { @container layout-container (max-width: ${smMax}) { padding-bottom: var(--primitives-space-28); } }
938
- :host([layout-container-sm-padding-bottom="32"]) .container { @container layout-container (max-width: ${smMax}) { padding-bottom: var(--primitives-space-32); } }
939
- :host([layout-container-sm-padding-bottom="40"]) .container { @container layout-container (max-width: ${smMax}) { padding-bottom: var(--primitives-space-40); } }
940
- :host([layout-container-sm-padding-bottom="44"]) .container { @container layout-container (max-width: ${smMax}) { padding-bottom: var(--primitives-space-44); } }
941
- :host([layout-container-sm-padding-bottom="48"]) .container { @container layout-container (max-width: ${smMax}) { padding-bottom: var(--primitives-space-48); } }
942
- :host([layout-container-sm-padding-bottom="56"]) .container { @container layout-container (max-width: ${smMax}) { padding-bottom: var(--primitives-space-56); } }
943
- :host([layout-container-sm-padding-bottom="64"]) .container { @container layout-container (max-width: ${smMax}) { padding-bottom: var(--primitives-space-64); } }
944
- :host([layout-container-sm-padding-bottom="80"]) .container { @container layout-container (max-width: ${smMax}) { padding-bottom: var(--primitives-space-80); } }
945
- :host([layout-container-sm-padding-bottom="96"]) .container { @container layout-container (max-width: ${smMax}) { padding-bottom: var(--primitives-space-96); } }
946
-
947
-
948
- /* # Padding Bottom — md container */
949
-
950
- :host([layout-container-md-padding-bottom="0"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: 0; } }
951
- :host([layout-container-md-padding-bottom="2"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-2); } }
952
- :host([layout-container-md-padding-bottom="4"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-4); } }
953
- :host([layout-container-md-padding-bottom="6"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-6); } }
954
- :host([layout-container-md-padding-bottom="8"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-8); } }
955
- :host([layout-container-md-padding-bottom="10"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-10); } }
956
- :host([layout-container-md-padding-bottom="12"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-12); } }
957
- :host([layout-container-md-padding-bottom="16"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-16); } }
958
- :host([layout-container-md-padding-bottom="20"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-20); } }
959
- :host([layout-container-md-padding-bottom="24"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-24); } }
960
- :host([layout-container-md-padding-bottom="28"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-28); } }
961
- :host([layout-container-md-padding-bottom="32"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-32); } }
962
- :host([layout-container-md-padding-bottom="40"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-40); } }
963
- :host([layout-container-md-padding-bottom="44"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-44); } }
964
- :host([layout-container-md-padding-bottom="48"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-48); } }
965
- :host([layout-container-md-padding-bottom="56"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-56); } }
966
- :host([layout-container-md-padding-bottom="64"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-64); } }
967
- :host([layout-container-md-padding-bottom="80"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-80); } }
968
- :host([layout-container-md-padding-bottom="96"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-bottom: var(--primitives-space-96); } }
969
-
970
-
971
- /* # Padding Bottom — lg container */
972
-
973
- :host([layout-container-lg-padding-bottom="0"]) .container { @container layout-container (min-width: ${lgMin}) { padding-bottom: 0; } }
974
- :host([layout-container-lg-padding-bottom="2"]) .container { @container layout-container (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-2); } }
975
- :host([layout-container-lg-padding-bottom="4"]) .container { @container layout-container (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-4); } }
976
- :host([layout-container-lg-padding-bottom="6"]) .container { @container layout-container (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-6); } }
977
- :host([layout-container-lg-padding-bottom="8"]) .container { @container layout-container (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-8); } }
978
- :host([layout-container-lg-padding-bottom="10"]) .container { @container layout-container (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-10); } }
979
- :host([layout-container-lg-padding-bottom="12"]) .container { @container layout-container (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-12); } }
980
- :host([layout-container-lg-padding-bottom="16"]) .container { @container layout-container (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-16); } }
981
- :host([layout-container-lg-padding-bottom="20"]) .container { @container layout-container (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-20); } }
982
- :host([layout-container-lg-padding-bottom="24"]) .container { @container layout-container (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-24); } }
983
- :host([layout-container-lg-padding-bottom="28"]) .container { @container layout-container (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-28); } }
984
- :host([layout-container-lg-padding-bottom="32"]) .container { @container layout-container (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-32); } }
985
- :host([layout-container-lg-padding-bottom="40"]) .container { @container layout-container (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-40); } }
986
- :host([layout-container-lg-padding-bottom="44"]) .container { @container layout-container (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-44); } }
987
- :host([layout-container-lg-padding-bottom="48"]) .container { @container layout-container (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-48); } }
988
- :host([layout-container-lg-padding-bottom="56"]) .container { @container layout-container (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-56); } }
989
- :host([layout-container-lg-padding-bottom="64"]) .container { @container layout-container (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-64); } }
990
- :host([layout-container-lg-padding-bottom="80"]) .container { @container layout-container (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-80); } }
991
- :host([layout-container-lg-padding-bottom="96"]) .container { @container layout-container (min-width: ${lgMin}) { padding-bottom: var(--primitives-space-96); } }
992
-
993
-
994
- /* # Padding Left — base */
995
-
996
- :host([padding-left="0"]) .container { padding-left: 0; }
997
- :host([padding-left="2"]) .container { padding-left: var(--primitives-space-2); }
998
- :host([padding-left="4"]) .container { padding-left: var(--primitives-space-4); }
999
- :host([padding-left="6"]) .container { padding-left: var(--primitives-space-6); }
1000
- :host([padding-left="8"]) .container { padding-left: var(--primitives-space-8); }
1001
- :host([padding-left="10"]) .container { padding-left: var(--primitives-space-10); }
1002
- :host([padding-left="12"]) .container { padding-left: var(--primitives-space-12); }
1003
- :host([padding-left="16"]) .container { padding-left: var(--primitives-space-16); }
1004
- :host([padding-left="20"]) .container { padding-left: var(--primitives-space-20); }
1005
- :host([padding-left="24"]) .container { padding-left: var(--primitives-space-24); }
1006
- :host([padding-left="28"]) .container { padding-left: var(--primitives-space-28); }
1007
- :host([padding-left="32"]) .container { padding-left: var(--primitives-space-32); }
1008
- :host([padding-left="40"]) .container { padding-left: var(--primitives-space-40); }
1009
- :host([padding-left="44"]) .container { padding-left: var(--primitives-space-44); }
1010
- :host([padding-left="48"]) .container { padding-left: var(--primitives-space-48); }
1011
- :host([padding-left="56"]) .container { padding-left: var(--primitives-space-56); }
1012
- :host([padding-left="64"]) .container { padding-left: var(--primitives-space-64); }
1013
- :host([padding-left="80"]) .container { padding-left: var(--primitives-space-80); }
1014
- :host([padding-left="96"]) .container { padding-left: var(--primitives-space-96); }
1015
-
1016
-
1017
- /* # Padding Left — sm viewport */
1018
-
1019
- :host([sm-padding-left="0"]) .container { @media (max-width: ${smMax}) { padding-left: 0; } }
1020
- :host([sm-padding-left="2"]) .container { @media (max-width: ${smMax}) { padding-left: var(--primitives-space-2); } }
1021
- :host([sm-padding-left="4"]) .container { @media (max-width: ${smMax}) { padding-left: var(--primitives-space-4); } }
1022
- :host([sm-padding-left="6"]) .container { @media (max-width: ${smMax}) { padding-left: var(--primitives-space-6); } }
1023
- :host([sm-padding-left="8"]) .container { @media (max-width: ${smMax}) { padding-left: var(--primitives-space-8); } }
1024
- :host([sm-padding-left="10"]) .container { @media (max-width: ${smMax}) { padding-left: var(--primitives-space-10); } }
1025
- :host([sm-padding-left="12"]) .container { @media (max-width: ${smMax}) { padding-left: var(--primitives-space-12); } }
1026
- :host([sm-padding-left="16"]) .container { @media (max-width: ${smMax}) { padding-left: var(--primitives-space-16); } }
1027
- :host([sm-padding-left="20"]) .container { @media (max-width: ${smMax}) { padding-left: var(--primitives-space-20); } }
1028
- :host([sm-padding-left="24"]) .container { @media (max-width: ${smMax}) { padding-left: var(--primitives-space-24); } }
1029
- :host([sm-padding-left="28"]) .container { @media (max-width: ${smMax}) { padding-left: var(--primitives-space-28); } }
1030
- :host([sm-padding-left="32"]) .container { @media (max-width: ${smMax}) { padding-left: var(--primitives-space-32); } }
1031
- :host([sm-padding-left="40"]) .container { @media (max-width: ${smMax}) { padding-left: var(--primitives-space-40); } }
1032
- :host([sm-padding-left="44"]) .container { @media (max-width: ${smMax}) { padding-left: var(--primitives-space-44); } }
1033
- :host([sm-padding-left="48"]) .container { @media (max-width: ${smMax}) { padding-left: var(--primitives-space-48); } }
1034
- :host([sm-padding-left="56"]) .container { @media (max-width: ${smMax}) { padding-left: var(--primitives-space-56); } }
1035
- :host([sm-padding-left="64"]) .container { @media (max-width: ${smMax}) { padding-left: var(--primitives-space-64); } }
1036
- :host([sm-padding-left="80"]) .container { @media (max-width: ${smMax}) { padding-left: var(--primitives-space-80); } }
1037
- :host([sm-padding-left="96"]) .container { @media (max-width: ${smMax}) { padding-left: var(--primitives-space-96); } }
1038
-
1039
-
1040
- /* # Padding Left — md viewport */
1041
-
1042
- :host([md-padding-left="0"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: 0; } }
1043
- :host([md-padding-left="2"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-2); } }
1044
- :host([md-padding-left="4"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-4); } }
1045
- :host([md-padding-left="6"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-6); } }
1046
- :host([md-padding-left="8"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-8); } }
1047
- :host([md-padding-left="10"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-10); } }
1048
- :host([md-padding-left="12"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-12); } }
1049
- :host([md-padding-left="16"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-16); } }
1050
- :host([md-padding-left="20"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-20); } }
1051
- :host([md-padding-left="24"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-24); } }
1052
- :host([md-padding-left="28"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-28); } }
1053
- :host([md-padding-left="32"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-32); } }
1054
- :host([md-padding-left="40"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-40); } }
1055
- :host([md-padding-left="44"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-44); } }
1056
- :host([md-padding-left="48"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-48); } }
1057
- :host([md-padding-left="56"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-56); } }
1058
- :host([md-padding-left="64"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-64); } }
1059
- :host([md-padding-left="80"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-80); } }
1060
- :host([md-padding-left="96"]) .container { @media (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-96); } }
1061
-
1062
-
1063
- /* # Padding Left — lg viewport */
1064
-
1065
- :host([lg-padding-left="0"]) .container { @media (min-width: ${lgMin}) { padding-left: 0; } }
1066
- :host([lg-padding-left="2"]) .container { @media (min-width: ${lgMin}) { padding-left: var(--primitives-space-2); } }
1067
- :host([lg-padding-left="4"]) .container { @media (min-width: ${lgMin}) { padding-left: var(--primitives-space-4); } }
1068
- :host([lg-padding-left="6"]) .container { @media (min-width: ${lgMin}) { padding-left: var(--primitives-space-6); } }
1069
- :host([lg-padding-left="8"]) .container { @media (min-width: ${lgMin}) { padding-left: var(--primitives-space-8); } }
1070
- :host([lg-padding-left="10"]) .container { @media (min-width: ${lgMin}) { padding-left: var(--primitives-space-10); } }
1071
- :host([lg-padding-left="12"]) .container { @media (min-width: ${lgMin}) { padding-left: var(--primitives-space-12); } }
1072
- :host([lg-padding-left="16"]) .container { @media (min-width: ${lgMin}) { padding-left: var(--primitives-space-16); } }
1073
- :host([lg-padding-left="20"]) .container { @media (min-width: ${lgMin}) { padding-left: var(--primitives-space-20); } }
1074
- :host([lg-padding-left="24"]) .container { @media (min-width: ${lgMin}) { padding-left: var(--primitives-space-24); } }
1075
- :host([lg-padding-left="28"]) .container { @media (min-width: ${lgMin}) { padding-left: var(--primitives-space-28); } }
1076
- :host([lg-padding-left="32"]) .container { @media (min-width: ${lgMin}) { padding-left: var(--primitives-space-32); } }
1077
- :host([lg-padding-left="40"]) .container { @media (min-width: ${lgMin}) { padding-left: var(--primitives-space-40); } }
1078
- :host([lg-padding-left="44"]) .container { @media (min-width: ${lgMin}) { padding-left: var(--primitives-space-44); } }
1079
- :host([lg-padding-left="48"]) .container { @media (min-width: ${lgMin}) { padding-left: var(--primitives-space-48); } }
1080
- :host([lg-padding-left="56"]) .container { @media (min-width: ${lgMin}) { padding-left: var(--primitives-space-56); } }
1081
- :host([lg-padding-left="64"]) .container { @media (min-width: ${lgMin}) { padding-left: var(--primitives-space-64); } }
1082
- :host([lg-padding-left="80"]) .container { @media (min-width: ${lgMin}) { padding-left: var(--primitives-space-80); } }
1083
- :host([lg-padding-left="96"]) .container { @media (min-width: ${lgMin}) { padding-left: var(--primitives-space-96); } }
1084
-
1085
-
1086
- /* # Padding Left — sm container */
1087
-
1088
- :host([layout-container-sm-padding-left="0"]) .container { @container layout-container (max-width: ${smMax}) { padding-left: 0; } }
1089
- :host([layout-container-sm-padding-left="2"]) .container { @container layout-container (max-width: ${smMax}) { padding-left: var(--primitives-space-2); } }
1090
- :host([layout-container-sm-padding-left="4"]) .container { @container layout-container (max-width: ${smMax}) { padding-left: var(--primitives-space-4); } }
1091
- :host([layout-container-sm-padding-left="6"]) .container { @container layout-container (max-width: ${smMax}) { padding-left: var(--primitives-space-6); } }
1092
- :host([layout-container-sm-padding-left="8"]) .container { @container layout-container (max-width: ${smMax}) { padding-left: var(--primitives-space-8); } }
1093
- :host([layout-container-sm-padding-left="10"]) .container { @container layout-container (max-width: ${smMax}) { padding-left: var(--primitives-space-10); } }
1094
- :host([layout-container-sm-padding-left="12"]) .container { @container layout-container (max-width: ${smMax}) { padding-left: var(--primitives-space-12); } }
1095
- :host([layout-container-sm-padding-left="16"]) .container { @container layout-container (max-width: ${smMax}) { padding-left: var(--primitives-space-16); } }
1096
- :host([layout-container-sm-padding-left="20"]) .container { @container layout-container (max-width: ${smMax}) { padding-left: var(--primitives-space-20); } }
1097
- :host([layout-container-sm-padding-left="24"]) .container { @container layout-container (max-width: ${smMax}) { padding-left: var(--primitives-space-24); } }
1098
- :host([layout-container-sm-padding-left="28"]) .container { @container layout-container (max-width: ${smMax}) { padding-left: var(--primitives-space-28); } }
1099
- :host([layout-container-sm-padding-left="32"]) .container { @container layout-container (max-width: ${smMax}) { padding-left: var(--primitives-space-32); } }
1100
- :host([layout-container-sm-padding-left="40"]) .container { @container layout-container (max-width: ${smMax}) { padding-left: var(--primitives-space-40); } }
1101
- :host([layout-container-sm-padding-left="44"]) .container { @container layout-container (max-width: ${smMax}) { padding-left: var(--primitives-space-44); } }
1102
- :host([layout-container-sm-padding-left="48"]) .container { @container layout-container (max-width: ${smMax}) { padding-left: var(--primitives-space-48); } }
1103
- :host([layout-container-sm-padding-left="56"]) .container { @container layout-container (max-width: ${smMax}) { padding-left: var(--primitives-space-56); } }
1104
- :host([layout-container-sm-padding-left="64"]) .container { @container layout-container (max-width: ${smMax}) { padding-left: var(--primitives-space-64); } }
1105
- :host([layout-container-sm-padding-left="80"]) .container { @container layout-container (max-width: ${smMax}) { padding-left: var(--primitives-space-80); } }
1106
- :host([layout-container-sm-padding-left="96"]) .container { @container layout-container (max-width: ${smMax}) { padding-left: var(--primitives-space-96); } }
1107
-
1108
-
1109
- /* # Padding Left — md container */
1110
-
1111
- :host([layout-container-md-padding-left="0"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: 0; } }
1112
- :host([layout-container-md-padding-left="2"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-2); } }
1113
- :host([layout-container-md-padding-left="4"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-4); } }
1114
- :host([layout-container-md-padding-left="6"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-6); } }
1115
- :host([layout-container-md-padding-left="8"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-8); } }
1116
- :host([layout-container-md-padding-left="10"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-10); } }
1117
- :host([layout-container-md-padding-left="12"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-12); } }
1118
- :host([layout-container-md-padding-left="16"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-16); } }
1119
- :host([layout-container-md-padding-left="20"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-20); } }
1120
- :host([layout-container-md-padding-left="24"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-24); } }
1121
- :host([layout-container-md-padding-left="28"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-28); } }
1122
- :host([layout-container-md-padding-left="32"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-32); } }
1123
- :host([layout-container-md-padding-left="40"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-40); } }
1124
- :host([layout-container-md-padding-left="44"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-44); } }
1125
- :host([layout-container-md-padding-left="48"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-48); } }
1126
- :host([layout-container-md-padding-left="56"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-56); } }
1127
- :host([layout-container-md-padding-left="64"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-64); } }
1128
- :host([layout-container-md-padding-left="80"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-80); } }
1129
- :host([layout-container-md-padding-left="96"]) .container { @container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { padding-left: var(--primitives-space-96); } }
1130
-
1131
-
1132
- /* # Padding Left — lg container */
1133
-
1134
- :host([layout-container-lg-padding-left="0"]) .container { @container layout-container (min-width: ${lgMin}) { padding-left: 0; } }
1135
- :host([layout-container-lg-padding-left="2"]) .container { @container layout-container (min-width: ${lgMin}) { padding-left: var(--primitives-space-2); } }
1136
- :host([layout-container-lg-padding-left="4"]) .container { @container layout-container (min-width: ${lgMin}) { padding-left: var(--primitives-space-4); } }
1137
- :host([layout-container-lg-padding-left="6"]) .container { @container layout-container (min-width: ${lgMin}) { padding-left: var(--primitives-space-6); } }
1138
- :host([layout-container-lg-padding-left="8"]) .container { @container layout-container (min-width: ${lgMin}) { padding-left: var(--primitives-space-8); } }
1139
- :host([layout-container-lg-padding-left="10"]) .container { @container layout-container (min-width: ${lgMin}) { padding-left: var(--primitives-space-10); } }
1140
- :host([layout-container-lg-padding-left="12"]) .container { @container layout-container (min-width: ${lgMin}) { padding-left: var(--primitives-space-12); } }
1141
- :host([layout-container-lg-padding-left="16"]) .container { @container layout-container (min-width: ${lgMin}) { padding-left: var(--primitives-space-16); } }
1142
- :host([layout-container-lg-padding-left="20"]) .container { @container layout-container (min-width: ${lgMin}) { padding-left: var(--primitives-space-20); } }
1143
- :host([layout-container-lg-padding-left="24"]) .container { @container layout-container (min-width: ${lgMin}) { padding-left: var(--primitives-space-24); } }
1144
- :host([layout-container-lg-padding-left="28"]) .container { @container layout-container (min-width: ${lgMin}) { padding-left: var(--primitives-space-28); } }
1145
- :host([layout-container-lg-padding-left="32"]) .container { @container layout-container (min-width: ${lgMin}) { padding-left: var(--primitives-space-32); } }
1146
- :host([layout-container-lg-padding-left="40"]) .container { @container layout-container (min-width: ${lgMin}) { padding-left: var(--primitives-space-40); } }
1147
- :host([layout-container-lg-padding-left="44"]) .container { @container layout-container (min-width: ${lgMin}) { padding-left: var(--primitives-space-44); } }
1148
- :host([layout-container-lg-padding-left="48"]) .container { @container layout-container (min-width: ${lgMin}) { padding-left: var(--primitives-space-48); } }
1149
- :host([layout-container-lg-padding-left="56"]) .container { @container layout-container (min-width: ${lgMin}) { padding-left: var(--primitives-space-56); } }
1150
- :host([layout-container-lg-padding-left="64"]) .container { @container layout-container (min-width: ${lgMin}) { padding-left: var(--primitives-space-64); } }
1151
- :host([layout-container-lg-padding-left="80"]) .container { @container layout-container (min-width: ${lgMin}) { padding-left: var(--primitives-space-80); } }
1152
- :host([layout-container-lg-padding-left="96"]) .container { @container layout-container (min-width: ${lgMin}) { padding-left: var(--primitives-space-96); } }
1153
-
105
+ :host([wrap]) {
106
+ flex-wrap: wrap;
107
+ }
1154
108
  `;
1155
109
  //# sourceMappingURL=container.styles.js.map