@import url("./hljs.css");
@import url("./twoslash-shiki.css");

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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 72.22% 50.59%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5% 64.9%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 85.7% 97.3%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings:
      "rlig" 1,
      "calt" 1;
  }
}

@keyframes scroll {
  0% {
    transform: translateX(calc(-480px * 4));
  }
  100% {
    transform: translateX(calc(-480px * 8));
  }
}

.dark {
  color-scheme: dark;
}

body.no-scroll {
  @apply fixed w-full h-full overflow-hidden;
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.docs-container {
  min-height: calc(100vh - 4rem);
}

.docs-container aside,
.blog-container aside {
  max-height: calc(100vh - 10rem);
}

.mobile-docs-navigation aside {
  max-height: calc(100vh - 3rem);
}

.toc details summary::-webkit-details-marker {
  display: none;
}

.prose {
  max-width: calc(100vw - 2rem);
}

.prose code,
.toc code {
  @apply inline-block bg-zinc-100 dark:bg-white/10 border border-zinc-200 dark:border-white/10 px-1 rounded-md font-normal leading-snug;
}
.prose code {
  @apply text-zinc-800 dark:text-zinc-300;
}
.prose h1 code,
.prose h2 code,
.prose h3 code,
.prose h4 code,
.prose h5 code {
  @apply text-black dark:text-white;
}
.prose code::before {
  display: none;
}
.prose code::after {
  display: none;
}
.prose li code {
  @apply !m-0;
}

.prose .code-container {
  @apply p-0;
}
.prose .code-container .line,
.prose pre span[data-line] {
  @apply px-4 text-[#C9D1DA];
}
.shiki code {
  @apply py-4 px-0 min-w-full bg-transparent !important;
}

/* breakpoint sm */
@media (min-width: 640px) {
  .sm\:animate-scroll {
    animation: scroll 50s linear infinite;
  }
  .docs-container {
    min-height: calc(100vh - 6rem);
  }
  .docs-container aside {
    max-height: calc(100vh - 10rem);
  }
  .docs-container .prose,
  .docs-container .pagination {
    max-width: calc(100vw - 4rem);
  }
}

/* breakpoint md */
@media (min-width: 768px) {
  .docs-container .prose,
  .docs-container .pagination {
    max-width: calc(100vw - 21rem);
  }
}

/* breakpoint lg */
@media (min-width: 1024px) {
  .docs-container .prose,
  .docs-container .pagination {
    max-width: calc(100vw - 25rem);
  }
}

/* breakpoint xl */
@media (min-width: 1280px) {
  .docs-container .prose,
  .docs-container .pagination {
    @apply max-w-2xl;
  }
}

/* breakpoint 2xl */
@media (min-width: 1536px) {
  .docs-container .prose,
  .docs-container .pagination {
    @apply max-w-3xl;
  }
}

/* Algolia instant search */
.ais-SearchBox {
  @apply w-full;
}
.ais-SearchBox-form {
  @apply w-full flex;
}
.ais-SearchBox-input {
  @apply grow focus:outline-none bg-transparent px-2 placeholder-zinc-400 dark:placeholder-zinc-500 text-black dark:text-white;
}
.ais-SearchBox-submit,
.ais-SearchBox-reset {
  @apply hidden;
}
.ais-Highlight-highlighted,
.ais-Snippet-highlighted {
  @apply bg-transparent font-semibold text-black dark:text-white underline;
}

.button-hover:hover {
  text-decoration: underline;
}

.tab-hover-underline[data-state="inactive"]:hover {
  text-decoration: underline;
}

.tab-hover[data-state="inactive"]:hover {
  opacity: 0.9;
}

.generic-hover:hover {
  opacity: 0.9;
}

.prose a:not(.active):hover {
  opacity: 0.9;
}

.tweet img {
  margin-top: 0;
  margin-bottom: 0;
}

.shiki {
  max-width: 100%;
}

.shiki.github-light {
  display: block;
}

.shiki.github-dark {
  display: none;
}

pre.shiki div.highlight {
  opacity: 1;
  background-color: #cacad4;
}

.dark .shiki.github-light {
  display: none;
}

.dark .shiki.github-dark {
  display: block;
}

.dark pre.shiki div.highlight {
  opacity: 1;
  background-color: #27272a;
}

.video-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.video-responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
