@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;

.wp-block-jetpack-markdown__placeholder {
	opacity: 0.62; // See https://github.com/WordPress/gutenberg/blob/db7decd27f7c476684bc8edde381ffab4c916cb2/packages/block-editor/src/components/rich-text/style.scss#L72
	pointer-events: none;
}

// @TODO: Remove these styles when Gutenberg core styles are more generic
.block-editor-block-list__block {

	.wp-block-jetpack-markdown__preview {
		min-height: 1.8em;
		line-height: 1.8;

		> * {
			margin-top: 32px;
			margin-bottom: 32px;
		}

		// See https://github.com/WordPress/gutenberg/blob/db7decd27f7c476684bc8edde381ffab4c916cb2/packages/block-library/src/heading/editor.scss#L12-L35
		h1,
		h2,
		h3 {
			line-height: 1.4;
		}

		h1 {
			font-size: 2.44em;
		}

		h2 {
			font-size: 1.95em;
		}

		h3 {
			font-size: 1.56em;
		}

		h4 {
			font-size: 1.25em;
			line-height: 1.5;
		}

		h5 {
			font-size: 1em;
		}

		h6 {
			font-size: 0.8em;
		}

		hr {
			border: none;
			border-bottom: 2px solid gb.$gray-100;
			margin: 2em auto;
			max-width: 100px;
		}

		p {
			line-height: 1.8;
		}

		blockquote {
			border-left: 4px solid gb.$black;
			margin-left: 0;
			margin-right: 0;
			padding-left: 1em;

			p {
				line-height: 1.5;
				margin: 1em 0;
			}
		}

		ul,
		ol {
			margin-left: 1.3em;
			padding-left: 1.3em;
		}

		li {

			p {
				margin: 0;
			}
		}

		// See https://github.com/WordPress/gutenberg/blob/db7decd27f7c476684bc8edde381ffab4c916cb2/packages/block-editor/src/components/rich-text/style.scss#L28-L39
		code,
		pre {
			color: gb.$gray-900;
			font-family: gb.$editor-html-font;
		}

		code {
			background: gb.$gray-100;
			border-radius: 2px;
			font-size: inherit; // This is necessary to override upstream CSS.
			padding: 2px;
		}

		pre {
			border-radius: 4px;
			border: 1px solid gb.$gray-200;
			font-size: gb.$text-editor-font-size;
			padding: 0.8em 1em;

			code {
				background: transparent;
				padding: 0;
			}
		}

		table {
			overflow-x: auto;
			border-collapse: collapse;
			width: 100%;
		}

		thead,
		tbody,
		tfoot {
			width: 100%;
			min-width: 240px;
		}

		td,
		th {
			padding: 0.5em;
			border: 1px solid currentColor;
		}
	}
}

.wp-block-jetpack-markdown {

	.wp-block-jetpack-markdown__editor {
		font-family: gb.$editor-html-font;
		font-size: gb.$text-editor-font-size;
		color: gb.$gray-900;

		&:focus {
			border-color: transparent;
			box-shadow: 0 0 0 transparent;
		}
	}
}
