/* styles for rendered markdown, see $lib/markup. the html is sanitised to a known
   set of tags and classes, so everything here is addressed by element */
@layer components {
	.markup {
		@apply typography-paragraph-body text-foreground-default;
		overflow-wrap: break-word;
	}

	.markup > :first-child,
	/* the wrapper hides the render's first child from the rule above, so repeat it inside */
	.markup > [data-markup] > :first-child {
		@apply mt-none;
	}

	.markup > :last-child,
	.markup > [data-markup] > :last-child {
		@apply mb-none;
	}

	.markup h1,
	.markup h2,
	.markup h3,
	.markup h4,
	.markup h5,
	.markup h6 {
		@apply mt-xl mb-sm font-medium text-foreground-default;
	}

	.markup h1 {
		@apply border-b border-border-default pb-xs typography-heading-3;
	}

	.markup h2 {
		@apply border-b border-border-default pb-xs typography-heading-4;
	}

	.markup h3 {
		@apply typography-paragraph-large font-semibold;
	}

	.markup h4,
	.markup h5,
	.markup h6 {
		@apply typography-paragraph-regular font-semibold;
	}

	.markup a.anchor {
		@apply ml-xs text-foreground-placeholder no-underline opacity-0 transition-opacity;
	}

	.markup :hover > a.anchor,
	.markup a.anchor:focus-visible {
		@apply opacity-100;
	}

	.markup p,
	.markup blockquote,
	.markup ul,
	.markup ol,
	.markup pre,
	.markup table,
	.markup details {
		@apply my-sm;
	}

	.markup a {
		@apply text-foreground-link-default underline hover:text-foreground-link-hover;
	}

	.markup a.mention {
		@apply font-medium no-underline hover:underline;
	}

	.markup strong {
		@apply font-semibold;
	}

	.markup ul,
	.markup ol {
		@apply pl-xl;
	}

	.markup ul {
		@apply list-disc;
	}

	.markup ol {
		@apply list-decimal;
	}

	.markup li + li {
		@apply mt-2xs;
	}

	.markup li > ul,
	.markup li > ol {
		@apply my-2xs;
	}

	.markup dt {
		@apply mt-sm font-semibold;
	}

	.markup dd {
		@apply pl-xl;
	}

	.markup blockquote {
		@apply border-l-2 border-border-strong pl-md text-foreground-muted;
	}

	.markup code {
		@apply rounded bg-background-inset px-2xs py-3xs font-mono text-[0.875em];
	}

	.markup pre {
		@apply overflow-x-auto rounded border border-border-default bg-background-canvas p-sm;
	}

	/* pre above already has the padding and background, inline code would double it */
	.markup pre code {
		@apply bg-transparent p-none font-mono text-[0.875em] leading-[calc(20/13)];
	}

	.markup :where([data-codeblock]) {
		@apply my-sm flex max-h-150 flex-col overflow-hidden rounded border border-border-default;
	}

	.markup :where([data-codeblock][data-expanded]) {
		@apply max-h-[none];
	}

	.markup :where([data-codeblock]) > pre {
		@apply m-none min-h-0 flex-1 overflow-x-auto overflow-y-hidden rounded-none border-none;
	}

	.markup :where([data-codeblock][data-expanded]) > pre {
		@apply overflow-auto;
	}

	.markup :where([data-codeblock-toolbar]) {
		@apply box-content min-h-8 shrink-0 border-b border-border-default bg-background-default p-xs;
	}

	.markup :where([data-mermaid]) {
		@apply my-sm;
		--pele-bg: var(--color-background-default);
		--pele-fg: var(--color-foreground-default);
		--pele-muted: var(--color-foreground-muted);
		--pele-line: var(--color-foreground-default);
		--pele-surface: var(--color-background-inset);
		--pele-surface-alt: var(--color-background-muted);
		--pele-border: var(--color-border-strong);
		--pele-accent: var(--color-background-info-emphasis);
		--pele-critical: var(--color-foreground-danger);
		--pele-radius: var(--radius-sm);
		--pele-font: var(--font-sans);
		--pele-font-mono: var(--font-mono);
	}

	.markup kbd {
		@apply rounded border border-border-default bg-background-subtle px-1.5 py-3xs font-mono text-[0.875em];
	}

	.markup hr {
		@apply my-xl border-t border-border-default;
	}

	.markup img,
	.markup video {
		@apply inline-block max-w-full;
	}

	.markup img {
		@apply cursor-zoom-in rounded-sm;
	}

	.markup a img {
		@apply cursor-auto;
	}

	.markup table {
		@apply block w-max max-w-full border-collapse overflow-x-auto;
	}

	.markup th,
	.markup td {
		@apply border border-border-default px-sm py-1.5 text-left;
	}

	.markup th {
		@apply bg-background-subtle font-semibold;
	}

	.markup summary {
		@apply cursor-pointer font-medium;
	}

	.markup ul.task-list-container {
		@apply list-none pl-none;
	}

	/* only the outermost list gives up its indent, a nested one still steps in */
	.markup li > ul.task-list-container {
		@apply pl-xl;
	}

	/* the checkbox and its label stay in the inline flow, so a nested list still
	   drops to its own line */
	.markup input[type="checkbox"] {
		@apply mr-2xs translate-y-0.5;
	}

	/* a footnote you jump to lands mid screen rather than up against the top */
	.markup :is(a.footnote-anchor, li.footnote-item)[id] {
		scroll-margin-top: 48vh;
	}

	.markup sup.footnote-ref a {
		@apply no-underline hover:underline;
	}

	.markup hr.footnotes-sep {
		@apply mt-2xl;
	}

	.markup section.footnotes {
		@apply typography-paragraph-small text-foreground-muted;
	}

	/* github style alerts, `> [!NOTE]` and friends */
	.markup .markdown-alert {
		@apply my-sm border-l-2 border-border-default pl-md;
	}

	.markup .markdown-alert-title {
		@apply font-semibold;
	}

	.markup .markdown-alert > :last-child {
		@apply mb-none;
	}

	.markup .markdown-alert-note {
		@apply border-background-info-emphasis;
	}

	.markup .markdown-alert-note .markdown-alert-title {
		@apply text-foreground-info;
	}

	.markup .markdown-alert-tip {
		@apply border-background-success-emphasis;
	}

	.markup .markdown-alert-tip .markdown-alert-title {
		@apply text-foreground-success;
	}

	.markup .markdown-alert-important {
		@apply border-background-info-emphasis;
	}

	.markup .markdown-alert-important .markdown-alert-title {
		@apply text-foreground-info;
	}

	.markup .markdown-alert-warning {
		@apply border-background-warning-emphasis;
	}

	.markup .markdown-alert-warning .markdown-alert-title {
		@apply text-foreground-warning;
	}

	.markup .markdown-alert-caution {
		@apply border-background-danger-emphasis;
	}

	.markup .markdown-alert-caution .markdown-alert-title {
		@apply text-foreground-danger;
	}
}