styles.css

@tailwind base;
@tailwind components;
@tailwind utilities;

[id] {
  scroll-margin-top: 4rem;
}

.markdown-body {
  h2,
  h3,
  h4,
  h5,
  h6 {
    .anchor-end {
      opacity: 0;
      transition: opacity 0.2s;
      text-decoration: underline;
      text-underline-offset: 4px;
      font-weight: normal;
    }

    &:hover .anchor-end {
      opacity: 1;
    }
  }

  details {
    @apply rounded border border-offblack p-8 bg-pink-100;

    &[open] summary {
      @apply pb-4 mb-4 border-b border-offblack;
    }
  }
}

body:not(:has(.ddoc)) {
  pre:has(code.highlight),
  pre.highlight:has(code) {
    @apply p-8 max-sm:-mx-4;
    @apply max-sm:rounded-none !important;
  }

  pre:has(code.highlight):hover + .copyButton,
  pre.highlight:has(code):hover + .copyButton {
    @apply block;
  }

  .copyButton {
    @apply hidden absolute top-2 right-2 p-1 rounded;

    &:hover {
      @apply block bg-gray-300;
    }
  }
}

.markdownBlockTitle + div > pre:has(code.highlight) {
  @apply rounded-t-none;
}

.markdownBlockTitle {
  background-color: var(--bgColor-muted, var(--color-canvas-subtle));
  @apply px-8 py-4 max-sm:-mx-4 sm:rounded-t-md border-b border-gray-000 text-sm font-semibold;
}

.markdown-body h2:hover .anchor-end {
  opacity: 1;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter/Inter-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter/Inter-Italic.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/inter/Inter-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/inter/Inter-SemiBoldItalic.woff2") format("woff2");
}

:root {
  font-feature-settings: "cv05" on, "cv08" on, "cv09" on, "ss01" on, "ss08" on;
}

.searchbox-module_searchbox__TygrP {
  border: var(--ifm-toc-border-color) 1px solid;
}

.searchbox-module_searchbox_container__kkcyK {
  backdrop-filter: blur(6px) brightness(60%);
}

@media (max-width: 1023px) {
  .searchbutton-module_searchbutton__keys__qckL6 {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .searchbutton-module_searchbutton__gg7JJ {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
}

.markdown-body .admonition {
  @apply p-6 pb-2 shadow-sm rounded-xl border-l-4;
}

.markdown-body .admonition .title {
  @apply font-bold uppercase flex items-center;
}

.markdown-body .admonition .title::before {
  content: "";
  @apply inline-block size-5 mr-2;
}

.markdown-body .admonition.info {
  @apply bg-blue-50 border-blue-500 text-blue-700;
}

.markdown-body .admonition.caution {
  @apply bg-yellow-50 border-yellow-500 text-yellow-900 fill-yellow-900;
}

.markdown-body .admonition.tip {
  @apply bg-green-50 border-green-600 text-green-800;
}

.markdown-body .admonition.info .title::before {
  /* circle exclamation mark */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgb(29 78 216)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="8"/></svg>');
}

.markdown-body .admonition.note .title::before {
  /* circle exclamation mark */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgb(29 78 216)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="8"/></svg>');
}

.markdown-body .admonition.caution .title::before {
  /* exclamation mark in a filled warning triangle */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgb(113 63 18)"><path fill-rule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd" /></svg>');
}

.markdown-body .admonition.tip .title::before {
  /* lightbulb svg */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgb(22 163 74)" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" /></svg>');
}

.deno-tabs {
  @apply mb-4;
}

.deno-tabs > ul.deno-tabs-buttons {
  @apply flex flex-wrap list-none p-0 m-0 mb-2;
}

.deno-tabs > ul.deno-tabs-buttons > li {
  @apply m-0 m-0;
}

.deno-tabs > ul.deno-tabs-buttons > li > button {
  @apply inline-block px-4 py-2 text-sm font-semibold text-gray-700 rounded-t-md hover:bg-gray-100 border-b-2 border-transparent;
}

.deno-tabs > ul.deno-tabs-buttons > li > button[data-active="true"] {
  @apply border-blue-700 text-blue-700;
}

.deno-tabs > div.deno-tabs-content > div {
  @apply hidden;
}

.deno-tabs > div.deno-tabs-content > div[data-active="true"] {
  @apply block;
}

.doc-pagination-label-next::after {
  content: " »";
}

.doc-pagination-label-prev::before {
  content: "« ";
}