---
import Breadcrumb from "../Breadcrumb.astro";
---

<div class="content-container">
  <div class="main-pane">
    {
      Astro.locals.starlightRoute.hasSidebar && (
        <div class="breadcrumb-container">
          <Breadcrumb />
        </div>
      )
    }

    <slot />
  </div>
  {
    Astro.locals.starlightRoute.toc && (
      <aside class="right-sidebar-container print:hidden">
        <div class="right-sidebar">
          <slot name="right-sidebar" />
        </div>
      </aside>
    )
  }
</div>

<style>
  @layer starlight.core {
    .content-container {
      width: 100%;
      overflow: hidden;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
    }

    .main-pane {
      /* isolation: isolate; */
      width: 100%;
    }
    :global([data-has-sidebar][data-has-toc]) .main-pane {
      overflow: hidden;
    }

    @media (min-width: 72rem) {
      :global([data-has-sidebar][data-has-toc]) .content-container {
        display: grid;
        grid-template-columns: 1fr auto;
        overflow: visible;
      }
      .right-sidebar-container {
        order: 2;
        position: relative;
      }

      .right-sidebar {
        position: sticky;
        inset-block: calc(var(--sl-nav-height) + 110px) 0;
        /* border-inline-start: 1px solid var(--sl-color-hairline); */
        /* padding-top: var(--sl-nav-height); */
        width: 100%;
        height: 80vh;
        overflow-y: auto;
        scrollbar-width: none;
      }

      :global([data-has-sidebar][data-has-toc]) .main-pane {
        --sl-content-margin-inline: auto 0;

        order: 1;
        overflow: hidden;
        border-left: 1px solid var(--sl-color-hairline);
        border-right: 1px solid var(--sl-color-hairline);
      }
    }
  }
</style>

<script>
  const contentContainer = document.querySelector(
    ".content-container"
  ) as HTMLElement;

  if (contentContainer) {
    contentContainer.style.opacity = "1";
  }
</script>