@property st-global(--wds-page-header-padding-horizontal);
@property st-global(--wds-page-header-padding-horizontal-small);
@property st-global(--wds-color-fill-surface-sunken);
@property st-global(--wds-space-300);

.root {
  -st-states: mobile, panel;
}

.root [data-hook="page-header-wrapper"] {
  --wds-space-300: 18px;
}

.root:mobile {
  --wds-page-header-padding-horizontal: 0;
  --wds-page-header-padding-horizontal-small: 0;
  --wds-color-fill-surface-sunken: #ffffff;
}

.root:panel {
  overflow: hidden;
  position: relative;
}