:root {
    // Make sure black and white CSS variables are defined as they are needed
    // for the colorpickers to work properly. In the frontend, those are
    // automatically defined because they are part of the $grays map. In the
    // backend, bootstrap is more standard and those are not added in the $grays
    // map (not needed and was actually a problem to make the enterprise dark
    // mode work properly).
    --white: #{$white};
    --black: #{$black};
}

.o_field_html {
    position: relative;
    word-wrap: break-word;

    #codeview-btn-group {
        position: absolute;
        top: 0;
        right: 0;
    }

    iframe {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        ul > li > p {
            margin: 0px;
        }
        min-height: 300px;
        min-height: -webkit-calc(100vh - 170px);
        min-height: calc(100vh - 170px);

        &.o_readonly {
            border: none;
        }
    }
    .rounded {
        border-radius: .25rem !important;
    }
    table.table.table-bordered {
        table-layout: fixed;
    }
    a:not(.btn) {
        // Ensure non-button links are visible enough in the editor.
        color: #008f8c;
    }
}

.o_form_view:not(.o_field_highlight) {
    .o_field_html .note-editable {
        border: $input-border-width solid transparent;
        border-width: 0 0 $input-border-width 0;
        border-radius: 0;

        &:hover, &:focus {
            border-color: var(--o-input-border-color);
        }
    }
}

.o_field_html:not(.o_readonly_modifier) {
    .o_editor_banner_icon {
        cursor: pointer;
    }
}

.editor_has_snippets {
    .oe_snippet.o_draggable_dragging {
        z-index: $zindex-modal + 1 !important;
    }
}