.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 {
    width: 100%;
    display: block;
}

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

.cm-editor .cm-tooltip {
    color: gray;
}

.cm-editor .placeholder-widget {
    background-color: hsl(var(--color-blue-400));
    padding: 0.05em 0.3em;
    border-radius: 0.2em;
    color: white;
    cursor: pointer;
}

.cm-editor .cm-scroller {
    border-radius: var(--border-radius-lg);
    background-color: hsl(var(--color-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-scroller {
    display: flex;
    align-items: center !important;
}

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

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

.cm-editor .fold-gutter-icon {
    height: 1.5em;
    padding-top: 0.2em;
    padding-left: 0.4em;
    padding-right: 0.4em;
    cursor: pointer;
    border-radius: 0.2em;
}

.cm-editor .fold-gutter-icon::after {
    display: block;
    width: 0.5em;
    height: 0.5em;
    border: 1px solid transparent;
    border-left-color: currentColor;
    border-bottom-color: currentColor;
    transform: rotate(-45deg);
    content: "";
}

.cm-editor .fold-gutter-icon[data-open] {
    padding-top: 0.4em;
    padding-left: 0.2em;
}

.cm-editor .fold-gutter-icon[data-open]::after {
    transform: rotate(-135deg);
}

.cm-editor .fold-gutter-icon:hover {
    background-color: hsl(var(--color-gray-100)/0.2);
    color: hsl(var(--color-gray-400));
}

.cm-editor.cm-focused .cm-gutters {
    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: transparent;
}

.cm-editor.cm-focused .cm-activeLineGutter,
.cm-editor.cm-focused .cm-activeLine {
    background-color: hsl(var(--color-gray-100)/0.3);
}

.cm-editor * {
    cursor: text;
}

.cm-editor .cm-cursor {
    border-left: 2px solid hsl(var(--color-gray-900));
}

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

.cm-editor.cm-focused .cm-selectionBackground {
    background-color: hsl(var(--color-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 {
    padding-top: 0.2em;
}

.cm-editor .cm-content {
    margin-top: 0.2em;
}

/* <-- */