@use "mixins";

.red-ui-editor, .red-ui-editor-dialog {

    .ace_read-only {
        .ace_scroller {
            background: var(--red-ui-text-editor-background-disabled);
            color: var(--red-ui-text-editor-color-disabled);
        }
        .ace_cursor {
           color: transparent !important;
        }
    }
    .ace_gutter {
        background: var(--red-ui-text-editor-gutter-background);
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }
    .ace_scroller {
        background: var(--red-ui-text-editor-background);
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        color: var(--red-ui-text-editor-color);
    }
    .ace_marker-layer .ace_active-line {
        background: var(--red-ui-text-editor-active-line-background);
    }
    .ace_marker-layer .ace_selection {
        background: var(--red-ui-text-editor-selection-background);
        border-radius: 1px;
    }
    .ace_gutter-cell  {
        color: var(--red-ui-text-editor-gutter-color);
    }
    .ace_gutter-active-line {
        background: var(--red-ui-text-editor-gutter-active-line-background);
    }
    .ace_tooltip {
        font-family: var(--red-ui-primary-font);
        line-height: 1.4em;
        max-width: 400px;
        white-space: normal;
        background-image: none;
        background: var(--red-ui-popover-background);
        color: var(--red-ui-popover-color);
        border-radius: 4px;
        @include mixins.component-shadow;
        border-color: var(--red-ui-popover-background);
    }
    .ace_content {
        line-height: 1;
    }
    textarea.ace_text-input {
        overflow: hidden;
        padding: 0px 1px !important;
    }

    #red-ui-event-log-editor {
        .ace_scroller {
            background: var(--red-ui-event-log-background);
            color: var(--red-ui-event-log-color);
        }
        .ace_marker-layer .ace_active-line {
            background: var(--red-ui-event-log-active-line-background);
        }
        .ace_marker-layer .ace_selection {
            background: var(--red-ui-event-log-selection-background);
        }
    }
}
