@import "./toc.css" layer(docgen);
@import "./search.css" layer(docgen);

@layer docgen {
  @view-transition {
    navigation: auto;
  }

  ::view-transition,
  ::view-transition-group(*),
  ::view-transition-image-pair(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    pointer-events: none;
  }

  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }

  :root {
    view-transition-name: none;
  }

  :root {
    --ui-primary: light-dark(#111111, #ffffff);
    --border-color: var(--ui-neutral-200);

    scroll-padding-top: 70px;
  }

  body {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 100svh;
    width: 100vw;
    background-color: var(--ui-background-color);
    overflow-x: clip;

    > header {
      view-transition-name: site-header;

      display: grid;
      grid-template-columns: 40px 1fr;
      align-items: center;
      width: inherit;

      column-gap: 1rem;
      padding: 0.5rem 1rem;
      background-color: var(--ui-background-color);

      position: sticky;
      top: 0;
      z-index: 1;

      border-bottom: 1px solid var(--border-color);

      @media (width < 768px) {
        row-gap: 0.5rem;

        nav {
          grid-row: 2;
          grid-column: 1 / -1;
        }
      }

      @media (width >= 768px) {
        grid-template-columns: auto 1fr auto;
      }

      img {
        width: 40px;
      }

      aside {
        display: flex;
        column-gap: 1rem;

        @media (width < 768px) {
          justify-self: end;
        }
      }

      a[aria-current="page"] {
        background-color: var(--ui-neutral-200);
      }
    }

    > main {
      --sidebar-width: 220px;
      --toc-width: 220px;

      position: relative;

      display: grid;
      grid-template-columns: 1fr;
      align-items: start;

      @media (width >= 768px) {
        &:has(> nav) {
          grid-template-columns: var(--sidebar-width) 1fr;

          > section {
            border-left: 1px solid var(--border-color);
          }
        }

        &:has(> aside) {
          grid-template-columns: 1fr var(--toc-width);
        }

        &:has(> nav):has(> aside) {
          grid-template-columns: var(--sidebar-width) 1fr var(--toc-width);
        }
      }

      /* sidebar */
      > nav {
        view-transition-name: sidebar;

        padding: 1rem 0.5rem;
        text-transform: capitalize;

        position: sticky;
        top: 55px;
        z-index: 1;

        @media (width < 768px) {
          display: none;
        }

        a[aria-current="page"] {
          background-color: var(--ui-neutral-200);
        }
      }

      /* mobile menu button */
      > button {
        position: absolute;
        top: 0.5rem;
        left: 0.5rem;

        @media (width >= 768px) {
          display: none;
        }
      }

      > section {
        padding: 2.5rem 0.5rem;
        height: 100%;
        max-width: 100vw;

        @media (width >= 768px) {
          padding-inline: 3rem;
        }

        > div {
          view-transition-name: main-content;

          max-width: 800px;
          margin-inline: auto;
        }
      }

      > aside {
        padding: 3rem 0.5rem;

        position: sticky;
        top: 55px;
        z-index: 1;

        @media (width < 768px) {
          display: none;
        }
      }
    }
  }

  .prose h2 {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
    scroll-margin-top: calc(var(--header-h) + 1rem);
  }

  .code-filename {
    --shiki-light: #24292e;
    --shiki-dark: #e1e4e8;
    --shiki-light-bg: #fff;
    --shiki-dark-bg: #24292e;

    display: block;
    padding: 0.75rem 0.75rem;
    font-size: 0.9rem;
    font-family: monospace;
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: 8px 8px 0 0;

    color: var(--ui-neutral-400);
  }

  .code-filename + .shiki {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: 0;
  }

  .shiki {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 0px;
    align-items: start;

    padding: 1rem 1.25rem 1rem 2.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    counter-reset: line;
    overflow-x: auto;

    font-size: 0.9rem;
    line-height: 1.65;

    .copy-code {
      position: sticky;
      top: 0.5rem;
      right: 0.5rem;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 0;

      color: var(--ui-neutral-600);
    }

    .line {
      position: relative;
      counter-increment: line;

      &::before {
        content: counter(line);
        position: absolute;
        left: -2.25rem;
        width: 1.75rem;
        text-align: right;
        color: var(--ui-neutral-400);
        user-select: none;
        pointer-events: none;
      }
    }
  }

  .shiki,
  .shiki span {
    color: var(--shiki-light);
    background-color: var(--shiki-light-bg);
  }

  .code-filename {
    background-color: var(--shiki-light-bg);
  }

  @media (prefers-color-scheme: dark) {
    [data-color-scheme="revert-layer"] .shiki,
    [data-color-scheme="revert-layer"] .shiki span {
      color: var(--shiki-dark);
      background-color: var(--shiki-dark-bg);
    }

    [data-color-scheme="revert-layer"] .code-filename {
      background-color: var(--shiki-dark-bg);
    }
  }

  [data-color-scheme="dark"] .shiki,
  [data-color-scheme="dark"] .shiki span {
    color: var(--shiki-dark);
    background-color: var(--shiki-dark-bg);
  }

  [data-color-scheme="dark"] .code-filename {
    background-color: var(--shiki-dark-bg);
  }
}