@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 "_figures.less";
@import "../vendor/redactor/redactor.less";

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

.field-richeditor {
    border: 1px solid @color-form-field-border;
    .transition(@input-transition);

    &, .redactor-box {
        .border-radius(5px);
    }
    .redactor-toolbar {
        .border-top-radius(5px);
    }

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

    &.size-tiny .redactor-editor     { height: (@size-tiny - @richeditor-toolbar-size) !important; }
    &.size-small .redactor-editor    { height: (@size-small - @richeditor-toolbar-size) !important; }
    &.size-large .redactor-editor    { height: (@size-large - @richeditor-toolbar-size) !important; }
    &.size-huge .redactor-editor     { height: (@size-huge - @richeditor-toolbar-size) !important; }
    &.size-giant .redactor-editor    { height: (@size-giant - @richeditor-toolbar-size) !important; }
}

//
// Override redactor defaults
//

.redactor-box {
    margin-bottom: 0;
    overflow: hidden;

    & iframe {
        border: none; // Oc
    }
}

.redactor-box-fullscreen {
    z-index: @richeditor-zindex + 115 !important;
}

.redactor-dropdown {
    z-index: @richeditor-zindex + 125 !important;
}
#redactor-modal-overlay,
#redactor-modal-box,
#redactor-modal {
    z-index: @richeditor-zindex + 120 !important;
}

.redactor-toolbar {
    background: @color-richeditor-toolbar;
    .box-shadow(none);
    z-index: 410 !important;

    li.redactor-btn-right {
        float: right;
        margin-right: 2px;
    }

    li a {
        color: @color-richeditor-toolbar-btn-color;
        font-size: 14px;
        width: 20px;
        line-height: 20px;

        .user-select(none);

        &:hover {
            background-color: @color-richeditor-toolbar-btn-bg-hover;
            color: @color-richeditor-toolbar-btn-color-hover;
        }

        &:active,
        &.redactor-act {
            background-color: @color-richeditor-toolbar-btn-bg-active;
            color: @color-richeditor-toolbar-btn-color-hover;
        }

        &.fa-redactor-btn {
            padding: 9px 10px;
            line-height: 20px;
        }

        &.oc-redactor-button i:before {
            font-size: 16px !important;
        }

        &.oc-autumn-button {
            color: #c03f31;

            &:hover {
                color: white !important;
            }
        }
    }
}

.redactor-editor {
    border: none;
    font-size: 13px;
    color: @input-color;
    padding: 15px;
}

//
// Stretch
//

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

        .redactor-toolbar {
            .border-radius(0) !important;

            display: block;
            border-bottom: none;
            position: absolute;
            width: 100%;
            top: 0;
        }

        .redactor-editor, textarea {
            width: 100% !important;
            left: 0;
            top: 0;
            bottom: 0;
            position: absolute;
            height: auto !important;
            padding: 20px;
        }

        .redactor-editor {
            height: auto !important;
        }

        textarea {
            padding: 10px;
        }
    }
}

//
// Full screen
//

body .redactor-box-fullscreen {
    background: @body-bg;
    overflow-y: scroll !important;
    width: 100% !important;
    .redactor-editor {
        background: #fff;
        max-width: 960px;
        padding: 50px 30px !important;
        margin: @richeditor-gutter auto !important;
        padding: @richeditor-gutter;
        top: 0 !important;
    }
}

//
// Placeholders and snippets
//

.redactor-editor {
    .richeditor-snippet() {
        display: block;
        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);
        }
    }
}