@import "../../../../assets/less/core/boot.less";

@richeditor-toolbar-size: 30px;
@richeditor-zindex: 600;
@richeditor-gutter: 20px;

@color-richeditor-toolbar: #dddddd;
@color-richeditor-toolbar-btn-color: #404040;
@color-richeditor-toolbar-btn-bg-hover: #999999;
@color-richeditor-toolbar-btn-bg-active: #404040;
@color-richeditor-toolbar-btn-color-hover: #ffffff;

@import "../vendor/froala/less/froala.less";

// Buttons
@import "../vendor/froala/less/plugins/fullscreen.less";
@import "../vendor/froala/less/plugins/code_view.less";
@import "../vendor/froala/less/plugins/file.less";
@import "../vendor/froala/less/plugins/image.less";
@import "../vendor/froala/less/plugins/table.less";
@import "../vendor/froala/less/plugins/video.less";
@import "../vendor/froala/less/plugins/colors.less";
@import "../vendor/froala/less/plugins/emoticons.less";

// Functional
@import "../vendor/froala/less/plugins/line_breaker.less";
@import "../vendor/froala/less/plugins/draggable.less";

// More testing needed
//import "../vendor/froala/less/plugins/quick_insert.less";

// Base styles
@import "../vendor/froala/less/style.less";

.fr-view {
    @import "../../../../models/editorsetting/default_styles.less";
}

.fr-wrapper {
    ::selection {
        background: @input-selection-bg;
        color: @input-selection-color;
    }
}

//
// Rich Editor
//

.field-flush .field-richeditor {
    &,
    &.editor-focus {
        border: none;
    }
}

.richeditor-set-height(@size) {
    .fr-wrapper {
        height: @size;
        .fr-view {
            min-height: @size;
        }
    }

    .height-indicator {
        height: @size;
        display: none;
    }
}

.field-richeditor {
    border: 1px solid @input-border;
    box-shadow: @input-box-shadow;
    border-radius: @input-border-radius;
    transition: @input-transition;

    // Prevents an ugly flash during the time the editor loads
    > textarea {
        display: none;
    }

    &.editor-focus {
        border-color: @input-border-focus;
    }

    &.size-tiny {
        .richeditor-set-height(@size-tiny);
    }
    &.size-small {
        .richeditor-set-height(@size-small);
    }
    &.size-large {
        .richeditor-set-height(@size-large);
    }
    &.size-huge {
        .richeditor-set-height(@size-huge);
    }
    &.size-giant {
        .richeditor-set-height(@size-giant);
    }
}

.fr-tooltip {
    z-index: 9997 !important;
}

.fr-popup {
    z-index: 9995 !important;
}

.fr-separator.fr-hs {
    width: 100%;
}

//
// Stretch
//

.field-richeditor.stretch {
    .fr-box:not(.fr-fullscreen) {
        display: block;
        position: relative;
        height: 100% !important;
        width: 100% !important;
        border-radius: 0 !important;
        overflow: hidden;

        .fr-toolbar {
            border-radius: 0 !important;
            border-top-color: transparent;
        }

        .fr-wrapper {
            width: 100%;
            left: 0;
            top: 0;
            bottom: 0;
            position: absolute;
            height: auto !important;
            .fr-view {
                min-height: 0;
            }
        }

        .fr-placeholder {
            top: 20px;
            left: 20px;
        }
    }
}

//
// For the Vue mode styling see
// backend/vuecomponents/richeditordocumentconnector/assets/less/_formwidget.less
//

//
// Placeholders and snippets
//

.control-richeditor {
    figure[data-video],
    figure[data-audio] {
        display: inline-block;
        width: 100%;
        margin: 0 0 15px 0;
        padding: 10px 10px 10px 13px;
        border: 1px dashed #bdc3c7;
        background: @input-bg;
        position: relative;
        color: @heading-color;
        font-size: 15px;
        font-weight: 600;
        line-height: 150%;
        font-weight: normal;
        cursor: pointer;

        &:focus,
        &.inspector-open {
            border-color: @brand-primary;
            border-style: solid;
            outline: none;
        }

        &:after {
            content: attr(data-label);
        }

        &:before {
            position: static;
            margin-right: 8px;
        }
    }

    figure[data-video] {
        &:before {
            .icon(@icon-video-camera);
        }
    }

    figure[data-audio] {
        &:before {
            .icon(@icon-volume-up);
        }
    }
}

//
// Quick Insert
//

.fr-quick-insert {
    a.fr-floating-btn {
        color: @btn-text;
        text-decoration: none;
    }
}