.code-block-section {
	display: block;
	width: 100%;
	border-radius: 8px;
	padding: 16px;
	background: var(--color-surface-1);
	flex-shrink: 0;
	border: 1px solid var(--color-stroke-7);
}

.code-block-section-headline {
	display: flex;
	justify-content: space-between;
	color: var(--color-text-2);
	font: var(--font-s-regular);
	align-items: center;
	gap: 16px;
}

.code-block-copy-button span {
	mask-position: center;
	mask-repeat: no-repeat;
	background-color: var(--color-interactive-1-default);
	mask-size: 16px 16px;
	width: 24px;
	height: 24px;
	display: flex;
}

.code-block-copy-button:active span {
	background-color: var(--color-interactive-1-pressed);
}

.hljs {
	width: 100%;
	margin: 12px 0;
	display: block;
	white-space: pre;
	tab-size: 4;
	overflow-x: auto;
	font: var(--font-code-l);
}

.hljs-keyword,
.hljs-literal,
.hljs-doctag,
.hljs-template-tag {
	color: var(--color-code-purple);
}

.hljs-number,
.hljs-meta,
.hljs-type,
.hljs-built_in {
	color: var(--color-code-orange);
}

.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-attr,
.hljs-property,
.hljs-variable,
.hljs-template-variable,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-link {
	color: var(--color-code-cyan);
}

.hljs-regexp,
.hljs-addition,
.hljs-string,
.hljs-symbol {
	color: var(--color-code-green);
}

.hljs-comment,
.hljs-quote {
	color: var(--color-code-gray);
}

.hljs-tag,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion {
	color: var(--color-code-red);
}

.hljs,
.hljs-code,
.hljs-subst,
.hljs-emphasis,
.hljs-params,
.hljs-punctuation {
	color: var(--color-code-white);
}