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

@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');

@import url('https://cdn.jsdelivr.net/npm/katex@0.16.15/dist/katex.min.css');

@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css');

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;

    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;

    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;

    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;

    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;

    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 0 0% 8.5%;
    --foreground: 0 0% 85%;

    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;

    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;

    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;

    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;

    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;

    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
  }

  /* This rule makes sure the content color is white in dark mode for md-editor-preview elements that are not pre, code, or inside pre */
  .dark .md-editor-preview *:not(pre):not(code):not(pre *) {
    color: white;
  }

  /* New rule for inline code to inherit color */
  .md-editor-preview code:not(pre code) {
    color: inherit;
  }

  /* Ensure background for inline code is transparent */
  .md-editor-preview code:not(pre code) {
    background-color: transparent;
  }

  @media print {
    .md-editor-preview *:not(pre):not(code):not(pre *) {
      color: black;
    }
    /* Ensure inline code is black when printing */
    .md-editor-preview code:not(pre code) {
      color: black;
    }
  }

  .ck-content p,
  ul,
  ol {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
}

@layer base {
  /* Apply border to all elements except <pre> tags, <code> tags, and anything inside <pre> */
  *:not(pre):not(code):not(pre *) {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

body,
.md-editor-preview {
  --sb-track-color: #111619;
  --sb-thumb-color: rgb(94, 94, 94);
  --sb-size: 6px;
  scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
  scrollbar-gutter: stable;
}

body::-webkit-scrollbar,
.md-editor-preview::-webkit-scrollbar {
  width: var(--sb-size) !important;
}

.md-editor-preview {
  scrollbar-gutter: stable;
}

body::-webkit-scrollbar-track,
.md-editor-preview::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 0px;
}

#content-editor-toolbar::-webkit-scrollbar,
.md-editor-preview::-webkit-scrollbar {
  width: 1px;
  height: 10px;
}

/* Track */
#content-editor-toolbar::-webkit-scrollbar-track,
.md-editor-preview::-webkit-scrollbar-track {
  background-color: #eeeeee;
}

/* Handle */
#content-editor-toolbar::-webkit-scrollbar-thumb,
.md-editor-preview::-webkit-editor-scrollbar-thumb {
  background: rgb(64, 64, 64);
  cursor: pointer;
}

body::-webkit-scrollbar-thumb,
.md-editor-preview::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 2px;
}

iframe {
  width: 100%;
  height: auto !important;
  aspect-ratio: 16/9;
}

.tex-content {
  font-family: 'KaTeX_Main';
  font-size: auto;
}

.katex-html {
  font-family: 'KaTeX_Math';
}

.monaco-editor {
  padding-top: 16px;
}

.ck-content {
  width: 100% !important;
}

.ck-sticky-panel__content {
  border: 0px !important;
}

.ck-toolbar * {
  font-family: 'DM Sans', sans-serif !important;
}

.code-page-break {
  height: 0px !important;
  position: absolute;
  pointer-events: none;
  user-select: none;
  max-height: 90%;
  /* overflow: hidden; */
}

.ck-content h2 {
  font-size: 36px !important;
  line-height: 92% !important;
}
.ck-content h3 {
  font-size: 30px !important;
  line-height: 92% !important;
}
.ck-content h4 {
  font-size: 24px !important;
  line-height: 92%x !important;
}

.dark .md-editor-preview *:not(pre):not(code):not(pre *) {
  /* color: white !important; */
}

@media print {
  .dark .md-editor-preview *:not(pre):not(code):not(pre *) {
    /* color: black !important; */
  }
}

p:has(.image-inline) {
  text-align: center;
}

img {
  margin-left: auto;
  margin-right: auto;
  /* @apply shadow-lg; */
}

@media print {
  .ck-editor__top {
    display: none;
  }

  ::-webkit-scrollbar {
    display: none;
  }
  .code-page-break {
    position: relative;
  }
}

code {
  font-family: 'Google Sans Code', monospace !important;
}
