.cm-wrapper {
    height: 100%;
    width: 100%;
    position: relative;
}

.cm-wrapper .cm-editor {
    position: absolute !important;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.cm-editor {
    @apply w-full block;
}

.cm-singleline .cm-scroller {
    overflow: hidden !important;;
}

.cm-editor .placeholder-widget {
    @apply text-xs text-white bg-blue-400 py-[1px] px-1 mx-[1px] rounded cursor-default hover:bg-blue-500;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.9);
}

.cm-multiline .cm-editor .cm-scroller {
    @apply rounded-lg bg-gray-50;
}

.cm-editor.cm-focused {
    outline: none !important;
}

.cm-multiline .cm-editor.cm-focused .cm-scroller {
    box-shadow: 0 0 0 1px hsl(var(--color-blue-400)/0.4);
}

.cm-editor .cm-line {
    color: hsl(var(--color-gray-900));
}

.cm-multiline .cm-editor .cm-line {
    padding-left: 1em;
    padding-right: 1.5em;
}

.cm-singleline .cm-editor .cm-scroller {
    @apply flex;
    align-items: center !important;
}

.cm-editor .cm-gutters {
    @apply bg-gray-50 border-r-0 text-gray-200;
}

.cm-editor .cm-gutterElement {
    transition: color var(--transition-duration);
}

.cm-editor .fold-gutter-icon {
    @apply pt-[0.3em] pl-[0.4em] px-[0.4em] h-4 cursor-pointer rounded;
}

.cm-editor .fold-gutter-icon::after {
    @apply block w-1.5 h-1.5 border-transparent -rotate-45
    border-l border-b border-l-[currentColor] border-b-[currentColor] content-[''];
}

.cm-editor .fold-gutter-icon[data-open] {
    @apply pt-[0.4em] pl-[0.3em];
}

.cm-editor .fold-gutter-icon[data-open]::after {
    @apply rotate-[-135deg];
}

.cm-editor .fold-gutter-icon:hover {
    @apply text-gray-400 bg-gray-100/20;
}

.cm-editor.cm-focused .cm-gutters {
    @apply text-gray-300;
}

.cm-editor .cm-foldPlaceholder {
    @apply px-2 border border-gray-200 bg-gray-100;
}

.cm-editor .cm-activeLineGutter,
.cm-editor .cm-activeLine {
    @apply bg-transparent;
}

.cm-editor.cm-focused .cm-activeLineGutter {
    @apply text-gray-800;
}

.cm-editor * {
    @apply cursor-text;
}

.cm-editor .cm-cursor {
    @apply border-l-2 border-gray-800;
}

.cm-editor .cm-selectionBackground {
    @apply bg-gray-200;
}

.cm-editor.cm-focused .cm-selectionBackground {
    @apply bg-gray-200;
}

/* --> Add padding to container. For some reason, using padding on both adds an extra
 * 1px offset so we need to use a combination of padding and margin.
 */
.cm-editor .cm-gutters {
    @apply pt-1;
}

.cm-editor .cm-content {
    @apply mt-1;
}

/* <-- */

.cm-editor .cm-tooltip {
    @apply shadow-lg bg-background rounded overflow-hidden text-gray-900 border border-gray-100/70;
}

.cm-editor .cm-tooltip * {
    @apply transition-none;
}

.cm-editor .cm-tooltip.cm-tooltip-autocomplete > ul {
    @apply p-1 max-h-[40vh];
}

.cm-editor .cm-tooltip.cm-tooltip-autocomplete > ul > li {
    @apply cursor-default py-1 px-2 rounded-sm text-gray-500;
}

.cm-editor .cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected] {
    @apply bg-gray-50 text-gray-800;
}

.cm-editor .cm-tooltip.cm-tooltip-autocomplete .cm-completionIcon {
    @apply text-sm;
}