// Dynabloqs Material Design source code editor
// Please note that the default styling for this control is already defined in _codemirror.scss as part of the DocumentBuilder.
// Unfortunately we do need to use !important to overrule everything.
.dbqmd-source-code-editor {
    border: 0 !important;
    border-radius: 0 !important;
    @include scrollbar;

    .CodeMirror-vscrollbar,
    .CodeMirror-hscrollbar {
        @include scrollbar;
    }

    .CodeMirror {
        height: 100% !important;
        background: $material-design-default-background-color !important;
        border-bottom: 1px solid $material-design-default-border-color;
    }

    .CodeMirror-gutter {
        background: $material-design-default-background-color !important;
    }

    .CodeMirror-linenumber {
        background: $material-design-default-background-color !important;
        color: $material-design-default-label-color !important;
    }

    &[data-is-read-only="true"] {
        .CodeMirror {
            background: $material-design-disabled-background-color !important;
        }

        .CodeMirror-gutter {
            background: $material-design-disabled-background-color !important;
        }

        .CodeMirror-linenumber {
            background: $material-design-disabled-background-color !important;
            color: $material-design-disabled-label-color !important;
        }
    }
}