@layer components {
  .c-component-page__header:has(> .c-composition-header--sticky) { position: sticky; inset-block-start: 0; z-index: var(--z-sticky); background: color-mix(in srgb, var(--wa-color-canvas) 88%, transparent); border-block-end: var(--wa-border-width) solid var(--wa-color-border); backdrop-filter: blur(var(--space-4)); }
}
@layer components {
  .c-composition-header--compact.c-composition-container { padding-block: var(--space-4); }
  .c-composition-header--compact > .c-composition-navigation { padding-block: 0; }
}
@layer components {
  .c-composition-header--bar { display: flex; flex-wrap: nowrap; gap: var(--space-4); align-items: center; justify-content: space-between; }
  .c-composition-header--bar > * { min-inline-size: 0; }
  .c-composition-header--bar > :first-child { flex: 0 1 auto; }
  .c-composition-header--bar > .c-composition-navigation { flex: 0 0 auto; }
  .c-composition-header--bar .c-composition-link-box__copy { min-inline-size: 0; }
}