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

.field-codeeditor {
    width: 100%;
    position: relative;
    border: 2px solid @input-border;
    .border-radius(@border-radius-base);
    textarea { opacity: 0; }

    &.editor-focus { border: 2px solid @input-border-focus; }

    &.size-tiny { min-height: @size-tiny; }
    &.size-small { min-height: @size-small; }
    &.size-large { min-height: @size-large; }
    &.size-huge { min-height: @size-huge; }
    &.size-giant { min-height: @size-giant; }

    .ace_search {
        font-family: @font-family-base;
        font-size: 14px;
        color: @text-color;
        z-index: @zindex-form + 3;

        // Fixes double focus on search box
        .ace_search_form.ace_nomatch {
            outline: none !important;

            .ace_search_field {
                border: .0625rem solid red;
                -webkit-box-shadow: 0 0 .1875rem .125rem red;
                box-shadow: 0 0 .1875rem .125rem red;
                z-index: 1;
                position: relative;
            }
        }
    }

    .editor-code {
        .border-radius(@border-radius-base);
    }

    .editor-toolbar {
        position: absolute;
        padding: 0 5px;
        bottom: 10px;
        right: 25px;
        z-index: @zindex-form;
        background: rgba(0,0,0,.8);
        border-radius: 5px;

        // Conflict with easymde
        border: none;
        &:before {
            display: none;
        }

        > ul, ul > li { list-style-type: none; padding: 0; margin: 0; }
        > ul > li {
            float: left;

            .tooltip.left {
                margin-right: 25px;
            }
        }
        > ul > li > a {
            display: block;
            height: 25px;
            width: 25px;
            color: #666;
            font-size: 20px;
            text-align: center;
            text-decoration: none;
            text-shadow: 0 0 5px #000;

            > abbr {
                position: absolute;
                .text-hide();
            }
            > i {
                opacity: 1;
                display: block;
                &:before {
                    font-size: 15px;
                }
            }
            &:hover, &:focus {
                > i {
                    opacity: 1;
                    color: #fff;
                }
            }
        }
    }

    &.editor-fullscreen {
        z-index: @zindex-fullscreen + 1;
        position: fixed !important;
        top: 0;
        left: 0;
        height: 100%;
        border-width: 0;
        .border-radius(0);
        .editor-toolbar {
            z-index: @zindex-fullscreen + 2;
        }
        .editor-code { .border-radius(0); }
        .ace_search { z-index: @zindex-fullscreen + 3; }
    }
}
