.code-block-pro-editor {
	--tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
	--tw-ring-offset-width: 0px;
	--tw-ring-offset-color: transparent;
	--tw-ring-color: var(--wp-admin-theme-color);
	--tw-translate-x: 0;
	--tw-translate-y: 0;
	--tw-rotate: 0;
	--tw-skew-x: 0;
	--tw-skew-y: 0;
	--tw-scale-x: 1;
	--tw-scale-y: 1;
}
.code-block-pro-editor *,
.code-block-pro-editor *:after,
.code-block-pro-editor *:before {
	box-sizing: border-box;
	/* border: 0 solid #e5e7eb; */
}
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Add more styles here specific to the editor only */
.code-block-pro-editor .npm__react-simple-code-editor__textarea {
	@apply shadow-none;
}
.code-block-pro-editor pre,
.code-block-pro-editor pre * {
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
}
.code-block-pro-editor textarea,
.code-block-pro-editor pre {
	@apply m-0 text-left focus:outline-none;
	min-height: 36px;
	direction: ltr !important;
}
.code-block-pro-editor.cbp-has-line-numbers pre {
	counter-reset: step;
	counter-increment: step calc(var(--cbp-line-number-start, 1) - 1);
	padding-right: 0;
}
.code-block-pro-editor pre .line {
	@apply relative inline-block w-full;
}
.code-block-pro-editor pre {
	.line:empty {
		@apply block;
	}
	.line span:empty {
		@apply inline-block;
	}
}
.code-block-pro-editor.cbp-has-line-numbers
	pre
	.line:not(.cbp-line-number-disabled)::before {
	@apply inline-block text-right opacity-50 absolute;
	margin-right: 12px;
	content: counter(step);
	color: var(--cbp-line-number-color, #999);
	width: var(--cbp-line-number-width, auto);
	user-select: none;
	counter-increment: step;
	left: calc(var(--cbp-line-number-width, 0) * -1 - 16px);
}

.code-block-pro-editor.padding-disabled:not(.cbp-has-line-numbers) pre {
	@apply p-0;
}
.code-block-pro-editor.padding-disabled.cbp-has-line-numbers pre {
	@apply py-0;
}
.code-block-pro-editor .cbp-footer-link {
	@apply pointer-events-none no-underline;
}

/* Just to make it look similar to the front end */
.code-block-pro-editor pre .line.cbp-line-highlight::after {
	content: "";
	background: var(--cbp-line-highlight-color, rgb(14 165 233 / 0.2));
	@apply absolute top-0 h-full;
	left: -100% !important;
	width: 1000% !important;
	min-height: var(--cbp-line-height) !important;
}

.code-block-pro-editor code {
	font-family: inherit !important;
	@apply m-0 p-0 text-inherit bg-transparent;
}

.cbp-input-error {
	--tw-ring-color: rgb(239 68 68);
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
		var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0
		calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	border-color: rgb(239 68 68) !important;
	box-shadow:
		var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
		var(--tw-shadow, 0 0 #0000) !important;
}

.code-block-pro-editor .code-block-pro-copy-button {
	display: block !important;
	@apply pointer-events-none;
}
.code-block-pro-editor .sidebar-copy-button svg {
	@apply block;
}
.code-block-pro-editor .sidebar-copy-button .with-check {
	@apply hidden;
}
.cbp-theme-preview {
	font-family:
		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* no !important */
	direction: ltr;
}
@font-face {
	font-family: "Code-Pro-Fira-Code";
	src: url("../fonts/Code-Pro-Fira-Code.woff2") format("woff2");
}
@font-face {
	font-family: "Code-Pro-JetBrains-Mono";
	src: url("../fonts/Code-Pro-JetBrains-Mono.woff2") format("woff2");
}
@font-face {
	font-family: "Code-Pro-JetBrains-Mono-NL";
	src: url("../fonts/Code-Pro-JetBrains-Mono-NL.ttf") format("truetype");
}
@font-face {
	font-family: "Code-Pro-Comic-Mono";
	src: url("../fonts/Code-Pro-Comic-Mono.ttf") format("truetype");
}
@font-face {
	font-family: "Code-Pro-Roboto-Mono";
	src: url("../fonts/Code-Pro-Roboto-Mono.ttf") format("truetype");
}
@font-face {
	font-family: "Code-Pro-Fantasque-Sans-Mono";
	src: url("../fonts/Code-Pro-Fantasque-Sans-Mono.woff2") format("woff2");
}
@font-face {
	font-family: "Code-Pro-Cozette";
	src: url("../fonts/Code-Pro-Cozette.woff2") format("woff2");
}
@font-face {
	font-family: "Code-Pro-Deja-Vu-Mono";
	src: url("../fonts/Code-Pro-Deja-Vu-Mono.ttf") format("truetype");
}
@font-face {
	font-family: "Code-Pro-Monaspace-Argon";
	src: url("../fonts/Code-Pro-Monaspace-Argon.woff") format("woff");
}
@font-face {
	font-family: "Code-Pro-Monaspace-Krypton";
	src: url("../fonts/Code-Pro-Monaspace-Krypton.woff") format("woff");
}
@font-face {
	font-family: "Code-Pro-Monaspace-Neon";
	src: url("../fonts/Code-Pro-Monaspace-Neon.woff") format("woff");
}
@font-face {
	font-family: "Code-Pro-Monaspace-Radon";
	src: url("../fonts/Code-Pro-Monaspace-Radon.woff") format("woff");
}
@font-face {
	font-family: "Code-Pro-Monaspace-Xenon";
	src: url("../fonts/Code-Pro-Monaspace-Xenon.woff") format("woff");
}
@font-face {
	font-family: "Code-Pro-Geist-Mono";
	src: url("../fonts/Code-Pro-Geist-Mono.woff2") format("woff2");
}
@font-face {
	font-family: "Code-Pro-Hack";
	src: url("../fonts/Code-Pro-Hack.woff2") format("woff2");
}