@layer env.components {
  .env-page {
    --env-page-width-sm: 40rem;
    --env-page-width-md: 60rem;
    --env-page-width-lg: 76rem;
    --env-page-gutter: var(--env-space-4);
    --env-page-width: var(--env-page-width-lg);
    container: env-page / inline-size;
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: calc(var(--env-page-width) + 2 * var(--env-page-gutter));
    margin-inline: auto;
    padding-inline: var(--env-page-gutter);
    padding-block: var(--env-space-5) var(--env-space-7);
  }
  @container (width >= 37.5rem) {
    .env-page {
      --env-page-gutter: var(--env-space-5);
      padding-block: var(--env-space-6) var(--env-space-8);
    }
  }
  .env-page[data-width='sm'] {
    --env-page-width: var(--env-page-width-sm);
  }
  .env-page[data-width='md'] {
    --env-page-width: var(--env-page-width-md);
  }
  .env-page[data-width='full'] {
    max-inline-size: none;
  }
  .env-page[data-gutter='none'] {
    --env-page-gutter: 0rem;
  }
  .env-page-content {
    margin-block-start: var(--env-space-4);
  }
  @container (width >= 37.5rem) {
    .env-page-content {
      margin-block-start: var(--env-space-6);
    }
  }
  .env-page:has(> .env-page-header[data-sticky]) {
    --env-page-sticky-title: max(1.3 * var(--env-font-size-headline), var(--env-control-height));
    --env-page-sticky-small-line: calc(1.4 * var(--env-type-body-sm-font-size));
    --env-page-sticky-breadcrumbs: 0rem;
    --env-page-sticky-description: 0rem;
    --env-page-sticky-toolbar: 0rem;
    --env-page-sticky-actions: 0rem;
  }
  .env-page:has(> .env-page-header[data-sticky] > .env-page-header-breadcrumbs) {
    --env-page-sticky-breadcrumbs: calc(
      max(var(--env-page-sticky-small-line), var(--env-control-height-sm)) + var(--env-space-3)
    );
  }
  .env-page:has(> .env-page-header[data-sticky] .env-page-header-description) {
    --env-page-sticky-description: calc(var(--env-page-sticky-small-line) + var(--env-space-1));
  }
  .env-page:has(> .env-page-header[data-sticky] > .env-page-header-toolbar) {
    --env-page-sticky-toolbar: calc(var(--env-control-height) + var(--env-space-3));
  }
  .env-page:has(> .env-page-header[data-sticky] .env-page-header-actions) {
    --env-page-sticky-actions: calc(var(--env-control-height) + var(--env-space-4));
  }
  .env-page > .env-page-header[data-sticky] ~ .env-page-content * {
    scroll-margin-block-start: calc(
      var(
          --env-page-header-block-size,
          2 * var(--env-space-4) + var(--env-page-sticky-title) +
            var(--env-page-sticky-breadcrumbs) + var(--env-page-sticky-description) +
            var(--env-page-sticky-toolbar) + var(--env-page-sticky-actions)
        ) +
        var(--env-space-2)
    );
  }
  @container env-page (width >= 37.5rem) {
    .env-page > .env-page-header[data-sticky] ~ .env-page-content * {
      --env-page-sticky-actions: 0rem;
    }
  }
}