yaak/src-web/components/Editor/Editor.css

.cm-wrapper {
    @apply h-full;

    &.cm-full-height {
        @apply relative;

        .cm-editor {
            @apply inset-0;
            position: absolute !important;
        }
    }
}

.cm-editor {
    @apply w-full block text-[0.85rem];

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

    .cm-line {
        @apply text-gray-900 pl-1 pr-1.5;
    }

    .cm-placeholder {
        @apply text-placeholder;
    }

    .cm-gutters {
        @apply border-0 text-gray-500 text-opacity-30;
        .cm-gutterElement {
            @apply cursor-default;
        }
    }

    &.cm-focused .cm-gutters,
    .cm-gutters:hover {
        @apply text-opacity-60;
    }

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


.cm-singleline {
    .cm-editor {
        @apply h-full w-full;
    }

    .cm-scroller {
        font-family: inherit;
        overflow: hidden !important;;
    }

    .cm-line {
        @apply px-0;
    }
}

.cm-multiline {
    .cm-editor {
        @apply h-full;
    }

    .cm-scroller {
        @apply rounded;
    }
}


.cm-multiline .cm-editor.cm-focused .cm-scroller {
    /* Active border state if we want it */
    /*box-shadow: 0 0 0 1px hsl(var(--color-blue-400)/0.4);*/
}

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

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

.cm-singleline .cm-editor {
    .cm-content {
        @apply h-full flex items-center;
    }
}

.cm-scroller {
    &::-webkit-scrollbar-corner,
    &::-webkit-scrollbar {
        @apply w-[5px] h-[5px] bg-transparent;
    }

    &::-webkit-scrollbar-thumb {
        @apply bg-gray-100 bg-opacity-30 rounded-full;
    }
}

.cm-editor.cm-focused .cm-scroller::-webkit-scrollbar-thumb {
    @apply bg-opacity-80;
}

/* <-- */

/* NOTE: Extra selector required to override default styles */
.cm-tooltip.cm-tooltip {
    @apply shadow-lg bg-background rounded overflow-hidden text-gray-900 border border-gray-100/70 z-50 pointer-events-auto;

    * {
        @apply transition-none;
    }

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

        & > ul > li {
            @apply cursor-default px-2 rounded-sm text-gray-500 h-7 flex items-center;
        }

        & > ul > li[aria-selected] {
            @apply bg-gray-50 text-gray-800;
        }

        & > ul > li:hover {
            @apply text-gray-700;
        }

        .cm-completionIcon {
            @apply text-sm flex items-center pb-0.5;
        }
    }
}