@import "@radix-ui/colors/gray";
@import "@radix-ui/colors/gray-dark";

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

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  @apply text-rgray-11 max-h-screen overflow-y-hidden bg-white;
  /* color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb)); */
}

[vaul-drawer-wrapper] {
  @apply bg-rgray-2;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

.sidebar {
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
}

.DrawerContent {
  padding-top: 5vh;
  padding-top: 5dvh;
}

.main-hidden {
  padding-bottom: 20vh;
  padding-bottom: 15dvh;
}

.chat-answer pre  {
  @apply bg-rgray-3 rounded-md border border-rgray-5 p-3 text-sm my-5;
}

.novel-editor pre {
  @apply bg-rgray-3 rounded-md border border-rgray-5 p-4 text-sm text-rgray-11;
}

.chat-answer h1 {
  @apply text-rgray-11 my-5 text-xl font-medium;
}

.chat-answer img {
  @apply rounded-md font-medium my-5;
}

.tippy-box {
  @apply bg-rgray-3 text-rgray-11 border border-rgray-5 rounded-md py-0;
}

.tippy-content #slash-command {
  @apply text-rgray-11 bg-transparent border-none;
}

#slash-command button {
  @apply text-rgray-11 py-2;
}

#slash-command button div:first-child {
  @apply text-rgray-11 bg-rgray-4 border-rgray-5 ;
}

#slash-command button.novel-bg-stone-100 {
  @apply bg-rgray-1;
}

.novel-editor [data-type=taskList] > li {
  @apply my-0;
}

.novel-editor input[type=checkbox] {
  @apply accent-rgray-4 rounded-md;

  background: var(--gray-4) !important;
  border: 1px solid var(--gray-10) !important;
}

.novel-editor .is-editor-empty::before {
  content: 'Press \'/\' for commands' !important;
}

.novel-editor h1 {
  @apply text-2xl;
}

.novel-editor h2 {
  @apply text-xl;
}

.novel-editor h3 {
  @apply text-lg;
}