@layer starlight, zen-mode;

@layer zen-mode {
  body:has(.starlight-view-modes-zen-mode-header-sidebar-footer) {
    --sl-mobile-toc-height: 0rem;
  }
  body:has(.starlight-view-modes-zen-mode-header-sidebar-footer)
    .right-sidebar-container {
    display: none;
  }

  body:has(.starlight-view-modes-zen-mode-header-sidebar-footer):has(
      #starlight__sidebar
    )
    header.header
    > div {
    --sl-nav-gap: 1rem;
    grid-template-columns:
      minmax(
        calc(
          var(--__sidebar-width) +
            max(
              0rem,
              (
                  100vw - var(--sl-sidebar-width) - var(--sl-content-width) -
                    var(--sl-nav-gap)
                ) /
                2 - var(--sl-nav-gap)
            )
        ),
        auto
      )
      1fr auto;
  }
  body:has(.starlight-view-modes-zen-mode-header-sidebar-footer):has(
      #starlight__sidebar
    )
    main
    .sl-container {
    margin: 0 auto;
  }
  body:has(.starlight-view-modes-zen-mode-header-sidebar-footer):has(
      #starlight__sidebar
    )
    .main-frame {
    padding-inline: 0;
  }
  @media (min-width: 50rem) {
    body:has(.starlight-view-modes-zen-mode-header-sidebar-footer):has(
        #starlight__sidebar
      )
      main {
      width: calc(100vw - var(--sl-sidebar-width) - var(--sl-sidebar-pad-x));
      margin-left: var(--sl-sidebar-width);
    }
  }
}