/*
 * Styling for sticky header element
 * The `is-position-sticky` class is added by WordPress Group blocks with sticky positioning
 * Applies styles if a child of `site-header` has this class
*/
header.site-header:has(> .is-position-sticky) {
  --wp-admin--admin-bar--position-offset: var(--wp-admin--admin-bar--height, 0px);
  position: sticky;
  top: calc(0px + var(--wp-admin--admin-bar--position-offset, 0px));
  z-index: 10;
}

/*
 * If any of blocks within the main elements contains the `is-position-sticky
 * While the header is sticky, we need to add additional spacing to the top
 * So that the sticky element won't overlap with the header
*/
header.site-header:has(> .is-position-sticky) + :is(main[class], div[class]) .wp-block-group.is-position-sticky {
  --wp-admin--admin-bar--position-offset: var(--wp-admin--admin-bar--height, 0px);
  position: sticky;
  top: calc(90px + var(--wp-admin--admin-bar--position-offset, 0px));

  /* Need to lower the stacking than the default one (which is 10) */
  z-index: 9;
}

/*
 * We need to re-assign the position of header on the editor page
 * So that it won't position itself a bit lower than the top
 */
body.block-editor-page header.site-header:has(> .is-position-sticky) {
  --wp-admin--admin-bar--position-offset: 0px;
}