@import "./docsearch.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  @apply scroll-smooth;
  scroll-padding: 1em;
}

body {
  @apply text-base min-[1400px]:text-base;
  @apply bg-slate-200;
  @apply selection:bg-sky-500;
  @apply selection:text-white;
}
html.dark body {
  @apply bg-purple-950;
  @apply selection:bg-fuchsia-600;
}
html body::before {
  @apply h-lvh w-screen opacity-100;
  @apply contrast-[300%];
  @apply mix-blend-overlay;
  @apply brightness-[100%];
  @apply inset-0;
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-image: radial-gradient(
      circle at 50% 40%,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.35)
    ),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 10000 10000' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
html.dark body::before {
  @apply opacity-100;
  @apply mix-blend-multiply;
  @apply contrast-[150%];
  @apply brightness-[70%];
  @apply inset-0;
}

.DocSearch-Reset {
  @apply text-white;
}

.DocSearch-SearchBar {
  @apply grid grid-cols-[minmax(0,1fr)_auto];
}

.DocSearch-SearchBar form {
  @apply grid grid-cols-[auto_0_minmax(0,1fr)_auto];
}

.monaco-editor,
.monaco-editor .margin {
  @apply rounded-tl-lg;
  @apply rounded-tr-lg;
  @apply md:rounded-tr-none;
  @apply md:rounded-bl-lg;
}
.monaco-scrollable-element {
  @apply rounded-tr-lg;
}

.page-section p {
  @apply mb-8 leading-6 text-slate-800 lg:text-base lg:leading-8 dark:text-slate-200;
}

.page-section p code,
.page-section ul code,
.page-section aside code {
  @apply rounded bg-black/10 p-1 font-mono min-[1400px]:text-base dark:border dark:border-purple-950 dark:bg-black/30 dark:text-fuchsia-300;
}

.page-section > ul {
  @apply mb-8 pl-8 leading-7 text-slate-800 min-[1400px]:text-base;
  @apply dark:text-slate-200;
}

.page-section > ul > li {
  @apply mb-2 last:mb-0;
}

.jump-list a {
  @apply block cursor-pointer rounded-lg border border-slate-300 bg-slate-50 bg-transparent p-4 transition-all duration-300 hover:bg-white hover:shadow-md;
  @apply dark:border-purple-950 dark:bg-black/10 dark:text-gray-200 dark:hover:bg-purple-950;
}

.page-section > ul.jump-list {
  @apply -mt-4 pl-4;
}

.page-section > ul.jump-list a {
  @apply no-underline;
}

.page-section > ul.jump-list a strong {
  @apply underline;
}

.page-section > ul.jump-list > li {
  @apply mb-2;
}

.page-section h3 {
  @apply mb-3 text-lg font-bold dark:text-gray-100;
}
.page-section table {
  @apply mb-10 w-full border-separate border-spacing-0 rounded-lg border border-slate-300 text-slate-700 shadow-sm min-[1400px]:text-base;
  @apply dark:border-purple-950 dark:text-slate-200 dark:shadow-none;
}
.page-section table th {
  @apply bg-gray-50 p-3 text-left text-black;
  @apply dark:bg-black/25 dark:text-gray-100;
}
.page-section table th:first-child {
  @apply rounded-tl-lg;
}
.page-section table th:last-child {
  @apply rounded-tr-lg;
}

.page-section table td {
  @apply bg-gray-50 px-3 py-2 leading-8;
  @apply dark:bg-black/25;
}
.page-section table td:first-child {
  @apply text-black;
}
.page-section table tbody tr td {
  @apply border-t border-slate-300;
  @apply dark:border-purple-950;
}
.page-section table tr:nth-child(odd) td {
  @apply bg-slate-100;
  @apply dark:bg-black/10;
}

.page-section table tr:last-child td:first-child {
  @apply rounded-bl-lg;
}
.page-section table tr:last-child td:last-child {
  @apply rounded-br-lg;
}

.page-section table code {
  @apply me-2 rounded bg-slate-100 p-1 font-mono min-[1400px]:text-base;
  @apply dark:bg-purple-950 dark:text-slate-100;
}
.page-section table tr:nth-child(odd) code {
  background: rgb(225, 236, 247);
  @apply dark:bg-purple-950;
}
.page-section a {
  @apply underline;
}

.monaco-editor .line-numbers {
  opacity: 0.33;
  font-size: 0.9rem;
}
.monaco-editor .line-numbers.active-line-number {
  opacity: 0.66;
}
.monaco-editor .editor-scrollable {
  margin-left: 0.5rem;
}
