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

@codeeditor-zindex: 600;

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

    &.editor-focus { border: 2px solid @color-form-field-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: @codeeditor-zindex + 3;
    }

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

    .editor-toolbar {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: @codeeditor-zindex;
        > 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;
            > abbr {
                position: absolute;
                .text-hide();
            }
            > i {
                .opacity(.7);
                display: block;
                &:before {
                    font-size: 15px;
                }
            }
            &:hover, &:focus {
                > i { .opacity(1); }
            }

        }
    }

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