/* Basic editor styles */
.tiptap {
	:first-child {
		margin-top: 0;
	}

	pre {
		background: var(--color-base-200);
		border-radius: 1rem;
		color: var(--color-base-900);
		font-family: 'JetBrainsMono', monospace;
		border: 1px solid var(--color-base-300);
		margin: 1.5rem 0;
		padding: 0.75rem 1rem;

		code {
			background: none;
			color: inherit;
			font-size: 0.8rem;
			padding: 0;
		}

		/* Code styling */
		.hljs-comment,
		.hljs-quote {
			color: var(--color-base-500);
		}

		.hljs-variable,
		.hljs-template-variable,
		.hljs-attribute,
		.hljs-tag,
		.hljs-regexp,
		.hljs-link,
		.hljs-name,
		.hljs-selector-id,
		.hljs-selector-class {
			color: var(--color-accent-600);
		}

		.hljs-number,
		.hljs-meta,
		.hljs-built_in,
		.hljs-builtin-name,
		.hljs-literal,
		.hljs-type,
		.hljs-params {
			color: oklch(from var(--color-accent-600) l c calc(h + 30));
		}

		.hljs-string,
		.hljs-symbol,
		.hljs-bullet {
			color: oklch(from var(--color-accent-600) l c calc(h + 60));
		}

		.hljs-title,
		.hljs-section {
			color: oklch(from var(--color-accent-700) l c calc(h + 15));
		}

		.hljs-keyword,
		.hljs-selector-tag {
			color: oklch(from var(--color-accent-700) l c calc(h + 45));
		}

		.hljs-emphasis {
			font-style: italic;
		}

		.hljs-strong {
			font-weight: 700;
		}
	}
}

.dark .tiptap {
	pre {
		background: var(--color-base-900);
		color: var(--color-base-200);
		border: 1px solid var(--color-base-800);

		code {
			background: none;
			color: inherit;
			font-size: 0.8rem;
			padding: 0;
		}

		/* Code styling */
		.hljs-comment,
		.hljs-quote {
			color: var(--color-base-400);
		}

		.hljs-variable,
		.hljs-template-variable,
		.hljs-attribute,
		.hljs-tag,
		.hljs-regexp,
		.hljs-link,
		.hljs-name,
		.hljs-selector-id,
		.hljs-selector-class {
			color: var(--color-accent-400);
		}

		.hljs-number,
		.hljs-meta,
		.hljs-built_in,
		.hljs-builtin-name,
		.hljs-literal,
		.hljs-type,
		.hljs-params {
			color: oklch(from var(--color-accent-400) l c calc(h + 30));
		}

		.hljs-string,
		.hljs-symbol,
		.hljs-bullet {
			color: oklch(from var(--color-accent-400) l c calc(h + 60));
		}

		.hljs-title,
		.hljs-section {
			color: oklch(from var(--color-accent-300) l c calc(h + 15));
		}

		.hljs-keyword,
		.hljs-selector-tag {
			color: oklch(from var(--color-accent-300) l c calc(h + 45));
		}

		.hljs-emphasis {
			font-style: italic;
		}

		.hljs-strong {
			font-weight: 700;
		}
	}
}
