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

.cm-wrapper {
    @apply h-full overflow-hidden;

    .cm-editor {
        @apply w-full block text-base;

        * {
            @apply cursor-text;
        }

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

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

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

        /* Don't show selection on blurred input */
        .cm-selectionBackground {
            @apply bg-transparent;
        }
        &.cm-focused .cm-selectionBackground {
            @apply bg-gray-400;
        }

        /* Style gutters */
        .cm-gutters {
            @apply border-0 text-gray-500/60;

            .cm-gutterElement {
                @apply cursor-default;
            }
        }

        .placeholder-widget {
            @apply text-[0.9em] text-gray-800 dark:text-gray-900 px-1 rounded cursor-default dark:shadow;

            /* NOTE: Background and border are translucent so we can see text selection through it */
            @apply bg-gray-300/40 border border-gray-300 border-opacity-40 hover:border-opacity-80;

            /* Bring above on hover */
            @apply hover:z-10 relative;
        }
    }

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

        .cm-scroller {
            @apply font-mono flex text-[0.8rem];
            align-items: center !important;
            overflow: hidden !important;
        }

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

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

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

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

        .cm-scroller {
            @apply font-mono text-[0.75rem];
        }
    }
}

.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-900 bg-gray-300/50;
}

.cm-editor .cm-foldPlaceholder {
    @apply px-2 border border-gray-400/50 bg-gray-300/50 cursor-default;
    @apply hover:text-gray-800 hover:border-gray-400;
}

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

.cm-wrapper:not(.cm-readonly) .cm-editor {
    &.cm-focused .cm-activeLineGutter {
        @apply text-gray-800;
    }

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

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

.cm-scroller, .cm-tooltip-autocomplete > ul {
    &::-webkit-scrollbar-corner,
    &::-webkit-scrollbar {
        @apply w-1.5 h-1.5 bg-transparent;
    }

    &::-webkit-scrollbar-thumb {
        @apply bg-gray-200 hover:bg-gray-300 rounded-full;
    }
}

/* <-- */

/* NOTE: Extra selector required to override default styles */
.cm-tooltip.cm-tooltip {
    @apply shadow-lg bg-gray-50 rounded overflow-hidden text-gray-900 border border-gray-200 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-600 h-7 flex items-center;
        }

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

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

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