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

:root {
  --shiki-token-punctuation: rgba(0, 0, 0, 0.5);
  --shiki-token-comment: rgba(100, 116, 139, 0.8);
}

.dark {
  --shiki-token-string-expression: hsl(160, 75%, 45%);
  --shiki-token-punctuation: rgba(255, 255, 255, 0.5);
}

/**
 * Navbar on home
 */
.navbar-home {
  @apply bg-slate-800 text-white dark:bg-slate-800;
}

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

.navbar-home nav > a {
  @apply !text-white/80 transition-opacity hover:opacity-70;
}
.navbar-home *:not(.nextra-scrollbar) a,
.navbar-home *:not(.nextra-scrollbar) button {
  @apply !text-inherit;
}

html:not(.dark) .navbar-home .nextra-scrollbar {
  @apply !bg-white;
}

.navbar-home input::placeholder {
  @apply !text-white/50;
}
.navbar-home input {
  @apply !bg-slate-900 !text-white;
}

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

/**
 * Typography
 */

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

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 font-bold;
}

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