// HTML editor: https://xdsoft.net/jodit/

$html-editor-background-color: $material-design-default-background-color;
$html-editor-border-color: $material-design-default-border-color;
$html-editor-border-radius: 0;
$html-editor-status-bar-color: $material-design-default-background-color;
$html-editor-status-bar-text-color: $material-design-default-label-color;

$html-editor-popup-background-color: $material-design-default-background-color;

$html-editor-toolbar-button-background-color: transparent;
$html-editor-toolbar-button-icon-color: $material-design-icon-color;

$html-editor-toolbar-button-hover-background-color: $button-hover-background-color;
$html-editor-toolbar-button-hover-border-color: $html-editor-toolbar-button-hover-background-color;
$html-editor-toolbar-button-hover-foreground-color: $color-white;

$html-editor-toolbar-button-active-background-color: $button-active-background-color;

.dbqdb-html-editor {
    .jodit-container {
        border: $field-border-width solid $html-editor-border-color;
        border-left: 0;
        border-right: 0;
        border-radius: $html-editor-border-radius;

        .jodit-toolbar__box {
            background-color: $html-editor-background-color;
            border-color: $html-editor-border-color;
            border-radius: 0;

            // This is for the separators between the buttons in the toolbar
            .jodit-ui-group_separated_true:not(:last-child):not(.jodit-ui-group_before-spacer_true):after {
                border-color: $html-editor-border-color;
            }

            // This is the divider between the toolbar and the HTML editor (textarea)
            &:not(:empty) .jodit-toolbar-editor-collection:after {
                background-color: $html-editor-border-color;
            }
        }

        .jodit-workplace {
            .jodit-wysiwyg {
                background-color: $html-editor-background-color;
                @include scrollbar;
        
                // The HTML editor is displayed inside the document rendering engine.
                // Since the HTML editor uses paragraphs inside it, it is using the .dbq-form p styling.
                // As this styling is conflicting with the HTML editor, we override the styling here.
                p {
                    display: block;
                    font-weight: 400;
                }
            }
        }

        // The status bar is basically the footer of the HTML editor
        .jodit-status-bar {
            background-color: $html-editor-status-bar-color !important;
            color: $html-editor-status-bar-text-color !important;
            border-top: 0;
            border-radius: 0;
        }
    }

    &.dbqdb-error {
        padding: 0;

        .jodit-container {
            border-color: $modal-error-border;
        }
    }
}

// Toolbar button popups
.jodit-popup {
    .jodit-popup__content {
        background: $html-editor-popup-background-color;
    }
}

// Toolbar buttons
.jodit-toolbar-button,
.jodit-toolbar-button__button,
.jodit-toolbar-button__trigger {

    .jodit-icon {
        fill: $html-editor-toolbar-button-icon-color;
        stroke: $html-editor-toolbar-button-icon-color;
    }

    &:hover:not([disabled]) {
        background-color: $html-editor-toolbar-button-hover-background-color !important;
        border-color: $html-editor-toolbar-button-hover-border-color !important;
        
        .jodit-toolbar-button__text {
            background-color: $html-editor-toolbar-button-hover-background-color !important;
            color: $html-editor-toolbar-button-hover-foreground-color !important;
        }

        svg {
            fill: $html-editor-toolbar-button-hover-foreground-color !important;
            stroke: $html-editor-toolbar-button-hover-foreground-color !important;
        }
    }

    &[aria-pressed=true]:not([disabled]) {
        background-color: $html-editor-toolbar-button-active-background-color !important;
    }
}