@import "tailwindcss";
@import "../../../styles/globals.css";

:root {
  --sh-class: rgb(163 163 163);
  --sh-identifier: rgb(10 10 10);
  --sh-sign: rgb(163 163 163);
  --sh-property: rgb(10 10 10);
  --sh-entity: rgb(10 10 10);
  --sh-jsxliterals: rgb(163 163 163);
  --sh-string: rgb(163 163 163);
  --sh-keyword: rgb(10 10 10);
  --sh-comment: #a19595;
}

.dark {
  --sh-class: rgb(115 115 115);
  --sh-identifier: rgb(229 229 229);
  --sh-sign: rgb(115 115 115);
  --sh-property: rgb(229 229 229);
  --sh-entity: rgb(229 229 229);
  --sh-jsxliterals: rgb(115 115 115);
  --sh-string: rgb(115 115 115);
  --sh-keyword: rgb(229 229 229);
  --sh-comment: #a19595;
}

.prose {
  color: hsl(var(--foreground));

  --tw-prose-body: hsl(var(--foreground));
  --tw-prose-headings: hsl(var(--foreground));
  --tw-prose-lead: hsl(var(--foreground));
  --tw-prose-links: hsl(var(--foreground));
  --tw-prose-bold: hsl(var(--foreground));
  --tw-prose-counters: hsl(var(--foreground));
  --tw-prose-hr: hsl(var(--foreground));

  a {
    @apply decoration-foreground/30 contrast-more:decoration-foreground;
  }

  p {
    @apply mb-4;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply mb-4 font-medium text-base;
  }

  pre {
    @apply mb-4 relative p-0 rounded-lg bg-transparent;
    line-height: 1;
  }

  code::-webkit-scrollbar {
    @apply rounded-lg overflow-hidden w-1 h-1;
  }

  code::-webkit-scrollbar-thumb {
    @apply bg-muted-foreground/50 contrast-more:bg-foreground hover:bg-muted-foreground/70 rounded-lg;
  }

  code::before,
  code::after {
    content: none;
  }

  p > code {
    @apply bg-muted border border-foreground/10 rounded-lg p-1 text-sm;
  }

  p > code span {
    @apply !text-foreground font-normal;
  }

  pre > code {
    @apply block text-sm scroll-p-3 overflow-x-auto rounded-lg border border-foreground/10 bg-white dark:bg-muted/50 p-3 text-muted-foreground;

    font-family: var(--font-mono);
  }

  ol {
    @apply pl-4;
  }

  em,
  i,
  cite,
  strong {
    @apply italic font-serif font-normal text-[17px];
  }

  img {
    @apply border border-foreground/10 relative;
  }

  img {
    @media (min-width: 768px) {
      display: block;
      width: calc(650px + 120px);
      height: auto;
      margin-left: calc(-60px);
      max-width: none;
      margin-right: calc(-60px);
    }
  }
}
