/* Basic CSS for Markdown-rendered content */
/* initial & in CSS Nesting is required until Safari iOS < 17.1 is supported */

md-block {
	display: block;
	width: 100%;
	margin-bottom: 1.5em;

	&:not([rendered]) {
		display: none;
	}

	/* Headings */
	& h1,
	& h2,
	& h3,
	& h4,
	& h5,
	& h6 {
		margin-top: 1.5em;
		margin-bottom: 0.5em;
		font-weight: bold;
	}

	& h1 {
		font-size: 2em;
	}

	& h2 {
		font-size: 1.75em;
	}

	& h3 {
		font-size: 1.5em;
	}

	& h4 {
		font-size: 1.25em;
	}

	& h5 {
		font-size: 1em;
	}

	& h6 {
		font-size: 0.875em;
	}

	/* Paragraphs */
	& p {
		margin: 1em 0;
	}

	/* Links */
	& a {
		color: #0080ff;
		text-decoration: none;
	}

	& a:hover {
		text-decoration: underline;
	}

	/* Lists */
	& ul,
	& ol {
		margin: 1em 0;
		padding-left: 2em;
	}

	& ul {
		list-style-type: disc;
	}

	& ol {
		list-style-type: decimal;
	}

	& li {
		margin-bottom: 0.5em;
	}

	/* Blockquotes */
	& blockquote {
		margin: 1.5em 0;
		padding: 0.5em 1em;
		border-left: 4px solid #ccc;
		background-color: light-dark(#f8f8f8, #282c34);
	}

	& blockquote p {
		margin: 0;
	}

	/* Code blocks */
	& pre {
		background-color: light-dark(#d8d8d8, #282c34);
		padding: 1em;
		overflow: auto;
		border-radius: 4px;
	}

	& code {
		background-color: light-dark(#d8d8d8, #282c34);
		padding: 0.2em 0.4em;
		font-family: monospace;
		font-size: 0.95em;
		border-radius: 4px;
	}

	/* Horizontal Rule */
	& hr {
		border: 0;
		border-top: 1px solid #ccc;
		margin: 2em 0;
	}

	/* Images */
	& img {
		max-width: 100%;
		height: auto;
		display: block;
		margin: 1em 0;
	}

	/* Tables */
	& table {
		width: 100%;
		border-collapse: collapse;
		margin: 1em 0;
	}

	& th,
	& td {
		border: 1px solid #ddd;
		padding: 0.5em 1em;
	}

	& th {
		background-color: light-dark(#f8f8f8, #282c34);
		text-align: left;
	}

	/* Inline HTML elements */
	& strong {
		font-weight: bold;
	}

	& em {
		font-style: italic;
	}

	& del {
		text-decoration: line-through;
	}
}