.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;
    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:not(.padding-disabled) pre .line:empty {
    @apply block;
}
.code-block-pro-editor.padding-disabled.cbp-has-line-numbers pre .line:empty {
    @apply 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;
}
/* Will make sure the line numbers are full width before calculating */
.code-block-pro-editor.cbp-has-line-numbers pre .line.cbp-line-number-width-forced,
.code-block-pro-editor.cbp-has-line-numbers pre .line.cbp-line-number-disabled {
    @apply inline;
}
.code-block-pro-editor.cbp-has-line-numbers pre .line.cbp-line-number-width-forced::before {
    width: auto !important;
    position: initial;
}
.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/.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;
}
.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');
}