@patternfly/react-core 4.242.2 → 4.242.3

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.
@@ -1851,70 +1851,6 @@ textarea.pf-c-form-control {
1851
1851
  color: var(--pf-global--palette--black-900);
1852
1852
  }
1853
1853
 
1854
- .pf-c-brand {
1855
- --pf-c-brand--Width: auto;
1856
- --pf-c-brand--Height: auto;
1857
- width: var(--pf-c-brand--Width--base);
1858
- height: var(--pf-c-brand--Height--base);
1859
- --pf-c-brand--Width--base: var(--pf-c-brand--Width);
1860
- --pf-c-brand--Height--base: var(--pf-c-brand--Height);
1861
- }
1862
-
1863
- @media (min-width: 576px) {
1864
- .pf-c-brand {
1865
- --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width));
1866
- }
1867
- }
1868
- @media (min-width: 768px) {
1869
- .pf-c-brand {
1870
- --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width)));
1871
- }
1872
- }
1873
- @media (min-width: 992px) {
1874
- .pf-c-brand {
1875
- --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-lg, var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width))));
1876
- }
1877
- }
1878
- @media (min-width: 1200px) {
1879
- .pf-c-brand {
1880
- --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-xl, var(--pf-c-brand--Width-on-lg, var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width)))));
1881
- }
1882
- }
1883
- @media (min-width: 1450px) {
1884
- .pf-c-brand {
1885
- --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-2xl, var(--pf-c-brand--Width-on-xl, var(--pf-c-brand--Width-on-lg, var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width))))));
1886
- }
1887
- }
1888
- @media (min-width: 576px) {
1889
- .pf-c-brand {
1890
- --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height));
1891
- }
1892
- }
1893
- @media (min-width: 768px) {
1894
- .pf-c-brand {
1895
- --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height)));
1896
- }
1897
- }
1898
- @media (min-width: 992px) {
1899
- .pf-c-brand {
1900
- --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-lg, var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height))));
1901
- }
1902
- }
1903
- @media (min-width: 1200px) {
1904
- .pf-c-brand {
1905
- --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-xl, var(--pf-c-brand--Height-on-lg, var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height)))));
1906
- }
1907
- }
1908
- @media (min-width: 1450px) {
1909
- .pf-c-brand {
1910
- --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-2xl, var(--pf-c-brand--Height-on-xl, var(--pf-c-brand--Height-on-lg, var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height))))));
1911
- }
1912
- }
1913
- .pf-c-brand.pf-m-picture {
1914
- display: inline-flex;
1915
- max-width: 100%;
1916
- }
1917
-
1918
1854
  .pf-c-breadcrumb {
1919
1855
  --pf-c-breadcrumb__item--FontSize: var(--pf-global--FontSize--sm);
1920
1856
  --pf-c-breadcrumb__item--LineHeight: var(--pf-global--LineHeight--sm);
@@ -2022,6 +1958,70 @@ button.pf-c-breadcrumb__link {
2022
1958
  --pf-c-breadcrumb__item-divider--Color: var(--pf-global--BorderColor--100);
2023
1959
  }
2024
1960
 
1961
+ .pf-c-brand {
1962
+ --pf-c-brand--Width: auto;
1963
+ --pf-c-brand--Height: auto;
1964
+ width: var(--pf-c-brand--Width--base);
1965
+ height: var(--pf-c-brand--Height--base);
1966
+ --pf-c-brand--Width--base: var(--pf-c-brand--Width);
1967
+ --pf-c-brand--Height--base: var(--pf-c-brand--Height);
1968
+ }
1969
+
1970
+ @media (min-width: 576px) {
1971
+ .pf-c-brand {
1972
+ --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width));
1973
+ }
1974
+ }
1975
+ @media (min-width: 768px) {
1976
+ .pf-c-brand {
1977
+ --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width)));
1978
+ }
1979
+ }
1980
+ @media (min-width: 992px) {
1981
+ .pf-c-brand {
1982
+ --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-lg, var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width))));
1983
+ }
1984
+ }
1985
+ @media (min-width: 1200px) {
1986
+ .pf-c-brand {
1987
+ --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-xl, var(--pf-c-brand--Width-on-lg, var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width)))));
1988
+ }
1989
+ }
1990
+ @media (min-width: 1450px) {
1991
+ .pf-c-brand {
1992
+ --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-2xl, var(--pf-c-brand--Width-on-xl, var(--pf-c-brand--Width-on-lg, var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width))))));
1993
+ }
1994
+ }
1995
+ @media (min-width: 576px) {
1996
+ .pf-c-brand {
1997
+ --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height));
1998
+ }
1999
+ }
2000
+ @media (min-width: 768px) {
2001
+ .pf-c-brand {
2002
+ --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height)));
2003
+ }
2004
+ }
2005
+ @media (min-width: 992px) {
2006
+ .pf-c-brand {
2007
+ --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-lg, var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height))));
2008
+ }
2009
+ }
2010
+ @media (min-width: 1200px) {
2011
+ .pf-c-brand {
2012
+ --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-xl, var(--pf-c-brand--Height-on-lg, var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height)))));
2013
+ }
2014
+ }
2015
+ @media (min-width: 1450px) {
2016
+ .pf-c-brand {
2017
+ --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-2xl, var(--pf-c-brand--Height-on-xl, var(--pf-c-brand--Height-on-lg, var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height))))));
2018
+ }
2019
+ }
2020
+ .pf-c-brand.pf-m-picture {
2021
+ display: inline-flex;
2022
+ max-width: 100%;
2023
+ }
2024
+
2025
2025
  .pf-c-button {
2026
2026
  --pf-c-button--PaddingTop: var(--pf-global--spacer--form-element);
2027
2027
  --pf-c-button--PaddingRight: var(--pf-global--spacer--md);
@@ -11202,7 +11202,7 @@ ul.pf-c-list {
11202
11202
  color: var(--pf-global--Color--100);
11203
11203
  }
11204
11204
 
11205
- .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light {
11205
+ .pf-c-menu {
11206
11206
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
11207
11207
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
11208
11208
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
@@ -11212,794 +11212,37 @@ ul.pf-c-list {
11212
11212
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
11213
11213
  }
11214
11214
 
11215
- .pf-c-masthead .pf-c-button.pf-m-plain, .pf-c-masthead {
11216
- --pf-global--Color--100: var(--pf-global--Color--light-100);
11217
- --pf-global--Color--200: var(--pf-global--Color--light-200);
11218
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
11219
- --pf-global--primary-color--100: var(--pf-global--primary-color--light-100);
11220
- --pf-global--link--Color: var(--pf-global--link--Color--light);
11221
- --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
11222
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
11215
+ .pf-c-menu__group, .pf-c-menu__list-item, .pf-c-menu__list {
11216
+ --pf-hidden-visible--visible--Visibility: visible;
11217
+ --pf-hidden-visible--hidden--Display: none;
11218
+ --pf-hidden-visible--hidden--Visibility: hidden;
11219
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
11220
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
11221
+ display: var(--pf-hidden-visible--Display);
11222
+ visibility: var(--pf-hidden-visible--Visibility);
11223
11223
  }
11224
11224
 
11225
- .pf-c-masthead .pf-c-button.pf-m-plain .pf-c-card, .pf-c-masthead .pf-c-card {
11226
- --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
11225
+ .pf-m-hidden.pf-c-menu__group, .pf-m-hidden.pf-c-menu__list-item, .pf-m-hidden.pf-c-menu__list {
11226
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
11227
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
11227
11228
  }
11228
11229
 
11229
- .pf-c-masthead .pf-c-button.pf-m-plain .pf-c-button, .pf-c-masthead .pf-c-button {
11230
- --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
11231
- --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
11232
- --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
11233
- --pf-c-button--m-primary--active--Color: var(--pf-global--primary-color--dark-100);
11234
- --pf-c-button--m-primary--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
11235
- --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
11236
- --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
11237
- --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
11238
- --pf-c-button--m-secondary--Color: var(--pf-global--Color--light-100);
11239
- --pf-c-button--m-secondary--hover--Color: var(--pf-global--Color--light-100);
11240
- --pf-c-button--m-secondary--focus--Color: var(--pf-global--Color--light-100);
11241
- --pf-c-button--m-secondary--active--Color: var(--pf-global--Color--light-100);
11242
- --pf-c-button--m-secondary--BorderColor: var(--pf-global--Color--light-100);
11243
- --pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--Color--light-100);
11244
- --pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--Color--light-100);
11245
- --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
11230
+ @media screen and (min-width: 576px) {
11231
+ .pf-m-hidden-on-sm.pf-c-menu__group, .pf-m-hidden-on-sm.pf-c-menu__list-item, .pf-m-hidden-on-sm.pf-c-menu__list {
11232
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
11233
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
11234
+ }
11235
+
11236
+ .pf-m-visible-on-sm.pf-c-menu__group, .pf-m-visible-on-sm.pf-c-menu__list-item, .pf-m-visible-on-sm.pf-c-menu__list {
11237
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
11238
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
11239
+ }
11246
11240
  }
11247
-
11248
- .pf-c-masthead {
11249
- --pf-c-masthead--PaddingLeft: var(--pf-c-masthead--inset);
11250
- --pf-c-masthead--PaddingRight: var(--pf-c-masthead--inset);
11251
- --pf-c-masthead--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
11252
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
11253
- --pf-c-masthead--xl--inset: var(--pf-global--spacer--lg);
11254
- --pf-c-masthead--m-display-stack--GridTemplateColumns: max-content 1fr;
11255
- --pf-c-masthead--m-display-stack__main--GridColumn: -1 / 1;
11256
- --pf-c-masthead--m-display-stack__main--MinHeight: 4.375rem;
11257
- --pf-c-masthead--m-display-stack__main--Order: -1;
11258
- --pf-c-masthead--m-display-stack__main--FlexBasis: 100%;
11259
- --pf-c-masthead--m-display-stack__main--PaddingTop: var(--pf-global--spacer--sm);
11260
- --pf-c-masthead--m-display-stack__main--PaddingBottom: var(--pf-global--spacer--sm);
11261
- --pf-c-masthead--m-display-stack__main--MarginRight: 0;
11262
- --pf-c-masthead--m-display-stack__main--before--BorderBottom: var(--pf-c-masthead__main--before--BorderBottomWidth) solid var(--pf-c-masthead__main--before--BorderBottomColor);
11263
- --pf-c-masthead--m-display-stack__toggle--GridColumn: 1;
11264
- --pf-c-masthead--m-display-stack__content--GridColumn: 2;
11265
- --pf-c-masthead--m-display-stack__content--MinHeight: auto;
11266
- --pf-c-masthead--m-display-stack__content--Order: 1;
11267
- --pf-c-masthead--m-display-stack__content--PaddingTop: 0;
11268
- --pf-c-masthead--m-display-stack__content--PaddingBottom: 0;
11269
- --pf-c-masthead--m-display-stack__content--MarginLeft: 0;
11270
- --pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight: calc(var(--pf-c-masthead--inset) * -1);
11271
- --pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft: calc(var(--pf-c-masthead--inset) * -1);
11272
- --pf-c-masthead--m-display-inline--GridTemplateColumns: max-content max-content 1fr;
11273
- --pf-c-masthead--m-display-inline__main--GridColumn: 2;
11274
- --pf-c-masthead--m-display-inline__main--MinHeight: 4.375rem;
11275
- --pf-c-masthead--m-display-inline__main--Order: 0;
11276
- --pf-c-masthead--m-display-inline__main--FlexBasis: auto;
11277
- --pf-c-masthead--m-display-inline__main--PaddingTop: 0;
11278
- --pf-c-masthead--m-display-inline__main--PaddingBottom: 0;
11279
- --pf-c-masthead--m-display-inline__main--MarginRight: calc(var(--pf-global--spacer--lg) / 2);
11280
- --pf-c-masthead--m-display-inline__main--BorderBottom: 0;
11281
- --pf-c-masthead--m-display-inline__toggle--GridColumn: 1;
11282
- --pf-c-masthead--m-display-inline__content--GridColumn: 3;
11283
- --pf-c-masthead--m-display-inline__content--MinHeight: 4.375rem;
11284
- --pf-c-masthead--m-display-inline__content--Order: 0;
11285
- --pf-c-masthead--m-display-inline__content--PaddingTop: 0;
11286
- --pf-c-masthead--m-display-inline__content--PaddingBottom: 0;
11287
- --pf-c-masthead--m-display-inline__content--MarginLeft: calc(var(--pf-global--spacer--lg) / 2);
11288
- --pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight: 0;
11289
- --pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft: 0;
11290
- --pf-c-masthead__main--before--Right: calc(var(--pf-c-masthead--inset) * -1);
11291
- --pf-c-masthead__main--before--Left: calc(var(--pf-c-masthead--inset) * -1);
11292
- --pf-c-masthead__main--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
11293
- --pf-c-masthead__main--before--BorderBottomColor: var(--pf-global--palette--black-600);
11294
- --pf-c-masthead__toggle--MarginRight: var(--pf-global--spacer--sm);
11295
- --pf-c-masthead__toggle--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
11296
- --pf-c-masthead__toggle--c-button--FontSize: var(--pf-global--FontSize--2xl);
11297
- --pf-c-masthead--m-light--BackgroundColor: var(--pf-global--BackgroundColor--100);
11298
- --pf-c-masthead--m-light__main--BorderBottomColor: var(--pf-global--BorderColor--300);
11299
- --pf-c-masthead--m-light-200--BackgroundColor: var(--pf-global--BackgroundColor--200);
11300
- --pf-c-masthead--m-light-200__main--BorderBottomColor: var(--pf-global--BorderColor--100);
11301
- --pf-c-masthead--c-toolbar__item--Display: flex;
11302
- --pf-c-masthead--item-border-color--base: var(--pf-global--palette--black-800);
11303
- --pf-c-masthead--c-context-selector--Width: auto;
11304
- --pf-c-masthead--c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
11305
- --pf-c-masthead--c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
11306
- --pf-c-masthead--c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
11307
- --pf-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor: transparent;
11308
- --pf-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor: transparent;
11309
- --pf-c-masthead--c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
11310
- --pf-c-masthead--c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
11311
- --pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
11312
- --pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor: transparent;
11313
- --pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor: transparent;
11314
- --pf-c-masthead--c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
11315
- --pf-c-masthead--c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
11316
- --pf-c-masthead--c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
11317
- --pf-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor: transparent;
11318
- --pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
11319
- --pf-c-masthead--c-toolbar__content--PaddingRight: 0;
11320
- --pf-c-masthead--c-toolbar__content--PaddingLeft: 0;
11321
- --pf-c-masthead--c-toolbar__expandable-content--PaddingTop: var(--pf-global--spacer--md);
11322
- --pf-c-masthead--c-toolbar__expandable-content--PaddingRight: var(--pf-c-masthead--inset);
11323
- --pf-c-masthead--c-toolbar__expandable-content--PaddingBottom: var(--pf-global--spacer--md);
11324
- --pf-c-masthead--c-toolbar__expandable-content--PaddingLeft: var(--pf-c-masthead--inset);
11325
- --pf-c-masthead--c-toolbar__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
11326
- --pf-c-masthead--c-toolbar__expandable-content--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
11327
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11328
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11329
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11330
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11331
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11332
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11333
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11334
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11335
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11336
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11337
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11338
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11339
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11340
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11341
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11342
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11343
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11344
- color: var(--pf-global--Color--100);
11345
- position: relative;
11346
- display: grid;
11347
- grid-template-columns: var(--pf-c-masthead--GridTemplateColumns);
11348
- align-items: center;
11349
- min-width: 0;
11350
- padding-right: var(--pf-c-masthead--PaddingRight);
11351
- padding-left: var(--pf-c-masthead--PaddingLeft);
11352
- background-color: var(--pf-c-masthead--BackgroundColor);
11353
- }
11354
-
11355
- @media screen and (min-width: 768px) {
11356
- .pf-c-page:where(:not(.pf-m-resize-observer)) .pf-c-masthead {
11357
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11358
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11359
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11360
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11361
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11362
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11363
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11364
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11365
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11366
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11367
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11368
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11369
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11370
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11371
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11372
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11373
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11374
- }
11375
- }
11376
- @media screen and (min-width: 1200px) {
11377
- .pf-c-masthead {
11378
- --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
11379
- }
11380
- }
11381
- .pf-c-masthead.pf-m-light {
11382
- color: var(--pf-global--Color--100);
11383
- --pf-c-masthead--BackgroundColor: var(--pf-c-masthead--m-light--BackgroundColor);
11384
- --pf-c-masthead__main--BorderBottomColor: var(--pf-c-masthead--m-light__main--BorderBottomColor);
11385
- }
11386
-
11387
- .pf-c-masthead.pf-m-light-200 {
11388
- color: var(--pf-global--Color--100);
11389
- --pf-c-masthead--BackgroundColor: var(--pf-c-masthead--m-light-200--BackgroundColor);
11390
- --pf-c-masthead__main--BorderBottomColor: var(--pf-c-masthead--m-light-200__main--BorderBottomColor);
11391
- }
11392
-
11393
- .pf-c-masthead .pf-c-toolbar {
11394
- --pf-c-toolbar__content--PaddingRight: var(--pf-c-masthead--c-toolbar__content--PaddingRight);
11395
- --pf-c-toolbar__content--PaddingLeft: var(--pf-c-masthead--c-toolbar__content--PaddingLeft);
11396
- --pf-c-toolbar__expandable-content--PaddingTop: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingTop);
11397
- --pf-c-toolbar__expandable-content--PaddingRight: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingRight);
11398
- --pf-c-toolbar__expandable-content--PaddingBottom: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingBottom);
11399
- --pf-c-toolbar__expandable-content--PaddingLeft: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingLeft);
11400
- width: 100%;
11401
- }
11402
-
11403
- .pf-c-masthead .pf-c-toolbar__content-section {
11404
- flex-wrap: nowrap;
11405
- }
11406
-
11407
- .pf-c-masthead .pf-c-toolbar__expandable-content {
11408
- border-top: var(--pf-c-masthead--c-toolbar__expandable-content--BorderTopWidth) solid var(--pf-c-masthead--c-toolbar__expandable-content--BorderTopColor);
11409
- }
11410
-
11411
- .pf-c-masthead .pf-c-menu-toggle {
11412
- --pf-c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--c-menu-toggle--before--BorderTopColor);
11413
- --pf-c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--c-menu-toggle--before--BorderRightColor);
11414
- --pf-c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--c-menu-toggle--before--BorderLeftColor);
11415
- }
11416
-
11417
- .pf-c-masthead .pf-c-menu-toggle.pf-m-full-height {
11418
- --pf-c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor);
11419
- --pf-c-menu-toggle--before--BorderBottomColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor);
11420
- }
11421
-
11422
- .pf-c-masthead .pf-c-context-selector {
11423
- --pf-c-context-selector--Width: var(--pf-c-masthead--c-context-selector--Width);
11424
- --pf-c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--c-context-selector__toggle--BorderTopColor);
11425
- --pf-c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--c-context-selector__toggle--BorderRightColor);
11426
- --pf-c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--c-context-selector__toggle--BorderLeftColor);
11427
- }
11428
-
11429
- .pf-c-masthead .pf-c-context-selector.pf-m-full-height {
11430
- --pf-c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor);
11431
- --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor);
11432
- }
11433
-
11434
- .pf-c-masthead .pf-c-dropdown {
11435
- --pf-c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderTopColor);
11436
- --pf-c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderRightColor);
11437
- --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor);
11438
- }
11439
-
11440
- .pf-c-masthead .pf-c-dropdown.pf-m-full-height {
11441
- --pf-c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor);
11442
- --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor);
11443
- }
11444
-
11445
- .pf-c-masthead .pf-c-nav {
11446
- align-self: stretch;
11447
- }
11448
-
11449
- .pf-c-masthead .pf-c-button.pf-m-plain {
11450
- color: var(--pf-c-button--m-plain--Color);
11451
- }
11452
-
11453
- .pf-c-masthead__main {
11454
- position: relative;
11455
- display: flex;
11456
- flex-basis: var(--pf-c-masthead__main--FlexBasis);
11457
- align-items: center;
11458
- align-self: stretch;
11459
- order: var(--pf-c-masthead__main--Order);
11460
- min-height: var(--pf-c-masthead__main--MinHeight);
11461
- padding-top: var(--pf-c-masthead__main--PaddingTop);
11462
- padding-bottom: var(--pf-c-masthead__main--PaddingBottom);
11463
- margin-right: var(--pf-c-masthead__main--MarginRight);
11464
- grid-column: var(--pf-c-masthead__main--GridColumn);
11465
- }
11466
-
11467
- .pf-c-masthead__main::before {
11468
- position: absolute;
11469
- right: var(--pf-c-masthead__main--before--Right);
11470
- bottom: 0;
11471
- left: var(--pf-c-masthead__main--before--Left);
11472
- content: "";
11473
- border-bottom: var(--pf-c-masthead__main--before--BorderBottom);
11474
- }
11475
-
11476
- .pf-c-masthead__main:last-child {
11477
- --pf-c-masthead__main--MarginRight: 0;
11478
- }
11479
-
11480
- .pf-c-masthead__content {
11481
- display: flex;
11482
- flex-grow: 1;
11483
- align-items: center;
11484
- align-self: stretch;
11485
- order: var(--pf-c-masthead__content--Order);
11486
- min-height: var(--pf-c-masthead__content--MinHeight);
11487
- padding-top: var(--pf-c-masthead__content--PaddingTop);
11488
- padding-bottom: var(--pf-c-masthead__content--PaddingBottom);
11489
- margin-left: var(--pf-c-masthead__content--MarginLeft);
11490
- grid-column: var(--pf-c-masthead__content--GridColumn);
11491
- grid-column-end: -1;
11492
- flex-shrink: 1;
11493
- }
11494
-
11495
- .pf-c-masthead__content:only-child {
11496
- --pf-c-masthead__content--MarginLeft: 0;
11497
- }
11498
-
11499
- .pf-c-masthead__content .pf-c-nav.pf-m-horizontal {
11500
- margin-right: var(--pf-c-masthead__content--c-nav--m-horizontal--MarginRight);
11501
- margin-left: var(--pf-c-masthead__content--c-nav--m-horizontal--MarginLeft);
11502
- }
11503
-
11504
- .pf-c-masthead__toggle ~ .pf-c-masthead__content {
11505
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: calc(var(--pf-c-masthead__content--MarginLeft) * -1);
11506
- }
11507
-
11508
- .pf-c-masthead__main,
11509
- .pf-c-masthead__brand,
11510
- .pf-c-masthead__content {
11511
- min-width: 0;
11512
- }
11513
-
11514
- .pf-c-masthead__brand {
11515
- display: inline-flex;
11516
- align-self: center;
11517
- }
11518
-
11519
- .pf-c-masthead__toggle {
11520
- grid-column: var(--pf-c-masthead__toggle--GridColumn);
11521
- align-self: center;
11522
- margin-right: var(--pf-c-masthead__toggle--MarginRight);
11523
- margin-left: var(--pf-c-masthead__toggle--MarginLeft);
11524
- }
11525
-
11526
- .pf-c-masthead__toggle .pf-c-button {
11527
- --pf-c-button--FontSize: var(--pf-c-masthead__toggle--c-button--FontSize);
11528
- }
11529
-
11530
- .pf-c-masthead.pf-m-display-stack {
11531
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11532
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11533
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11534
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11535
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11536
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11537
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11538
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11539
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11540
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11541
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11542
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11543
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11544
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11545
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11546
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11547
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11548
- }
11549
-
11550
- .pf-c-masthead.pf-m-display-inline {
11551
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11552
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11553
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11554
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11555
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11556
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11557
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11558
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11559
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11560
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11561
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11562
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11563
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11564
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11565
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11566
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11567
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11568
- }
11569
-
11570
- .pf-c-masthead.pf-m-inset-none {
11571
- --pf-c-masthead--inset: 0;
11572
- }
11573
-
11574
- .pf-c-masthead.pf-m-inset-sm {
11575
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11576
- }
11577
-
11578
- .pf-c-masthead.pf-m-inset-md {
11579
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
11580
- }
11581
-
11582
- .pf-c-masthead.pf-m-inset-lg {
11583
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11584
- }
11585
-
11586
- .pf-c-masthead.pf-m-inset-xl {
11587
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11588
- }
11589
-
11590
- .pf-c-masthead.pf-m-inset-2xl {
11591
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11592
- }
11593
-
11594
- @media (min-width: 576px) {
11595
- .pf-c-masthead.pf-m-display-stack-on-sm {
11596
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11597
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11598
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11599
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11600
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11601
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11602
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11603
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11604
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11605
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11606
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11607
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11608
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11609
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11610
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11611
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11612
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11613
- }
11614
-
11615
- .pf-c-masthead.pf-m-display-inline-on-sm {
11616
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11617
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11618
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11619
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11620
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11621
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11622
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11623
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11624
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11625
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11626
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11627
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11628
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11629
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11630
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11631
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11632
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11633
- }
11634
- }
11635
- @media (min-width: 576px) {
11636
- .pf-c-masthead.pf-m-inset-none-on-sm {
11637
- --pf-c-masthead--inset: 0;
11638
- }
11639
-
11640
- .pf-c-masthead.pf-m-inset-sm-on-sm {
11641
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11642
- }
11643
-
11644
- .pf-c-masthead.pf-m-inset-md-on-sm {
11645
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
11646
- }
11647
-
11648
- .pf-c-masthead.pf-m-inset-lg-on-sm {
11649
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11650
- }
11651
-
11652
- .pf-c-masthead.pf-m-inset-xl-on-sm {
11653
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11654
- }
11655
-
11656
- .pf-c-masthead.pf-m-inset-2xl-on-sm {
11657
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11658
- }
11659
- }
11660
- @media (min-width: 768px) {
11661
- .pf-c-masthead.pf-m-display-stack-on-md {
11662
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11663
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11664
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11665
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11666
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11667
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11668
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11669
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11670
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11671
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11672
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11673
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11674
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11675
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11676
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11677
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11678
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11679
- }
11680
-
11681
- .pf-c-masthead.pf-m-display-inline-on-md {
11682
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11683
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11684
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11685
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11686
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11687
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11688
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11689
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11690
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11691
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11692
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11693
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11694
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11695
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11696
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11697
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11698
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11699
- }
11700
- }
11701
- @media (min-width: 768px) {
11702
- .pf-c-masthead.pf-m-inset-none-on-md {
11703
- --pf-c-masthead--inset: 0;
11704
- }
11705
-
11706
- .pf-c-masthead.pf-m-inset-sm-on-md {
11707
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11708
- }
11709
-
11710
- .pf-c-masthead.pf-m-inset-md-on-md {
11711
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
11712
- }
11713
-
11714
- .pf-c-masthead.pf-m-inset-lg-on-md {
11715
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11716
- }
11717
-
11718
- .pf-c-masthead.pf-m-inset-xl-on-md {
11719
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11720
- }
11721
-
11722
- .pf-c-masthead.pf-m-inset-2xl-on-md {
11723
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11724
- }
11725
- }
11726
- @media (min-width: 992px) {
11727
- .pf-c-masthead.pf-m-display-stack-on-lg {
11728
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11729
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11730
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11731
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11732
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11733
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11734
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11735
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11736
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11737
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11738
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11739
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11740
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11741
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11742
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11743
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11744
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11745
- }
11746
-
11747
- .pf-c-masthead.pf-m-display-inline-on-lg {
11748
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11749
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11750
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11751
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11752
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11753
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11754
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11755
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11756
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11757
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11758
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11759
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11760
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11761
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11762
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11763
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11764
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11765
- }
11766
- }
11767
- @media (min-width: 992px) {
11768
- .pf-c-masthead.pf-m-inset-none-on-lg {
11769
- --pf-c-masthead--inset: 0;
11770
- }
11771
-
11772
- .pf-c-masthead.pf-m-inset-sm-on-lg {
11773
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11774
- }
11775
-
11776
- .pf-c-masthead.pf-m-inset-md-on-lg {
11777
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
11778
- }
11779
-
11780
- .pf-c-masthead.pf-m-inset-lg-on-lg {
11781
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11782
- }
11783
-
11784
- .pf-c-masthead.pf-m-inset-xl-on-lg {
11785
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11786
- }
11787
-
11788
- .pf-c-masthead.pf-m-inset-2xl-on-lg {
11789
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11790
- }
11791
- }
11792
- @media (min-width: 1200px) {
11793
- .pf-c-masthead.pf-m-display-stack-on-xl {
11794
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11795
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11796
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11797
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11798
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11799
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11800
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11801
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11802
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11803
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11804
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11805
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11806
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11807
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11808
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11809
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11810
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11811
- }
11812
-
11813
- .pf-c-masthead.pf-m-display-inline-on-xl {
11814
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11815
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11816
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11817
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11818
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11819
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11820
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11821
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11822
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11823
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11824
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11825
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11826
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11827
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11828
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11829
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11830
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11831
- }
11832
- }
11833
- @media (min-width: 1200px) {
11834
- .pf-c-masthead.pf-m-inset-none-on-xl {
11835
- --pf-c-masthead--inset: 0;
11836
- }
11837
-
11838
- .pf-c-masthead.pf-m-inset-sm-on-xl {
11839
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11840
- }
11841
-
11842
- .pf-c-masthead.pf-m-inset-md-on-xl {
11843
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
11844
- }
11845
-
11846
- .pf-c-masthead.pf-m-inset-lg-on-xl {
11847
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11848
- }
11849
-
11850
- .pf-c-masthead.pf-m-inset-xl-on-xl {
11851
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11852
- }
11853
-
11854
- .pf-c-masthead.pf-m-inset-2xl-on-xl {
11855
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11856
- }
11857
- }
11858
- @media (min-width: 1450px) {
11859
- .pf-c-masthead.pf-m-display-stack-on-2xl {
11860
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11861
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11862
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11863
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11864
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11865
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11866
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11867
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11868
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11869
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11870
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11871
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11872
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11873
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11874
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11875
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11876
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11877
- }
11878
-
11879
- .pf-c-masthead.pf-m-display-inline-on-2xl {
11880
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11881
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11882
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11883
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11884
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11885
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11886
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11887
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11888
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11889
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11890
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11891
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11892
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11893
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11894
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11895
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11896
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11897
- }
11898
- }
11899
- @media (min-width: 1450px) {
11900
- .pf-c-masthead.pf-m-inset-none-on-2xl {
11901
- --pf-c-masthead--inset: 0;
11902
- }
11903
-
11904
- .pf-c-masthead.pf-m-inset-sm-on-2xl {
11905
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11906
- }
11907
-
11908
- .pf-c-masthead.pf-m-inset-md-on-2xl {
11909
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
11910
- }
11911
-
11912
- .pf-c-masthead.pf-m-inset-lg-on-2xl {
11913
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11914
- }
11915
-
11916
- .pf-c-masthead.pf-m-inset-xl-on-2xl {
11917
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11918
- }
11919
-
11920
- .pf-c-masthead.pf-m-inset-2xl-on-2xl {
11921
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11922
- }
11923
- }
11924
- :where(.pf-theme-dark) .pf-c-masthead {
11925
- --pf-global--Color--100: #e0e0e0;
11926
- --pf-global--Color--200: #aaabac;
11927
- --pf-global--BorderColor--100: #444548;
11928
- --pf-global--primary-color--100: #1fa7f8;
11929
- --pf-global--link--Color: #1fa7f8;
11930
- --pf-global--link--Color--hover: #73bcf7;
11931
- --pf-global--BackgroundColor--100: #1b1d21;
11932
- }
11933
-
11934
- :where(.pf-theme-dark) .pf-c-masthead .pf-c-card {
11935
- --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
11936
- }
11937
-
11938
- :where(.pf-theme-dark) .pf-c-masthead .pf-c-button {
11939
- --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
11940
- --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
11941
- --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
11942
- --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
11943
- --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
11944
- --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
11945
- --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
11946
- --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
11947
- --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
11948
- --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
11949
- --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
11950
- --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
11951
- }
11952
-
11953
- :where(.pf-theme-dark) .pf-c-masthead {
11954
- --pf-c-masthead--BackgroundColor: var(--pf-global--palette--black-1000);
11955
- color: var(--pf-global--Color--100);
11956
- }
11957
-
11958
- :where(.pf-theme-dark) .pf-c-masthead .pf-c-toolbar {
11959
- --pf-c-toolbar--BackgroundColor: var(--pf-global--palette--black-1000);
11960
- }
11961
-
11962
- .pf-c-menu {
11963
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
11964
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
11965
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
11966
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
11967
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
11968
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
11969
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
11970
- }
11971
-
11972
- .pf-c-menu__group, .pf-c-menu__list-item, .pf-c-menu__list {
11973
- --pf-hidden-visible--visible--Visibility: visible;
11974
- --pf-hidden-visible--hidden--Display: none;
11975
- --pf-hidden-visible--hidden--Visibility: hidden;
11976
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
11977
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
11978
- display: var(--pf-hidden-visible--Display);
11979
- visibility: var(--pf-hidden-visible--Visibility);
11980
- }
11981
-
11982
- .pf-m-hidden.pf-c-menu__group, .pf-m-hidden.pf-c-menu__list-item, .pf-m-hidden.pf-c-menu__list {
11983
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
11984
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
11985
- }
11986
-
11987
- @media screen and (min-width: 576px) {
11988
- .pf-m-hidden-on-sm.pf-c-menu__group, .pf-m-hidden-on-sm.pf-c-menu__list-item, .pf-m-hidden-on-sm.pf-c-menu__list {
11989
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
11990
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
11991
- }
11992
-
11993
- .pf-m-visible-on-sm.pf-c-menu__group, .pf-m-visible-on-sm.pf-c-menu__list-item, .pf-m-visible-on-sm.pf-c-menu__list {
11994
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
11995
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
11996
- }
11997
- }
11998
- @media screen and (min-width: 768px) {
11999
- .pf-m-hidden-on-md.pf-c-menu__group, .pf-m-hidden-on-md.pf-c-menu__list-item, .pf-m-hidden-on-md.pf-c-menu__list {
12000
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
12001
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
12002
- }
11241
+ @media screen and (min-width: 768px) {
11242
+ .pf-m-hidden-on-md.pf-c-menu__group, .pf-m-hidden-on-md.pf-c-menu__list-item, .pf-m-hidden-on-md.pf-c-menu__list {
11243
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
11244
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
11245
+ }
12003
11246
 
12004
11247
  .pf-m-visible-on-md.pf-c-menu__group, .pf-m-visible-on-md.pf-c-menu__list-item, .pf-m-visible-on-md.pf-c-menu__list {
12005
11248
  --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
@@ -12197,463 +11440,1220 @@ ul.pf-c-list {
12197
11440
  --pf-c-menu--m-nav__list-item--first-child--c-menu--Top: 0;
12198
11441
  }
12199
11442
 
12200
- .pf-c-menu .pf-c-menu__content .pf-c-menu .pf-c-menu__content {
12201
- overflow: visible;
11443
+ .pf-c-menu .pf-c-menu__content .pf-c-menu .pf-c-menu__content {
11444
+ overflow: visible;
11445
+ }
11446
+
11447
+ .pf-c-menu .pf-c-divider {
11448
+ margin-top: var(--pf-c-menu--c-divider--MarginTop);
11449
+ margin-bottom: var(--pf-c-menu--c-divider--MarginBottom);
11450
+ }
11451
+
11452
+ .pf-c-menu .pf-c-menu.pf-m-flyout, .pf-c-menu.pf-m-flyout .pf-c-menu {
11453
+ position: absolute;
11454
+ top: var(--pf-c-menu--m-flyout__menu--Top);
11455
+ right: var(--pf-c-menu--m-flyout__menu--Right);
11456
+ bottom: var(--pf-c-menu--m-flyout__menu--Bottom);
11457
+ left: var(--pf-c-menu--m-flyout__menu--Left);
11458
+ }
11459
+
11460
+ .pf-c-menu .pf-c-menu.pf-m-flyout .pf-c-menu__content, .pf-c-menu.pf-m-flyout .pf-c-menu .pf-c-menu__content {
11461
+ overflow-y: visible;
11462
+ }
11463
+
11464
+ .pf-c-menu.pf-m-top {
11465
+ --pf-c-menu--m-flyout__menu--Top: auto;
11466
+ --pf-c-menu--m-flyout__menu--Bottom: var(--pf-c-menu--m-flyout__menu--m-top--Bottom);
11467
+ }
11468
+
11469
+ .pf-c-menu.pf-m-left {
11470
+ --pf-c-menu--m-flyout__menu--Right: var(--pf-c-menu--m-flyout__menu--m-left--Right);
11471
+ --pf-c-menu--m-flyout__menu--Left: auto;
11472
+ }
11473
+
11474
+ .pf-c-menu.pf-m-drilldown {
11475
+ display: flex;
11476
+ flex-direction: column;
11477
+ }
11478
+
11479
+ .pf-c-menu.pf-m-drilldown[hidden] {
11480
+ display: none;
11481
+ }
11482
+
11483
+ .pf-c-menu.pf-m-drilldown > .pf-c-menu__content {
11484
+ flex-grow: 1;
11485
+ overflow: hidden;
11486
+ transition: var(--pf-c-menu--m-drilldown__content--Transition);
11487
+ }
11488
+
11489
+ .pf-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list,
11490
+ .pf-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-c-menu__list {
11491
+ transform: translateX(-100%);
11492
+ }
11493
+
11494
+ .pf-c-menu.pf-m-drilldown > .pf-c-menu__content .pf-c-menu {
11495
+ --pf-c-menu--BoxShadow: none;
11496
+ position: absolute;
11497
+ top: var(--pf-c-menu--m-drilldown--c-menu--Top);
11498
+ left: 100%;
11499
+ width: 100%;
11500
+ transition: var(--pf-c-menu--m-drilldown--c-menu--Transition);
11501
+ }
11502
+
11503
+ .pf-c-menu.pf-m-drilldown > .pf-c-menu__content .pf-c-menu.pf-m-drilled-in {
11504
+ transform: translateX(-100%);
11505
+ }
11506
+
11507
+ .pf-c-menu.pf-m-drilldown .pf-c-menu__list {
11508
+ position: relative;
11509
+ overflow: hidden;
11510
+ transition: var(--pf-c-menu--m-drilldown__list--Transition);
11511
+ }
11512
+
11513
+ .pf-c-menu.pf-m-drilldown .pf-c-menu__list .pf-c-menu__list {
11514
+ --pf-c-menu__list--PaddingTop: 0;
11515
+ --pf-c-menu__list--PaddingBottom: 0;
11516
+ }
11517
+
11518
+ .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-current-path .pf-c-menu {
11519
+ z-index: var(--pf-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex);
11520
+ }
11521
+
11522
+ .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-current-path > .pf-c-menu {
11523
+ overflow: visible;
11524
+ }
11525
+
11526
+ .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-static > .pf-c-menu {
11527
+ position: static;
11528
+ }
11529
+
11530
+ .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-static:hover {
11531
+ background-color: transparent;
11532
+ }
11533
+
11534
+ .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item:not(.pf-m-current-path) .pf-c-menu {
11535
+ display: none;
11536
+ visibility: hidden;
11537
+ }
11538
+
11539
+ .pf-c-menu.pf-m-drilldown .pf-c-menu__item {
11540
+ outline-offset: var(--pf-c-menu__item--OutlineOffset);
11541
+ }
11542
+
11543
+ .pf-c-menu.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list {
11544
+ overflow: visible;
11545
+ }
11546
+
11547
+ .pf-c-menu.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list > .pf-c-divider,
11548
+ .pf-c-menu.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list > .pf-c-menu__list-item:not(.pf-m-current-path) {
11549
+ display: none;
11550
+ }
11551
+
11552
+ .pf-c-menu.pf-m-plain {
11553
+ --pf-c-menu--BoxShadow: var(--pf-c-menu--m-plain--BoxShadow);
11554
+ }
11555
+
11556
+ .pf-c-menu.pf-m-scrollable {
11557
+ --pf-c-menu__content--MaxHeight: var(--pf-c-menu--m-scrollable__content--MaxHeight);
11558
+ --pf-c-menu__footer--BoxShadow: var(--pf-c-menu--m-scrollable__footer--BoxShadow);
11559
+ --pf-c-menu__footer--after--BorderTopWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderTopWidth);
11560
+ }
11561
+
11562
+ .pf-c-menu.pf-m-scrollable .pf-c-menu__content {
11563
+ overflow-y: auto;
11564
+ }
11565
+
11566
+ .pf-c-menu.pf-m-nav, .pf-c-menu.pf-m-nav .pf-c-menu {
11567
+ --pf-c-menu--BackgroundColor: var(--pf-c-menu--m-nav--BackgroundColor);
11568
+ --pf-c-menu__list--PaddingTop: var(--pf-c-menu--m-nav__list--PaddingTop);
11569
+ --pf-c-menu__list--PaddingBottom: var(--pf-c-menu--m-nav__list--PaddingBottom);
11570
+ --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-c-menu--m-nav__list-item--hover--BackgroundColor);
11571
+ --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-menu--m-nav__list-item--focus-within--BackgroundColor);
11572
+ --pf-c-menu__list-item--active--BackgroundColor: var(--pf-c-menu--m-nav__list-item--active--BackgroundColor);
11573
+ --pf-c-menu__item--Color: var(--pf-c-menu--m-nav__item--Color);
11574
+ --pf-c-menu__item--FontSize: var(--pf-c-menu--m-nav__item--FontSize);
11575
+ --pf-c-menu__item--OutlineOffset: var(--pf-c-menu--m-nav__item--OutlineOffset);
11576
+ --pf-c-menu__item--PaddingRight: var(--pf-c-menu--m-nav__item--PaddingRight);
11577
+ --pf-c-menu__item--PaddingLeft: var(--pf-c-menu--m-nav__item--PaddingLeft);
11578
+ --pf-c-menu__item-description--Color: var(--pf-c-menu--m-nav__item-description--Color);
11579
+ box-shadow: var(--pf-c-menu--m-nav--BoxShadow);
11580
+ }
11581
+
11582
+ .pf-c-menu.pf-m-nav .pf-c-menu__item, .pf-c-menu.pf-m-nav .pf-c-menu .pf-c-menu__item {
11583
+ position: relative;
11584
+ outline-offset: var(--pf-c-nav__item--m-flyout--c-menu__item--OutlineOffset);
11585
+ }
11586
+
11587
+ .pf-c-menu.pf-m-nav .pf-c-menu__item::before, .pf-c-menu.pf-m-nav .pf-c-menu .pf-c-menu__item::before {
11588
+ position: absolute;
11589
+ right: 0;
11590
+ bottom: 0;
11591
+ left: 0;
11592
+ content: "";
11593
+ border-bottom: var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) solid var(--pf-c-menu--m-nav__item--before--BorderBottomColor);
11594
+ }
11595
+
11596
+ .pf-c-menu.pf-m-nav .pf-c-menu__item:hover::after, .pf-c-menu.pf-m-nav .pf-c-menu .pf-c-menu__item:hover::after {
11597
+ position: absolute;
11598
+ top: var(--pf-c-menu--m-nav__item--hover--after--Top);
11599
+ bottom: 0;
11600
+ left: 0;
11601
+ content: "";
11602
+ border-left: var(--pf-c-menu--m-nav__item--hover--after--BorderLeftWidth) solid var(--pf-c-menu--m-nav__item--hover--after--BorderLeftColor);
11603
+ }
11604
+
11605
+ .pf-c-menu.pf-m-nav .pf-c-menu {
11606
+ width: 100%;
11607
+ }
11608
+
11609
+ .pf-c-menu.pf-m-flyout.pf-m-nav, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu {
11610
+ top: var(--pf-c-menu--m-nav--c-menu--Top);
11611
+ left: var(--pf-c-menu--m-nav--c-menu--Left);
11612
+ }
11613
+
11614
+ .pf-c-menu.pf-m-flyout.pf-m-nav.pf-m-top, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu.pf-m-top {
11615
+ --pf-c-menu--m-nav--c-menu--Top: auto;
11616
+ bottom: var(--pf-c-menu--m-nav--c-menu--m-top--Bottom);
11617
+ }
11618
+
11619
+ .pf-c-menu.pf-m-flyout.pf-m-nav.pf-m-left, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu.pf-m-left {
11620
+ --pf-c-menu--m-nav--c-menu--Left: auto;
11621
+ right: var(--pf-c-menu--m-nav--c-menu--m-left--Right);
11622
+ }
11623
+
11624
+ .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu__list-item:first-child, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu .pf-c-menu__list-item:first-child {
11625
+ --pf-c-menu--m-nav__item--hover--after--Top: var(--pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top);
11626
+ }
11627
+
11628
+ .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu__list-item:first-child .pf-c-menu, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu .pf-c-menu__list-item:first-child .pf-c-menu {
11629
+ --pf-c-menu--m-nav--c-menu--Top: var(--pf-c-menu--m-nav__list-item--first-child--c-menu--Top);
11630
+ }
11631
+
11632
+ .pf-c-menu__breadcrumb {
11633
+ display: flex;
11634
+ align-items: center;
11635
+ min-height: var(--pf-c-menu__breadcrumb--MinHeight);
11636
+ padding: var(--pf-c-menu__breadcrumb--PaddingTop) var(--pf-c-menu__breadcrumb--PaddingRight) var(--pf-c-menu__breadcrumb--PaddingBottom) var(--pf-c-menu__breadcrumb--PaddingLeft);
11637
+ }
11638
+
11639
+ .pf-c-menu__breadcrumb .pf-c-breadcrumb {
11640
+ --pf-c-breadcrumb__item--FontSize: var(--pf-c-menu__breadcrumb--c-breadcrumb__item--FontSize);
11641
+ --pf-c-breadcrumb__heading--FontSize: var(--pf-c-menu__breadcrumb--c-breadcrumb__heading--FontSize);
11642
+ }
11643
+
11644
+ .pf-c-menu__content {
11645
+ height: var(--pf-c-menu__content--Height);
11646
+ max-height: var(--pf-c-menu__content--MaxHeight);
11647
+ }
11648
+
11649
+ .pf-c-menu__content .pf-c-menu__content {
11650
+ --pf-c-menu__content--Height: auto;
11651
+ }
11652
+
11653
+ .pf-c-menu__header {
11654
+ --pf-c-menu__item--PaddingTop: var(--pf-c-menu__header--c-menu__item--PaddingTop);
11655
+ --pf-c-menu__item--PaddingRight: var(--pf-c-menu__header--c-menu__item--PaddingRight);
11656
+ --pf-c-menu__item--PaddingBottom: var(--pf-c-menu__header--c-menu__item--PaddingBottom);
11657
+ --pf-c-menu__item--PaddingLeft: var(--pf-c-menu__header--c-menu__item--PaddingLeft);
11658
+ padding-top: var(--pf-c-menu__header--PaddingTop);
11659
+ padding-right: var(--pf-c-menu__header--PaddingRight);
11660
+ padding-bottom: var(--pf-c-menu__header--PaddingBottom);
11661
+ padding-left: var(--pf-c-menu__header--PaddingLeft);
11662
+ }
11663
+
11664
+ .pf-c-menu__header > .pf-c-menu__item {
11665
+ --pf-c-menu__item--BackgroundColor: var(--pf-c-menu__header--c-menu__item--BackgroundColor);
11666
+ margin-top: var(--pf-c-menu__header--c-menu__item--MarginTop);
11667
+ margin-right: var(--pf-c-menu__header--c-menu__item--MarginRight);
11668
+ margin-bottom: var(--pf-c-menu__header--c-menu__item--MarginBottom);
11669
+ margin-left: var(--pf-c-menu__header--c-menu__item--MarginLeft);
11670
+ }
11671
+
11672
+ .pf-c-menu__header > .pf-c-menu__item:hover {
11673
+ --pf-c-menu__item--BackgroundColor: var(--pf-c-menu__header--c-menu__item--hover--BackgroundColor);
11674
+ }
11675
+
11676
+ .pf-c-menu__header > .pf-c-menu__item:focus {
11677
+ --pf-c-menu__item--BackgroundColor: var(--pf-c-menu__header--c-menu__item--focus--BackgroundColor);
11678
+ }
11679
+
11680
+ .pf-c-menu__header + .pf-c-menu__search {
11681
+ --pf-c-menu__search--PaddingTop: var(--pf-c-menu__header__search--PaddingTop);
11682
+ }
11683
+
11684
+ .pf-c-menu__search {
11685
+ padding-top: var(--pf-c-menu__search--PaddingTop);
11686
+ padding-right: var(--pf-c-menu__search--PaddingRight);
11687
+ padding-bottom: var(--pf-c-menu__search--PaddingBottom);
11688
+ padding-left: var(--pf-c-menu__search--PaddingLeft);
11689
+ }
11690
+
11691
+ .pf-c-menu__list {
11692
+ --pf-hidden-visible--visible--Display: var(--pf-c-menu__list--Display);
11693
+ padding-top: var(--pf-c-menu__list--PaddingTop);
11694
+ padding-bottom: var(--pf-c-menu__list--PaddingBottom);
11695
+ }
11696
+
11697
+ .pf-c-menu__list > .pf-c-divider {
11698
+ margin-top: var(--pf-c-menu__list--c-divider--MarginTop);
11699
+ margin-bottom: var(--pf-c-menu__list--c-divider--MarginBottom);
12202
11700
  }
12203
11701
 
12204
- .pf-c-menu .pf-c-divider {
12205
- margin-top: var(--pf-c-menu--c-divider--MarginTop);
12206
- margin-bottom: var(--pf-c-menu--c-divider--MarginBottom);
11702
+ .pf-c-menu__list-item {
11703
+ --pf-hidden-visible--visible--Display: var(--pf-c-menu__list-item--Display);
11704
+ position: relative;
11705
+ color: var(--pf-c-menu__list-item--Color);
11706
+ background-color: var(--pf-c-menu__list-item--BackgroundColor);
12207
11707
  }
12208
11708
 
12209
- .pf-c-menu .pf-c-menu.pf-m-flyout, .pf-c-menu.pf-m-flyout .pf-c-menu {
12210
- position: absolute;
12211
- top: var(--pf-c-menu--m-flyout__menu--Top);
12212
- right: var(--pf-c-menu--m-flyout__menu--Right);
12213
- bottom: var(--pf-c-menu--m-flyout__menu--Bottom);
12214
- left: var(--pf-c-menu--m-flyout__menu--Left);
11709
+ .pf-c-menu__list-item:hover {
11710
+ --pf-c-menu__list-item--BackgroundColor: var(--pf-c-menu__list-item--hover--BackgroundColor);
11711
+ --pf-c-menu__list-item--Color: var(--pf-c-menu__list-item--hover--Color, inherit);
12215
11712
  }
12216
11713
 
12217
- .pf-c-menu .pf-c-menu.pf-m-flyout .pf-c-menu__content, .pf-c-menu.pf-m-flyout .pf-c-menu .pf-c-menu__content {
12218
- overflow-y: visible;
11714
+ .pf-c-menu__list-item:focus-within, .pf-c-menu__list-item.pf-m-focus {
11715
+ --pf-c-menu__list-item--BackgroundColor: var(--pf-c-menu__list-item--focus-within--BackgroundColor);
11716
+ --pf-c-menu__list-item--Color: var(--pf-c-menu__list-item--focus-within--Color, inherit);
12219
11717
  }
12220
11718
 
12221
- .pf-c-menu.pf-m-top {
12222
- --pf-c-menu--m-flyout__menu--Top: auto;
12223
- --pf-c-menu--m-flyout__menu--Bottom: var(--pf-c-menu--m-flyout__menu--m-top--Bottom);
11719
+ .pf-c-menu__list-item.pf-m-disabled {
11720
+ --pf-c-menu__list-item--hover--BackgroundColor: transparent;
11721
+ --pf-c-menu__list-item--focus-within--BackgroundColor: transparent;
11722
+ --pf-c-menu__item--Color: var(--pf-c-menu__list-item--m-disabled__item--Color);
11723
+ --pf-c-menu__item-toggle-icon: var(--pf-c-menu__list-item--m-disabled__item-toggle-icon--Color);
11724
+ pointer-events: none;
12224
11725
  }
12225
11726
 
12226
- .pf-c-menu.pf-m-left {
12227
- --pf-c-menu--m-flyout__menu--Right: var(--pf-c-menu--m-flyout__menu--m-left--Right);
12228
- --pf-c-menu--m-flyout__menu--Left: auto;
11727
+ .pf-c-menu__list-item.pf-m-load {
11728
+ --pf-c-menu__list-item--hover--BackgroundColor: transparent;
11729
+ --pf-c-menu__list-item--focus-within--BackgroundColor: transparent;
11730
+ --pf-c-menu__item--Color: var(--pf-c-menu__list-item--m-load__item--Color);
12229
11731
  }
12230
11732
 
12231
- .pf-c-menu.pf-m-drilldown {
11733
+ .pf-c-menu__list-item.pf-m-loading {
11734
+ --pf-c-menu__list-item--hover--BackgroundColor: transparent;
11735
+ --pf-c-menu__list-item--focus-within--BackgroundColor: transparent;
11736
+ justify-content: center;
11737
+ padding-top: var(--pf-c-menu__list-item--m-loading--PaddingTop);
11738
+ overflow: hidden;
11739
+ }
11740
+
11741
+ .pf-c-menu__item {
12232
11742
  display: flex;
11743
+ flex-basis: 100%;
12233
11744
  flex-direction: column;
11745
+ min-width: 0;
11746
+ padding-top: var(--pf-c-menu__item--PaddingTop);
11747
+ padding-right: var(--pf-c-menu__item--PaddingRight);
11748
+ padding-bottom: var(--pf-c-menu__item--PaddingBottom);
11749
+ padding-left: var(--pf-c-menu__item--PaddingLeft);
11750
+ font-size: var(--pf-c-menu__item--FontSize);
11751
+ font-weight: var(--pf-c-menu__item--FontWeight);
11752
+ line-height: var(--pf-c-menu__item--LineHeight);
11753
+ color: var(--pf-c-menu__item--Color);
11754
+ text-align: left;
11755
+ background-color: var(--pf-c-menu__item--BackgroundColor);
11756
+ border: none;
12234
11757
  }
12235
11758
 
12236
- .pf-c-menu.pf-m-drilldown[hidden] {
12237
- display: none;
11759
+ .pf-c-menu__item:hover {
11760
+ text-decoration: none;
12238
11761
  }
12239
11762
 
12240
- .pf-c-menu.pf-m-drilldown > .pf-c-menu__content {
12241
- flex-grow: 1;
11763
+ .pf-c-menu__item:hover, .pf-c-menu__item:focus {
11764
+ --pf-c-menu__item-external-icon--Opacity: 1;
11765
+ }
11766
+
11767
+ .pf-c-menu__item.pf-m-selected .pf-c-menu__item-select-icon {
11768
+ opacity: 1;
11769
+ }
11770
+
11771
+ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
11772
+ cursor: pointer;
11773
+ }
11774
+
11775
+ .pf-c-menu__item-main {
11776
+ display: flex;
11777
+ align-items: center;
11778
+ width: 100%;
11779
+ }
11780
+
11781
+ .pf-c-menu__item-external-icon {
11782
+ margin-left: var(--pf-c-menu__item-external-icon--MarginLeft);
11783
+ font-size: var(--pf-c-menu__item-external-icon--FontSize);
11784
+ color: var(--pf-c-menu__item-external-icon--Color);
11785
+ opacity: var(--pf-c-menu__item-external-icon--Opacity);
11786
+ }
11787
+
11788
+ .pf-c-menu__item-text {
12242
11789
  overflow: hidden;
12243
- transition: var(--pf-c-menu--m-drilldown__content--Transition);
11790
+ text-overflow: ellipsis;
11791
+ white-space: nowrap;
11792
+ flex-grow: 1;
12244
11793
  }
12245
11794
 
12246
- .pf-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list,
12247
- .pf-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-c-menu__list {
12248
- transform: translateX(-100%);
11795
+ .pf-c-menu__group {
11796
+ --pf-hidden-visible--visible--Display: var(--pf-c-menu__group--Display);
11797
+ }
11798
+
11799
+ .pf-c-menu__group-title {
11800
+ padding-top: var(--pf-c-menu__group-title--PaddingTop);
11801
+ padding-right: var(--pf-c-menu__group-title--PaddingRight);
11802
+ padding-left: var(--pf-c-menu__group-title--PaddingLeft);
11803
+ font-size: var(--pf-c-menu__group-title--FontSize);
11804
+ font-weight: var(--pf-c-menu__group-title--FontWeight);
11805
+ color: var(--pf-c-menu__group-title--Color);
11806
+ }
11807
+
11808
+ .pf-c-menu__item-description {
11809
+ font-size: var(--pf-c-menu__item-description--FontSize);
11810
+ color: var(--pf-c-menu__item-description--Color);
11811
+ word-break: break-all;
11812
+ }
11813
+
11814
+ .pf-c-menu__item-icon {
11815
+ margin-right: var(--pf-c-menu__item-icon--MarginRight);
11816
+ }
11817
+
11818
+ .pf-c-menu__item-check {
11819
+ display: flex;
11820
+ align-items: center;
11821
+ margin-right: var(--pf-c-menu__item-check--MarginRight);
11822
+ }
11823
+
11824
+ .pf-c-menu__item-toggle-icon {
11825
+ padding-right: var(--pf-c-menu__item-toggle-icon--PaddingRight);
11826
+ padding-left: var(--pf-c-menu__item-toggle-icon--PaddingLeft);
11827
+ color: var(--pf-c-menu__item-toggle-icon, inherit);
11828
+ }
11829
+
11830
+ .pf-c-menu__item-text + .pf-c-menu__item-toggle-icon {
11831
+ margin-left: var(--pf-c-menu__item-text--item-toggle-icon--MarginLeft);
11832
+ }
11833
+
11834
+ .pf-c-menu__item-toggle-icon + .pf-c-menu__item-text {
11835
+ margin-left: var(--pf-c-menu__item-toggle-icon--item-text--MarginLeft);
11836
+ }
11837
+
11838
+ .pf-c-menu__item-select-icon {
11839
+ margin-left: var(--pf-c-menu__item-select-icon--MarginLeft);
11840
+ font-size: var(--pf-c-menu__item-select-icon--FontSize);
11841
+ color: var(--pf-c-menu__item-select-icon--Color);
11842
+ opacity: 0;
11843
+ }
11844
+
11845
+ .pf-c-menu__item-action {
11846
+ display: flex;
11847
+ padding-top: var(--pf-c-menu__item-action--PaddingTop);
11848
+ padding-right: var(--pf-c-menu__item-action--PaddingRight);
11849
+ padding-bottom: var(--pf-c-menu__item-action--PaddingBottom);
11850
+ padding-left: var(--pf-c-menu__item-action--PaddingLeft);
11851
+ color: var(--pf-c-menu__item-action--Color);
11852
+ border: none;
11853
+ }
11854
+
11855
+ .pf-c-menu__item-action.pf-m-favorite .pf-c-menu__item-action-icon {
11856
+ font-size: var(--pf-c-menu__item-action--m-favorite__icon--FontSize);
11857
+ }
11858
+
11859
+ .pf-c-menu__item-action.pf-m-favorited {
11860
+ --pf-c-menu__item-action--Color: var(--pf-c-menu__item-action--m-favorited--Color);
11861
+ --pf-c-menu__item-action--hover--Color: var(--pf-c-menu__item-action--m-favorited--hover--Color);
11862
+ }
11863
+
11864
+ .pf-c-menu__item-action:hover, .pf-c-menu__item-action:focus {
11865
+ --pf-c-menu__item-action--Color: var(--pf-c-menu__item-action--hover--Color);
11866
+ }
11867
+
11868
+ .pf-c-menu__item-action:disabled {
11869
+ --pf-c-menu__item-action--Color: var(--pf-c-menu__item-action--disabled--Color);
11870
+ }
11871
+
11872
+ .pf-c-menu__item-action-icon {
11873
+ display: flex;
11874
+ align-items: center;
11875
+ height: var(--pf-c-menu__item-action-icon--Height);
11876
+ }
11877
+
11878
+ .pf-c-menu__footer {
11879
+ position: relative;
11880
+ padding: var(--pf-c-menu__footer--PaddingTop) var(--pf-c-menu__footer--PaddingRight) var(--pf-c-menu__footer--PaddingBottom) var(--pf-c-menu__footer--PaddingLeft);
11881
+ box-shadow: var(--pf-c-menu__footer--BoxShadow);
11882
+ }
11883
+
11884
+ .pf-c-menu__footer::after {
11885
+ position: absolute;
11886
+ top: 0;
11887
+ right: 0;
11888
+ bottom: 0;
11889
+ left: 0;
11890
+ pointer-events: none;
11891
+ content: "";
11892
+ border-top: var(--pf-c-menu__footer--after--BorderTopWidth) solid var(--pf-c-menu__footer--after--BorderTopColor);
11893
+ }
11894
+
11895
+ :where(.pf-theme-dark) .pf-c-menu {
11896
+ --pf-c-menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
11897
+ --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
11898
+ --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--400);
11899
+ --pf-c-menu__list-item--m-disabled__item--Color: var(--pf-global--Color--200);
11900
+ }
11901
+
11902
+ .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light {
11903
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
11904
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
11905
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
11906
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
11907
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
11908
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
11909
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
11910
+ }
11911
+
11912
+ .pf-c-masthead .pf-c-button.pf-m-plain, .pf-c-masthead {
11913
+ --pf-global--Color--100: var(--pf-global--Color--light-100);
11914
+ --pf-global--Color--200: var(--pf-global--Color--light-200);
11915
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
11916
+ --pf-global--primary-color--100: var(--pf-global--primary-color--light-100);
11917
+ --pf-global--link--Color: var(--pf-global--link--Color--light);
11918
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
11919
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
11920
+ }
11921
+
11922
+ .pf-c-masthead .pf-c-button.pf-m-plain .pf-c-card, .pf-c-masthead .pf-c-card {
11923
+ --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
11924
+ }
11925
+
11926
+ .pf-c-masthead .pf-c-button.pf-m-plain .pf-c-button, .pf-c-masthead .pf-c-button {
11927
+ --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
11928
+ --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
11929
+ --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
11930
+ --pf-c-button--m-primary--active--Color: var(--pf-global--primary-color--dark-100);
11931
+ --pf-c-button--m-primary--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
11932
+ --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
11933
+ --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
11934
+ --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
11935
+ --pf-c-button--m-secondary--Color: var(--pf-global--Color--light-100);
11936
+ --pf-c-button--m-secondary--hover--Color: var(--pf-global--Color--light-100);
11937
+ --pf-c-button--m-secondary--focus--Color: var(--pf-global--Color--light-100);
11938
+ --pf-c-button--m-secondary--active--Color: var(--pf-global--Color--light-100);
11939
+ --pf-c-button--m-secondary--BorderColor: var(--pf-global--Color--light-100);
11940
+ --pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--Color--light-100);
11941
+ --pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--Color--light-100);
11942
+ --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
12249
11943
  }
12250
11944
 
12251
- .pf-c-menu.pf-m-drilldown > .pf-c-menu__content .pf-c-menu {
12252
- --pf-c-menu--BoxShadow: none;
12253
- position: absolute;
12254
- top: var(--pf-c-menu--m-drilldown--c-menu--Top);
12255
- left: 100%;
12256
- width: 100%;
12257
- transition: var(--pf-c-menu--m-drilldown--c-menu--Transition);
11945
+ .pf-c-masthead {
11946
+ --pf-c-masthead--PaddingLeft: var(--pf-c-masthead--inset);
11947
+ --pf-c-masthead--PaddingRight: var(--pf-c-masthead--inset);
11948
+ --pf-c-masthead--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
11949
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
11950
+ --pf-c-masthead--xl--inset: var(--pf-global--spacer--lg);
11951
+ --pf-c-masthead--m-display-stack--GridTemplateColumns: max-content 1fr;
11952
+ --pf-c-masthead--m-display-stack__main--GridColumn: -1 / 1;
11953
+ --pf-c-masthead--m-display-stack__main--MinHeight: 4.375rem;
11954
+ --pf-c-masthead--m-display-stack__main--Order: -1;
11955
+ --pf-c-masthead--m-display-stack__main--FlexBasis: 100%;
11956
+ --pf-c-masthead--m-display-stack__main--PaddingTop: var(--pf-global--spacer--sm);
11957
+ --pf-c-masthead--m-display-stack__main--PaddingBottom: var(--pf-global--spacer--sm);
11958
+ --pf-c-masthead--m-display-stack__main--MarginRight: 0;
11959
+ --pf-c-masthead--m-display-stack__main--before--BorderBottom: var(--pf-c-masthead__main--before--BorderBottomWidth) solid var(--pf-c-masthead__main--before--BorderBottomColor);
11960
+ --pf-c-masthead--m-display-stack__toggle--GridColumn: 1;
11961
+ --pf-c-masthead--m-display-stack__content--GridColumn: 2;
11962
+ --pf-c-masthead--m-display-stack__content--MinHeight: auto;
11963
+ --pf-c-masthead--m-display-stack__content--Order: 1;
11964
+ --pf-c-masthead--m-display-stack__content--PaddingTop: 0;
11965
+ --pf-c-masthead--m-display-stack__content--PaddingBottom: 0;
11966
+ --pf-c-masthead--m-display-stack__content--MarginLeft: 0;
11967
+ --pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight: calc(var(--pf-c-masthead--inset) * -1);
11968
+ --pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft: calc(var(--pf-c-masthead--inset) * -1);
11969
+ --pf-c-masthead--m-display-inline--GridTemplateColumns: max-content max-content 1fr;
11970
+ --pf-c-masthead--m-display-inline__main--GridColumn: 2;
11971
+ --pf-c-masthead--m-display-inline__main--MinHeight: 4.375rem;
11972
+ --pf-c-masthead--m-display-inline__main--Order: 0;
11973
+ --pf-c-masthead--m-display-inline__main--FlexBasis: auto;
11974
+ --pf-c-masthead--m-display-inline__main--PaddingTop: 0;
11975
+ --pf-c-masthead--m-display-inline__main--PaddingBottom: 0;
11976
+ --pf-c-masthead--m-display-inline__main--MarginRight: calc(var(--pf-global--spacer--lg) / 2);
11977
+ --pf-c-masthead--m-display-inline__main--BorderBottom: 0;
11978
+ --pf-c-masthead--m-display-inline__toggle--GridColumn: 1;
11979
+ --pf-c-masthead--m-display-inline__content--GridColumn: 3;
11980
+ --pf-c-masthead--m-display-inline__content--MinHeight: 4.375rem;
11981
+ --pf-c-masthead--m-display-inline__content--Order: 0;
11982
+ --pf-c-masthead--m-display-inline__content--PaddingTop: 0;
11983
+ --pf-c-masthead--m-display-inline__content--PaddingBottom: 0;
11984
+ --pf-c-masthead--m-display-inline__content--MarginLeft: calc(var(--pf-global--spacer--lg) / 2);
11985
+ --pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight: 0;
11986
+ --pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft: 0;
11987
+ --pf-c-masthead__main--before--Right: calc(var(--pf-c-masthead--inset) * -1);
11988
+ --pf-c-masthead__main--before--Left: calc(var(--pf-c-masthead--inset) * -1);
11989
+ --pf-c-masthead__main--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
11990
+ --pf-c-masthead__main--before--BorderBottomColor: var(--pf-global--palette--black-600);
11991
+ --pf-c-masthead__toggle--MarginRight: var(--pf-global--spacer--sm);
11992
+ --pf-c-masthead__toggle--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
11993
+ --pf-c-masthead__toggle--c-button--FontSize: var(--pf-global--FontSize--2xl);
11994
+ --pf-c-masthead--m-light--BackgroundColor: var(--pf-global--BackgroundColor--100);
11995
+ --pf-c-masthead--m-light__main--BorderBottomColor: var(--pf-global--BorderColor--300);
11996
+ --pf-c-masthead--m-light-200--BackgroundColor: var(--pf-global--BackgroundColor--200);
11997
+ --pf-c-masthead--m-light-200__main--BorderBottomColor: var(--pf-global--BorderColor--100);
11998
+ --pf-c-masthead--c-toolbar__item--Display: flex;
11999
+ --pf-c-masthead--item-border-color--base: var(--pf-global--palette--black-800);
12000
+ --pf-c-masthead--c-context-selector--Width: auto;
12001
+ --pf-c-masthead--c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
12002
+ --pf-c-masthead--c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
12003
+ --pf-c-masthead--c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
12004
+ --pf-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor: transparent;
12005
+ --pf-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor: transparent;
12006
+ --pf-c-masthead--c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
12007
+ --pf-c-masthead--c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
12008
+ --pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
12009
+ --pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor: transparent;
12010
+ --pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor: transparent;
12011
+ --pf-c-masthead--c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
12012
+ --pf-c-masthead--c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
12013
+ --pf-c-masthead--c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
12014
+ --pf-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor: transparent;
12015
+ --pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
12016
+ --pf-c-masthead--c-toolbar__content--PaddingRight: 0;
12017
+ --pf-c-masthead--c-toolbar__content--PaddingLeft: 0;
12018
+ --pf-c-masthead--c-toolbar__expandable-content--PaddingTop: var(--pf-global--spacer--md);
12019
+ --pf-c-masthead--c-toolbar__expandable-content--PaddingRight: var(--pf-c-masthead--inset);
12020
+ --pf-c-masthead--c-toolbar__expandable-content--PaddingBottom: var(--pf-global--spacer--md);
12021
+ --pf-c-masthead--c-toolbar__expandable-content--PaddingLeft: var(--pf-c-masthead--inset);
12022
+ --pf-c-masthead--c-toolbar__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
12023
+ --pf-c-masthead--c-toolbar__expandable-content--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
12024
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
12025
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
12026
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
12027
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
12028
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
12029
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
12030
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
12031
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
12032
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
12033
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
12034
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
12035
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
12036
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
12037
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
12038
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
12039
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
12040
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
12041
+ color: var(--pf-global--Color--100);
12042
+ position: relative;
12043
+ display: grid;
12044
+ grid-template-columns: var(--pf-c-masthead--GridTemplateColumns);
12045
+ align-items: center;
12046
+ min-width: 0;
12047
+ padding-right: var(--pf-c-masthead--PaddingRight);
12048
+ padding-left: var(--pf-c-masthead--PaddingLeft);
12049
+ background-color: var(--pf-c-masthead--BackgroundColor);
12258
12050
  }
12259
12051
 
12260
- .pf-c-menu.pf-m-drilldown > .pf-c-menu__content .pf-c-menu.pf-m-drilled-in {
12261
- transform: translateX(-100%);
12052
+ @media screen and (min-width: 768px) {
12053
+ .pf-c-page:where(:not(.pf-m-resize-observer)) .pf-c-masthead {
12054
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
12055
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
12056
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
12057
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
12058
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
12059
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
12060
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
12061
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
12062
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
12063
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
12064
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
12065
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
12066
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
12067
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
12068
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
12069
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
12070
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
12071
+ }
12262
12072
  }
12263
-
12264
- .pf-c-menu.pf-m-drilldown .pf-c-menu__list {
12265
- position: relative;
12266
- overflow: hidden;
12267
- transition: var(--pf-c-menu--m-drilldown__list--Transition);
12073
+ @media screen and (min-width: 1200px) {
12074
+ .pf-c-masthead {
12075
+ --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
12076
+ }
12268
12077
  }
12269
-
12270
- .pf-c-menu.pf-m-drilldown .pf-c-menu__list .pf-c-menu__list {
12271
- --pf-c-menu__list--PaddingTop: 0;
12272
- --pf-c-menu__list--PaddingBottom: 0;
12078
+ .pf-c-masthead.pf-m-light {
12079
+ color: var(--pf-global--Color--100);
12080
+ --pf-c-masthead--BackgroundColor: var(--pf-c-masthead--m-light--BackgroundColor);
12081
+ --pf-c-masthead__main--BorderBottomColor: var(--pf-c-masthead--m-light__main--BorderBottomColor);
12273
12082
  }
12274
12083
 
12275
- .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-current-path .pf-c-menu {
12276
- z-index: var(--pf-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex);
12084
+ .pf-c-masthead.pf-m-light-200 {
12085
+ color: var(--pf-global--Color--100);
12086
+ --pf-c-masthead--BackgroundColor: var(--pf-c-masthead--m-light-200--BackgroundColor);
12087
+ --pf-c-masthead__main--BorderBottomColor: var(--pf-c-masthead--m-light-200__main--BorderBottomColor);
12277
12088
  }
12278
12089
 
12279
- .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-current-path > .pf-c-menu {
12280
- overflow: visible;
12090
+ .pf-c-masthead .pf-c-toolbar {
12091
+ --pf-c-toolbar__content--PaddingRight: var(--pf-c-masthead--c-toolbar__content--PaddingRight);
12092
+ --pf-c-toolbar__content--PaddingLeft: var(--pf-c-masthead--c-toolbar__content--PaddingLeft);
12093
+ --pf-c-toolbar__expandable-content--PaddingTop: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingTop);
12094
+ --pf-c-toolbar__expandable-content--PaddingRight: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingRight);
12095
+ --pf-c-toolbar__expandable-content--PaddingBottom: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingBottom);
12096
+ --pf-c-toolbar__expandable-content--PaddingLeft: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingLeft);
12097
+ width: 100%;
12281
12098
  }
12282
12099
 
12283
- .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-static > .pf-c-menu {
12284
- position: static;
12100
+ .pf-c-masthead .pf-c-toolbar__content-section {
12101
+ flex-wrap: nowrap;
12285
12102
  }
12286
12103
 
12287
- .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-static:hover {
12288
- background-color: transparent;
12104
+ .pf-c-masthead .pf-c-toolbar__expandable-content {
12105
+ border-top: var(--pf-c-masthead--c-toolbar__expandable-content--BorderTopWidth) solid var(--pf-c-masthead--c-toolbar__expandable-content--BorderTopColor);
12289
12106
  }
12290
12107
 
12291
- .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item:not(.pf-m-current-path) .pf-c-menu {
12292
- display: none;
12293
- visibility: hidden;
12108
+ .pf-c-masthead .pf-c-menu-toggle {
12109
+ --pf-c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--c-menu-toggle--before--BorderTopColor);
12110
+ --pf-c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--c-menu-toggle--before--BorderRightColor);
12111
+ --pf-c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--c-menu-toggle--before--BorderLeftColor);
12294
12112
  }
12295
12113
 
12296
- .pf-c-menu.pf-m-drilldown .pf-c-menu__item {
12297
- outline-offset: var(--pf-c-menu__item--OutlineOffset);
12114
+ .pf-c-masthead .pf-c-menu-toggle.pf-m-full-height {
12115
+ --pf-c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor);
12116
+ --pf-c-menu-toggle--before--BorderBottomColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor);
12298
12117
  }
12299
12118
 
12300
- .pf-c-menu.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list {
12301
- overflow: visible;
12119
+ .pf-c-masthead .pf-c-context-selector {
12120
+ --pf-c-context-selector--Width: var(--pf-c-masthead--c-context-selector--Width);
12121
+ --pf-c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--c-context-selector__toggle--BorderTopColor);
12122
+ --pf-c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--c-context-selector__toggle--BorderRightColor);
12123
+ --pf-c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--c-context-selector__toggle--BorderLeftColor);
12302
12124
  }
12303
12125
 
12304
- .pf-c-menu.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list > .pf-c-divider,
12305
- .pf-c-menu.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list > .pf-c-menu__list-item:not(.pf-m-current-path) {
12306
- display: none;
12126
+ .pf-c-masthead .pf-c-context-selector.pf-m-full-height {
12127
+ --pf-c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor);
12128
+ --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor);
12307
12129
  }
12308
12130
 
12309
- .pf-c-menu.pf-m-plain {
12310
- --pf-c-menu--BoxShadow: var(--pf-c-menu--m-plain--BoxShadow);
12131
+ .pf-c-masthead .pf-c-dropdown {
12132
+ --pf-c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderTopColor);
12133
+ --pf-c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderRightColor);
12134
+ --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor);
12311
12135
  }
12312
12136
 
12313
- .pf-c-menu.pf-m-scrollable {
12314
- --pf-c-menu__content--MaxHeight: var(--pf-c-menu--m-scrollable__content--MaxHeight);
12315
- --pf-c-menu__footer--BoxShadow: var(--pf-c-menu--m-scrollable__footer--BoxShadow);
12316
- --pf-c-menu__footer--after--BorderTopWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderTopWidth);
12137
+ .pf-c-masthead .pf-c-dropdown.pf-m-full-height {
12138
+ --pf-c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor);
12139
+ --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor);
12317
12140
  }
12318
12141
 
12319
- .pf-c-menu.pf-m-scrollable .pf-c-menu__content {
12320
- overflow-y: auto;
12142
+ .pf-c-masthead .pf-c-nav {
12143
+ align-self: stretch;
12321
12144
  }
12322
12145
 
12323
- .pf-c-menu.pf-m-nav, .pf-c-menu.pf-m-nav .pf-c-menu {
12324
- --pf-c-menu--BackgroundColor: var(--pf-c-menu--m-nav--BackgroundColor);
12325
- --pf-c-menu__list--PaddingTop: var(--pf-c-menu--m-nav__list--PaddingTop);
12326
- --pf-c-menu__list--PaddingBottom: var(--pf-c-menu--m-nav__list--PaddingBottom);
12327
- --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-c-menu--m-nav__list-item--hover--BackgroundColor);
12328
- --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-menu--m-nav__list-item--focus-within--BackgroundColor);
12329
- --pf-c-menu__list-item--active--BackgroundColor: var(--pf-c-menu--m-nav__list-item--active--BackgroundColor);
12330
- --pf-c-menu__item--Color: var(--pf-c-menu--m-nav__item--Color);
12331
- --pf-c-menu__item--FontSize: var(--pf-c-menu--m-nav__item--FontSize);
12332
- --pf-c-menu__item--OutlineOffset: var(--pf-c-menu--m-nav__item--OutlineOffset);
12333
- --pf-c-menu__item--PaddingRight: var(--pf-c-menu--m-nav__item--PaddingRight);
12334
- --pf-c-menu__item--PaddingLeft: var(--pf-c-menu--m-nav__item--PaddingLeft);
12335
- --pf-c-menu__item-description--Color: var(--pf-c-menu--m-nav__item-description--Color);
12336
- box-shadow: var(--pf-c-menu--m-nav--BoxShadow);
12146
+ .pf-c-masthead .pf-c-button.pf-m-plain {
12147
+ color: var(--pf-c-button--m-plain--Color);
12337
12148
  }
12338
12149
 
12339
- .pf-c-menu.pf-m-nav .pf-c-menu__item, .pf-c-menu.pf-m-nav .pf-c-menu .pf-c-menu__item {
12150
+ .pf-c-masthead__main {
12340
12151
  position: relative;
12341
- outline-offset: var(--pf-c-nav__item--m-flyout--c-menu__item--OutlineOffset);
12342
- }
12343
-
12344
- .pf-c-menu.pf-m-nav .pf-c-menu__item::before, .pf-c-menu.pf-m-nav .pf-c-menu .pf-c-menu__item::before {
12345
- position: absolute;
12346
- right: 0;
12347
- bottom: 0;
12348
- left: 0;
12349
- content: "";
12350
- border-bottom: var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) solid var(--pf-c-menu--m-nav__item--before--BorderBottomColor);
12152
+ display: flex;
12153
+ flex-basis: var(--pf-c-masthead__main--FlexBasis);
12154
+ align-items: center;
12155
+ align-self: stretch;
12156
+ order: var(--pf-c-masthead__main--Order);
12157
+ min-height: var(--pf-c-masthead__main--MinHeight);
12158
+ padding-top: var(--pf-c-masthead__main--PaddingTop);
12159
+ padding-bottom: var(--pf-c-masthead__main--PaddingBottom);
12160
+ margin-right: var(--pf-c-masthead__main--MarginRight);
12161
+ grid-column: var(--pf-c-masthead__main--GridColumn);
12351
12162
  }
12352
12163
 
12353
- .pf-c-menu.pf-m-nav .pf-c-menu__item:hover::after, .pf-c-menu.pf-m-nav .pf-c-menu .pf-c-menu__item:hover::after {
12164
+ .pf-c-masthead__main::before {
12354
12165
  position: absolute;
12355
- top: var(--pf-c-menu--m-nav__item--hover--after--Top);
12166
+ right: var(--pf-c-masthead__main--before--Right);
12356
12167
  bottom: 0;
12357
- left: 0;
12168
+ left: var(--pf-c-masthead__main--before--Left);
12358
12169
  content: "";
12359
- border-left: var(--pf-c-menu--m-nav__item--hover--after--BorderLeftWidth) solid var(--pf-c-menu--m-nav__item--hover--after--BorderLeftColor);
12170
+ border-bottom: var(--pf-c-masthead__main--before--BorderBottom);
12360
12171
  }
12361
12172
 
12362
- .pf-c-menu.pf-m-nav .pf-c-menu {
12363
- width: 100%;
12173
+ .pf-c-masthead__main:last-child {
12174
+ --pf-c-masthead__main--MarginRight: 0;
12364
12175
  }
12365
12176
 
12366
- .pf-c-menu.pf-m-flyout.pf-m-nav, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu {
12367
- top: var(--pf-c-menu--m-nav--c-menu--Top);
12368
- left: var(--pf-c-menu--m-nav--c-menu--Left);
12177
+ .pf-c-masthead__content {
12178
+ display: flex;
12179
+ flex-grow: 1;
12180
+ align-items: center;
12181
+ align-self: stretch;
12182
+ order: var(--pf-c-masthead__content--Order);
12183
+ min-height: var(--pf-c-masthead__content--MinHeight);
12184
+ padding-top: var(--pf-c-masthead__content--PaddingTop);
12185
+ padding-bottom: var(--pf-c-masthead__content--PaddingBottom);
12186
+ margin-left: var(--pf-c-masthead__content--MarginLeft);
12187
+ grid-column: var(--pf-c-masthead__content--GridColumn);
12188
+ grid-column-end: -1;
12189
+ flex-shrink: 1;
12369
12190
  }
12370
12191
 
12371
- .pf-c-menu.pf-m-flyout.pf-m-nav.pf-m-top, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu.pf-m-top {
12372
- --pf-c-menu--m-nav--c-menu--Top: auto;
12373
- bottom: var(--pf-c-menu--m-nav--c-menu--m-top--Bottom);
12192
+ .pf-c-masthead__content:only-child {
12193
+ --pf-c-masthead__content--MarginLeft: 0;
12374
12194
  }
12375
12195
 
12376
- .pf-c-menu.pf-m-flyout.pf-m-nav.pf-m-left, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu.pf-m-left {
12377
- --pf-c-menu--m-nav--c-menu--Left: auto;
12378
- right: var(--pf-c-menu--m-nav--c-menu--m-left--Right);
12196
+ .pf-c-masthead__content .pf-c-nav.pf-m-horizontal {
12197
+ margin-right: var(--pf-c-masthead__content--c-nav--m-horizontal--MarginRight);
12198
+ margin-left: var(--pf-c-masthead__content--c-nav--m-horizontal--MarginLeft);
12379
12199
  }
12380
12200
 
12381
- .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu__list-item:first-child, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu .pf-c-menu__list-item:first-child {
12382
- --pf-c-menu--m-nav__item--hover--after--Top: var(--pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top);
12201
+ .pf-c-masthead__toggle ~ .pf-c-masthead__content {
12202
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: calc(var(--pf-c-masthead__content--MarginLeft) * -1);
12383
12203
  }
12384
12204
 
12385
- .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu__list-item:first-child .pf-c-menu, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu .pf-c-menu__list-item:first-child .pf-c-menu {
12386
- --pf-c-menu--m-nav--c-menu--Top: var(--pf-c-menu--m-nav__list-item--first-child--c-menu--Top);
12205
+ .pf-c-masthead__main,
12206
+ .pf-c-masthead__brand,
12207
+ .pf-c-masthead__content {
12208
+ min-width: 0;
12387
12209
  }
12388
12210
 
12389
- .pf-c-menu__breadcrumb {
12390
- display: flex;
12391
- align-items: center;
12392
- min-height: var(--pf-c-menu__breadcrumb--MinHeight);
12393
- padding: var(--pf-c-menu__breadcrumb--PaddingTop) var(--pf-c-menu__breadcrumb--PaddingRight) var(--pf-c-menu__breadcrumb--PaddingBottom) var(--pf-c-menu__breadcrumb--PaddingLeft);
12211
+ .pf-c-masthead__brand {
12212
+ display: inline-flex;
12213
+ align-self: center;
12394
12214
  }
12395
12215
 
12396
- .pf-c-menu__breadcrumb .pf-c-breadcrumb {
12397
- --pf-c-breadcrumb__item--FontSize: var(--pf-c-menu__breadcrumb--c-breadcrumb__item--FontSize);
12398
- --pf-c-breadcrumb__heading--FontSize: var(--pf-c-menu__breadcrumb--c-breadcrumb__heading--FontSize);
12216
+ .pf-c-masthead__toggle {
12217
+ grid-column: var(--pf-c-masthead__toggle--GridColumn);
12218
+ align-self: center;
12219
+ margin-right: var(--pf-c-masthead__toggle--MarginRight);
12220
+ margin-left: var(--pf-c-masthead__toggle--MarginLeft);
12399
12221
  }
12400
12222
 
12401
- .pf-c-menu__content {
12402
- height: var(--pf-c-menu__content--Height);
12403
- max-height: var(--pf-c-menu__content--MaxHeight);
12223
+ .pf-c-masthead__toggle .pf-c-button {
12224
+ --pf-c-button--FontSize: var(--pf-c-masthead__toggle--c-button--FontSize);
12404
12225
  }
12405
12226
 
12406
- .pf-c-menu__content .pf-c-menu__content {
12407
- --pf-c-menu__content--Height: auto;
12227
+ .pf-c-masthead.pf-m-display-stack {
12228
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
12229
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
12230
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
12231
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
12232
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
12233
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
12234
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
12235
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
12236
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
12237
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
12238
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
12239
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
12240
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
12241
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
12242
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
12243
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
12244
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
12408
12245
  }
12409
12246
 
12410
- .pf-c-menu__header {
12411
- --pf-c-menu__item--PaddingTop: var(--pf-c-menu__header--c-menu__item--PaddingTop);
12412
- --pf-c-menu__item--PaddingRight: var(--pf-c-menu__header--c-menu__item--PaddingRight);
12413
- --pf-c-menu__item--PaddingBottom: var(--pf-c-menu__header--c-menu__item--PaddingBottom);
12414
- --pf-c-menu__item--PaddingLeft: var(--pf-c-menu__header--c-menu__item--PaddingLeft);
12415
- padding-top: var(--pf-c-menu__header--PaddingTop);
12416
- padding-right: var(--pf-c-menu__header--PaddingRight);
12417
- padding-bottom: var(--pf-c-menu__header--PaddingBottom);
12418
- padding-left: var(--pf-c-menu__header--PaddingLeft);
12247
+ .pf-c-masthead.pf-m-display-inline {
12248
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
12249
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
12250
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
12251
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
12252
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
12253
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
12254
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
12255
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
12256
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
12257
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
12258
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
12259
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
12260
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
12261
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
12262
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
12263
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
12264
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
12419
12265
  }
12420
12266
 
12421
- .pf-c-menu__header > .pf-c-menu__item {
12422
- --pf-c-menu__item--BackgroundColor: var(--pf-c-menu__header--c-menu__item--BackgroundColor);
12423
- margin-top: var(--pf-c-menu__header--c-menu__item--MarginTop);
12424
- margin-right: var(--pf-c-menu__header--c-menu__item--MarginRight);
12425
- margin-bottom: var(--pf-c-menu__header--c-menu__item--MarginBottom);
12426
- margin-left: var(--pf-c-menu__header--c-menu__item--MarginLeft);
12267
+ .pf-c-masthead.pf-m-inset-none {
12268
+ --pf-c-masthead--inset: 0;
12427
12269
  }
12428
12270
 
12429
- .pf-c-menu__header > .pf-c-menu__item:hover {
12430
- --pf-c-menu__item--BackgroundColor: var(--pf-c-menu__header--c-menu__item--hover--BackgroundColor);
12271
+ .pf-c-masthead.pf-m-inset-sm {
12272
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
12431
12273
  }
12432
12274
 
12433
- .pf-c-menu__header > .pf-c-menu__item:focus {
12434
- --pf-c-menu__item--BackgroundColor: var(--pf-c-menu__header--c-menu__item--focus--BackgroundColor);
12275
+ .pf-c-masthead.pf-m-inset-md {
12276
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
12435
12277
  }
12436
12278
 
12437
- .pf-c-menu__header + .pf-c-menu__search {
12438
- --pf-c-menu__search--PaddingTop: var(--pf-c-menu__header__search--PaddingTop);
12279
+ .pf-c-masthead.pf-m-inset-lg {
12280
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
12439
12281
  }
12440
12282
 
12441
- .pf-c-menu__search {
12442
- padding-top: var(--pf-c-menu__search--PaddingTop);
12443
- padding-right: var(--pf-c-menu__search--PaddingRight);
12444
- padding-bottom: var(--pf-c-menu__search--PaddingBottom);
12445
- padding-left: var(--pf-c-menu__search--PaddingLeft);
12283
+ .pf-c-masthead.pf-m-inset-xl {
12284
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
12446
12285
  }
12447
12286
 
12448
- .pf-c-menu__list {
12449
- --pf-hidden-visible--visible--Display: var(--pf-c-menu__list--Display);
12450
- padding-top: var(--pf-c-menu__list--PaddingTop);
12451
- padding-bottom: var(--pf-c-menu__list--PaddingBottom);
12287
+ .pf-c-masthead.pf-m-inset-2xl {
12288
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
12452
12289
  }
12453
12290
 
12454
- .pf-c-menu__list > .pf-c-divider {
12455
- margin-top: var(--pf-c-menu__list--c-divider--MarginTop);
12456
- margin-bottom: var(--pf-c-menu__list--c-divider--MarginBottom);
12457
- }
12291
+ @media (min-width: 576px) {
12292
+ .pf-c-masthead.pf-m-display-stack-on-sm {
12293
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
12294
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
12295
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
12296
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
12297
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
12298
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
12299
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
12300
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
12301
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
12302
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
12303
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
12304
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
12305
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
12306
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
12307
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
12308
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
12309
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
12310
+ }
12458
12311
 
12459
- .pf-c-menu__list-item {
12460
- --pf-hidden-visible--visible--Display: var(--pf-c-menu__list-item--Display);
12461
- position: relative;
12462
- color: var(--pf-c-menu__list-item--Color);
12463
- background-color: var(--pf-c-menu__list-item--BackgroundColor);
12312
+ .pf-c-masthead.pf-m-display-inline-on-sm {
12313
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
12314
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
12315
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
12316
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
12317
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
12318
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
12319
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
12320
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
12321
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
12322
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
12323
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
12324
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
12325
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
12326
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
12327
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
12328
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
12329
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
12330
+ }
12464
12331
  }
12332
+ @media (min-width: 576px) {
12333
+ .pf-c-masthead.pf-m-inset-none-on-sm {
12334
+ --pf-c-masthead--inset: 0;
12335
+ }
12465
12336
 
12466
- .pf-c-menu__list-item:hover {
12467
- --pf-c-menu__list-item--BackgroundColor: var(--pf-c-menu__list-item--hover--BackgroundColor);
12468
- --pf-c-menu__list-item--Color: var(--pf-c-menu__list-item--hover--Color, inherit);
12469
- }
12337
+ .pf-c-masthead.pf-m-inset-sm-on-sm {
12338
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
12339
+ }
12470
12340
 
12471
- .pf-c-menu__list-item:focus-within, .pf-c-menu__list-item.pf-m-focus {
12472
- --pf-c-menu__list-item--BackgroundColor: var(--pf-c-menu__list-item--focus-within--BackgroundColor);
12473
- --pf-c-menu__list-item--Color: var(--pf-c-menu__list-item--focus-within--Color, inherit);
12341
+ .pf-c-masthead.pf-m-inset-md-on-sm {
12342
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
12343
+ }
12344
+
12345
+ .pf-c-masthead.pf-m-inset-lg-on-sm {
12346
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
12347
+ }
12348
+
12349
+ .pf-c-masthead.pf-m-inset-xl-on-sm {
12350
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
12351
+ }
12352
+
12353
+ .pf-c-masthead.pf-m-inset-2xl-on-sm {
12354
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
12355
+ }
12474
12356
  }
12357
+ @media (min-width: 768px) {
12358
+ .pf-c-masthead.pf-m-display-stack-on-md {
12359
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
12360
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
12361
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
12362
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
12363
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
12364
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
12365
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
12366
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
12367
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
12368
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
12369
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
12370
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
12371
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
12372
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
12373
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
12374
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
12375
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
12376
+ }
12475
12377
 
12476
- .pf-c-menu__list-item.pf-m-disabled {
12477
- --pf-c-menu__list-item--hover--BackgroundColor: transparent;
12478
- --pf-c-menu__list-item--focus-within--BackgroundColor: transparent;
12479
- --pf-c-menu__item--Color: var(--pf-c-menu__list-item--m-disabled__item--Color);
12480
- --pf-c-menu__item-toggle-icon: var(--pf-c-menu__list-item--m-disabled__item-toggle-icon--Color);
12481
- pointer-events: none;
12378
+ .pf-c-masthead.pf-m-display-inline-on-md {
12379
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
12380
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
12381
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
12382
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
12383
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
12384
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
12385
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
12386
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
12387
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
12388
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
12389
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
12390
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
12391
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
12392
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
12393
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
12394
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
12395
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
12396
+ }
12482
12397
  }
12398
+ @media (min-width: 768px) {
12399
+ .pf-c-masthead.pf-m-inset-none-on-md {
12400
+ --pf-c-masthead--inset: 0;
12401
+ }
12483
12402
 
12484
- .pf-c-menu__list-item.pf-m-load {
12485
- --pf-c-menu__list-item--hover--BackgroundColor: transparent;
12486
- --pf-c-menu__list-item--focus-within--BackgroundColor: transparent;
12487
- --pf-c-menu__item--Color: var(--pf-c-menu__list-item--m-load__item--Color);
12488
- }
12403
+ .pf-c-masthead.pf-m-inset-sm-on-md {
12404
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
12405
+ }
12489
12406
 
12490
- .pf-c-menu__list-item.pf-m-loading {
12491
- --pf-c-menu__list-item--hover--BackgroundColor: transparent;
12492
- --pf-c-menu__list-item--focus-within--BackgroundColor: transparent;
12493
- justify-content: center;
12494
- padding-top: var(--pf-c-menu__list-item--m-loading--PaddingTop);
12495
- overflow: hidden;
12496
- }
12407
+ .pf-c-masthead.pf-m-inset-md-on-md {
12408
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
12409
+ }
12497
12410
 
12498
- .pf-c-menu__item {
12499
- display: flex;
12500
- flex-basis: 100%;
12501
- flex-direction: column;
12502
- min-width: 0;
12503
- padding-top: var(--pf-c-menu__item--PaddingTop);
12504
- padding-right: var(--pf-c-menu__item--PaddingRight);
12505
- padding-bottom: var(--pf-c-menu__item--PaddingBottom);
12506
- padding-left: var(--pf-c-menu__item--PaddingLeft);
12507
- font-size: var(--pf-c-menu__item--FontSize);
12508
- font-weight: var(--pf-c-menu__item--FontWeight);
12509
- line-height: var(--pf-c-menu__item--LineHeight);
12510
- color: var(--pf-c-menu__item--Color);
12511
- text-align: left;
12512
- background-color: var(--pf-c-menu__item--BackgroundColor);
12513
- border: none;
12514
- }
12411
+ .pf-c-masthead.pf-m-inset-lg-on-md {
12412
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
12413
+ }
12515
12414
 
12516
- .pf-c-menu__item:hover {
12517
- text-decoration: none;
12518
- }
12415
+ .pf-c-masthead.pf-m-inset-xl-on-md {
12416
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
12417
+ }
12519
12418
 
12520
- .pf-c-menu__item:hover, .pf-c-menu__item:focus {
12521
- --pf-c-menu__item-external-icon--Opacity: 1;
12419
+ .pf-c-masthead.pf-m-inset-2xl-on-md {
12420
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
12421
+ }
12522
12422
  }
12423
+ @media (min-width: 992px) {
12424
+ .pf-c-masthead.pf-m-display-stack-on-lg {
12425
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
12426
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
12427
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
12428
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
12429
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
12430
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
12431
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
12432
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
12433
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
12434
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
12435
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
12436
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
12437
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
12438
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
12439
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
12440
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
12441
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
12442
+ }
12523
12443
 
12524
- .pf-c-menu__item.pf-m-selected .pf-c-menu__item-select-icon {
12525
- opacity: 1;
12444
+ .pf-c-masthead.pf-m-display-inline-on-lg {
12445
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
12446
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
12447
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
12448
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
12449
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
12450
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
12451
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
12452
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
12453
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
12454
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
12455
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
12456
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
12457
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
12458
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
12459
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
12460
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
12461
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
12462
+ }
12526
12463
  }
12464
+ @media (min-width: 992px) {
12465
+ .pf-c-masthead.pf-m-inset-none-on-lg {
12466
+ --pf-c-masthead--inset: 0;
12467
+ }
12527
12468
 
12528
- label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
12529
- cursor: pointer;
12530
- }
12469
+ .pf-c-masthead.pf-m-inset-sm-on-lg {
12470
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
12471
+ }
12531
12472
 
12532
- .pf-c-menu__item-main {
12533
- display: flex;
12534
- align-items: center;
12535
- width: 100%;
12536
- }
12473
+ .pf-c-masthead.pf-m-inset-md-on-lg {
12474
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
12475
+ }
12537
12476
 
12538
- .pf-c-menu__item-external-icon {
12539
- margin-left: var(--pf-c-menu__item-external-icon--MarginLeft);
12540
- font-size: var(--pf-c-menu__item-external-icon--FontSize);
12541
- color: var(--pf-c-menu__item-external-icon--Color);
12542
- opacity: var(--pf-c-menu__item-external-icon--Opacity);
12543
- }
12477
+ .pf-c-masthead.pf-m-inset-lg-on-lg {
12478
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
12479
+ }
12544
12480
 
12545
- .pf-c-menu__item-text {
12546
- overflow: hidden;
12547
- text-overflow: ellipsis;
12548
- white-space: nowrap;
12549
- flex-grow: 1;
12550
- }
12481
+ .pf-c-masthead.pf-m-inset-xl-on-lg {
12482
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
12483
+ }
12551
12484
 
12552
- .pf-c-menu__group {
12553
- --pf-hidden-visible--visible--Display: var(--pf-c-menu__group--Display);
12485
+ .pf-c-masthead.pf-m-inset-2xl-on-lg {
12486
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
12487
+ }
12554
12488
  }
12489
+ @media (min-width: 1200px) {
12490
+ .pf-c-masthead.pf-m-display-stack-on-xl {
12491
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
12492
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
12493
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
12494
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
12495
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
12496
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
12497
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
12498
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
12499
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
12500
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
12501
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
12502
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
12503
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
12504
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
12505
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
12506
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
12507
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
12508
+ }
12555
12509
 
12556
- .pf-c-menu__group-title {
12557
- padding-top: var(--pf-c-menu__group-title--PaddingTop);
12558
- padding-right: var(--pf-c-menu__group-title--PaddingRight);
12559
- padding-left: var(--pf-c-menu__group-title--PaddingLeft);
12560
- font-size: var(--pf-c-menu__group-title--FontSize);
12561
- font-weight: var(--pf-c-menu__group-title--FontWeight);
12562
- color: var(--pf-c-menu__group-title--Color);
12510
+ .pf-c-masthead.pf-m-display-inline-on-xl {
12511
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
12512
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
12513
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
12514
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
12515
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
12516
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
12517
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
12518
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
12519
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
12520
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
12521
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
12522
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
12523
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
12524
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
12525
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
12526
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
12527
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
12528
+ }
12563
12529
  }
12530
+ @media (min-width: 1200px) {
12531
+ .pf-c-masthead.pf-m-inset-none-on-xl {
12532
+ --pf-c-masthead--inset: 0;
12533
+ }
12564
12534
 
12565
- .pf-c-menu__item-description {
12566
- font-size: var(--pf-c-menu__item-description--FontSize);
12567
- color: var(--pf-c-menu__item-description--Color);
12568
- word-break: break-all;
12569
- }
12535
+ .pf-c-masthead.pf-m-inset-sm-on-xl {
12536
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
12537
+ }
12570
12538
 
12571
- .pf-c-menu__item-icon {
12572
- margin-right: var(--pf-c-menu__item-icon--MarginRight);
12573
- }
12539
+ .pf-c-masthead.pf-m-inset-md-on-xl {
12540
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
12541
+ }
12574
12542
 
12575
- .pf-c-menu__item-check {
12576
- display: flex;
12577
- align-items: center;
12578
- margin-right: var(--pf-c-menu__item-check--MarginRight);
12579
- }
12543
+ .pf-c-masthead.pf-m-inset-lg-on-xl {
12544
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
12545
+ }
12580
12546
 
12581
- .pf-c-menu__item-toggle-icon {
12582
- padding-right: var(--pf-c-menu__item-toggle-icon--PaddingRight);
12583
- padding-left: var(--pf-c-menu__item-toggle-icon--PaddingLeft);
12584
- color: var(--pf-c-menu__item-toggle-icon, inherit);
12585
- }
12547
+ .pf-c-masthead.pf-m-inset-xl-on-xl {
12548
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
12549
+ }
12586
12550
 
12587
- .pf-c-menu__item-text + .pf-c-menu__item-toggle-icon {
12588
- margin-left: var(--pf-c-menu__item-text--item-toggle-icon--MarginLeft);
12551
+ .pf-c-masthead.pf-m-inset-2xl-on-xl {
12552
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
12553
+ }
12589
12554
  }
12555
+ @media (min-width: 1450px) {
12556
+ .pf-c-masthead.pf-m-display-stack-on-2xl {
12557
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
12558
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
12559
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
12560
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
12561
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
12562
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
12563
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
12564
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
12565
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
12566
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
12567
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
12568
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
12569
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
12570
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
12571
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
12572
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
12573
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
12574
+ }
12590
12575
 
12591
- .pf-c-menu__item-toggle-icon + .pf-c-menu__item-text {
12592
- margin-left: var(--pf-c-menu__item-toggle-icon--item-text--MarginLeft);
12576
+ .pf-c-masthead.pf-m-display-inline-on-2xl {
12577
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
12578
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
12579
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
12580
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
12581
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
12582
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
12583
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
12584
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
12585
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
12586
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
12587
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
12588
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
12589
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
12590
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
12591
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
12592
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
12593
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
12594
+ }
12593
12595
  }
12596
+ @media (min-width: 1450px) {
12597
+ .pf-c-masthead.pf-m-inset-none-on-2xl {
12598
+ --pf-c-masthead--inset: 0;
12599
+ }
12594
12600
 
12595
- .pf-c-menu__item-select-icon {
12596
- margin-left: var(--pf-c-menu__item-select-icon--MarginLeft);
12597
- font-size: var(--pf-c-menu__item-select-icon--FontSize);
12598
- color: var(--pf-c-menu__item-select-icon--Color);
12599
- opacity: 0;
12600
- }
12601
+ .pf-c-masthead.pf-m-inset-sm-on-2xl {
12602
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
12603
+ }
12601
12604
 
12602
- .pf-c-menu__item-action {
12603
- display: flex;
12604
- padding-top: var(--pf-c-menu__item-action--PaddingTop);
12605
- padding-right: var(--pf-c-menu__item-action--PaddingRight);
12606
- padding-bottom: var(--pf-c-menu__item-action--PaddingBottom);
12607
- padding-left: var(--pf-c-menu__item-action--PaddingLeft);
12608
- color: var(--pf-c-menu__item-action--Color);
12609
- border: none;
12610
- }
12605
+ .pf-c-masthead.pf-m-inset-md-on-2xl {
12606
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
12607
+ }
12611
12608
 
12612
- .pf-c-menu__item-action.pf-m-favorite .pf-c-menu__item-action-icon {
12613
- font-size: var(--pf-c-menu__item-action--m-favorite__icon--FontSize);
12614
- }
12609
+ .pf-c-masthead.pf-m-inset-lg-on-2xl {
12610
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
12611
+ }
12615
12612
 
12616
- .pf-c-menu__item-action.pf-m-favorited {
12617
- --pf-c-menu__item-action--Color: var(--pf-c-menu__item-action--m-favorited--Color);
12618
- --pf-c-menu__item-action--hover--Color: var(--pf-c-menu__item-action--m-favorited--hover--Color);
12619
- }
12613
+ .pf-c-masthead.pf-m-inset-xl-on-2xl {
12614
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
12615
+ }
12620
12616
 
12621
- .pf-c-menu__item-action:hover, .pf-c-menu__item-action:focus {
12622
- --pf-c-menu__item-action--Color: var(--pf-c-menu__item-action--hover--Color);
12617
+ .pf-c-masthead.pf-m-inset-2xl-on-2xl {
12618
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
12619
+ }
12623
12620
  }
12624
-
12625
- .pf-c-menu__item-action:disabled {
12626
- --pf-c-menu__item-action--Color: var(--pf-c-menu__item-action--disabled--Color);
12621
+ :where(.pf-theme-dark) .pf-c-masthead {
12622
+ --pf-global--Color--100: #e0e0e0;
12623
+ --pf-global--Color--200: #aaabac;
12624
+ --pf-global--BorderColor--100: #444548;
12625
+ --pf-global--primary-color--100: #1fa7f8;
12626
+ --pf-global--link--Color: #1fa7f8;
12627
+ --pf-global--link--Color--hover: #73bcf7;
12628
+ --pf-global--BackgroundColor--100: #1b1d21;
12627
12629
  }
12628
12630
 
12629
- .pf-c-menu__item-action-icon {
12630
- display: flex;
12631
- align-items: center;
12632
- height: var(--pf-c-menu__item-action-icon--Height);
12631
+ :where(.pf-theme-dark) .pf-c-masthead .pf-c-card {
12632
+ --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
12633
12633
  }
12634
12634
 
12635
- .pf-c-menu__footer {
12636
- position: relative;
12637
- padding: var(--pf-c-menu__footer--PaddingTop) var(--pf-c-menu__footer--PaddingRight) var(--pf-c-menu__footer--PaddingBottom) var(--pf-c-menu__footer--PaddingLeft);
12638
- box-shadow: var(--pf-c-menu__footer--BoxShadow);
12635
+ :where(.pf-theme-dark) .pf-c-masthead .pf-c-button {
12636
+ --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
12637
+ --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
12638
+ --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
12639
+ --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
12640
+ --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
12641
+ --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
12642
+ --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
12643
+ --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
12644
+ --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
12645
+ --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
12646
+ --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
12647
+ --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
12639
12648
  }
12640
12649
 
12641
- .pf-c-menu__footer::after {
12642
- position: absolute;
12643
- top: 0;
12644
- right: 0;
12645
- bottom: 0;
12646
- left: 0;
12647
- pointer-events: none;
12648
- content: "";
12649
- border-top: var(--pf-c-menu__footer--after--BorderTopWidth) solid var(--pf-c-menu__footer--after--BorderTopColor);
12650
+ :where(.pf-theme-dark) .pf-c-masthead {
12651
+ --pf-c-masthead--BackgroundColor: var(--pf-global--palette--black-1000);
12652
+ color: var(--pf-global--Color--100);
12650
12653
  }
12651
12654
 
12652
- :where(.pf-theme-dark) .pf-c-menu {
12653
- --pf-c-menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
12654
- --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
12655
- --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--400);
12656
- --pf-c-menu__list-item--m-disabled__item--Color: var(--pf-global--Color--200);
12655
+ :where(.pf-theme-dark) .pf-c-masthead .pf-c-toolbar {
12656
+ --pf-c-toolbar--BackgroundColor: var(--pf-global--palette--black-1000);
12657
12657
  }
12658
12658
 
12659
12659
  .pf-c-menu-toggle {
@@ -26189,75 +26189,6 @@ label.pf-c-tree-view__node-text {
26189
26189
  --pf-l-flex--spacer: var(--pf-l-flex--spacer--4xl);
26190
26190
  }
26191
26191
  }
26192
- .pf-l-gallery {
26193
- --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
26194
- --pf-l-gallery--GridTemplateColumns--min: 250px;
26195
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
26196
- --pf-l-gallery--GridTemplateColumns--max: 1fr;
26197
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
26198
- --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
26199
- --pf-l-gallery--GridTemplateRows: auto;
26200
- display: grid;
26201
- grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
26202
- grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
26203
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
26204
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
26205
- }
26206
-
26207
- .pf-l-gallery.pf-m-gutter {
26208
- grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
26209
- }
26210
-
26211
- @media (min-width: 576px) {
26212
- .pf-l-gallery {
26213
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
26214
- }
26215
- }
26216
- @media (min-width: 768px) {
26217
- .pf-l-gallery {
26218
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
26219
- }
26220
- }
26221
- @media (min-width: 992px) {
26222
- .pf-l-gallery {
26223
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
26224
- }
26225
- }
26226
- @media (min-width: 1200px) {
26227
- .pf-l-gallery {
26228
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
26229
- }
26230
- }
26231
- @media (min-width: 1450px) {
26232
- .pf-l-gallery {
26233
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
26234
- }
26235
- }
26236
- @media (min-width: 576px) {
26237
- .pf-l-gallery {
26238
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
26239
- }
26240
- }
26241
- @media (min-width: 768px) {
26242
- .pf-l-gallery {
26243
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
26244
- }
26245
- }
26246
- @media (min-width: 992px) {
26247
- .pf-l-gallery {
26248
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
26249
- }
26250
- }
26251
- @media (min-width: 1200px) {
26252
- .pf-l-gallery {
26253
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
26254
- }
26255
- }
26256
- @media (min-width: 1450px) {
26257
- .pf-l-gallery {
26258
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
26259
- }
26260
- }
26261
26192
  .pf-l-grid {
26262
26193
  --pf-l-grid--m-gutter--GridGap: var(--pf-global--gutter);
26263
26194
  --pf-l-grid__item--GridColumnStart: auto;
@@ -27472,6 +27403,75 @@ label.pf-c-tree-view__node-text {
27472
27403
  grid-gap: var(--pf-l-grid--m-gutter--GridGap);
27473
27404
  }
27474
27405
 
27406
+ .pf-l-gallery {
27407
+ --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
27408
+ --pf-l-gallery--GridTemplateColumns--min: 250px;
27409
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
27410
+ --pf-l-gallery--GridTemplateColumns--max: 1fr;
27411
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
27412
+ --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
27413
+ --pf-l-gallery--GridTemplateRows: auto;
27414
+ display: grid;
27415
+ grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
27416
+ grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
27417
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
27418
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
27419
+ }
27420
+
27421
+ .pf-l-gallery.pf-m-gutter {
27422
+ grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
27423
+ }
27424
+
27425
+ @media (min-width: 576px) {
27426
+ .pf-l-gallery {
27427
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
27428
+ }
27429
+ }
27430
+ @media (min-width: 768px) {
27431
+ .pf-l-gallery {
27432
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
27433
+ }
27434
+ }
27435
+ @media (min-width: 992px) {
27436
+ .pf-l-gallery {
27437
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
27438
+ }
27439
+ }
27440
+ @media (min-width: 1200px) {
27441
+ .pf-l-gallery {
27442
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
27443
+ }
27444
+ }
27445
+ @media (min-width: 1450px) {
27446
+ .pf-l-gallery {
27447
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
27448
+ }
27449
+ }
27450
+ @media (min-width: 576px) {
27451
+ .pf-l-gallery {
27452
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
27453
+ }
27454
+ }
27455
+ @media (min-width: 768px) {
27456
+ .pf-l-gallery {
27457
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
27458
+ }
27459
+ }
27460
+ @media (min-width: 992px) {
27461
+ .pf-l-gallery {
27462
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
27463
+ }
27464
+ }
27465
+ @media (min-width: 1200px) {
27466
+ .pf-l-gallery {
27467
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
27468
+ }
27469
+ }
27470
+ @media (min-width: 1450px) {
27471
+ .pf-l-gallery {
27472
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
27473
+ }
27474
+ }
27475
27475
  .pf-l-level {
27476
27476
  --pf-l-level--m-gutter--MarginRight: var(--pf-global--gutter);
27477
27477
  display: flex;