@patternfly/react-styles 6.0.0-alpha.1 → 6.0.0-alpha.10

Sign up to get free protection for your applications and to get access to all the features.
Files changed (267) hide show
  1. package/CHANGELOG.md +102 -0
  2. package/README.md +1 -1
  3. package/css/assets/images/PF-Backdrop.svg +1 -0
  4. package/css/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  5. package/css/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  6. package/css/assets/images/PF-IconLogo-Reverse.svg +14 -0
  7. package/css/assets/images/PF-IconLogo-color.svg +17 -0
  8. package/css/assets/images/PF-IconLogo.svg +17 -0
  9. package/css/assets/images/logo__pf--reverse-on-md.svg +1 -1
  10. package/css/assets/images/pf-background.svg +22 -0
  11. package/css/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  12. package/css/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  13. package/css/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  14. package/css/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  15. package/css/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  16. package/css/assets/images/pf_logo_white.hbs +35 -0
  17. package/css/assets/images/pf_logo_white.svg +38 -0
  18. package/css/components/AboutModalBox/about-modal-box.css +57 -94
  19. package/css/components/AboutModalBox/about-modal-box.d.ts +1 -2
  20. package/css/components/AboutModalBox/about-modal-box.js +1 -2
  21. package/css/components/AboutModalBox/about-modal-box.mjs +1 -2
  22. package/css/components/Accordion/accordion.css +85 -177
  23. package/css/components/Accordion/accordion.d.ts +3 -2
  24. package/css/components/Accordion/accordion.js +3 -2
  25. package/css/components/Accordion/accordion.mjs +3 -2
  26. package/css/components/ActionList/action-list.css +18 -17
  27. package/css/components/Alert/alert-group.css +20 -16
  28. package/css/components/Alert/alert.css +57 -84
  29. package/css/components/Alert/alert.d.ts +1 -2
  30. package/css/components/Alert/alert.js +1 -2
  31. package/css/components/Alert/alert.mjs +1 -2
  32. package/css/components/Avatar/avatar.css +10 -13
  33. package/css/components/Avatar/avatar.d.ts +1 -2
  34. package/css/components/Avatar/avatar.js +1 -2
  35. package/css/components/Avatar/avatar.mjs +1 -2
  36. package/css/components/BackToTop/back-to-top.css +17 -16
  37. package/css/components/Backdrop/backdrop.css +6 -2
  38. package/css/components/BackgroundImage/background-image.css +5 -1
  39. package/css/components/Badge/badge.css +23 -15
  40. package/css/components/Badge/badge.d.ts +2 -2
  41. package/css/components/Badge/badge.js +2 -2
  42. package/css/components/Badge/badge.mjs +2 -2
  43. package/css/components/Banner/banner.css +90 -64
  44. package/css/components/Banner/banner.d.ts +12 -4
  45. package/css/components/Banner/banner.js +12 -4
  46. package/css/components/Banner/banner.mjs +12 -4
  47. package/css/components/Breadcrumb/breadcrumb.css +19 -16
  48. package/css/components/Button/button.css +444 -435
  49. package/css/components/Button/button.d.ts +10 -9
  50. package/css/components/Button/button.js +10 -9
  51. package/css/components/Button/button.mjs +10 -9
  52. package/css/components/Card/card.css +100 -194
  53. package/css/components/Card/card.d.ts +5 -9
  54. package/css/components/Card/card.js +5 -9
  55. package/css/components/Card/card.mjs +5 -9
  56. package/css/components/Check/check.css +24 -21
  57. package/css/components/ClipboardCopy/clipboard-copy.css +30 -33
  58. package/css/components/ClipboardCopy/clipboard-copy.d.ts +1 -2
  59. package/css/components/ClipboardCopy/clipboard-copy.js +1 -2
  60. package/css/components/ClipboardCopy/clipboard-copy.mjs +1 -2
  61. package/css/components/CodeBlock/code-block.css +18 -9
  62. package/css/components/Content/content.css +67 -67
  63. package/css/components/DataList/data-list.css +101 -158
  64. package/css/components/DataList/data-list.d.ts +1 -2
  65. package/css/components/DataList/data-list.js +1 -2
  66. package/css/components/DataList/data-list.mjs +1 -2
  67. package/css/components/DescriptionList/description-list.css +39 -34
  68. package/css/components/Divider/divider.css +97 -177
  69. package/css/components/Divider/divider.d.ts +1 -0
  70. package/css/components/Divider/divider.js +1 -0
  71. package/css/components/Divider/divider.mjs +1 -0
  72. package/css/components/DragDrop/drag-drop.css +18 -14
  73. package/css/components/DragDrop/drag-drop.d.ts +1 -2
  74. package/css/components/DragDrop/drag-drop.js +1 -2
  75. package/css/components/DragDrop/drag-drop.mjs +1 -2
  76. package/css/components/Drawer/drawer.css +112 -113
  77. package/css/components/Drawer/drawer.d.ts +3 -3
  78. package/css/components/Drawer/drawer.js +3 -3
  79. package/css/components/Drawer/drawer.mjs +3 -3
  80. package/css/components/Dropdown/dropdown.css +1 -3
  81. package/css/components/Dropdown/dropdown.d.ts +0 -1
  82. package/css/components/Dropdown/dropdown.js +0 -1
  83. package/css/components/Dropdown/dropdown.mjs +0 -1
  84. package/css/components/EmptyState/empty-state.css +57 -34
  85. package/css/components/EmptyState/empty-state.d.ts +6 -1
  86. package/css/components/EmptyState/empty-state.js +6 -1
  87. package/css/components/EmptyState/empty-state.mjs +6 -1
  88. package/css/components/ExpandableSection/expandable-section.css +64 -62
  89. package/css/components/ExpandableSection/expandable-section.d.ts +1 -3
  90. package/css/components/ExpandableSection/expandable-section.js +1 -3
  91. package/css/components/ExpandableSection/expandable-section.mjs +1 -3
  92. package/css/components/FileUpload/file-upload.css +28 -34
  93. package/css/components/Form/form.css +68 -114
  94. package/css/components/Form/form.d.ts +2 -6
  95. package/css/components/Form/form.js +2 -6
  96. package/css/components/Form/form.mjs +2 -6
  97. package/css/components/FormControl/form-control.css +86 -111
  98. package/css/components/FormControl/form-control.d.ts +1 -2
  99. package/css/components/FormControl/form-control.js +1 -2
  100. package/css/components/FormControl/form-control.mjs +1 -2
  101. package/css/components/HelperText/helper-text.css +28 -34
  102. package/css/components/HelperText/helper-text.d.ts +1 -2
  103. package/css/components/HelperText/helper-text.js +1 -2
  104. package/css/components/HelperText/helper-text.mjs +1 -2
  105. package/css/components/Hint/hint.css +28 -21
  106. package/css/components/Hint/hint.d.ts +1 -2
  107. package/css/components/Hint/hint.js +1 -2
  108. package/css/components/Hint/hint.mjs +1 -2
  109. package/css/components/Icon/icon.css +154 -18
  110. package/css/components/Icon/icon.d.ts +11 -0
  111. package/css/components/Icon/icon.js +11 -0
  112. package/css/components/Icon/icon.mjs +11 -0
  113. package/css/components/InlineEdit/inline-edit.css +8 -7
  114. package/css/components/InputGroup/input-group.css +22 -38
  115. package/css/components/InputGroup/input-group.d.ts +1 -2
  116. package/css/components/InputGroup/input-group.js +1 -2
  117. package/css/components/InputGroup/input-group.mjs +1 -2
  118. package/css/components/JumpLinks/jump-links.css +34 -34
  119. package/css/components/Label/label-group.css +39 -44
  120. package/css/components/Label/label.css +258 -355
  121. package/css/components/Label/label.d.ts +11 -10
  122. package/css/components/Label/label.js +11 -10
  123. package/css/components/Label/label.mjs +11 -10
  124. package/css/components/List/list.css +16 -16
  125. package/css/components/Login/login.css +70 -97
  126. package/css/components/Login/login.d.ts +0 -2
  127. package/css/components/Login/login.js +0 -2
  128. package/css/components/Login/login.mjs +0 -2
  129. package/css/components/Masthead/masthead.css +262 -498
  130. package/css/components/Masthead/masthead.d.ts +3 -45
  131. package/css/components/Masthead/masthead.js +3 -45
  132. package/css/components/Masthead/masthead.mjs +3 -45
  133. package/css/components/Menu/menu.css +3 -0
  134. package/css/components/Menu/menu.d.ts +1 -0
  135. package/css/components/Menu/menu.js +1 -0
  136. package/css/components/Menu/menu.mjs +1 -0
  137. package/css/components/MenuToggle/menu-toggle.css +58 -80
  138. package/css/components/ModalBox/modal-box.css +59 -52
  139. package/css/components/ModalBox/modal-box.d.ts +1 -2
  140. package/css/components/ModalBox/modal-box.js +1 -2
  141. package/css/components/ModalBox/modal-box.mjs +1 -2
  142. package/css/components/MultipleFileUpload/multiple-file-upload.css +77 -50
  143. package/css/components/MultipleFileUpload/multiple-file-upload.d.ts +0 -1
  144. package/css/components/MultipleFileUpload/multiple-file-upload.js +0 -1
  145. package/css/components/MultipleFileUpload/multiple-file-upload.mjs +0 -1
  146. package/css/components/Nav/nav.css +241 -917
  147. package/css/components/Nav/nav.d.ts +9 -20
  148. package/css/components/Nav/nav.js +9 -20
  149. package/css/components/Nav/nav.mjs +9 -20
  150. package/css/components/NotificationBadge/notification-badge.css +56 -81
  151. package/css/components/NotificationBadge/notification-badge.d.ts +1 -5
  152. package/css/components/NotificationBadge/notification-badge.js +1 -5
  153. package/css/components/NotificationBadge/notification-badge.mjs +1 -5
  154. package/css/components/NotificationDrawer/notification-drawer.css +104 -115
  155. package/css/components/NotificationDrawer/notification-drawer.d.ts +3 -3
  156. package/css/components/NotificationDrawer/notification-drawer.js +3 -3
  157. package/css/components/NotificationDrawer/notification-drawer.mjs +3 -3
  158. package/css/components/NumberInput/number-input.css +8 -8
  159. package/css/components/NumberInput/number-input.d.ts +0 -3
  160. package/css/components/NumberInput/number-input.js +0 -3
  161. package/css/components/NumberInput/number-input.mjs +0 -3
  162. package/css/components/OverflowMenu/overflow-menu.css +17 -47
  163. package/css/components/OverflowMenu/overflow-menu.d.ts +1 -3
  164. package/css/components/OverflowMenu/overflow-menu.js +1 -3
  165. package/css/components/OverflowMenu/overflow-menu.mjs +1 -3
  166. package/css/components/Page/page.css +112 -209
  167. package/css/components/Page/page.d.ts +5 -12
  168. package/css/components/Page/page.js +5 -12
  169. package/css/components/Page/page.mjs +5 -12
  170. package/css/components/Pagination/pagination.css +64 -121
  171. package/css/components/Pagination/pagination.d.ts +2 -5
  172. package/css/components/Pagination/pagination.js +2 -5
  173. package/css/components/Pagination/pagination.mjs +2 -5
  174. package/css/components/Panel/panel.css +27 -23
  175. package/css/components/Panel/panel.d.ts +2 -2
  176. package/css/components/Panel/panel.js +2 -2
  177. package/css/components/Panel/panel.mjs +2 -2
  178. package/css/components/Popover/popover.css +42 -53
  179. package/css/components/Popover/popover.d.ts +1 -2
  180. package/css/components/Popover/popover.js +1 -2
  181. package/css/components/Popover/popover.mjs +1 -2
  182. package/css/components/Progress/progress.css +31 -45
  183. package/css/components/Progress/progress.d.ts +1 -2
  184. package/css/components/Progress/progress.js +1 -2
  185. package/css/components/Progress/progress.mjs +1 -2
  186. package/css/components/Radio/radio.css +27 -20
  187. package/css/components/Sidebar/sidebar.css +20 -9
  188. package/css/components/Sidebar/sidebar.d.ts +1 -0
  189. package/css/components/Sidebar/sidebar.js +1 -0
  190. package/css/components/Sidebar/sidebar.mjs +1 -0
  191. package/css/components/SimpleList/simple-list.css +35 -52
  192. package/css/components/SimpleList/simple-list.d.ts +2 -2
  193. package/css/components/SimpleList/simple-list.js +2 -2
  194. package/css/components/SimpleList/simple-list.mjs +2 -2
  195. package/css/components/Skeleton/skeleton.css +18 -20
  196. package/css/components/Skeleton/skeleton.d.ts +1 -2
  197. package/css/components/Skeleton/skeleton.js +1 -2
  198. package/css/components/Skeleton/skeleton.mjs +1 -2
  199. package/css/components/SkipToContent/skip-to-content.css +6 -3
  200. package/css/components/Slider/slider.css +34 -30
  201. package/css/components/Spinner/spinner.css +17 -34
  202. package/css/components/Switch/switch.css +42 -38
  203. package/css/components/Switch/switch.d.ts +1 -2
  204. package/css/components/Switch/switch.js +1 -2
  205. package/css/components/Switch/switch.mjs +1 -2
  206. package/css/components/TabContent/tab-content.css +17 -11
  207. package/css/components/TabContent/tab-content.d.ts +1 -1
  208. package/css/components/TabContent/tab-content.js +1 -1
  209. package/css/components/TabContent/tab-content.mjs +1 -1
  210. package/css/components/Table/table-grid.css +8 -8
  211. package/css/components/Table/table.css +85 -90
  212. package/css/components/Table/table.d.ts +2 -0
  213. package/css/components/Table/table.js +2 -0
  214. package/css/components/Table/table.mjs +2 -0
  215. package/css/components/Tile/tile.css +40 -81
  216. package/css/components/Tile/tile.d.ts +0 -1
  217. package/css/components/Tile/tile.js +0 -1
  218. package/css/components/Tile/tile.mjs +0 -1
  219. package/css/components/Timestamp/timestamp.css +12 -9
  220. package/css/components/Title/title.css +70 -19
  221. package/css/components/Title/title.d.ts +7 -1
  222. package/css/components/Title/title.js +7 -1
  223. package/css/components/Title/title.mjs +7 -1
  224. package/css/components/ToggleGroup/toggle-group.css +34 -47
  225. package/css/components/ToggleGroup/toggle-group.d.ts +0 -1
  226. package/css/components/ToggleGroup/toggle-group.js +0 -1
  227. package/css/components/ToggleGroup/toggle-group.mjs +0 -1
  228. package/css/components/Toolbar/toolbar.css +2527 -1032
  229. package/css/components/Toolbar/toolbar.d.ts +406 -102
  230. package/css/components/Toolbar/toolbar.js +406 -102
  231. package/css/components/Toolbar/toolbar.mjs +406 -102
  232. package/css/components/Tooltip/tooltip.css +16 -18
  233. package/css/components/Tooltip/tooltip.d.ts +0 -1
  234. package/css/components/Tooltip/tooltip.js +0 -1
  235. package/css/components/Tooltip/tooltip.mjs +0 -1
  236. package/css/components/Truncate/truncate.css +4 -0
  237. package/css/docs/components/Brand/examples/Brand.css +12 -0
  238. package/css/docs/components/Brand/examples/Brand.d.ts +10 -0
  239. package/css/docs/components/Brand/examples/Brand.js +11 -0
  240. package/css/docs/components/Brand/examples/Brand.mjs +9 -0
  241. package/css/docs/components/Button/examples/Button.css +4 -0
  242. package/css/docs/components/Divider/examples/Divider.css +3 -1
  243. package/css/docs/components/DragDrop/examples/DragDrop.css +1 -1
  244. package/css/docs/components/Label/examples/Label.css +4 -0
  245. package/css/docs/components/Nav/examples/Navigation.css +1 -22
  246. package/css/docs/components/Nav/examples/Navigation.d.ts +0 -3
  247. package/css/docs/components/Nav/examples/Navigation.js +0 -3
  248. package/css/docs/components/Nav/examples/Navigation.mjs +0 -3
  249. package/css/docs/components/Page/examples/Page.css +0 -8
  250. package/css/docs/components/Page/examples/Page.d.ts +0 -7
  251. package/css/docs/components/Page/examples/Page.js +0 -7
  252. package/css/docs/components/Page/examples/Page.mjs +0 -7
  253. package/css/docs/components/Toolbar/examples/Toolbar.css +20 -15
  254. package/css/docs/components/Truncate/examples/Truncate.css +2 -2
  255. package/css/docs/demos/Toolbar/examples/Toolbar.css +15 -0
  256. package/css/docs/demos/Toolbar/examples/Toolbar.d.ts +6 -1
  257. package/css/docs/demos/Toolbar/examples/Toolbar.js +6 -1
  258. package/css/docs/demos/Toolbar/examples/Toolbar.mjs +6 -1
  259. package/package.json +3 -3
  260. package/css/docs/components/Avatar/examples/Avatar.css +0 -3
  261. package/css/docs/components/Avatar/examples/Avatar.d.ts +0 -3
  262. package/css/docs/components/Avatar/examples/Avatar.js +0 -4
  263. package/css/docs/components/Avatar/examples/Avatar.mjs +0 -2
  264. package/css/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
  265. package/css/docs/components/NotificationBadge/examples/NotificationBadge.d.ts +0 -5
  266. package/css/docs/components/NotificationBadge/examples/NotificationBadge.js +0 -6
  267. package/css/docs/components/NotificationBadge/examples/NotificationBadge.mjs +0 -4
@@ -1,665 +1,429 @@
1
- .pf-v5-c-masthead.pf-m-light-200, .pf-v5-c-masthead.pf-m-light {
2
- --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
3
- --pf-v5-global--Color--200: var(--pf-v5-global--Color--dark-200);
4
- --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--dark-100);
5
- --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--dark-100);
6
- --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
7
- --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
8
- --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
9
- --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
10
- --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
11
- }
12
-
13
- .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain, .pf-v5-c-masthead {
14
- --pf-v5-global--Color--100: var(--pf-v5-global--Color--light-100);
15
- --pf-v5-global--Color--200: var(--pf-v5-global--Color--light-200);
16
- --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--light-100);
17
- --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--light-100);
18
- --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
19
- --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
20
- --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
21
- --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
22
- --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
23
- }
24
- .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain .pf-v5-c-button, .pf-v5-c-masthead .pf-v5-c-button {
25
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
26
- }
27
-
28
- .pf-v5-c-masthead {
29
- --pf-v5-c-masthead--PaddingLeft: var(--pf-v5-c-masthead--inset);
30
- --pf-v5-c-masthead--PaddingRight: var(--pf-v5-c-masthead--inset);
31
- --pf-v5-c-masthead--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
32
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--md);
33
- --pf-v5-c-masthead--xl--inset: var(--pf-v5-global--spacer--lg);
1
+ :root,
2
+ [data-theme=pf-v5-c-masthead] {
3
+ --pf-v5-c-masthead--RowGap: var(--pf-t--global--spacer--sm);
4
+ --pf-v5-c-masthead--ColumnGap: var(--pf-t--global--spacer--md);
5
+ --pf-v5-c-masthead--BorderWidth: var(--pf-t--global--border--width--divider--default);
6
+ --pf-v5-c-masthead--PaddingBlock: var(--pf-t--global--spacer--md);
7
+ --pf-v5-c-masthead--PaddingInline: var(--pf-t--global--spacer--lg);
8
+ --pf-v5-c-masthead--BorderColor: var(--pf-t--global--border--color--default);
9
+ --pf-v5-c-masthead__brand--MarginInlineEnd: var(--pf-t--global--spacer--md);
10
+ --pf-v5-c-masthead__brand--MaxHeight: 2.375rem;
11
+ --pf-v5-c-masthead__toggle--Size: var(--pf-t--global--icon--size--xl);
34
12
  --pf-v5-c-masthead--m-display-stack--GridTemplateColumns: max-content 1fr;
35
13
  --pf-v5-c-masthead--m-display-stack__main--GridColumn: -1 / 1;
36
- --pf-v5-c-masthead--m-display-stack__main--MinHeight: 4.375rem;
37
14
  --pf-v5-c-masthead--m-display-stack__main--Order: -1;
38
- --pf-v5-c-masthead--m-display-stack__main--FlexBasis: 100%;
39
- --pf-v5-c-masthead--m-display-stack__main--PaddingTop: var(--pf-v5-global--spacer--sm);
40
- --pf-v5-c-masthead--m-display-stack__main--PaddingBottom: var(--pf-v5-global--spacer--sm);
41
- --pf-v5-c-masthead--m-display-stack__main--MarginRight: 0;
42
- --pf-v5-c-masthead--m-display-stack__main--before--BorderBottom: var(--pf-v5-c-masthead__main--before--BorderBottomWidth) solid var(--pf-v5-c-masthead__main--before--BorderBottomColor);
43
- --pf-v5-c-masthead--m-display-stack__toggle--GridColumn: 1;
15
+ --pf-v5-c-masthead--m-display-stack__main--PaddingBlockEnd: var(--pf-v5-c-masthead--RowGap);
16
+ --pf-v5-c-masthead--m-display-stack__main--BorderBlockEnd: var(--pf-v5-c-masthead--BorderWidth) solid var(--pf-v5-c-masthead--BorderColor);
44
17
  --pf-v5-c-masthead--m-display-stack__content--GridColumn: 2;
45
- --pf-v5-c-masthead--m-display-stack__content--MinHeight: auto;
46
18
  --pf-v5-c-masthead--m-display-stack__content--Order: 1;
47
- --pf-v5-c-masthead--m-display-stack__content--PaddingTop: 0;
48
- --pf-v5-c-masthead--m-display-stack__content--PaddingBottom: 0;
49
- --pf-v5-c-masthead--m-display-stack__content--MarginLeft: 0;
50
- --pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight: calc(var(--pf-v5-c-masthead--inset) * -1);
51
- --pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft: calc(var(--pf-v5-c-masthead--inset) * -1);
52
19
  --pf-v5-c-masthead--m-display-inline--GridTemplateColumns: max-content max-content 1fr;
53
20
  --pf-v5-c-masthead--m-display-inline__main--GridColumn: 2;
54
- --pf-v5-c-masthead--m-display-inline__main--MinHeight: 4.375rem;
55
21
  --pf-v5-c-masthead--m-display-inline__main--Order: 0;
56
- --pf-v5-c-masthead--m-display-inline__main--FlexBasis: auto;
57
- --pf-v5-c-masthead--m-display-inline__main--PaddingTop: 0;
58
- --pf-v5-c-masthead--m-display-inline__main--PaddingBottom: 0;
59
- --pf-v5-c-masthead--m-display-inline__main--MarginRight: calc(var(--pf-v5-global--spacer--lg) / 2);
60
- --pf-v5-c-masthead--m-display-inline__main--BorderBottom: 0;
61
- --pf-v5-c-masthead--m-display-inline__toggle--GridColumn: 1;
22
+ --pf-v5-c-masthead--m-display-inline__main--PaddingBlockEnd: 0;
23
+ --pf-v5-c-masthead--m-display-inline__main--BorderBlockEnd: 0;
62
24
  --pf-v5-c-masthead--m-display-inline__content--GridColumn: 3;
63
- --pf-v5-c-masthead--m-display-inline__content--MinHeight: 4.375rem;
64
25
  --pf-v5-c-masthead--m-display-inline__content--Order: 0;
65
- --pf-v5-c-masthead--m-display-inline__content--PaddingTop: 0;
66
- --pf-v5-c-masthead--m-display-inline__content--PaddingBottom: 0;
67
- --pf-v5-c-masthead--m-display-inline__content--MarginLeft: calc(var(--pf-v5-global--spacer--lg) / 2);
68
- --pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight: 0;
69
- --pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft: 0;
70
- --pf-v5-c-masthead__main--before--Right: calc(var(--pf-v5-c-masthead--inset) * -1);
71
- --pf-v5-c-masthead__main--before--Left: calc(var(--pf-v5-c-masthead--inset) * -1);
72
- --pf-v5-c-masthead__main--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
73
- --pf-v5-c-masthead__main--before--BorderBottomColor: var(--pf-v5-global--palette--black-600);
74
- --pf-v5-c-masthead__toggle--MarginRight: var(--pf-v5-global--spacer--sm);
75
- --pf-v5-c-masthead__toggle--MarginLeft: calc(var(--pf-v5-global--spacer--md) * -1);
76
- --pf-v5-c-masthead__toggle--c-button--FontSize: var(--pf-v5-global--FontSize--2xl);
77
- --pf-v5-c-masthead--m-light--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
78
- --pf-v5-c-masthead--m-light__main--BorderBottomColor: var(--pf-v5-global--BorderColor--300);
79
- --pf-v5-c-masthead--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
80
- --pf-v5-c-masthead--m-light-200__main--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
81
- --pf-v5-c-masthead--c-toolbar__item--Display: flex;
82
- --pf-v5-c-masthead--item-border-color--base: var(--pf-v5-global--palette--black-800);
83
- --pf-v5-c-masthead--c-context-selector--Width: auto;
84
- --pf-v5-c-masthead--c-context-selector__toggle--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
85
- --pf-v5-c-masthead--c-context-selector__toggle--BorderRightColor: var(--pf-v5-c-masthead--item-border-color--base);
86
- --pf-v5-c-masthead--c-context-selector__toggle--BorderLeftColor: var(--pf-v5-c-masthead--item-border-color--base);
87
- --pf-v5-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor: transparent;
88
- --pf-v5-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor: transparent;
89
- --pf-v5-c-masthead--c-dropdown__toggle--before--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
90
- --pf-v5-c-masthead--c-dropdown__toggle--before--BorderRightColor: var(--pf-v5-c-masthead--item-border-color--base);
91
- --pf-v5-c-masthead--c-dropdown__toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--item-border-color--base);
92
- --pf-v5-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor: transparent;
93
- --pf-v5-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor: transparent;
94
- --pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
95
- --pf-v5-c-masthead--c-menu-toggle--before--BorderRightColor: var(--pf-v5-c-masthead--item-border-color--base);
96
- --pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--item-border-color--base);
97
- --pf-v5-c-masthead--c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--BackgroundColor);
98
- --pf-v5-c-masthead--c-toolbar--AlignItems--base: center;
99
- --pf-v5-c-masthead--c-toolbar__content--PaddingRight: 0;
100
- --pf-v5-c-masthead--c-toolbar__content--PaddingLeft: 0;
101
- --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingTop: var(--pf-v5-global--spacer--md);
102
- --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-masthead--inset);
103
- --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingBottom: var(--pf-v5-global--spacer--md);
104
- --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-masthead--inset);
105
- --pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
106
- --pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
26
+ --pf-v5-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
27
+ --pf-v5-c-masthead__expandable-content--BorderBlockStart: var(--pf-v5-c-masthead--BorderWidth) solid var(--pf-v5-c-masthead--BorderColor);
28
+ --pf-v5-c-masthead--pf-v5-c-toolbar--Width: 100%;
29
+ --pf-v5-c-masthead--pf-v5-c-toolbar--PaddingBlock: 0;
30
+ --pf-v5-c-masthead--pf-v5-c-toolbar--PaddingInline: 0;
31
+ }
32
+
33
+ .pf-v5-c-masthead {
34
+ --pf-v5-c-toolbar--Width: var(--pf-v5-c-masthead--pf-v5-c-toolbar--Width);
35
+ --pf-v5-c-toolbar__content--PaddingBlock: var(--pf-v5-c-masthead--pf-v5-c-toolbar--PaddingBlock);
36
+ --pf-v5-c-toolbar__content--PaddingInline: var(--pf-v5-c-masthead--pf-v5-c-toolbar--PaddingInline);
107
37
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-stack--GridTemplateColumns);
108
38
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-stack__main--GridColumn);
109
- --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-stack__main--MinHeight);
110
39
  --pf-v5-c-masthead__main--Order: var(--pf-v5-c-masthead--m-display-stack__main--Order);
111
- --pf-v5-c-masthead__main--FlexBasis: var(--pf-v5-c-masthead--m-display-stack__main--FlexBasis);
112
- --pf-v5-c-masthead__main--PaddingTop: var(--pf-v5-c-masthead--m-display-stack__main--PaddingTop);
113
- --pf-v5-c-masthead__main--PaddingBottom: var(--pf-v5-c-masthead--m-display-stack__main--PaddingBottom);
114
- --pf-v5-c-masthead__main--MarginRight: var(--pf-v5-c-masthead--m-display-stack__main--MarginRight);
115
- --pf-v5-c-masthead__main--before--BorderBottom: var(--pf-v5-c-masthead--m-display-stack__main--before--BorderBottom);
40
+ --pf-v5-c-masthead__main--PaddingBlockEnd: var(--pf-v5-c-masthead--m-display-stack__main--PaddingBlockEnd);
41
+ --pf-v5-c-masthead__main--BorderBlockEnd: var(--pf-v5-c-masthead--m-display-stack__main--BorderBlockEnd);
116
42
  --pf-v5-c-masthead__content--GridColumn: var(--pf-v5-c-masthead--m-display-stack__content--GridColumn);
117
- --pf-v5-c-masthead__content--MinHeight: var(--pf-v5-c-masthead--m-display-stack__content--MinHeight);
118
43
  --pf-v5-c-masthead__content--Order: var(--pf-v5-c-masthead--m-display-stack__content--Order);
119
- --pf-v5-c-masthead__content--PaddingTop: var(--pf-v5-c-masthead--m-display-stack__content--PaddingTop);
120
- --pf-v5-c-masthead__content--PaddingBottom: var(--pf-v5-c-masthead--m-display-stack__content--PaddingBottom);
121
- --pf-v5-c-masthead__content--MarginLeft: var(--pf-v5-c-masthead--m-display-stack__content--MarginLeft);
122
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
123
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
124
- color: var(--pf-v5-global--Color--100);
125
- position: relative;
126
44
  display: grid;
127
45
  grid-template-columns: var(--pf-v5-c-masthead--GridTemplateColumns);
128
- align-items: center;
46
+ row-gap: var(--pf-v5-c-masthead--RowGap);
47
+ column-gap: var(--pf-v5-c-masthead--ColumnGap);
48
+ align-items: start;
129
49
  min-width: 0;
130
- padding-inline-start: var(--pf-v5-c-masthead--PaddingLeft);
131
- padding-inline-end: var(--pf-v5-c-masthead--PaddingRight);
132
- background-color: var(--pf-v5-c-masthead--BackgroundColor);
50
+ padding-block-start: var(--pf-v5-c-masthead--PaddingBlockStart, var(--pf-v5-c-masthead--PaddingBlock));
51
+ padding-block-end: var(--pf-v5-c-masthead--PaddingBlockEnd, var(--pf-v5-c-masthead--PaddingBlock));
52
+ padding-inline-start: var(--pf-v5-c-masthead--PaddingInlineStart, var(--pf-v5-c-masthead--PaddingInline));
53
+ padding-inline-end: var(--pf-v5-c-masthead--PaddingInlineEnd, var(--pf-v5-c-masthead--PaddingInline));
54
+ background-color: var(--pf-v5-c-masthead--BackgroundColor, var(--pf-t--global--background--color--secondary--default));
133
55
  }
134
56
  @media screen and (min-width: 768px) {
135
- .pf-v5-c-page:where(:not(.pf-m-resize-observer)) .pf-v5-c-masthead {
57
+ :where(:not(.pf-m-resize-observer)) .pf-v5-c-masthead {
136
58
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-inline--GridTemplateColumns);
137
59
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-inline__main--GridColumn);
138
- --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-inline__main--MinHeight);
139
60
  --pf-v5-c-masthead__main--Order: var(--pf-v5-c-masthead--m-display-inline__main--Order);
140
- --pf-v5-c-masthead__main--FlexBasis: var(--pf-v5-c-masthead--m-display-inline__main--FlexBasis);
141
- --pf-v5-c-masthead__main--PaddingTop: var(--pf-v5-c-masthead--m-display-inline__main--PaddingTop);
142
- --pf-v5-c-masthead__main--PaddingBottom: var(--pf-v5-c-masthead--m-display-inline__main--PaddingBottom);
143
- --pf-v5-c-masthead__main--MarginRight: var(--pf-v5-c-masthead--m-display-inline__main--MarginRight);
144
- --pf-v5-c-masthead__main--before--BorderBottom: var(--pf-v5-c-masthead--m-display-inline__main--BorderBottom);
61
+ --pf-v5-c-masthead__main--PaddingBlockEnd: var(--pf-v5-c-masthead--m-display-inline__main--PaddingBlockEnd);
62
+ --pf-v5-c-masthead__main--BorderBlockEnd: var(--pf-v5-c-masthead--m-display-inline__main--BorderBlockEnd);
145
63
  --pf-v5-c-masthead__content--GridColumn: var(--pf-v5-c-masthead--m-display-inline__content--GridColumn);
146
- --pf-v5-c-masthead__content--MinHeight: var(--pf-v5-c-masthead--m-display-inline__content--MinHeight);
147
64
  --pf-v5-c-masthead__content--Order: var(--pf-v5-c-masthead--m-display-inline__content--Order);
148
- --pf-v5-c-masthead__content--PaddingTop: var(--pf-v5-c-masthead--m-display-inline__content--PaddingTop);
149
- --pf-v5-c-masthead__content--PaddingBottom: var(--pf-v5-c-masthead--m-display-inline__content--PaddingBottom);
150
- --pf-v5-c-masthead__content--MarginLeft: var(--pf-v5-c-masthead--m-display-inline__content--MarginLeft);
151
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
152
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
153
65
  }
154
66
  }
155
- @media screen and (min-width: 1200px) {
156
- .pf-v5-c-masthead {
157
- --pf-v5-c-masthead--inset: var(--pf-v5-c-masthead--xl--inset);
158
- }
159
- }
160
- .pf-v5-c-masthead.pf-m-light {
161
- color: var(--pf-v5-global--Color--100);
162
- --pf-v5-c-masthead--BackgroundColor: var(--pf-v5-c-masthead--m-light--BackgroundColor);
163
- --pf-v5-c-masthead__main--BorderBottomColor: var(--pf-v5-c-masthead--m-light__main--BorderBottomColor);
164
- }
165
- .pf-v5-c-masthead.pf-m-light-200 {
166
- color: var(--pf-v5-global--Color--100);
167
- --pf-v5-c-masthead--BackgroundColor: var(--pf-v5-c-masthead--m-light-200--BackgroundColor);
168
- --pf-v5-c-masthead__main--BorderBottomColor: var(--pf-v5-c-masthead--m-light-200__main--BorderBottomColor);
169
- }
170
- .pf-v5-c-masthead .pf-v5-c-toolbar {
171
- --pf-v5-c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--c-toolbar--BackgroundColor);
172
- --pf-v5-c-toolbar--AlignItems--base: var(--pf-v5-c-masthead--c-toolbar--AlignItems--base);
173
- --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-masthead--c-toolbar__content--PaddingRight);
174
- --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-masthead--c-toolbar__content--PaddingLeft);
175
- --pf-v5-c-toolbar__expandable-content--PaddingTop: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingTop);
176
- --pf-v5-c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingRight);
177
- --pf-v5-c-toolbar__expandable-content--PaddingBottom: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingBottom);
178
- --pf-v5-c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingLeft);
179
- width: 100%;
180
- }
181
- .pf-v5-c-masthead .pf-v5-c-toolbar__content-section {
182
- flex-wrap: nowrap;
183
- }
184
67
  .pf-v5-c-masthead .pf-v5-c-toolbar__expandable-content {
185
68
  inset-block-start: 100%;
69
+ border-block-start: var(--pf-v5-c-masthead__expandable-content--BorderBlockStart);
70
+ box-shadow: var(--pf-v5-c-masthead__expandable-content--BoxShadow);
186
71
  }
187
- .pf-v5-c-masthead .pf-v5-c-toolbar__expandable-content::before {
188
- position: absolute;
189
- inset: 0;
190
- content: "";
191
- border-block-start: var(--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth) solid var(--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopColor);
192
- box-shadow: var(--pf-v5-c-toolbar__expandable-content--before--BoxShadow);
193
- }
194
- .pf-v5-c-masthead .pf-v5-c-menu-toggle {
195
- --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor);
196
- --pf-v5-c-menu-toggle--before--BorderRightColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderRightColor);
197
- --pf-v5-c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor);
198
- --pf-v5-c-menu-toggle--m-full-height__toggle--after--BorderBottomWidth: 0;
199
- }
200
- .pf-v5-c-masthead .pf-v5-c-context-selector {
201
- --pf-v5-c-context-selector--Width: var(--pf-v5-c-masthead--c-context-selector--Width);
202
- --pf-v5-c-context-selector__toggle--BorderTopColor: var(--pf-v5-c-masthead--c-context-selector__toggle--BorderTopColor);
203
- --pf-v5-c-context-selector__toggle--BorderRightColor: var(--pf-v5-c-masthead--c-context-selector__toggle--BorderRightColor);
204
- --pf-v5-c-context-selector__toggle--BorderLeftColor: var(--pf-v5-c-masthead--c-context-selector__toggle--BorderLeftColor);
205
- }
206
- .pf-v5-c-masthead .pf-v5-c-context-selector.pf-m-full-height {
207
- --pf-v5-c-context-selector__toggle--BorderTopColor: var(--pf-v5-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor);
208
- --pf-v5-c-context-selector__toggle--BorderBottomColor: var(--pf-v5-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor);
209
- }
210
- .pf-v5-c-masthead .pf-v5-c-dropdown {
211
- --pf-v5-c-dropdown__toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-dropdown__toggle--before--BorderTopColor);
212
- --pf-v5-c-dropdown__toggle--before--BorderRightColor: var(--pf-v5-c-masthead--c-dropdown__toggle--before--BorderRightColor);
213
- --pf-v5-c-dropdown__toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--c-dropdown__toggle--before--BorderLeftColor);
214
- }
215
- .pf-v5-c-masthead .pf-v5-c-dropdown.pf-m-full-height {
216
- --pf-v5-c-dropdown__toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor);
217
- --pf-v5-c-dropdown__toggle--before--BorderBottomColor: var(--pf-v5-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor);
218
- }
219
- .pf-v5-c-masthead .pf-v5-c-nav {
220
- align-self: stretch;
72
+ .pf-v5-c-masthead.pf-m-display-stack {
73
+ --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-stack--GridTemplateColumns);
74
+ --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-stack__main--GridColumn);
75
+ --pf-v5-c-masthead__main--Order: var(--pf-v5-c-masthead--m-display-stack__main--Order);
76
+ --pf-v5-c-masthead__main--PaddingBlockEnd: var(--pf-v5-c-masthead--m-display-stack__main--PaddingBlockEnd);
77
+ --pf-v5-c-masthead__main--BorderBlockEnd: var(--pf-v5-c-masthead--m-display-stack__main--BorderBlockEnd);
78
+ --pf-v5-c-masthead__content--GridColumn: var(--pf-v5-c-masthead--m-display-stack__content--GridColumn);
79
+ --pf-v5-c-masthead__content--Order: var(--pf-v5-c-masthead--m-display-stack__content--Order);
221
80
  }
222
- .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain {
223
- color: var(--pf-v5-c-button--m-plain--Color);
81
+ .pf-v5-c-masthead.pf-m-display-inline {
82
+ --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-inline--GridTemplateColumns);
83
+ --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-inline__main--GridColumn);
84
+ --pf-v5-c-masthead__main--Order: var(--pf-v5-c-masthead--m-display-inline__main--Order);
85
+ --pf-v5-c-masthead__main--PaddingBlockEnd: var(--pf-v5-c-masthead--m-display-inline__main--PaddingBlockEnd);
86
+ --pf-v5-c-masthead__main--BorderBlockEnd: var(--pf-v5-c-masthead--m-display-inline__main--BorderBlockEnd);
87
+ --pf-v5-c-masthead__content--GridColumn: var(--pf-v5-c-masthead--m-display-inline__content--GridColumn);
88
+ --pf-v5-c-masthead__content--Order: var(--pf-v5-c-masthead--m-display-inline__content--Order);
89
+ }
90
+ .pf-v5-c-masthead.pf-m-inset-none {
91
+ padding-inline-start: 0;
92
+ padding-inline-end: 0;
93
+ }
94
+ .pf-v5-c-masthead.pf-m-inset-sm {
95
+ padding-inline-start: var(--pf-v5-global--spacer--sm);
96
+ padding-inline-end: var(--pf-v5-global--spacer--sm);
97
+ }
98
+ .pf-v5-c-masthead.pf-m-inset-md {
99
+ padding-inline-start: var(--pf-v5-global--spacer--md);
100
+ padding-inline-end: var(--pf-v5-global--spacer--md);
101
+ }
102
+ .pf-v5-c-masthead.pf-m-inset-lg {
103
+ padding-inline-start: var(--pf-v5-global--spacer--lg);
104
+ padding-inline-end: var(--pf-v5-global--spacer--lg);
105
+ }
106
+ .pf-v5-c-masthead.pf-m-inset-xl {
107
+ padding-inline-start: var(--pf-v5-global--spacer--xl);
108
+ padding-inline-end: var(--pf-v5-global--spacer--xl);
109
+ }
110
+ .pf-v5-c-masthead.pf-m-inset-2xl {
111
+ padding-inline-start: var(--pf-v5-global--spacer--2xl);
112
+ padding-inline-end: var(--pf-v5-global--spacer--2xl);
224
113
  }
225
114
 
115
+ .pf-v5-c-masthead,
226
116
  .pf-v5-c-masthead__main {
227
117
  position: relative;
228
- display: flex;
229
- flex-basis: var(--pf-v5-c-masthead__main--FlexBasis);
230
- grid-column: var(--pf-v5-c-masthead__main--GridColumn);
231
- align-items: center;
232
- align-self: stretch;
233
- order: var(--pf-v5-c-masthead__main--Order);
234
- min-height: var(--pf-v5-c-masthead__main--MinHeight);
235
- padding-block-start: var(--pf-v5-c-masthead__main--PaddingTop);
236
- padding-block-end: var(--pf-v5-c-masthead__main--PaddingBottom);
237
- margin-inline-end: var(--pf-v5-c-masthead__main--MarginRight);
238
- }
239
- .pf-v5-c-masthead__main::before {
240
- position: absolute;
241
- inset-block-end: 0;
242
- inset-inline-start: var(--pf-v5-c-masthead__main--before--Left);
243
- inset-inline-end: var(--pf-v5-c-masthead__main--before--Right);
244
- content: "";
245
- border-block-end: var(--pf-v5-c-masthead__main--before--BorderBottom);
246
- }
247
- .pf-v5-c-masthead__main:last-child {
248
- --pf-v5-c-masthead__main--MarginRight: 0;
249
118
  }
250
119
 
251
- .pf-v5-c-masthead__content {
120
+ .pf-v5-c-masthead__main,
121
+ .pf-v5-c-masthead__content,
122
+ .pf-v5-c-masthead__logo,
123
+ .pf-v5-c-masthead__brand {
252
124
  display: flex;
253
- flex-grow: 1;
254
- flex-shrink: 1;
255
- grid-column: var(--pf-v5-c-masthead__content--GridColumn);
256
- grid-column-end: -1;
257
- align-items: center;
258
125
  align-self: stretch;
259
- order: var(--pf-v5-c-masthead__content--Order);
260
- min-height: var(--pf-v5-c-masthead__content--MinHeight);
261
- padding-block-start: var(--pf-v5-c-masthead__content--PaddingTop);
262
- padding-block-end: var(--pf-v5-c-masthead__content--PaddingBottom);
263
- margin-inline-start: var(--pf-v5-c-masthead__content--MarginLeft);
264
- }
265
- .pf-v5-c-masthead__content:only-child {
266
- --pf-v5-c-masthead__content--MarginLeft: 0;
267
- }
268
- .pf-v5-c-masthead__content .pf-v5-c-nav.pf-m-horizontal {
269
- margin-inline-start: var(--pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft);
270
- margin-inline-end: var(--pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight);
271
- }
272
- .pf-v5-c-masthead__toggle ~ .pf-v5-c-masthead__content {
273
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: calc(var(--pf-v5-c-masthead__content--MarginLeft) * -1);
274
126
  }
275
127
 
276
128
  .pf-v5-c-masthead__main,
277
129
  .pf-v5-c-masthead__brand,
278
130
  .pf-v5-c-masthead__content {
279
- min-width: 0;
131
+ min-width: 0.25rem;
132
+ }
133
+
134
+ .pf-v5-c-masthead__main {
135
+ grid-column: var(--pf-v5-c-masthead__main--GridColumn);
136
+ row-gap: var(--pf-v5-c-masthead__main--RowGap, var(--pf-v5-c-masthead--RowGap));
137
+ align-items: var(--pf-v5-c-masthead__main--AlignItems, var(--pf-v5-c-masthead--AlignItems));
138
+ order: var(--pf-v5-c-masthead__main--Order);
139
+ padding-block-end: var(--pf-v5-c-masthead__main--PaddingBlockEnd);
140
+ border-block-end: var(--pf-v5-c-masthead__main--BorderBlockEnd);
141
+ }
142
+
143
+ .pf-v5-c-masthead__content {
144
+ flex-wrap: wrap;
145
+ grid-column: var(--pf-v5-c-masthead__content--GridColumn);
146
+ grid-column-end: -1;
147
+ row-gap: var(--pf-v5-c-masthead__content-RowGap, var(--pf-v5-c-masthead--RowGap));
148
+ column-gap: var(--pf-v5-c-masthead__content-ColumnGap, var(--pf-v5-c-masthead--ColumnGap));
149
+ align-items: var(--pf-v5-c-masthead__content--AlignItems, var(--pf-v5-c-masthead--AlignItems));
150
+ order: var(--pf-v5-c-masthead__content--Order);
280
151
  }
281
152
 
282
153
  .pf-v5-c-masthead__brand {
283
- display: inline-flex;
284
- align-self: center;
154
+ align-items: var(--pf-v5-c-masthead__brand--AlignItems, var(--pf-v5-c-masthead--AlignItems));
155
+ max-height: var(--pf-v5-c-masthead__brand--MaxHeight);
156
+ margin-inline-end: var(--pf-v5-c-masthead__brand--MarginInlineEnd);
285
157
  }
286
158
 
287
159
  .pf-v5-c-masthead__toggle {
288
- grid-column: var(--pf-v5-c-masthead__toggle--GridColumn);
289
- align-self: center;
290
- margin-inline-start: var(--pf-v5-c-masthead__toggle--MarginLeft);
291
- margin-inline-end: var(--pf-v5-c-masthead__toggle--MarginRight);
160
+ --pf-v5-c-button--FontSize: var(--pf-v5-c-masthead__toggle--Size);
292
161
  }
293
- .pf-v5-c-masthead__toggle .pf-v5-c-button {
294
- --pf-v5-c-button--FontSize: var(--pf-v5-c-masthead__toggle--c-button--FontSize);
162
+
163
+ .pf-v5-c-masthead__expandable-content {
164
+ row-gap: var(--pf-v5-c-masthead__expandable-content-RowGap, var(--pf-v5-c-masthead--RowGap));
165
+ background-color: var(--pf-v5-c-masthead--BackgroundColor);
295
166
  }
296
167
 
297
168
  .pf-v5-c-masthead.pf-m-display-stack {
298
169
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-stack--GridTemplateColumns);
299
170
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-stack__main--GridColumn);
300
- --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-stack__main--MinHeight);
301
171
  --pf-v5-c-masthead__main--Order: var(--pf-v5-c-masthead--m-display-stack__main--Order);
302
- --pf-v5-c-masthead__main--FlexBasis: var(--pf-v5-c-masthead--m-display-stack__main--FlexBasis);
303
- --pf-v5-c-masthead__main--PaddingTop: var(--pf-v5-c-masthead--m-display-stack__main--PaddingTop);
304
- --pf-v5-c-masthead__main--PaddingBottom: var(--pf-v5-c-masthead--m-display-stack__main--PaddingBottom);
305
- --pf-v5-c-masthead__main--MarginRight: var(--pf-v5-c-masthead--m-display-stack__main--MarginRight);
306
- --pf-v5-c-masthead__main--before--BorderBottom: var(--pf-v5-c-masthead--m-display-stack__main--before--BorderBottom);
172
+ --pf-v5-c-masthead__main--PaddingBlockEnd: var(--pf-v5-c-masthead--m-display-stack__main--PaddingBlockEnd);
173
+ --pf-v5-c-masthead__main--BorderBlockEnd: var(--pf-v5-c-masthead--m-display-stack__main--BorderBlockEnd);
307
174
  --pf-v5-c-masthead__content--GridColumn: var(--pf-v5-c-masthead--m-display-stack__content--GridColumn);
308
- --pf-v5-c-masthead__content--MinHeight: var(--pf-v5-c-masthead--m-display-stack__content--MinHeight);
309
175
  --pf-v5-c-masthead__content--Order: var(--pf-v5-c-masthead--m-display-stack__content--Order);
310
- --pf-v5-c-masthead__content--PaddingTop: var(--pf-v5-c-masthead--m-display-stack__content--PaddingTop);
311
- --pf-v5-c-masthead__content--PaddingBottom: var(--pf-v5-c-masthead--m-display-stack__content--PaddingBottom);
312
- --pf-v5-c-masthead__content--MarginLeft: var(--pf-v5-c-masthead--m-display-stack__content--MarginLeft);
313
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
314
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
315
176
  }
316
177
  .pf-v5-c-masthead.pf-m-display-inline {
317
178
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-inline--GridTemplateColumns);
318
179
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-inline__main--GridColumn);
319
- --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-inline__main--MinHeight);
320
180
  --pf-v5-c-masthead__main--Order: var(--pf-v5-c-masthead--m-display-inline__main--Order);
321
- --pf-v5-c-masthead__main--FlexBasis: var(--pf-v5-c-masthead--m-display-inline__main--FlexBasis);
322
- --pf-v5-c-masthead__main--PaddingTop: var(--pf-v5-c-masthead--m-display-inline__main--PaddingTop);
323
- --pf-v5-c-masthead__main--PaddingBottom: var(--pf-v5-c-masthead--m-display-inline__main--PaddingBottom);
324
- --pf-v5-c-masthead__main--MarginRight: var(--pf-v5-c-masthead--m-display-inline__main--MarginRight);
325
- --pf-v5-c-masthead__main--before--BorderBottom: var(--pf-v5-c-masthead--m-display-inline__main--BorderBottom);
181
+ --pf-v5-c-masthead__main--PaddingBlockEnd: var(--pf-v5-c-masthead--m-display-inline__main--PaddingBlockEnd);
182
+ --pf-v5-c-masthead__main--BorderBlockEnd: var(--pf-v5-c-masthead--m-display-inline__main--BorderBlockEnd);
326
183
  --pf-v5-c-masthead__content--GridColumn: var(--pf-v5-c-masthead--m-display-inline__content--GridColumn);
327
- --pf-v5-c-masthead__content--MinHeight: var(--pf-v5-c-masthead--m-display-inline__content--MinHeight);
328
184
  --pf-v5-c-masthead__content--Order: var(--pf-v5-c-masthead--m-display-inline__content--Order);
329
- --pf-v5-c-masthead__content--PaddingTop: var(--pf-v5-c-masthead--m-display-inline__content--PaddingTop);
330
- --pf-v5-c-masthead__content--PaddingBottom: var(--pf-v5-c-masthead--m-display-inline__content--PaddingBottom);
331
- --pf-v5-c-masthead__content--MarginLeft: var(--pf-v5-c-masthead--m-display-inline__content--MarginLeft);
332
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
333
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
334
185
  }
335
186
  .pf-v5-c-masthead.pf-m-inset-none {
336
- --pf-v5-c-masthead--inset: 0;
187
+ padding-inline-start: 0;
188
+ padding-inline-end: 0;
337
189
  }
338
190
  .pf-v5-c-masthead.pf-m-inset-sm {
339
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--sm);
191
+ padding-inline-start: var(--pf-v5-global--spacer--sm);
192
+ padding-inline-end: var(--pf-v5-global--spacer--sm);
340
193
  }
341
194
  .pf-v5-c-masthead.pf-m-inset-md {
342
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--md);
195
+ padding-inline-start: var(--pf-v5-global--spacer--md);
196
+ padding-inline-end: var(--pf-v5-global--spacer--md);
343
197
  }
344
198
  .pf-v5-c-masthead.pf-m-inset-lg {
345
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--lg);
199
+ padding-inline-start: var(--pf-v5-global--spacer--lg);
200
+ padding-inline-end: var(--pf-v5-global--spacer--lg);
346
201
  }
347
202
  .pf-v5-c-masthead.pf-m-inset-xl {
348
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--xl);
203
+ padding-inline-start: var(--pf-v5-global--spacer--xl);
204
+ padding-inline-end: var(--pf-v5-global--spacer--xl);
349
205
  }
350
206
  .pf-v5-c-masthead.pf-m-inset-2xl {
351
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--2xl);
207
+ padding-inline-start: var(--pf-v5-global--spacer--2xl);
208
+ padding-inline-end: var(--pf-v5-global--spacer--2xl);
352
209
  }
353
210
  @media (min-width: 576px) {
354
211
  .pf-v5-c-masthead.pf-m-display-stack-on-sm {
355
212
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-stack--GridTemplateColumns);
356
213
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-stack__main--GridColumn);
357
- --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-stack__main--MinHeight);
358
214
  --pf-v5-c-masthead__main--Order: var(--pf-v5-c-masthead--m-display-stack__main--Order);
359
- --pf-v5-c-masthead__main--FlexBasis: var(--pf-v5-c-masthead--m-display-stack__main--FlexBasis);
360
- --pf-v5-c-masthead__main--PaddingTop: var(--pf-v5-c-masthead--m-display-stack__main--PaddingTop);
361
- --pf-v5-c-masthead__main--PaddingBottom: var(--pf-v5-c-masthead--m-display-stack__main--PaddingBottom);
362
- --pf-v5-c-masthead__main--MarginRight: var(--pf-v5-c-masthead--m-display-stack__main--MarginRight);
363
- --pf-v5-c-masthead__main--before--BorderBottom: var(--pf-v5-c-masthead--m-display-stack__main--before--BorderBottom);
215
+ --pf-v5-c-masthead__main--PaddingBlockEnd: var(--pf-v5-c-masthead--m-display-stack__main--PaddingBlockEnd);
216
+ --pf-v5-c-masthead__main--BorderBlockEnd: var(--pf-v5-c-masthead--m-display-stack__main--BorderBlockEnd);
364
217
  --pf-v5-c-masthead__content--GridColumn: var(--pf-v5-c-masthead--m-display-stack__content--GridColumn);
365
- --pf-v5-c-masthead__content--MinHeight: var(--pf-v5-c-masthead--m-display-stack__content--MinHeight);
366
218
  --pf-v5-c-masthead__content--Order: var(--pf-v5-c-masthead--m-display-stack__content--Order);
367
- --pf-v5-c-masthead__content--PaddingTop: var(--pf-v5-c-masthead--m-display-stack__content--PaddingTop);
368
- --pf-v5-c-masthead__content--PaddingBottom: var(--pf-v5-c-masthead--m-display-stack__content--PaddingBottom);
369
- --pf-v5-c-masthead__content--MarginLeft: var(--pf-v5-c-masthead--m-display-stack__content--MarginLeft);
370
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
371
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
372
219
  }
373
220
  .pf-v5-c-masthead.pf-m-display-inline-on-sm {
374
221
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-inline--GridTemplateColumns);
375
222
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-inline__main--GridColumn);
376
- --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-inline__main--MinHeight);
377
223
  --pf-v5-c-masthead__main--Order: var(--pf-v5-c-masthead--m-display-inline__main--Order);
378
- --pf-v5-c-masthead__main--FlexBasis: var(--pf-v5-c-masthead--m-display-inline__main--FlexBasis);
379
- --pf-v5-c-masthead__main--PaddingTop: var(--pf-v5-c-masthead--m-display-inline__main--PaddingTop);
380
- --pf-v5-c-masthead__main--PaddingBottom: var(--pf-v5-c-masthead--m-display-inline__main--PaddingBottom);
381
- --pf-v5-c-masthead__main--MarginRight: var(--pf-v5-c-masthead--m-display-inline__main--MarginRight);
382
- --pf-v5-c-masthead__main--before--BorderBottom: var(--pf-v5-c-masthead--m-display-inline__main--BorderBottom);
224
+ --pf-v5-c-masthead__main--PaddingBlockEnd: var(--pf-v5-c-masthead--m-display-inline__main--PaddingBlockEnd);
225
+ --pf-v5-c-masthead__main--BorderBlockEnd: var(--pf-v5-c-masthead--m-display-inline__main--BorderBlockEnd);
383
226
  --pf-v5-c-masthead__content--GridColumn: var(--pf-v5-c-masthead--m-display-inline__content--GridColumn);
384
- --pf-v5-c-masthead__content--MinHeight: var(--pf-v5-c-masthead--m-display-inline__content--MinHeight);
385
227
  --pf-v5-c-masthead__content--Order: var(--pf-v5-c-masthead--m-display-inline__content--Order);
386
- --pf-v5-c-masthead__content--PaddingTop: var(--pf-v5-c-masthead--m-display-inline__content--PaddingTop);
387
- --pf-v5-c-masthead__content--PaddingBottom: var(--pf-v5-c-masthead--m-display-inline__content--PaddingBottom);
388
- --pf-v5-c-masthead__content--MarginLeft: var(--pf-v5-c-masthead--m-display-inline__content--MarginLeft);
389
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
390
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
391
228
  }
392
229
  }
393
- @media (min-width: 576px) {
394
- .pf-v5-c-masthead.pf-m-inset-none-on-sm {
395
- --pf-v5-c-masthead--inset: 0;
396
- }
397
- .pf-v5-c-masthead.pf-m-inset-sm-on-sm {
398
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--sm);
399
- }
400
- .pf-v5-c-masthead.pf-m-inset-md-on-sm {
401
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--md);
402
- }
403
- .pf-v5-c-masthead.pf-m-inset-lg-on-sm {
404
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--lg);
405
- }
406
- .pf-v5-c-masthead.pf-m-inset-xl-on-sm {
407
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--xl);
408
- }
409
- .pf-v5-c-masthead.pf-m-inset-2xl-on-sm {
410
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--2xl);
411
- }
230
+ .pf-v5-c-masthead.pf-m-inset-none {
231
+ padding-inline-start: 0;
232
+ padding-inline-end: 0;
233
+ }
234
+ .pf-v5-c-masthead.pf-m-inset-sm {
235
+ padding-inline-start: var(--pf-v5-global--spacer--sm);
236
+ padding-inline-end: var(--pf-v5-global--spacer--sm);
237
+ }
238
+ .pf-v5-c-masthead.pf-m-inset-md {
239
+ padding-inline-start: var(--pf-v5-global--spacer--md);
240
+ padding-inline-end: var(--pf-v5-global--spacer--md);
241
+ }
242
+ .pf-v5-c-masthead.pf-m-inset-lg {
243
+ padding-inline-start: var(--pf-v5-global--spacer--lg);
244
+ padding-inline-end: var(--pf-v5-global--spacer--lg);
245
+ }
246
+ .pf-v5-c-masthead.pf-m-inset-xl {
247
+ padding-inline-start: var(--pf-v5-global--spacer--xl);
248
+ padding-inline-end: var(--pf-v5-global--spacer--xl);
249
+ }
250
+ .pf-v5-c-masthead.pf-m-inset-2xl {
251
+ padding-inline-start: var(--pf-v5-global--spacer--2xl);
252
+ padding-inline-end: var(--pf-v5-global--spacer--2xl);
412
253
  }
413
254
  @media (min-width: 768px) {
414
255
  .pf-v5-c-masthead.pf-m-display-stack-on-md {
415
256
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-stack--GridTemplateColumns);
416
257
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-stack__main--GridColumn);
417
- --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-stack__main--MinHeight);
418
258
  --pf-v5-c-masthead__main--Order: var(--pf-v5-c-masthead--m-display-stack__main--Order);
419
- --pf-v5-c-masthead__main--FlexBasis: var(--pf-v5-c-masthead--m-display-stack__main--FlexBasis);
420
- --pf-v5-c-masthead__main--PaddingTop: var(--pf-v5-c-masthead--m-display-stack__main--PaddingTop);
421
- --pf-v5-c-masthead__main--PaddingBottom: var(--pf-v5-c-masthead--m-display-stack__main--PaddingBottom);
422
- --pf-v5-c-masthead__main--MarginRight: var(--pf-v5-c-masthead--m-display-stack__main--MarginRight);
423
- --pf-v5-c-masthead__main--before--BorderBottom: var(--pf-v5-c-masthead--m-display-stack__main--before--BorderBottom);
259
+ --pf-v5-c-masthead__main--PaddingBlockEnd: var(--pf-v5-c-masthead--m-display-stack__main--PaddingBlockEnd);
260
+ --pf-v5-c-masthead__main--BorderBlockEnd: var(--pf-v5-c-masthead--m-display-stack__main--BorderBlockEnd);
424
261
  --pf-v5-c-masthead__content--GridColumn: var(--pf-v5-c-masthead--m-display-stack__content--GridColumn);
425
- --pf-v5-c-masthead__content--MinHeight: var(--pf-v5-c-masthead--m-display-stack__content--MinHeight);
426
262
  --pf-v5-c-masthead__content--Order: var(--pf-v5-c-masthead--m-display-stack__content--Order);
427
- --pf-v5-c-masthead__content--PaddingTop: var(--pf-v5-c-masthead--m-display-stack__content--PaddingTop);
428
- --pf-v5-c-masthead__content--PaddingBottom: var(--pf-v5-c-masthead--m-display-stack__content--PaddingBottom);
429
- --pf-v5-c-masthead__content--MarginLeft: var(--pf-v5-c-masthead--m-display-stack__content--MarginLeft);
430
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
431
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
432
263
  }
433
264
  .pf-v5-c-masthead.pf-m-display-inline-on-md {
434
265
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-inline--GridTemplateColumns);
435
266
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-inline__main--GridColumn);
436
- --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-inline__main--MinHeight);
437
267
  --pf-v5-c-masthead__main--Order: var(--pf-v5-c-masthead--m-display-inline__main--Order);
438
- --pf-v5-c-masthead__main--FlexBasis: var(--pf-v5-c-masthead--m-display-inline__main--FlexBasis);
439
- --pf-v5-c-masthead__main--PaddingTop: var(--pf-v5-c-masthead--m-display-inline__main--PaddingTop);
440
- --pf-v5-c-masthead__main--PaddingBottom: var(--pf-v5-c-masthead--m-display-inline__main--PaddingBottom);
441
- --pf-v5-c-masthead__main--MarginRight: var(--pf-v5-c-masthead--m-display-inline__main--MarginRight);
442
- --pf-v5-c-masthead__main--before--BorderBottom: var(--pf-v5-c-masthead--m-display-inline__main--BorderBottom);
268
+ --pf-v5-c-masthead__main--PaddingBlockEnd: var(--pf-v5-c-masthead--m-display-inline__main--PaddingBlockEnd);
269
+ --pf-v5-c-masthead__main--BorderBlockEnd: var(--pf-v5-c-masthead--m-display-inline__main--BorderBlockEnd);
443
270
  --pf-v5-c-masthead__content--GridColumn: var(--pf-v5-c-masthead--m-display-inline__content--GridColumn);
444
- --pf-v5-c-masthead__content--MinHeight: var(--pf-v5-c-masthead--m-display-inline__content--MinHeight);
445
271
  --pf-v5-c-masthead__content--Order: var(--pf-v5-c-masthead--m-display-inline__content--Order);
446
- --pf-v5-c-masthead__content--PaddingTop: var(--pf-v5-c-masthead--m-display-inline__content--PaddingTop);
447
- --pf-v5-c-masthead__content--PaddingBottom: var(--pf-v5-c-masthead--m-display-inline__content--PaddingBottom);
448
- --pf-v5-c-masthead__content--MarginLeft: var(--pf-v5-c-masthead--m-display-inline__content--MarginLeft);
449
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
450
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
451
272
  }
452
273
  }
453
- @media (min-width: 768px) {
454
- .pf-v5-c-masthead.pf-m-inset-none-on-md {
455
- --pf-v5-c-masthead--inset: 0;
456
- }
457
- .pf-v5-c-masthead.pf-m-inset-sm-on-md {
458
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--sm);
459
- }
460
- .pf-v5-c-masthead.pf-m-inset-md-on-md {
461
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--md);
462
- }
463
- .pf-v5-c-masthead.pf-m-inset-lg-on-md {
464
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--lg);
465
- }
466
- .pf-v5-c-masthead.pf-m-inset-xl-on-md {
467
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--xl);
468
- }
469
- .pf-v5-c-masthead.pf-m-inset-2xl-on-md {
470
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--2xl);
471
- }
274
+ .pf-v5-c-masthead.pf-m-inset-none {
275
+ padding-inline-start: 0;
276
+ padding-inline-end: 0;
277
+ }
278
+ .pf-v5-c-masthead.pf-m-inset-sm {
279
+ padding-inline-start: var(--pf-v5-global--spacer--sm);
280
+ padding-inline-end: var(--pf-v5-global--spacer--sm);
281
+ }
282
+ .pf-v5-c-masthead.pf-m-inset-md {
283
+ padding-inline-start: var(--pf-v5-global--spacer--md);
284
+ padding-inline-end: var(--pf-v5-global--spacer--md);
285
+ }
286
+ .pf-v5-c-masthead.pf-m-inset-lg {
287
+ padding-inline-start: var(--pf-v5-global--spacer--lg);
288
+ padding-inline-end: var(--pf-v5-global--spacer--lg);
289
+ }
290
+ .pf-v5-c-masthead.pf-m-inset-xl {
291
+ padding-inline-start: var(--pf-v5-global--spacer--xl);
292
+ padding-inline-end: var(--pf-v5-global--spacer--xl);
293
+ }
294
+ .pf-v5-c-masthead.pf-m-inset-2xl {
295
+ padding-inline-start: var(--pf-v5-global--spacer--2xl);
296
+ padding-inline-end: var(--pf-v5-global--spacer--2xl);
472
297
  }
473
298
  @media (min-width: 992px) {
474
299
  .pf-v5-c-masthead.pf-m-display-stack-on-lg {
475
300
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-stack--GridTemplateColumns);
476
301
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-stack__main--GridColumn);
477
- --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-stack__main--MinHeight);
478
302
  --pf-v5-c-masthead__main--Order: var(--pf-v5-c-masthead--m-display-stack__main--Order);
479
- --pf-v5-c-masthead__main--FlexBasis: var(--pf-v5-c-masthead--m-display-stack__main--FlexBasis);
480
- --pf-v5-c-masthead__main--PaddingTop: var(--pf-v5-c-masthead--m-display-stack__main--PaddingTop);
481
- --pf-v5-c-masthead__main--PaddingBottom: var(--pf-v5-c-masthead--m-display-stack__main--PaddingBottom);
482
- --pf-v5-c-masthead__main--MarginRight: var(--pf-v5-c-masthead--m-display-stack__main--MarginRight);
483
- --pf-v5-c-masthead__main--before--BorderBottom: var(--pf-v5-c-masthead--m-display-stack__main--before--BorderBottom);
303
+ --pf-v5-c-masthead__main--PaddingBlockEnd: var(--pf-v5-c-masthead--m-display-stack__main--PaddingBlockEnd);
304
+ --pf-v5-c-masthead__main--BorderBlockEnd: var(--pf-v5-c-masthead--m-display-stack__main--BorderBlockEnd);
484
305
  --pf-v5-c-masthead__content--GridColumn: var(--pf-v5-c-masthead--m-display-stack__content--GridColumn);
485
- --pf-v5-c-masthead__content--MinHeight: var(--pf-v5-c-masthead--m-display-stack__content--MinHeight);
486
306
  --pf-v5-c-masthead__content--Order: var(--pf-v5-c-masthead--m-display-stack__content--Order);
487
- --pf-v5-c-masthead__content--PaddingTop: var(--pf-v5-c-masthead--m-display-stack__content--PaddingTop);
488
- --pf-v5-c-masthead__content--PaddingBottom: var(--pf-v5-c-masthead--m-display-stack__content--PaddingBottom);
489
- --pf-v5-c-masthead__content--MarginLeft: var(--pf-v5-c-masthead--m-display-stack__content--MarginLeft);
490
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
491
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
492
307
  }
493
308
  .pf-v5-c-masthead.pf-m-display-inline-on-lg {
494
309
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-inline--GridTemplateColumns);
495
310
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-inline__main--GridColumn);
496
- --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-inline__main--MinHeight);
497
311
  --pf-v5-c-masthead__main--Order: var(--pf-v5-c-masthead--m-display-inline__main--Order);
498
- --pf-v5-c-masthead__main--FlexBasis: var(--pf-v5-c-masthead--m-display-inline__main--FlexBasis);
499
- --pf-v5-c-masthead__main--PaddingTop: var(--pf-v5-c-masthead--m-display-inline__main--PaddingTop);
500
- --pf-v5-c-masthead__main--PaddingBottom: var(--pf-v5-c-masthead--m-display-inline__main--PaddingBottom);
501
- --pf-v5-c-masthead__main--MarginRight: var(--pf-v5-c-masthead--m-display-inline__main--MarginRight);
502
- --pf-v5-c-masthead__main--before--BorderBottom: var(--pf-v5-c-masthead--m-display-inline__main--BorderBottom);
312
+ --pf-v5-c-masthead__main--PaddingBlockEnd: var(--pf-v5-c-masthead--m-display-inline__main--PaddingBlockEnd);
313
+ --pf-v5-c-masthead__main--BorderBlockEnd: var(--pf-v5-c-masthead--m-display-inline__main--BorderBlockEnd);
503
314
  --pf-v5-c-masthead__content--GridColumn: var(--pf-v5-c-masthead--m-display-inline__content--GridColumn);
504
- --pf-v5-c-masthead__content--MinHeight: var(--pf-v5-c-masthead--m-display-inline__content--MinHeight);
505
315
  --pf-v5-c-masthead__content--Order: var(--pf-v5-c-masthead--m-display-inline__content--Order);
506
- --pf-v5-c-masthead__content--PaddingTop: var(--pf-v5-c-masthead--m-display-inline__content--PaddingTop);
507
- --pf-v5-c-masthead__content--PaddingBottom: var(--pf-v5-c-masthead--m-display-inline__content--PaddingBottom);
508
- --pf-v5-c-masthead__content--MarginLeft: var(--pf-v5-c-masthead--m-display-inline__content--MarginLeft);
509
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
510
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
511
316
  }
512
317
  }
513
- @media (min-width: 992px) {
514
- .pf-v5-c-masthead.pf-m-inset-none-on-lg {
515
- --pf-v5-c-masthead--inset: 0;
516
- }
517
- .pf-v5-c-masthead.pf-m-inset-sm-on-lg {
518
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--sm);
519
- }
520
- .pf-v5-c-masthead.pf-m-inset-md-on-lg {
521
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--md);
522
- }
523
- .pf-v5-c-masthead.pf-m-inset-lg-on-lg {
524
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--lg);
525
- }
526
- .pf-v5-c-masthead.pf-m-inset-xl-on-lg {
527
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--xl);
528
- }
529
- .pf-v5-c-masthead.pf-m-inset-2xl-on-lg {
530
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--2xl);
531
- }
318
+ .pf-v5-c-masthead.pf-m-inset-none {
319
+ padding-inline-start: 0;
320
+ padding-inline-end: 0;
321
+ }
322
+ .pf-v5-c-masthead.pf-m-inset-sm {
323
+ padding-inline-start: var(--pf-v5-global--spacer--sm);
324
+ padding-inline-end: var(--pf-v5-global--spacer--sm);
325
+ }
326
+ .pf-v5-c-masthead.pf-m-inset-md {
327
+ padding-inline-start: var(--pf-v5-global--spacer--md);
328
+ padding-inline-end: var(--pf-v5-global--spacer--md);
329
+ }
330
+ .pf-v5-c-masthead.pf-m-inset-lg {
331
+ padding-inline-start: var(--pf-v5-global--spacer--lg);
332
+ padding-inline-end: var(--pf-v5-global--spacer--lg);
333
+ }
334
+ .pf-v5-c-masthead.pf-m-inset-xl {
335
+ padding-inline-start: var(--pf-v5-global--spacer--xl);
336
+ padding-inline-end: var(--pf-v5-global--spacer--xl);
337
+ }
338
+ .pf-v5-c-masthead.pf-m-inset-2xl {
339
+ padding-inline-start: var(--pf-v5-global--spacer--2xl);
340
+ padding-inline-end: var(--pf-v5-global--spacer--2xl);
532
341
  }
533
342
  @media (min-width: 1200px) {
534
343
  .pf-v5-c-masthead.pf-m-display-stack-on-xl {
535
344
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-stack--GridTemplateColumns);
536
345
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-stack__main--GridColumn);
537
- --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-stack__main--MinHeight);
538
346
  --pf-v5-c-masthead__main--Order: var(--pf-v5-c-masthead--m-display-stack__main--Order);
539
- --pf-v5-c-masthead__main--FlexBasis: var(--pf-v5-c-masthead--m-display-stack__main--FlexBasis);
540
- --pf-v5-c-masthead__main--PaddingTop: var(--pf-v5-c-masthead--m-display-stack__main--PaddingTop);
541
- --pf-v5-c-masthead__main--PaddingBottom: var(--pf-v5-c-masthead--m-display-stack__main--PaddingBottom);
542
- --pf-v5-c-masthead__main--MarginRight: var(--pf-v5-c-masthead--m-display-stack__main--MarginRight);
543
- --pf-v5-c-masthead__main--before--BorderBottom: var(--pf-v5-c-masthead--m-display-stack__main--before--BorderBottom);
347
+ --pf-v5-c-masthead__main--PaddingBlockEnd: var(--pf-v5-c-masthead--m-display-stack__main--PaddingBlockEnd);
348
+ --pf-v5-c-masthead__main--BorderBlockEnd: var(--pf-v5-c-masthead--m-display-stack__main--BorderBlockEnd);
544
349
  --pf-v5-c-masthead__content--GridColumn: var(--pf-v5-c-masthead--m-display-stack__content--GridColumn);
545
- --pf-v5-c-masthead__content--MinHeight: var(--pf-v5-c-masthead--m-display-stack__content--MinHeight);
546
350
  --pf-v5-c-masthead__content--Order: var(--pf-v5-c-masthead--m-display-stack__content--Order);
547
- --pf-v5-c-masthead__content--PaddingTop: var(--pf-v5-c-masthead--m-display-stack__content--PaddingTop);
548
- --pf-v5-c-masthead__content--PaddingBottom: var(--pf-v5-c-masthead--m-display-stack__content--PaddingBottom);
549
- --pf-v5-c-masthead__content--MarginLeft: var(--pf-v5-c-masthead--m-display-stack__content--MarginLeft);
550
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
551
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
552
351
  }
553
352
  .pf-v5-c-masthead.pf-m-display-inline-on-xl {
554
353
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-inline--GridTemplateColumns);
555
354
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-inline__main--GridColumn);
556
- --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-inline__main--MinHeight);
557
355
  --pf-v5-c-masthead__main--Order: var(--pf-v5-c-masthead--m-display-inline__main--Order);
558
- --pf-v5-c-masthead__main--FlexBasis: var(--pf-v5-c-masthead--m-display-inline__main--FlexBasis);
559
- --pf-v5-c-masthead__main--PaddingTop: var(--pf-v5-c-masthead--m-display-inline__main--PaddingTop);
560
- --pf-v5-c-masthead__main--PaddingBottom: var(--pf-v5-c-masthead--m-display-inline__main--PaddingBottom);
561
- --pf-v5-c-masthead__main--MarginRight: var(--pf-v5-c-masthead--m-display-inline__main--MarginRight);
562
- --pf-v5-c-masthead__main--before--BorderBottom: var(--pf-v5-c-masthead--m-display-inline__main--BorderBottom);
356
+ --pf-v5-c-masthead__main--PaddingBlockEnd: var(--pf-v5-c-masthead--m-display-inline__main--PaddingBlockEnd);
357
+ --pf-v5-c-masthead__main--BorderBlockEnd: var(--pf-v5-c-masthead--m-display-inline__main--BorderBlockEnd);
563
358
  --pf-v5-c-masthead__content--GridColumn: var(--pf-v5-c-masthead--m-display-inline__content--GridColumn);
564
- --pf-v5-c-masthead__content--MinHeight: var(--pf-v5-c-masthead--m-display-inline__content--MinHeight);
565
359
  --pf-v5-c-masthead__content--Order: var(--pf-v5-c-masthead--m-display-inline__content--Order);
566
- --pf-v5-c-masthead__content--PaddingTop: var(--pf-v5-c-masthead--m-display-inline__content--PaddingTop);
567
- --pf-v5-c-masthead__content--PaddingBottom: var(--pf-v5-c-masthead--m-display-inline__content--PaddingBottom);
568
- --pf-v5-c-masthead__content--MarginLeft: var(--pf-v5-c-masthead--m-display-inline__content--MarginLeft);
569
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
570
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
571
360
  }
572
361
  }
573
- @media (min-width: 1200px) {
574
- .pf-v5-c-masthead.pf-m-inset-none-on-xl {
575
- --pf-v5-c-masthead--inset: 0;
576
- }
577
- .pf-v5-c-masthead.pf-m-inset-sm-on-xl {
578
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--sm);
579
- }
580
- .pf-v5-c-masthead.pf-m-inset-md-on-xl {
581
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--md);
582
- }
583
- .pf-v5-c-masthead.pf-m-inset-lg-on-xl {
584
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--lg);
585
- }
586
- .pf-v5-c-masthead.pf-m-inset-xl-on-xl {
587
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--xl);
588
- }
589
- .pf-v5-c-masthead.pf-m-inset-2xl-on-xl {
590
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--2xl);
591
- }
362
+ .pf-v5-c-masthead.pf-m-inset-none {
363
+ padding-inline-start: 0;
364
+ padding-inline-end: 0;
365
+ }
366
+ .pf-v5-c-masthead.pf-m-inset-sm {
367
+ padding-inline-start: var(--pf-v5-global--spacer--sm);
368
+ padding-inline-end: var(--pf-v5-global--spacer--sm);
369
+ }
370
+ .pf-v5-c-masthead.pf-m-inset-md {
371
+ padding-inline-start: var(--pf-v5-global--spacer--md);
372
+ padding-inline-end: var(--pf-v5-global--spacer--md);
373
+ }
374
+ .pf-v5-c-masthead.pf-m-inset-lg {
375
+ padding-inline-start: var(--pf-v5-global--spacer--lg);
376
+ padding-inline-end: var(--pf-v5-global--spacer--lg);
377
+ }
378
+ .pf-v5-c-masthead.pf-m-inset-xl {
379
+ padding-inline-start: var(--pf-v5-global--spacer--xl);
380
+ padding-inline-end: var(--pf-v5-global--spacer--xl);
381
+ }
382
+ .pf-v5-c-masthead.pf-m-inset-2xl {
383
+ padding-inline-start: var(--pf-v5-global--spacer--2xl);
384
+ padding-inline-end: var(--pf-v5-global--spacer--2xl);
592
385
  }
593
386
  @media (min-width: 1450px) {
594
387
  .pf-v5-c-masthead.pf-m-display-stack-on-2xl {
595
388
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-stack--GridTemplateColumns);
596
389
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-stack__main--GridColumn);
597
- --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-stack__main--MinHeight);
598
390
  --pf-v5-c-masthead__main--Order: var(--pf-v5-c-masthead--m-display-stack__main--Order);
599
- --pf-v5-c-masthead__main--FlexBasis: var(--pf-v5-c-masthead--m-display-stack__main--FlexBasis);
600
- --pf-v5-c-masthead__main--PaddingTop: var(--pf-v5-c-masthead--m-display-stack__main--PaddingTop);
601
- --pf-v5-c-masthead__main--PaddingBottom: var(--pf-v5-c-masthead--m-display-stack__main--PaddingBottom);
602
- --pf-v5-c-masthead__main--MarginRight: var(--pf-v5-c-masthead--m-display-stack__main--MarginRight);
603
- --pf-v5-c-masthead__main--before--BorderBottom: var(--pf-v5-c-masthead--m-display-stack__main--before--BorderBottom);
391
+ --pf-v5-c-masthead__main--PaddingBlockEnd: var(--pf-v5-c-masthead--m-display-stack__main--PaddingBlockEnd);
392
+ --pf-v5-c-masthead__main--BorderBlockEnd: var(--pf-v5-c-masthead--m-display-stack__main--BorderBlockEnd);
604
393
  --pf-v5-c-masthead__content--GridColumn: var(--pf-v5-c-masthead--m-display-stack__content--GridColumn);
605
- --pf-v5-c-masthead__content--MinHeight: var(--pf-v5-c-masthead--m-display-stack__content--MinHeight);
606
394
  --pf-v5-c-masthead__content--Order: var(--pf-v5-c-masthead--m-display-stack__content--Order);
607
- --pf-v5-c-masthead__content--PaddingTop: var(--pf-v5-c-masthead--m-display-stack__content--PaddingTop);
608
- --pf-v5-c-masthead__content--PaddingBottom: var(--pf-v5-c-masthead--m-display-stack__content--PaddingBottom);
609
- --pf-v5-c-masthead__content--MarginLeft: var(--pf-v5-c-masthead--m-display-stack__content--MarginLeft);
610
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
611
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
612
395
  }
613
396
  .pf-v5-c-masthead.pf-m-display-inline-on-2xl {
614
397
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-inline--GridTemplateColumns);
615
398
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-inline__main--GridColumn);
616
- --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-inline__main--MinHeight);
617
399
  --pf-v5-c-masthead__main--Order: var(--pf-v5-c-masthead--m-display-inline__main--Order);
618
- --pf-v5-c-masthead__main--FlexBasis: var(--pf-v5-c-masthead--m-display-inline__main--FlexBasis);
619
- --pf-v5-c-masthead__main--PaddingTop: var(--pf-v5-c-masthead--m-display-inline__main--PaddingTop);
620
- --pf-v5-c-masthead__main--PaddingBottom: var(--pf-v5-c-masthead--m-display-inline__main--PaddingBottom);
621
- --pf-v5-c-masthead__main--MarginRight: var(--pf-v5-c-masthead--m-display-inline__main--MarginRight);
622
- --pf-v5-c-masthead__main--before--BorderBottom: var(--pf-v5-c-masthead--m-display-inline__main--BorderBottom);
400
+ --pf-v5-c-masthead__main--PaddingBlockEnd: var(--pf-v5-c-masthead--m-display-inline__main--PaddingBlockEnd);
401
+ --pf-v5-c-masthead__main--BorderBlockEnd: var(--pf-v5-c-masthead--m-display-inline__main--BorderBlockEnd);
623
402
  --pf-v5-c-masthead__content--GridColumn: var(--pf-v5-c-masthead--m-display-inline__content--GridColumn);
624
- --pf-v5-c-masthead__content--MinHeight: var(--pf-v5-c-masthead--m-display-inline__content--MinHeight);
625
403
  --pf-v5-c-masthead__content--Order: var(--pf-v5-c-masthead--m-display-inline__content--Order);
626
- --pf-v5-c-masthead__content--PaddingTop: var(--pf-v5-c-masthead--m-display-inline__content--PaddingTop);
627
- --pf-v5-c-masthead__content--PaddingBottom: var(--pf-v5-c-masthead--m-display-inline__content--PaddingBottom);
628
- --pf-v5-c-masthead__content--MarginLeft: var(--pf-v5-c-masthead--m-display-inline__content--MarginLeft);
629
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
630
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
631
404
  }
632
405
  }
633
- @media (min-width: 1450px) {
634
- .pf-v5-c-masthead.pf-m-inset-none-on-2xl {
635
- --pf-v5-c-masthead--inset: 0;
636
- }
637
- .pf-v5-c-masthead.pf-m-inset-sm-on-2xl {
638
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--sm);
639
- }
640
- .pf-v5-c-masthead.pf-m-inset-md-on-2xl {
641
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--md);
642
- }
643
- .pf-v5-c-masthead.pf-m-inset-lg-on-2xl {
644
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--lg);
645
- }
646
- .pf-v5-c-masthead.pf-m-inset-xl-on-2xl {
647
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--xl);
648
- }
649
- .pf-v5-c-masthead.pf-m-inset-2xl-on-2xl {
650
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--2xl);
651
- }
406
+ .pf-v5-c-masthead.pf-m-inset-none {
407
+ padding-inline-start: 0;
408
+ padding-inline-end: 0;
652
409
  }
653
-
654
- :where(.pf-v5-theme-dark) .pf-v5-c-masthead .pf-v5-c-button {
655
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
410
+ .pf-v5-c-masthead.pf-m-inset-sm {
411
+ padding-inline-start: var(--pf-v5-global--spacer--sm);
412
+ padding-inline-end: var(--pf-v5-global--spacer--sm);
656
413
  }
657
-
658
- :where(.pf-v5-theme-dark) .pf-v5-c-masthead {
659
- --pf-v5-c-masthead--BackgroundColor: var(--pf-v5-global--palette--black-1000);
660
- --pf-v5-c-masthead--item-border-color--base: var(--pf-v5-global--BorderColor--100);
661
- color: var(--pf-v5-global--Color--100);
414
+ .pf-v5-c-masthead.pf-m-inset-md {
415
+ padding-inline-start: var(--pf-v5-global--spacer--md);
416
+ padding-inline-end: var(--pf-v5-global--spacer--md);
662
417
  }
663
- :where(.pf-v5-theme-dark) .pf-v5-c-masthead .pf-v5-c-toolbar {
664
- --pf-v5-c-toolbar--BackgroundColor: var(--pf-v5-global--palette--black-1000);
418
+ .pf-v5-c-masthead.pf-m-inset-lg {
419
+ padding-inline-start: var(--pf-v5-global--spacer--lg);
420
+ padding-inline-end: var(--pf-v5-global--spacer--lg);
421
+ }
422
+ .pf-v5-c-masthead.pf-m-inset-xl {
423
+ padding-inline-start: var(--pf-v5-global--spacer--xl);
424
+ padding-inline-end: var(--pf-v5-global--spacer--xl);
425
+ }
426
+ .pf-v5-c-masthead.pf-m-inset-2xl {
427
+ padding-inline-start: var(--pf-v5-global--spacer--2xl);
428
+ padding-inline-end: var(--pf-v5-global--spacer--2xl);
665
429
  }