/* This file exists to provide CSS overrides to styles that exist on the pages
that are generated by deno_doc, the tool that powers the API reference documentation */

#content > main > section + div {
  max-width: 75ch !important;
}

.ddoc .markdown-summary {
  color: hsla(var(--foreground-secondary)) !important;
}

.ddoc .namespaceSection {
  display: block !important;
}

.ddoc .namespaceSection .namespaceItem {
  margin-bottom: 0.75rem !important;
  min-height: 0px !important;
}

.ddoc .namespaceSection .namespaceItem .namespaceItemContent > div {
  color: hsla(var(--foreground-secondary)) !important;
}

@media (max-width: 48rem) {
  .ddoc {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .ddoc > div:not(.categoryPanel) {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .ddoc .markdown-body .highlight {
    margin-left: -1rem !important;
    margin-right: -1rem !important;
  }

  [data-content="example"] .markdown-body .highlight {
    margin: 0px !important;
  }

  .ddoc .markdown-body pre > code:first-child {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Align content with the top of the TOC now that it has no header */

@media (min-width: 768px) {

  #topnav {
    margin-top: 0.25rem !important;
  }
}

.ddoc {
  gap: 2rem !important;
}

/* Adjust spacing to account for removed header */

@media (min-width: 768px) {

  .ddoc .toc .documentNavigation {
    margin-top: 1rem !important;
  }
}

.ddoc .toc .documentNavigation > ul li {
  margin-left: 0.25rem !important;
}

.ddoc .z-50 {
  z-index: 49 !important;
}

.ddoc .usageContent {
  position: relative !important;
  margin-top: 1.5rem !important;
  max-width: 75ch !important;
  border-color: hsla(var(--primary), 0.25) !important;
  background-color: hsla(var(--primary), 0.05) !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;

  > div {
    color: inherit !important;
  }
}

/* Adjust spacing for ref pages that don't have a header above usage */

.ddoc .usageContent:first-of-type {
  margin-top: 0.25rem !important;
}

.ddoc .usageContent > div.markdown-body > pre.highlight {
  border-color: hsla(var(--primary), 0.25) !important;
}

.ddoc .usageContent > h3 {
  position: absolute !important;
  border-radius: 0.25rem !important;
  border-width: 1px !important;
  border-color: hsla(var(--primary), 0.25) !important;
  background-color: hsla(var(--background-primary)) !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  padding-top: 0.125rem !important;
  padding-bottom: 0.125rem !important;
  font-size: 0.75rem !important;
  line-height: 1rem !important;
  top: -50px;
  z-index: 2;
}

.dark .ddoc .usageContent pre {
  background: inherit;
  color: inherit;
}

.ddoc .usageContent > .markdown-body {
  max-width: 100% !important;
}

.ddoc .context_button:hover {
  background-color: hsl(var(--gray-100-hsl) / 0.25) !important;
}

.totop {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  display: block;
  border-radius: 0.375rem;
  border-width: 1px;
  border-color: hsla(var(--background-tertiary));
  background-color: hsla(var(--background-secondary));
  padding: 0.75rem;
  color: transparent;
  animation-name: showToTop;
  animation-duration: 1ms;
  animation-timeline: --showScrollTop;
}

.totop::after {
  display: block;
  height: 1rem;
  width: 1rem;
  border-width: 2px;
  border-left-width: 0px;
  border-top-width: 0px;
  border-color: hsla(var(--primary));
  content: "";
  transform: translate(0, 25%) rotate(225deg);
}

.highlight {
  max-width: 100%;
}

html {
  scroll-timeline: --showScrollTop y;
  scroll-timeline: --showScrollTop vertical;
}

@keyframes showToTop {
  0% {
    opacity: 0;
    transform: translateY(300%);
  }
  10% {
    opacity: 1;
    transform: translateY(0%);
  }
}

.example-block:nth-child(1) .snippet-comment {
  margin-top: 1rem;
}

.examples-content h1 {
  padding-right: 150px; /* width of "edit on github button*/
}

.example-command {
  width: 100%;
  overflow: scroll;
}