@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_drm/less/froala.less";

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

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

// Base styles
@import "_base_styles.less";

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

// Modifications
@import "_froala.less";

@font-family: @font-family-sans-serif;
@border-radius: @input-border-radius;
@tooltip-bg: #34495e; // Taken from toolbar.variables.less
@tooltip-font-size: @font-size-small;
@arrow-size: 7px;
@ui-bg: #f9f9f9;
@ui-border-color: @input-border-color;
@ui-border-top: 1px solid @ui-border-color;
@editor-padding: 20px;
@btn-hover-bg: #ddd;
@btn-text: fade(@btn-secondary-color, 80%);
@btn-font-size: 14;
@btn-active-text: #000;
@input-label-color: @color-label;

//
// 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: @color-form-field-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); }
}

//
// 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: white;
        }

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

        .fr-view, textarea {
            height: 100%;
        }

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

//
// Placeholders and snippets
//

.control-richeditor {
    .richeditor-snippet() {
        display: inline-block;
        width: 100%;
        margin: 0 0 15px 0;
        padding: 10px 10px 10px 36px;
        border: 2px dotted #bdc3c7;
        background: white;
        position: relative;
        cursor: pointer;
        color: #6c7071;
        font: 15px @font-family-base;
        font-weight: 500;
        line-height: 150%;
        .border-radius(3px);

        &:focus, &.inspector-open {
            border-color: #2581b8;
            border-style: solid;
            outline: none;
        }
    }

    figure[data-ui-block] {
        .richeditor-snippet();
    }

    figure[data-video], figure[data-audio] {
        padding-left: 13px;

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

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

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

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