.wp-block-code {
	--noctograph-syntax-keyword: light-dark(#17634a, #a7f3d0);
	--noctograph-syntax-title: light-dark(#145a8a, #8ac7ff);
	--noctograph-syntax-string: light-dark(#7a4a00, #f0c987);
	--noctograph-syntax-number: light-dark(#6d3f83, #d7b5f8);
	--noctograph-syntax-built-in: light-dark(#8b3328, #ffb4a7);
}

.noctograph-code-toolbar {
	align-items: center;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-bottom: 0;
	display: flex;
	font-family: var(--wp--preset--font-family--mono);
	justify-content: space-between;
	min-height: 3rem;
	padding: 0.25rem 0.375rem 0.25rem 0.875rem;
}

.noctograph-code-language {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	font-weight: 650;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

.noctograph-code-identity,
.noctograph-code-actions {
	align-items: center;
	display: flex;
	gap: 0.75rem;
}

.noctograph-code-filename {
	color: var(--wp--preset--color--text);
	font-size: 0.8125rem;
	font-weight: 650;
	overflow-wrap: anywhere;
}

.noctograph-code-filename + .noctograph-code-language {
	border-left: 1px solid var(--wp--preset--color--line);
	padding-left: 0.75rem;
}

.noctograph-code-copy,
.noctograph-code-download {
	align-items: center;
	background: transparent;
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--signal);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem;
	font-weight: 750;
	justify-content: center;
	line-height: 1;
	min-height: 2.5rem;
	min-width: 4.75rem;
	padding: 0.5rem 0.75rem;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.noctograph-code-download {
	text-decoration: none;
}

.noctograph-code-copy:hover,
.noctograph-code-download:hover {
	background: var(--wp--preset--color--signal);
	border-color: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--ink);
}

.noctograph-code-shell > .wp-block-code {
	margin-top: 0;
}

.wp-block-code code.hljs {
	background: transparent;
	color: var(--wp--preset--color--text);
	padding: 0;
}

.noctograph-code-line {
	display: block;
	min-height: 1.65em;
	position: relative;
}

.has-line-numbers .noctograph-code-line {
	padding-left: 3.25rem;
}

.has-line-numbers .noctograph-code-line::before {
	color: var(--wp--preset--color--muted);
	content: attr(data-line);
	font-size: 0.75rem;
	inset: 0 auto 0 0;
	line-height: 2.2;
	position: absolute;
	text-align: right;
	user-select: none;
	width: 2rem;
}

.noctograph-code-line.is-highlighted {
	background: color-mix(in srgb, var(--wp--preset--color--signal) 13%, transparent);
	box-shadow: inset 3px 0 var(--wp--preset--color--signal);
	margin-inline: calc(-1 * var(--wp--preset--spacing--30));
	padding-right: var(--wp--preset--spacing--30);
}

.has-line-numbers .noctograph-code-line.is-highlighted {
	padding-left: calc(3.25rem + var(--wp--preset--spacing--30));
}

.wraps-lines .wp-block-code code {
	min-width: 0;
	overflow-wrap: anywhere;
	white-space: pre-wrap;
}

@media (max-width: 600px) {
	.noctograph-code-toolbar {
		align-items: stretch;
		flex-direction: column;
		padding: 0.75rem;
	}

	.noctograph-code-actions {
		justify-content: flex-end;
	}
}

.hljs-comment,
.hljs-quote {
	color: var(--wp--preset--color--muted);
	font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-meta,
.hljs-section,
.hljs-type {
	color: var(--noctograph-syntax-keyword);
	font-weight: 650;
}

.hljs-title,
.hljs-title.class_,
.hljs-title.function_,
.hljs-attribute,
.hljs-attr,
.hljs-selector-id,
.hljs-selector-class {
	color: var(--noctograph-syntax-title);
}

.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-template-tag,
.hljs-template-variable {
	color: var(--noctograph-syntax-string);
}

.hljs-number,
.hljs-symbol,
.hljs-bullet,
.hljs-variable,
.hljs-variable.language_,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-link {
	color: var(--noctograph-syntax-number);
}

.hljs-deletion {
	color: #ff9a9a;
}

.hljs-built_in,
.hljs-doctag,
.hljs-name {
	color: var(--noctograph-syntax-built-in);
}

.hljs-emphasis {
	font-style: italic;
}

.hljs-strong {
	font-weight: 700;
}