/* Code blocks: toolbar, copy button, and Prism token colors. */

:root {
	--dejim-tok-comment: #5c6680;
	--dejim-tok-punct: #5a6478;
	--dejim-tok-keyword: #6d28d9;
	--dejim-tok-string: #047870;
	--dejim-tok-function: #2b45d8;
	--dejim-tok-number: #b54708;
	--dejim-tok-tag: #c2255c;
	--dejim-tok-attr: #6d28d9;
	--dejim-tok-builtin: #0369a1;
	--dejim-tok-important: #b42318;
}

:root[data-theme="dark"] {
	--dejim-tok-comment: #808ba8;
	--dejim-tok-punct: #98a2bb;
	--dejim-tok-keyword: #c4a7ff;
	--dejim-tok-string: #5eead4;
	--dejim-tok-function: #9cb0ff;
	--dejim-tok-number: #fdba74;
	--dejim-tok-tag: #ff86b0;
	--dejim-tok-attr: #c4b5fd;
	--dejim-tok-builtin: #67e8f9;
	--dejim-tok-important: #fca5a5;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--dejim-tok-comment: #808ba8;
		--dejim-tok-punct: #98a2bb;
		--dejim-tok-keyword: #c4a7ff;
		--dejim-tok-string: #5eead4;
		--dejim-tok-function: #9cb0ff;
		--dejim-tok-number: #fdba74;
		--dejim-tok-tag: #ff86b0;
		--dejim-tok-attr: #c4b5fd;
		--dejim-tok-builtin: #67e8f9;
		--dejim-tok-important: #fca5a5;
	}
}

.dejim-code {
	margin-block: 1.75rem;
	overflow: hidden;
	border: 1px solid var(--dejim-border);
	border-radius: 14px;
	background: var(--dejim-surface);
}

.dejim-code__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.5rem 0.55rem 0.5rem 1rem;
	border-bottom: 1px solid var(--dejim-border);
	background: color-mix(in srgb, var(--dejim-surface-2) 60%, var(--dejim-surface));
	color: var(--dejim-muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.dejim-code__lang::before {
	content: "";
	display: inline-block;
	width: 0.55rem;
	height: 0.55rem;
	margin-right: 0.55rem;
	background: var(--dejim-gradient);
	vertical-align: 0.02em;
}

.dejim-code__copy {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.7rem;
	border: 1px solid var(--dejim-border);
	border-radius: 8px;
	background: var(--dejim-base);
	color: var(--dejim-contrast);
	font: 500 0.78rem/1.2 var(--wp--preset--font-family--body);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.dejim-code__copy:hover {
	border-color: var(--dejim-primary);
	color: var(--dejim-primary);
}

.dejim-code__copy svg {
	width: 0.9rem;
	height: 0.9rem;
}

.dejim-code__copy.is-copied {
	border-color: color-mix(in srgb, var(--dejim-tok-string) 60%, transparent);
	color: var(--dejim-tok-string);
}

.dejim-code pre.wp-block-code {
	margin: 0;
	padding: 1.15rem 1.25rem 1.3rem;
	overflow-x: auto;
	border: 0;
	border-radius: 0;
	background: transparent;
	tab-size: 2;
	font-variant-ligatures: none;
}

.dejim-code .wp-block-code code {
	display: block;
	min-width: max-content;
	font-family: inherit;
	white-space: pre;
}

.dejim-code .token.comment,
.dejim-code .token.prolog,
.dejim-code .token.doctype,
.dejim-code .token.cdata {
	color: var(--dejim-tok-comment);
	font-style: italic;
}

.dejim-code .token.punctuation {
	color: var(--dejim-tok-punct);
}

.dejim-code .token.tag,
.dejim-code .token.deleted {
	color: var(--dejim-tok-tag);
}

.dejim-code .token.attr-name,
.dejim-code .token.keyword,
.dejim-code .token.atrule {
	color: var(--dejim-tok-keyword);
}

.dejim-code .token.string,
.dejim-code .token.char,
.dejim-code .token.attr-value,
.dejim-code .token.inserted {
	color: var(--dejim-tok-string);
}

.dejim-code .token.function,
.dejim-code .token.class-name,
.dejim-code .token.selector {
	color: var(--dejim-tok-function);
}

.dejim-code .token.number,
.dejim-code .token.boolean,
.dejim-code .token.constant,
.dejim-code .token.symbol {
	color: var(--dejim-tok-number);
}

.dejim-code .token.builtin,
.dejim-code .token.property,
.dejim-code .token.variable,
.dejim-code .token.url {
	color: var(--dejim-tok-builtin);
}

.dejim-code .token.important,
.dejim-code .token.regex {
	color: var(--dejim-tok-important);
	font-weight: 600;
}

.dejim-code .token.operator,
.dejim-code .token.entity {
	color: var(--dejim-contrast);
}