code,
kbd {
	font-family: "Fira Code", monospace;
	border: 1.5px solid light-dark(var(--white), var(--grey));
	padding-inline: 0.2rem;
	font-weight: 400;
}

.code-block-wrapper {
	position: relative;
	overflow: hidden;

	.copy-button {
		position: absolute;
		right: 0;
		top: 0;
		cursor: copy;
		transition: 0.1s box-shadow ease-out;

		svg {
			block-size: 1rem;
			inline-size: 1rem;
		}

		@media print {
			display: none;
		}
	}

	.copied {
		background: var(--green);
		box-shadow: 0 0 6.5rem 3rem oklch(from var(--green) l c h / calc(alpha - 0.5));
		transition-timing-function: ease-in;

		svg {
			fill: var(--black);
		}
	}

	pre {
		padding-right: 2.8rem;
	}
}

pre {
	overflow-x: auto;
	background: light-dark(var(--dark_grey), var(--black));
	color: var(--bright_white);
	border: 2px solid light-dark(var(--white), var(--grey));
	padding: 0.8rem;
	line-height: 1.15;

	code {
		display: inline-block;
		padding: 0;
		min-inline-size: 100%;
		border: none;
		tab-size: 4;
		background: inherit;
	}
}

@media not print {
	.hljs-comment {
		color: var(--white);
		font-style: italic;
	}

	.hljs-selector-tag,
	.hljs-built_in,
	.hljs-meta,
	.hljs-property,
	.hljs-name,
	.hljs-type {
		color: var(--bright_blue);
	}

	.hljs-tag,
	.hljs-selector-class {
		color: var(--blue);
	}

	.hljs-title,
	.hljs-title.function_,
	.hljs-selector-pseudo {
		color: var(--cyan);
	}

	.hljs-string,
	.hljs-regexp {
		color: var(--bright_green);
	}

	.hljs-number,
	.hljs-literal {
		color: var(--bright_magenta);
	}

	.hljs-title.class_,
	.hljs-attr,
	.hljs-attribute {
		color: var(--yellow);
	}

	.hljs-symbol,
	.hljs-bullet {
		color: var(--magenta);
	}

	.hljs-keyword,
	.hljs-meta-keyword {
		color: var(--red);
	}

	.hljs-template-variable {
		color: var(--bright_green);
	}

	.hljs-addition {
		background: oklch(from var(--green) l c h / calc(alpha - 0.7));
	}

	.hljs-deletion {
		background: oklch(from var(--red) l c h / calc(alpha - 0.7));
	}
}