@import "tailwindcss";

.prose,
.markdown-body {
  @apply text-foreground max-w-[720px];

  & h1:not(.not-prose h1) {
    @apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl;
  }

  & h2:not(.not-prose h2) {
    @apply mt-12 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0;
  }

  & h3:not(.not-prose h3) {
    @apply mt-12 scroll-m-20 text-2xl font-semibold tracking-tight first:mt-0;
  }

  & h4:not(.not-prose h4) {
    @apply mt-12 scroll-m-20 text-xl font-semibold tracking-tight first:mt-0;
  }

  & h5:not(.not-prose h5) {
    @apply mt-12 scroll-m-20 text-lg font-semibold tracking-tight first:mt-0;
  }

  & h6:not(.not-prose h6) {
    @apply mt-12 scroll-m-20 text-base font-semibold tracking-tight first:mt-0;
  }

  & h1:not(.not-prose h1),
  & h2:not(.not-prose h2),
  & h3:not(.not-prose h3),
  & h4:not(.not-prose h4),
  & h5:not(.not-prose h5),
  & h6:not(.not-prose h6) {
    & + p {
      @apply mt-0;
    }
  }

  & p:not(.not-prose p) {
    @apply leading-[175%] [&:not(:first-child)]:mt-6;
  }

  & li:not(.not-prose li) {
    @apply leading-[175%];
  }

  & a:not(.not-prose a) {
    @apply text-primary font-medium underline underline-offset-4;
  }

  & blockquote:not(.not-prose blockquote) {
    @apply mt-6 border-l-2 pl-6 italic;
  }

  & table:not(.not-prose table) {
    @apply my-6 w-full overflow-y-auto;

    & thead tr {
      @apply even:bg-muted m-0 border-t p-0;
    }

    & th {
      @apply border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right;
    }

    & tbody tr {
      @apply even:bg-muted m-0 border-t p-0;
    }

    & td {
      @apply border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right;
    }
  }

  & ul:not(.not-prose ul) {
    @apply my-6 ml-6 list-disc [&>li]:mt-2;

    & p {
      @apply my-0 inline;
    }
  }

  & ol:not(.not-prose ol) {
    @apply my-6 ml-6 list-decimal [&>li]:mt-2;

    & p {
      @apply my-0 inline;
    }
  }

  & pre:not(.not-prose pre) {
    @apply bg-muted no-scrollbar my-6 overflow-y-auto rounded-md p-4 text-sm;
  }

  & code:not(pre code):not(.not-prose code) {
    @apply bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold;
  }

  & .lead:not(.not-prose .lead) {
    @apply text-muted-foreground text-xl;
  }

  & .large:not(.not-prose .large) {
    @apply text-lg font-semibold;
  }

  & .small:not(.not-prose .small) {
    @apply text-sm leading-none font-medium;
  }

  & .muted:not(.not-prose .muted) {
    @apply text-muted-foreground text-sm;
  }

  & img:not(.not-prose img),
  & picture:not(.not-prose picture),
  & video:not(.not-prose video) {
    @apply my-6 rounded-xl border p-4;
  }

  & picture > img:not(.not-prose picture > img) {
    @apply my-0;
  }

  & kbd:not(.not-prose kbd) {
    @apply bg-muted rounded-md px-1.5 py-0.5 text-xs font-semibold;
  }

  & hr {
    @apply my-10;
  }

  & dl:not(.not-prose dl) {
    @apply my-6;

    & dt {
      @apply mt-6 font-semibold tracking-tight first:mt-0;
    }
  }

  & details:not(.not-prose details) {
    @apply mt-6;

    & summary {
      @apply mt-6 cursor-pointer font-semibold tracking-tight;
    }

    & p {
      @apply [&:first-of-type]:mt-2;
    }
  }

  & mark:not(.not-prose mark) {
    @apply bg-yellow-300;
  }

  & small:not(.not-prose small) {
    @apply text-xs leading-none;
  }
}
