@import '../../shared/styles/gutenberg-colors.scss';
@import '../../shared/styles/gutenberg-variables.scss';

.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 all these specific styles when related Gutenberg core styles become more generic
.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 $dark-gray-100;
			margin: 2em auto;
			max-width: 100px;
		}

		p {
			line-height: 1.8;
		}

		blockquote {
			border-left: 4px solid $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: $dark-gray-800;
			font-family: $editor-html-font;
		}

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

		pre {
			border-radius: 4px;
			border: 1px solid $light-gray-500;
			font-size: $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: $editor-html-font;
		font-size: $text-editor-font-size;

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