/**
* Adapted from https://github.com/LemmyNet/lemmy-ui-leptos/blob/63185a1387574690090f350a2b8507222487e389/style/tailwind.css#L125
*/

.markdown-content {
  @apply space-y-4 text-sm overflow-x-hidden;
}

.markdown-content h1 {
  @apply text-2xl font-black;
}

.markdown-content h2 {
  @apply text-2xl font-bold;
}

.markdown-content h3 {
  @apply text-xl font-black;
}

.markdown-content h4 {
  @apply text-xl font-bold;
}

.markdown-content h5 {
  @apply text-lg font-black;
}

.markdown-content h6 {
  @apply text-lg font-bold;
}

.markdown-content code {
  @apply bg-gray-800 text-white font-mono not-italic slashed-zero text-xs py-0.5 px-1 rounded-sm;
}

.markdown-content pre {
  @apply bg-gray-800 text-white font-mono not-italic slashed-zero rounded-md text-xs p-2.5 max-w-full overflow-auto;
}

.markdown-content pre > code {
  @apply py-0 px-0;
}

.markdown-content blockquote {
  @apply ps-1.5 py-2 border-s-4 font-light text-sm italic relative rounded-se-md rounded-ee-md;
}

.markdown-content blockquote p,
.markdown-content blockquote h1,
.markdown-content blockquote h2,
.markdown-content blockquote h3,
.markdown-content blockquote h4,
.markdown-content blockquote h5,
.markdown-content blockquote h6 {
  @apply overflow-hidden text-ellipsis;
}

.markdown-content blockquote code {
  @apply text-xs font-normal;
}

.markdown-content blockquote strong {
  @apply font-semibold;
}

.markdown-content blockquote em {
  @apply not-italic;
}

.markdown-content ul {
  @apply list-disc list-outside ps-6.5 md:ps-8 space-y-1;
}

.markdown-content ol {
  @apply list-decimal list-outside ps-6.5 md:ps-8 space-y-1;
}

.markdown-content a {
  @apply text-brand-secondary;
}

.markdown-content a:hover {
  @apply underline underline-offset-2;
}

.markdown-content img {
  @apply max-w-full h-auto max-h-[40vh];
}

.markdown-content img[title^="emoji"] {
  @apply inline w-16;
}

.markdown-content hr {
  @apply border-border border-t my-3;
}

.markdown-content table {
  @apply w-full table-auto border-collapse border;
}

.markdown-content table th {
  @apply text-left;
}

/* give every cell a 1px accent-colored border */
.markdown-content th,
.markdown-content td {
  @apply border px-2 py-1;
}

/* if you only want horizontal lines between rows */
.markdown-content tbody tr {
  /* default is 1px */
  @apply border-t border-accent;
}

/* Hide details marker unless inside prose */
details > summary::-webkit-details-marker {
  display: none;
}
.markdown-content details > summary::-webkit-details-marker {
  display: revert;
}
