:host {
	outline: 1px solid #f0f;

	code {
		background-color: var(--color-code-bg);
		padding: 2px 4px;
		border-radius: 3px;
		font-family:
			"SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New",
			monospace;
	}

	pre {
		background-color: var(--color-pre-bg);
		border: 1px solid var(--color-border);
		border-radius: 6px;
		padding: 16px;
		overflow-x: auto;

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

	::highlight(css-property) {
		color: rebeccapurple;
		font-weight: 600;
	}

	::highlight(css-value) {
		color: #d73a49;
	}

	::highlight(css-unit) {
		color: #032f62;
	}

	::highlight(css-function) {
		color: #6f42c1;
	}

	::highlight(css-color) {
		color: #e36209;
	}

	::highlight(css-comment) {
		color: #6a737d;
		font-style: italic;
	}

	::highlight(css-string) {
		color: #22863a;
	}

	::highlight(css-selector) {
		color: #6f42c1;
		font-weight: 600;
	}

	/* JavaScript Highlights API */
	::highlight(js-comment) {
		color: #969896;
		font-style: italic;
	}

	::highlight(js-string) {
		color: #b5bd68;
	}

	::highlight(js-keyword) {
		color: #b294bb;
	}

	::highlight(js-number) {
		color: #de935f;
	}

	::highlight(js-function) {
		color: #81a2be;
	}

	::highlight(js-property) {
		color: #cc6666;
	}

	::highlight(js-operator) {
		color: #8abeb7;
	}

	::highlight(js-punctuation) {
		color: #c5c8c6;
	}

	/* W3C Syntax Highlights API */
	::highlight(syntax-type) {
		color: #f0c674;
	}

	::highlight(syntax-combinator) {
		color: #8abeb7;
	}

	::highlight(syntax-string) {
		color: #b5bd68;
	}
}