.el-node-markdown {
	padding-top: 16px;

	.heading-container {
		display: grid;
		grid-template-columns: min-content 1fr;
		grid-gap: 12px;
		white-space: nowrap;
		align-items: center;
		margin-bottom: 16px;

		&:first-child {
			margin-top: 32px !important;
			.line {
				display: none !important;
			}
		}

		.line {
			border-bottom: 1px solid var(--line-color);
		}

		&[data-heading="1"] {
			margin-top: 64px;
			margin-bottom: 32px;
		}

		&[data-heading="2"],
		&[data-heading="3"] {
			margin-top: 16px;

			.line {
				display: none;
			}
		}

		h1, h2, h3 {
			margin: 0;
		}

		h1 {
			border-bottom: 1px solid #ccc;

			display: inline-block;
			font-size: 1.25em;

			clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);

			color: #fff;
			background-color: var(--color1);
			padding: 4px 24px 4px 16px;

		}

		h2 {
			font-size: 1.25em;
			color: var(--color1);
		}

		h3 {
			&:before {
				font-size: 1.0em;
				content: "> ";
				color: var(--color1);
			}
		}

	}

	a {
		color: var(--color1);
	}

	p {
		line-height: 150%;
	}

	img {
		max-width: var(--thumbnail-width);
		max-height: var(--thumbnail-height);
	}

	table {
		border: 1px solid #ccc;
		border-collapse: collapse;
		margin-top: 16px;

		th {
			text-align: left;
			padding: 8px;
		}

		th,
		td {
			border: 1px solid #ccc;
			padding: 8px;
		}
	}

	code {
		background-color: #f8f8f8;
		border: 1px solid #ccc;
		padding: 2px 4px;
		border-radius: 4px;

		&.copy {
			border: var(--markdown-copy-border);
			background-color: var(--markdown-copy-background);
		}
	}

	pre {
		background-color: #f8f8f8;
		border: 1px solid #ccc;
		padding: 8px;
		border-radius: 4px;
		white-space: pre-wrap;

		&.copy {
			border: var(--markdown-copy-border);
			background-color: var(--markdown-copy-background);
			code {
				background-color: inherit !important;
			}
		}

		code {
			border: unset;
			padding: unset;
		}
	}
}