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

.cm-editor {
    position: absolute !important;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: var(--border-radius-lg);
    border: 1px solid hsl(var(--color-gray-50));
    font-size: 0.9rem;
}

.cm-editor.cm-focused {
    outline: none !important;
    border-color: hsl(var(--color-gray-100));
}

.cm-editor .cm-scroller {
    border-radius: var(--border-radius-lg);
    background-color: hsl(var(--color-gray-50));
}

.cm-editor .cm-line {
    padding-left: 1em;
    padding-right: 1.5em;
    color: hsl(var(--color-gray-900));
}

.cm-editor .cm-gutters {
    background-color: hsl(var(--color-gray-50));
    border-right: 0;
    color: hsl(var(--color-gray-300));
}

.cm-editor .cm-foldPlaceholder {
    background-color: hsl(var(--color-gray-100));
    border: 1px solid hsl(var(--color-gray-200));
    padding: 0 0.3em;
}

.cm-editor .cm-activeLineGutter,
.cm-editor .cm-activeLine {
    background-color: hsl(var(--color-gray-50));
}

.cm-editor * {
    cursor: text;
}

.cm-editor .cm-cursor {
    border-left: 2px solid red;
}

.cm-editor .cm-selectionBackground {
    background-color: hsl(var(--color-gray-100));
}

.cm-editor.cm-focused .cm-selectionBackground {
    background-color: hsl(var(--color-gray-100));
}