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

:root {
  --color-text-primary: #0073e6;
  --nextra-bg: 255, 255, 255;
  --docsearch-text-color: black;
  --logo-color: #008fd6;
}

.dark {
  --nextra-bg: 17, 17, 17;
  --logo-color: #70d1ff;
}

/**
 * Navbar
 */
.navbar-home {
  @apply bg-slate-850 text-white dark:bg-slate-850;
  --logo-color: #70d1ff;
}

.navbar-home .nextra-scrollbar > a {
  @apply !text-white;
}

/* Hamburger menu */
.navbar-home svg.open {
  @apply !text-slate-900 dark:!text-white;
}

.navbar-home nav > a {
  @apply !text-white transition-opacity hover:opacity-70;
}

.navbar-home .nextra-nav-container-blur {
  display: none;
}

.nextra-sidebar-container {
  @apply bg-white dark:bg-black md:bg-transparent md:dark:bg-transparent;
}

.nextra-nav-container > nav > div:nth-child(2) {
  @apply py-5;
}

/**
 * TOC
 */

.nextra-toc {
  .nextra-code {
    white-space: nowrap;
  }
}

.nextra-menu-mobile a {
  @apply flex-wrap;
}

/**
 * Typography
 */

.nextra-content {
  h1 {
    @apply leading-[1.25em];
  }

  h2 {
    @apply text-2xl;
  }

  h3 {
    @apply text-xl;
  }

  figure {
    @apply my-8 flex flex-col items-center;
  }

  code {
    white-space: pre;
  }

  figure .nextra-code-block {
    @apply w-full;
  }
  figure .nextra-code-block > pre {
    @apply mb-0;
  }

  figcaption {
    @apply mt-4 text-center text-sm text-slate-500;
  }

  summary {
    @apply flex-wrap font-bold !pr-8;
  }
  summary > code {
    margin: 0 0.3em;
  }

  details > div > div {
    @apply pt-4 pl-7 pr-3;
  }
  details > div > div:last-child {
    @apply mb-4;
  }

  a[target='_blank'] {
    @apply whitespace-nowrap;
  }
  a[target='_blank']::after {
    content: '';
    @apply inline-block w-3 h-3 ml-1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: currentColor;
    mask: url('/external-link.svg');
  }

  *:hover > .subheading-anchor {
    @apply opacity-100;
  }

  /* Fix underline of tabs */
  [role='tab'] {
    @apply !mb-0;
  }
  [role='tablist'] {
    @apply !pb-0;
  }
}
