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;
		}
	}

	.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;
		counter-reset: step;
		background: inherit;
	}
}

.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));
}