@import "tailwindcss/base";
@import "./fonts.css";
@import "./docsearch.css";
@import "./prism.css";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

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

@layer base {
  [data-nextjs-scroll-focus-boundary] {
    display: contents;
  }
}

/* Light mode (default) */
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #e2e8f0;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 10px;
}

*::-webkit-scrollbar-track {
  background: #e2e8f0;
}

*::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border: 3px solid #cbd5e1;
}

/* Dark mode */
.dark * {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #2d3748 #4a5568;
}

.dark *::-webkit-scrollbar {
  /* Chrome, Edge, and Safari */
  width: 10px;
}

.dark *::-webkit-scrollbar-track {
  background: #2d3748; /* slate-800 */
}

.dark *::-webkit-scrollbar-thumb {
  background-color: #4a5568; /* slate-700 */
  border: 3px solid #4a5568;
}

.DocSearch-Input {
  @apply px-11 text-gray-900 bg-white;
}

.dark .DocSearch-Input {
  @apply text-gray-200 bg-gray-800;
}