@itwin/itwinui-css 0.61.0 → 1.0.0-dev.0

package/css/header.css

@@ -3,6 +3,9 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 .iui-page-header{
+  --_iui-header-brand-label-font-size:16px;
+  --_iui-header-height:55px;
+  --_iui-header-icon-scale:none;
   margin:0;
   padding:0;
   border:none;
@@ -10,506 +13,417 @@
   display:flex;
   justify-content:space-between;
   width:100%;
-  height:57px;
+  height:var(--_iui-header-height);
   -webkit-user-select:none;
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
-  box-sizing:border-box;
-  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
-  background-color:white;
-  border-bottom:2px solid #c7ccd1;
-  color:rgba(0, 0, 0, 0.8);
   background-color:var(--iui-color-background-1);
   border-bottom:2px solid var(--iui-color-background-border);
   color:var(--iui-text-color);
+  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-page-header{
     transition:height 0.2s ease-out;
   }
 }
-.iui-page-header > .iui-left,
-.iui-page-header > .iui-center,
-.iui-page-header > .iui-right{
+.iui-page-header[data-iui-size=slim]{
+  --_iui-header-brand-label-font-size:14px;
+  --_iui-header-height:33px;
+  --_iui-header-icon-scale:scale(0.66666);
+}
+
+.iui-page-header-left,
+.iui-page-header-center,
+.iui-page-header-right{
   display:flex;
   align-items:center;
-  height:100%;
-}
-.iui-page-header .iui-header-button-icon{
-  width:24px;
-  height:24px;
-  border-radius:4px;
 }
-@media (prefers-reduced-motion: no-preference){
-  .iui-page-header .iui-header-button-icon{
-    transition:width 0.2s ease-out, height 0.2s ease-out, margin 0.2s ease-out;
-  }
-}
-.iui-page-header .iui-header-button.iui-header-button{
-  padding:0 12px;
-  height:49px;
-  font-size:16px;
-  gap:12px;
-  gap:0;
-  max-width:25vw;
+
+.iui-page-header-right .iui-button{
   height:100%;
   border-radius:0;
-  overflow:hidden;
-}
-.iui-page-header .iui-header-button.iui-header-button:focus{
-  box-shadow:none;
-  outline-offset:-1px;
-  outline:1px solid #008ae0;
-  outline:1px solid var(--iui-color-foreground-primary);
-}
-.iui-page-header .iui-header-button.iui-header-button:focus:not(:focus-visible){
-  outline:0;
+  flex-shrink:0;
 }
-.iui-page-header .iui-header-button.iui-header-button > .iui-button-label{
-  text-align:left;
-  font-size:14px;
-  overflow:hidden;
+@media (forced-colors: active){
+  .iui-page-header-right .iui-button{
+    border-top-width:0;
+    border-bottom-width:0;
+  }
 }
-.iui-page-header .iui-header-button.iui-header-button > .iui-button-label > div{
-  overflow:hidden;
-  text-overflow:ellipsis;
+@media (prefers-reduced-motion: no-preference){
+  .iui-page-header-right .iui-avatar,
+.iui-page-header-right .iui-avatar *{
+    transition:width 0.2s ease-out, height 0.2s ease-out, font-size 0.2s ease-out;
+  }
 }
-.iui-page-header .iui-header-button.iui-header-button .iui-description{
+
+.iui-page-header-divider{
   height:22px;
-  font-size:12px;
-  opacity:0.6;
-  opacity:var(--iui-opacity-3);
+  border-left:1px solid var(--iui-color-background-border);
 }
-@media (prefers-reduced-motion: no-preference){
-  .iui-page-header .iui-header-button.iui-header-button .iui-description{
-    transition:all 0.2s ease;
+@media (forced-colors: active){
+  .iui-page-header-divider{
+    display:none;
   }
 }
-.iui-page-header .iui-header-button.iui-header-button > .iui-button-icon{
+
+.iui-header-breadcrumbs{
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  display:flex;
+  align-items:center;
+  height:100%;
+}
+
+.iui-header-brand{
+  height:100%;
+  display:inline-flex;
+  align-items:center;
   flex-shrink:0;
+  white-space:nowrap;
+  background-color:transparent;
+  box-sizing:border-box;
 }
-.iui-page-header .iui-header-button.iui-header-button > * + *{
-  margin-left:12px;
+a.iui-header-brand,
+button.iui-header-brand, .iui-header-brand[role=button]{
+  cursor:pointer;
+  -webkit-tap-highlight-color:transparent;
+  transition:background-color 0.2s ease-out;
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  font-family:inherit;
+  background-color:unset;
+  color:unset;
 }
-.iui-page-header .iui-header-button.iui-header-button .iui-header-button-icon{
-  padding:4px;
-  width:16px;
-  height:16px;
-  border-radius:4px;
-  background-color:#edeff2;
-  fill:rgba(0, 0, 0, 0.4);
-  background-color:var(--iui-color-background-3);
-  fill:var(--iui-icons-color);
+a.iui-header-brand:focus-visible,
+button.iui-header-brand:focus-visible, .iui-header-brand[role=button]:focus-visible{
+  outline:1px solid var(--iui-color-foreground-primary);
+  outline-offset:-1px;
 }
-@media (prefers-reduced-motion: no-preference){
-  .iui-page-header .iui-header-button.iui-header-button .iui-header-button-icon{
-    transition:width 0.2s ease-out, height 0.2s ease-out, margin 0.2s ease-out;
+@supports not selector(*:focus-visible){
+  a.iui-header-brand:focus,
+button.iui-header-brand:focus, .iui-header-brand[role=button]:focus{
+    outline:1px solid var(--iui-color-foreground-primary);
+    outline-offset:-1px;
   }
 }
-.iui-page-header .iui-header-button.iui-header-button.iui-active svg{
-  fill:#008ae0;
-  fill:var(--iui-icons-color-primary);
-}
-.iui-page-header .iui-header-button.iui-header-button.iui-active .iui-description{
-  opacity:1;
-}
-.iui-page-header .iui-header-button.iui-header-button.iui-active, .iui-page-header .iui-header-button.iui-header-button.iui-active:hover{
-  box-shadow:0 2px 0 0 #008ae0;
-  background-color:rgba(0, 138, 224, 0.1);
-  box-shadow:0 2px 0 0 var(--iui-color-foreground-primary);
-  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
-}
-.iui-page-header .iui-header-button.iui-header-button.iui-active .iui-header-button-icon, .iui-page-header .iui-header-button.iui-header-button.iui-active:hover .iui-header-button-icon{
-  fill:#008ae0;
-  background-color:rgba(0, 138, 224, 0.1);
-  fill:var(--iui-icons-color-primary);
-  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
+@media (forced-colors: active){
+  a.iui-header-brand,
+button.iui-header-brand, .iui-header-brand[role=button]{
+    border:1px solid CanvasText;
+    border-top-width:0;
+    border-bottom-width:0;
+  }
 }
-.iui-page-header .iui-header-button.iui-header-button.iui-active .iui-button-label{
-  color:#008ae0;
-  color:var(--iui-color-foreground-primary);
+a.iui-header-brand:hover,
+button.iui-header-brand:hover, .iui-header-brand[role=button]:hover{
+  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
 }
-.iui-page-header .iui-header-button.iui-header-button.iui-active.iui-disabled, .iui-page-header .iui-header-button.iui-header-button.iui-active:disabled{
-  background-color:rgba(0, 0, 0, 0.05);
-  box-shadow:0 2px 0 0 rgba(0, 0, 0, 0.4);
-  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
-  box-shadow:0 2px 0 0 rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+
+a.iui-header-brand{
+  text-decoration:none;
 }
-.iui-page-header .iui-header-button.iui-header-button.iui-active.iui-disabled .iui-button-label, .iui-page-header .iui-header-button.iui-header-button.iui-active:disabled .iui-button-label{
-  color:rgba(0, 0, 0, 0.2);
-  color:var(--iui-icons-color-actionable-disabled);
+
+.iui-header-brand-icon{
+  width:24px;
+  height:24px;
+  margin:0 24px;
+  fill:var(--iui-icons-color-actionable);
+  will-change:transform;
+  transform:var(--_iui-header-icon-scale);
 }
-.iui-page-header .iui-header-button.iui-header-button.iui-active.iui-disabled .iui-button-icon,
-.iui-page-header .iui-header-button.iui-header-button.iui-active.iui-disabled svg, .iui-page-header .iui-header-button.iui-header-button.iui-active:disabled .iui-button-icon,
-.iui-page-header .iui-header-button.iui-header-button.iui-active:disabled svg{
-  fill:rgba(0, 0, 0, 0.2);
-  fill:var(--iui-icons-color-actionable-disabled);
+@media (prefers-reduced-motion: no-preference){
+  .iui-header-brand-icon{
+    transition:transform 0.2s ease-out;
+  }
 }
-.iui-page-header .iui-header-button.iui-header-button.iui-active.iui-disabled .iui-header-button-icon, .iui-page-header .iui-header-button.iui-header-button.iui-active:disabled .iui-header-button-icon{
-  background-color:rgba(0, 0, 0, 0.05);
-  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
+
+.iui-header-brand-label{
+  margin-right:12px;
+  font-size:var(--_iui-header-brand-label-font-size);
 }
-.iui-page-header .iui-header-button.iui-header-button:disabled .iui-header-button-icon{
-  filter:grayscale(1) opacity(0.7);
+@media (prefers-reduced-motion: no-preference){
+  .iui-header-brand-label{
+    transition:font-size 0.2s ease-out;
+  }
 }
-.iui-page-header.iui-slim > .iui-left .iui-button .iui-header-button-icon.iui-header-button-icon{
-  width:12px;
-  height:12px;
-  padding:2px;
+@media (max-width: 991px){
+  .iui-header-brand-label{
+    display:none;
+  }
 }
-.iui-page-header.iui-slim > .iui-left .iui-button-label .iui-description{
-  opacity:0;
-  height:0.1px;
-  width:0.1px;
+
+.iui-header-breadcrumbs-list{
   margin:0;
   padding:0;
+  border:none;
+  vertical-align:baseline;
+  display:flex;
+  align-items:center;
+  list-style-type:none;
+  -webkit-user-select:none;
+     -moz-user-select:none;
+      -ms-user-select:none;
+          user-select:none;
+  height:100%;
 }
 
-.iui-page-header .iui-header-dropdown-button.iui-header-dropdown-button{
-  padding-right:8px;
-}
-.iui-page-header .iui-header-split-button{
-  max-width:25vw;
-}
-.iui-page-header .iui-header-split-button,
-.iui-page-header .iui-header-split-button > *{
-  height:100%;
-  display:flex;
+.iui-page-header-left,
+.iui-header-breadcrumbs,
+.iui-header-breadcrumbs-list{
   overflow:hidden;
+  box-sizing:content-box;
+  margin-bottom:-4px;
+  padding-bottom:4px;
 }
-.iui-page-header .iui-header-split-button .iui-button{
-  padding:0 12px;
-  height:49px;
-  font-size:16px;
-  gap:12px;
-  gap:0;
-  max-width:25vw;
+
+.iui-header-breadcrumb-button{
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  display:inline-flex;
+  align-items:center;
+  vertical-align:middle;
+  justify-content:center;
   height:100%;
   border-radius:0;
+  max-width:25vw;
   overflow:hidden;
-  padding:0 4px;
+  padding-left:12px;
+  padding-right:12px;
+  box-sizing:border-box;
+  font-family:inherit;
+  -webkit-tap-highlight-color:transparent;
+  transition:background-color 0.2s ease-out;
+  color:inherit;
+  gap:12px;
+  cursor:pointer;
 }
-.iui-page-header .iui-header-split-button .iui-button:focus{
-  box-shadow:none;
-  outline-offset:-1px;
-  outline:1px solid #008ae0;
+.iui-header-breadcrumb-button:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
+  outline-offset:-1px;
 }
-.iui-page-header .iui-header-split-button .iui-button:focus:not(:focus-visible){
-  outline:0;
-}
-.iui-page-header .iui-header-split-button .iui-button > .iui-button-label{
-  text-align:left;
-  font-size:14px;
-  overflow:hidden;
-}
-.iui-page-header .iui-header-split-button .iui-button > .iui-button-label > div{
-  overflow:hidden;
-  text-overflow:ellipsis;
-}
-.iui-page-header .iui-header-split-button .iui-button .iui-description{
-  height:22px;
-  font-size:12px;
-  opacity:0.6;
-  opacity:var(--iui-opacity-3);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-page-header .iui-header-split-button .iui-button .iui-description{
-    transition:all 0.2s ease;
+@supports not selector(*:focus-visible){
+  .iui-header-breadcrumb-button:focus{
+    outline:1px solid var(--iui-color-foreground-primary);
+    outline-offset:-1px;
   }
 }
-.iui-page-header .iui-header-split-button .iui-button > .iui-button-icon{
-  flex-shrink:0;
-}
-.iui-page-header .iui-header-split-button .iui-button > * + *{
-  margin-left:12px;
-}
-.iui-page-header .iui-header-split-button .iui-button .iui-header-button-icon{
-  padding:4px;
-  width:16px;
-  height:16px;
-  border-radius:4px;
-  background-color:#edeff2;
-  fill:rgba(0, 0, 0, 0.4);
-  background-color:var(--iui-color-background-3);
-  fill:var(--iui-icons-color);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-page-header .iui-header-split-button .iui-button .iui-header-button-icon{
-    transition:width 0.2s ease-out, height 0.2s ease-out, margin 0.2s ease-out;
+@media (forced-colors: active){
+  .iui-header-breadcrumb-button{
+    border:1px solid;
+    border-top-width:0;
+    border-bottom-width:0;
+  }
+  .iui-header-breadcrumb-button:not(:last-child){
+    border-right-width:0;
   }
 }
-.iui-page-header .iui-header-split-button .iui-button.iui-active svg{
-  fill:#008ae0;
-  fill:var(--iui-icons-color-primary);
-}
-.iui-page-header .iui-header-split-button .iui-button.iui-active .iui-description{
-  opacity:1;
-}
-.iui-page-header .iui-header-split-button .iui-button.iui-active, .iui-page-header .iui-header-split-button .iui-button.iui-active:hover{
-  box-shadow:0 2px 0 0 #008ae0;
-  background-color:rgba(0, 138, 224, 0.1);
-  box-shadow:0 2px 0 0 var(--iui-color-foreground-primary);
-  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
-}
-.iui-page-header .iui-header-split-button .iui-button.iui-active .iui-header-button-icon, .iui-page-header .iui-header-split-button .iui-button.iui-active:hover .iui-header-button-icon{
-  fill:#008ae0;
-  background-color:rgba(0, 138, 224, 0.1);
-  fill:var(--iui-icons-color-primary);
-  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
-}
-.iui-page-header .iui-header-split-button .iui-button.iui-active .iui-button-label{
-  color:#008ae0;
-  color:var(--iui-color-foreground-primary);
-}
-.iui-page-header .iui-header-split-button .iui-button.iui-active.iui-disabled, .iui-page-header .iui-header-split-button .iui-button.iui-active:disabled{
-  background-color:rgba(0, 0, 0, 0.05);
-  box-shadow:0 2px 0 0 rgba(0, 0, 0, 0.4);
-  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
-  box-shadow:0 2px 0 0 rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+.iui-header-breadcrumb-button, .iui-header-breadcrumb-button:hover{
+  background-color:transparent;
 }
-.iui-page-header .iui-header-split-button .iui-button.iui-active.iui-disabled .iui-button-label, .iui-page-header .iui-header-split-button .iui-button.iui-active:disabled .iui-button-label{
-  color:rgba(0, 0, 0, 0.2);
-  color:var(--iui-icons-color-actionable-disabled);
+.iui-header-breadcrumb-button:disabled, .iui-header-breadcrumb-button[aria-disabled=true]{
+  cursor:not-allowed;
 }
-.iui-page-header .iui-header-split-button .iui-button.iui-active.iui-disabled .iui-button-icon,
-.iui-page-header .iui-header-split-button .iui-button.iui-active.iui-disabled svg, .iui-page-header .iui-header-split-button .iui-button.iui-active:disabled .iui-button-icon,
-.iui-page-header .iui-header-split-button .iui-button.iui-active:disabled svg{
-  fill:rgba(0, 0, 0, 0.2);
-  fill:var(--iui-icons-color-actionable-disabled);
+
+.iui-header-breadcrumb-button-split{
+  padding:0 8px;
+  margin-left:-8px;
+  flex-shrink:0;
 }
-.iui-page-header .iui-header-split-button .iui-button.iui-active.iui-disabled .iui-header-button-icon, .iui-page-header .iui-header-split-button .iui-button.iui-active:disabled .iui-header-button-icon{
-  background-color:rgba(0, 0, 0, 0.05);
-  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
+.iui-header-breadcrumb-button-split:hover{
+  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
 }
-.iui-page-header .iui-header-split-button .iui-button:disabled .iui-header-button-icon{
-  filter:grayscale(1) opacity(0.7);
+[aria-current] .iui-header-breadcrumb-button-split:hover{
+  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
 }
-.iui-page-header.iui-slim > .iui-left .iui-button .iui-header-button-icon.iui-header-button-icon{
-  width:12px;
-  height:12px;
-  padding:2px;
+
+.iui-header-breadcrumb-button-split:disabled, .iui-header-breadcrumb-button-split[aria-disabled=true]{
+  cursor:not-allowed;
 }
-.iui-page-header.iui-slim > .iui-left .iui-button-label .iui-description{
-  opacity:0;
-  height:0.1px;
-  width:0.1px;
-  margin:0;
-  padding:0;
+.iui-header-breadcrumb-button-split:disabled:hover, .iui-header-breadcrumb-button-split[aria-disabled=true]:hover{
+  background-color:transparent;
 }
 
-.iui-page-header .iui-header-split-button > *:first-child .iui-button{
-  padding-left:12px;
-}
-.iui-page-header .iui-header-split-button.iui-active svg{
-  fill:#008ae0;
-  fill:var(--iui-icons-color-primary);
+.iui-header-breadcrumb-item{
+  max-width:25vw;
+  transition:background-color 0.2s ease-out;
+  height:100%;
+  display:flex;
+  overflow:hidden;
+  position:relative;
+  color:var(--iui-text-color);
+  box-sizing:border-box;
 }
-.iui-page-header .iui-header-split-button.iui-active .iui-description{
-  opacity:1;
+@media (forced-colors: active){
+  .iui-header-breadcrumb-item{
+    color:LinkText;
+    border:none;
+  }
 }
-.iui-page-header .iui-header-split-button.iui-active, .iui-page-header .iui-header-split-button.iui-active:hover{
-  box-shadow:0 2px 0 0 #008ae0;
-  background-color:rgba(0, 138, 224, 0.1);
-  box-shadow:0 2px 0 0 var(--iui-color-foreground-primary);
-  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
+.iui-header-breadcrumb-item:hover{
+  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
 }
-.iui-page-header .iui-header-split-button.iui-active .iui-header-button-icon, .iui-page-header .iui-header-split-button.iui-active:hover .iui-header-button-icon{
-  fill:#008ae0;
-  background-color:rgba(0, 138, 224, 0.1);
-  fill:var(--iui-icons-color-primary);
+.iui-header-breadcrumb-item[aria-current]{
   background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
-}
-.iui-page-header .iui-header-split-button.iui-active .iui-button-label{
-  color:#008ae0;
+  box-shadow:0 2px 0 0 currentColor;
   color:var(--iui-color-foreground-primary);
 }
-.iui-page-header .iui-header-split-button.iui-active.iui-disabled, .iui-page-header .iui-header-split-button.iui-active:disabled{
-  background-color:rgba(0, 0, 0, 0.05);
-  box-shadow:0 2px 0 0 rgba(0, 0, 0, 0.4);
-  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
-  box-shadow:0 2px 0 0 rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
-}
-.iui-page-header .iui-header-split-button.iui-active.iui-disabled .iui-button-label, .iui-page-header .iui-header-split-button.iui-active:disabled .iui-button-label{
-  color:rgba(0, 0, 0, 0.2);
-  color:var(--iui-icons-color-actionable-disabled);
-}
-.iui-page-header .iui-header-split-button.iui-active.iui-disabled .iui-button-icon,
-.iui-page-header .iui-header-split-button.iui-active.iui-disabled svg, .iui-page-header .iui-header-split-button.iui-active:disabled .iui-button-icon,
-.iui-page-header .iui-header-split-button.iui-active:disabled svg{
-  fill:rgba(0, 0, 0, 0.2);
-  fill:var(--iui-icons-color-actionable-disabled);
-}
-.iui-page-header .iui-header-split-button.iui-active.iui-disabled .iui-header-button-icon, .iui-page-header .iui-header-split-button.iui-active:disabled .iui-header-button-icon{
-  background-color:rgba(0, 0, 0, 0.05);
-  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
+@media (forced-colors: active){
+  .iui-header-breadcrumb-item[aria-current]{
+    color:LinkText;
+    border-bottom:3px solid LinkText;
+  }
 }
-.iui-page-header .iui-header-split-button.iui-active .iui-button.iui-borderless, .iui-page-header .iui-header-split-button.iui-active .iui-button.iui-borderless:hover{
+.iui-header-breadcrumb-item[aria-disabled=true]{
+  cursor:not-allowed;
   background-color:transparent;
+  color:var(--iui-text-color-placeholder);
 }
-.iui-page-header .iui-header-split-button.iui-active .iui-button.iui-borderless::after{
-  display:none;
-}
-.iui-page-header .iui-header-split-button.iui-active > *:last-child > .iui-button:hover{
-  background-color:rgba(0, 138, 224, 0.1);
-  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
-}
-.iui-page-header .iui-header-split-button.iui-active.iui-disabled .iui-button:last-child:hover{
-  background-color:transparent;
-  background-color:transparent;
+.iui-header-breadcrumb-item[aria-disabled=true][aria-current]{
+  box-shadow:none;
+  background-color:var(--iui-color-background-2);
 }
-.iui-page-header > .iui-left > nav{
-  display:flex;
-  align-items:center;
-  height:100%;
+@media (forced-colors: active){
+  .iui-header-breadcrumb-item[aria-disabled=true][aria-current]{
+    border-bottom:3px solid GrayText;
+  }
 }
-.iui-page-header > .iui-left,
-.iui-page-header > .iui-left > nav{
+
+.iui-header-breadcrumb-button-wrapper{
+  width:100%;
   overflow:hidden;
-  box-sizing:content-box;
-  margin-bottom:-4px;
-  padding-bottom:4px;
+  display:flex;
 }
-.iui-page-header > .iui-left .iui-chevron{
-  fill:rgba(0, 0, 0, 0.4);
-  fill:var(--iui-icons-color);
+
+.iui-header-breadcrumb-button-icon{
+  width:24px;
+  height:24px;
+  background-color:var(--iui-color-background-3);
+  border-radius:4px;
   display:inline-flex;
-  width:12px;
-  height:12px;
   flex-shrink:0;
-  margin:0 4px;
-}
-.iui-page-header > .iui-left .iui-chevron.iui-informational{
-  fill:#008ae0;
-  fill:var(--iui-icons-color-primary);
-}
-.iui-page-header > .iui-left .iui-chevron.iui-positive{
-  fill:#53a21a;
-  fill:var(--iui-icons-color-positive);
-}
-.iui-page-header > .iui-left .iui-chevron.iui-warning{
-  fill:#f18d13;
-  fill:var(--iui-icons-color-warning);
+  box-sizing:border-box;
+  padding:4px;
+  fill:var(--iui-icons-color);
+  will-change:transform;
+  transform:var(--_iui-header-icon-scale);
 }
-.iui-page-header > .iui-left .iui-chevron.iui-negative{
-  fill:#d10a0a;
-  fill:var(--iui-icons-color-negative);
+@media (prefers-reduced-motion: no-preference){
+  .iui-header-breadcrumb-button-icon{
+    transition:transform 0.2s ease-out;
+  }
 }
-.iui-page-header > .iui-center{
-  justify-content:center;
+@media (forced-colors: active){
+  .iui-header-breadcrumb-button-icon{
+    fill:LinkText;
+  }
 }
-.iui-page-header > .iui-right{
-  justify-content:flex-end;
+img.iui-header-breadcrumb-button-icon,
+div.iui-header-breadcrumb-button-icon{
+  padding:0;
+  transition:filter 0.2s ease-out;
 }
 @media (prefers-reduced-motion: no-preference){
-  .iui-page-header > .iui-right .iui-user-icon,
-.iui-page-header > .iui-right .iui-user-icon *{
-    transition:all 0.2s ease-out;
+  img.iui-header-breadcrumb-button-icon,
+div.iui-header-breadcrumb-button-icon{
+    transition:filter 0.2s ease-out, transform 0.2s ease-out;
   }
 }
-.iui-page-header .iui-button{
-  height:100%;
-  border-radius:0;
-}
-.iui-page-header .iui-divider{
-  width:1px;
-  height:22px;
-  background-color:#c7ccd1;
-  background-color:var(--iui-color-background-border);
-}
-.iui-page-header.iui-slim{
-  height:30px;
+
+img.iui-header-breadcrumb-button-icon{
+  -o-object-fit:cover;
+     object-fit:cover;
 }
-.iui-page-header.iui-slim > .iui-left .iui-header-logo > .iui-label{
-  font-size:14px;
+
+div.iui-header-breadcrumb-button-icon{
+  background-position:center;
+  background-repeat:no-repeat;
+  background-size:cover;
 }
-.iui-page-header.iui-slim > .iui-left .iui-header-logo .iui-header-button-icon{
-  margin:0 28px;
+
+.iui-active .iui-header-breadcrumb-button-icon, [aria-current] .iui-header-breadcrumb-button-icon{
+  background-color:var(--iui-color-background-1);
+  fill:currentColor;
 }
-.iui-page-header.iui-slim > .iui-left .iui-header-button-icon{
-  width:16px;
-  height:16px;
-  margin:0 4px;
-  display:inline-flex;
+
+:disabled .iui-header-breadcrumb-button-icon, [aria-disabled=true] .iui-header-breadcrumb-button-icon{
+  background-color:var(--iui-color-background-2);
+  fill:var(--iui-icons-color-actionable-disabled);
 }
-.iui-page-header.iui-slim > .iui-right .iui-user-icon{
-  width:24px;
-  height:24px;
-  --_iui-user-icon-status-size:12px;
+@media (forced-colors: active){
+  :disabled .iui-header-breadcrumb-button-icon, [aria-disabled=true] .iui-header-breadcrumb-button-icon{
+    fill:GrayText;
+  }
 }
-.iui-page-header.iui-slim > .iui-right .iui-user-icon > .iui-initials{
-  line-height:24px;
-  font-size:12px;
+
+:disabled img.iui-header-breadcrumb-button-icon,
+:disabled div.iui-header-breadcrumb-button-icon,
+[aria-disabled=true] img.iui-header-breadcrumb-button-icon,
+[aria-disabled=true] div.iui-header-breadcrumb-button-icon{
+  filter:grayscale(1) opacity(0.7);
 }
+
 @media (max-width: 768px){
-  .iui-page-header .iui-left .iui-button .iui-header-button-icon.iui-header-button-icon, .iui-page-header.iui-slim .iui-left .iui-button .iui-header-button-icon.iui-header-button-icon{
-    opacity:0;
-    height:0.1px;
-    width:0.1px;
-    margin:0;
-    padding:0;
-  }
-  .iui-page-header .iui-left .iui-button .iui-header-button-icon + .iui-button-label, .iui-page-header.iui-slim .iui-left .iui-button .iui-header-button-icon + .iui-button-label{
-    margin-left:0;
-  }
-}
-@media (max-width: 1024px){
-  .iui-page-header .iui-left .iui-header-logo > .iui-label{
+  .iui-header-breadcrumb-button-icon{
     display:none;
   }
 }
 
-.iui-header-logo{
-  display:inline-flex;
-  align-items:center;
-  white-space:nowrap;
-  height:100%;
-}
-a.iui-header-logo,
-button.iui-header-logo, .iui-header-logo[role=button]{
-  cursor:pointer;
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  font-family:inherit;
-  background-color:unset;
-  color:unset;
-}
-a.iui-header-logo:focus,
-button.iui-header-logo:focus, .iui-header-logo[role=button]:focus{
-  box-shadow:none;
-  outline-offset:-1px;
-  outline:1px solid #008ae0;
-  outline:1px solid var(--iui-color-foreground-primary);
-}
-a.iui-header-logo:focus:not(:focus-visible),
-button.iui-header-logo:focus:not(:focus-visible), .iui-header-logo[role=button]:focus:not(:focus-visible){
-  outline:0;
+.iui-header-breadcrumb-button-dropdown-icon{
+  width:16px;
+  height:16px;
+  fill:currentColor;
+  flex-shrink:0;
+  margin-right:-4px;
 }
-a.iui-header-logo:hover,
-button.iui-header-logo:hover, .iui-header-logo[role=button]:hover{
-  background-color:rgba(0, 0, 0, 0.1);
-  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
+.iui-header-breadcrumb-button-split .iui-header-breadcrumb-button-dropdown-icon{
+  margin-right:0;
 }
-a.iui-header-logo:hover:not(:focus-visible):not(:hover),
-button.iui-header-logo:hover:not(:focus-visible):not(:hover), .iui-header-logo[role=button]:hover:not(:focus-visible):not(:hover){
-  background-color:white;
-  background-color:var(--iui-color-background-1);
+
+@media (forced-colors: active){
+  :disabled .iui-header-breadcrumb-button-dropdown-icon, [aria-disabled=true] .iui-header-breadcrumb-button-dropdown-icon{
+    fill:GrayText;
+  }
 }
 
-.iui-header-logo .iui-header-button-icon{
-  margin:0 24px;
-  fill:rgba(0, 0, 0, 0.8);
-  fill:var(--iui-icons-color-actionable);
+.iui-header-breadcrumb-button-text{
+  display:flex;
+  flex-direction:column;
+  justify-content:center;
+  font-size:14px;
+  text-align:left;
+  overflow:hidden;
+  transition:color 0.2s ease-out;
 }
-.iui-header-logo > .iui-label{
-  margin-right:12px;
-  font-size:16px;
+.iui-header-breadcrumb-button-text-label, .iui-header-breadcrumb-button-text-sublabel{
+  overflow:hidden;
+  white-space:nowrap;
+  text-overflow:ellipsis;
+}
+.iui-header-breadcrumb-button-text-sublabel{
+  font-size:12px;
+  opacity:var(--iui-opacity-3);
 }
 @media (prefers-reduced-motion: no-preference){
-  .iui-header-logo > .iui-label{
-    transition:font-size 0.2s ease-out;
+  .iui-header-breadcrumb-button-text-sublabel{
+    transition:visibility 0s linear 0s, width 0.2s ease-out, height 0.2s ease-out, opacity 0.2s ease-out;
   }
+}
+.iui-active .iui-header-breadcrumb-button-text-sublabel, [aria-current] .iui-header-breadcrumb-button-text-sublabel{
+  opacity:var(--iui-opacity-1);
+}
+
+[data-iui-size=slim] .iui-header-breadcrumb-button-text-sublabel{
+  visibility:hidden;
+  opacity:0;
+  height:0;
+  width:0;
 }