deno_doc 0.198.0

@tailwind components;
@tailwind utilities;

summary::-webkit-details-marker {
  @apply hidden;
}

a {
  word-wrap: break-word;
}

& {
  --ddoc-selection-border-width: 2px;
  --ddoc-selection-border-color-default: #d6d3d1;
  --ddoc-selection-selected-border-color: #2564eb;
  --ddoc-selection-selected-bg: #056cf00c;
  --ddoc-selection-padding: 9px 15px;
  --ddoc-usage-active-bg: #ebf6ff;

  &:is(.dark *) {
    --ddoc-usage-active-bg: theme("colors.stone.800");
  }
}

.link {
  @apply text-blue-600 transition duration-75 dark:text-blue-400;
}

.link:hover {
  @apply text-blue-400 dark:text-blue-500;
}

.anchor {
  @apply hidden float-left leading-none text-stone-600 ml-[-24px] p-1 pr-1 pt-1
    top-0 bottom-0 dark:text-stone-400;
}

.anchorable {
  @apply relative scroll-mt-16;

  &:hover .anchor {
    @apply block;
  }
}

.deprecated {
  > div:first-child {
    @apply py-1 text-red-500 flex gap-1 items-center dark:text-red-400;

    > span {
      @apply font-semibold leading-6;
    }
  }

  > div:nth-child(2) {
    @apply ml-1 pl-2 border-l-4 border-red-300 dark:border-red-600;
  }
}

.symbolSubtitle {
  @apply space-y-0.5 text-sm leading-4;

  .type {
    @apply text-stone-400 italic dark:text-stone-500;
  }
}

.docEntry {
  @apply mb-4 space-y-2;

  &:hover .sourceButton {
    @apply flex;
  }

  .docEntryHeader {
    @apply flex justify-between items-start md:text-base;

    > div {
      @apply break-words;
    }
  }
}

.section {
  @apply space-y-2 mb-2 scroll-mt-16 max-w-prose;

  > div:first-child {
    @apply space-y-2;

    > h2 {
      @apply text-xl leading-6 font-semibold py-1 mb-4;
    }

    /* markdown */
    > div {
      @apply text-base max-w-[75ch];
    }
  }
}

.namespaceSection {
  @apply space-y-3 mt-4 max-w-prose;

  .namespaceItem {
    @apply flex gap-x-2.5 lg:pr-4;

    .docNodeKindIcon {
      @apply w-auto flex-col justify-start gap-1;

      > * + * {
        @apply ml-0 -mt-0.5;
      }
    }
    &[aria-label="deprecated"] {
      @apply opacity-60;

      .namespaceItemContent > a {
        @apply line-through decoration-2 decoration-stone-500/70 text-stone-500
          dark:text-stone-400;
      }
    }

    .namespaceItemContent {
      flex: 1;
      width: 0;

      > a, .namespaceItemContentSubItems > li > a {
        @apply block font-mono underline decoration-stone-300
          dark:decoration-stone-500 hover:no-underline;

        span:first-child {
          @apply leading-none break-all font-medium;
        }
        span:last-child {
          @apply font-light opacity-85;
        }
      }

      .namespaceItemContentTypeInfo {
        @apply italic text-xs ml-2 text-stone-600 dark:text-stone-400;
      }

      .namespaceItemContentDoc {
        @apply text-sm leading-5 text-stone-600 dark:text-stone-400;
      }

      > a .namespaceItemContentDoc {
        @apply mt-2;
      }

      .namespaceItemContentSubItems {
        @apply space-y-3 text-sm mt-3 ml-3;

        .namespaceItemContentDoc {
          @apply mt-1;
        }
      }
    }
  }
}

.td-kw {
  @apply text-cyan-500;
}
.td-lit {
  @apply text-orange-500;
}
.td-str {
  @apply text-green-500;
}
.td-ref {
  @apply text-blue-500;
}
.td-tp {
  @apply text-yellow-500;
}
.td-op {
  @apply text-pink-500;
}

.symbolGroup {
  @apply space-y-12;

  article {
    @apply space-y-5;

    .symbolTitle {
      @apply flex justify-between items-start;

      &:hover .sourceButton {
        @apply flex;
      }

      > div:first-child {
        @apply font-medium space-y-1;
      }
    }
  }
}

.docNodeKindIcon {
  @apply inline-flex justify-end shrink-0;

  div {
    @apply rounded-full size-4 font-medium text-xs leading-4 text-center
      align-middle shrink-0 select-none font-mono;
  }

  > * + * {
    @apply -ml-1.5;
  }
}

.example-header {
  @apply font-bold text-lg mb-3;
}

.toc {
  h3 {
    @apply font-bold text-lg mb-3;
  }

  > div {
    @apply space-y-5;
  }

  .topSymbols {
    @apply space-y-3 text-sm;

    ul {
      @apply list-none space-y-2.5;

      li {
        @apply block;

        a {
          @apply flex items-center gap-2;

          > span {
            @apply block w-full overflow-hidden whitespace-nowrap text-ellipsis
              -my-0.5 -ml-1 py-0.5 pl-1 rounded;
          }
        }
      }
    }

    > a:hover {
      @apply underline;
    }
  }

  .documentNavigation {
    @apply max-sm:hidden text-sm space-y-3;

    > ul {
      @apply space-y-2 block overflow-y-auto flex-grow;

      > li {
        @apply mt-0.5 mx-3;
      }

      li {
        &:has(> ul) {
          @apply mt-0 !important;
        }

        &:has(> a) {
          @apply pb-0 !important;
        }
      }

      ul {
        @apply ml-3.5 space-y-2 text-gray-1 text-[0.8rem] leading-none
          dark:text-gray-400;

        li {
          @apply mt-1 !important;

          a {
            @apply hover:text-black p-1 dark:hover:text-white;
          }
        }
      }
    }

    a {
      @apply hover:underline block overflow-hidden whitespace-nowrap
        text-ellipsis;
    }
  }
}

.usages {
  nav {
    @apply flex items-center flex-row gap-2 mb-3 font-semibold;

    details {
      > summary {
        @apply flex gap-1 select-none cursor-pointer rounded border
          border-gray-300 py-2 px-3 dark:border-gray-600;
      }

      > div {
        @apply md:relative;

        > div {
          @apply absolute max-md:inset-x-0 mt-1.5 p-2 block z-30 md:w-48
            bg-white md:rounded border max-md:border-x-0 border-gray-300
            dark:border-gray-600;

          label {
            @apply flex items-center gap-2 cursor-pointer select-none px-2 py-1
              leading-normal rounded-sm hover:bg-gray-50 dark:hover:bg-gray-800;
          }
        }
      }
    }
  }
}

.usageContent {
  > h3 {
    @apply font-bold text-lg mb-3;
  }

  /* markdown */
  > div {
    @apply text-xs text-gray-400 dark:text-gray-500;

    p {
      @apply m-0;
    }
  }

  pre.highlight {
    @apply border border-gray-300 max-md:border-x-0 bg-white
      dark:border-gray-600 dark:bg-gray-800;

    > code:first-child {
      @apply pt-2 pr-10 pb-2 pl-2;
      scrollbar-width: thin;
    }

    .copyButton {
      @apply top-1 right-2 opacity-0;
    }

    &:hover .copyButton {
      @apply opacity-100;
    }
  }
}

pre.highlight {
  .copyButton {
    @apply absolute opacity-0 top-3 right-4;
  }

  &:hover .copyButton {
    @apply opacity-60 hover:opacity-100;
  }
}

#categoryPanel {
  @apply pt-3 text-sm;

  ul {
    @apply space-y-2 overflow-y-auto;

    li {
      @apply ml-1 mr-3;

      a {
        @apply hover:underline block overflow-hidden whitespace-nowrap
          text-ellipsis py-1.5 px-3.5;
      }
    }
  }
}

.contextLink {
  @apply text-contextLink/80 underline decoration-[1.5px]
    decoration-contextLink/50 underline-offset-[0.15em] hover:text-contextLink
    hover:decoration-contextLink dark:text-contextLinkDark/70
    dark:hover:text-contextLinkDark;
  text-decoration-skip-ink: auto;
}

.breadcrumbs {
  @apply break-all inline-flex flex-wrap gap-1 items-center;

  > li:first-child {
    @apply text-2xl leading-none font-bold;
  }

  li {
    @apply inline text-lg lg:text-xl leading-[0.9em];
  }
}

.see {
  @apply list-disc list-inside;

  > li * {
    display: inline-block;
  }
}

.sourceButton, .copyButton {
  @apply z-10 rounded no-underline p-1.5 cursor-pointer bg-inherit
    hover:bg-stone-200 leading-[0] dark:hover:bg-stone-800 transition
    duration-75;
}

.sourceButton {
  @apply flex-row gap-2 items-center relative mr-2 hidden;

  &:before {
    content: "View code";
    @apply hidden md:block text-xs leading-none;
  }
}