/**!
 * KEditor - Kademi content editor
 * @copyright: Kademi (http://kademi.co)
 * @author: Kademi (http://kademi.co)
 * @version: @{version}
 * @dependencies: $, $.fn.draggable, $.fn.droppable, $.fn.sortable, Bootstrap, FontAwesome (optional)
 */
// ==================================================================================
// Import
// ==================================================================================
@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "_variables";

/* ==================================================================================
   Body
   ================================================================================== */
body {
    margin: 0;
    overflow-y: scroll;
}

/* ==================================================================================
   KEditor base
   ================================================================================== */
#keditor-sidebar,
.keditor-toolbar {
    font: 14px/1.42857143 "Helvetica Neue", Helvetica, Arial, sans-serif !important;

    small,
    .small {
        font-size: 88% !important;
    }
}

/* ==================================================================================
   opened-keditor-sidebar
   ================================================================================== */
body.opened-keditor-sidebar {
    .keditor-content-area {
        margin-right: 260px;
    }

    #keditor-sidebar {
        right: 0;
    }
}

/* ==================================================================================
   highlighted-container-content
   ================================================================================== */
body.highlighted-container-content {
    .keditor-container-content {
        &:before {
            border-color: @container-content-outline-highlighted;
        }
    }
}

/* ==================================================================================
   Frame
   ================================================================================== */
.keditor-frame {
    width: 100%;
    height: 500px;
    border: 1px solid @border-color;
}

/* ==================================================================================
   Content area
   ================================================================================== */
.keditor-content-area {
    min-height: 100px;
    width: auto;
    margin: 0;
    padding: 80px 50px 30px;
}

/* ==================================================================================
   Sidebar
   ================================================================================== */
#keditor-sidebar {
    position: fixed;
    z-index: 100;
    top: 0;
    right: -255px;
    bottom: 0;
    background: @sidebar-bg;
    opacity: .9;
    border-left: 1px solid @border-color;
    width: 255px;
    box-shadow: -1px 0 5px @sidebar-shadow-color;
    padding: 10px;
    .transition(all @animation-duration);

    &:hover {
        opacity: 1;
    }
}

#keditor-sidebar-toggler {
    position: absolute;
    top: 100px;
    width: 25px;
    height: 30px;
    left: -25px;
    background: @sidebar-bg;
    text-align: center;
    line-height: 30px;
    border: 1px solid @border-color;
    border-right: 0;
    cursor: pointer;
    border-radius: @border-radius 0 0 @border-radius;
    color: @sidebar-color;

    > i.fa {
        line-height: inherit;
    }
}

/* ==================================================================================
   Snippets
   ================================================================================== */
#keditor-snippets-list {
    height: 100%;

    .keditor-snippet {
        &:hover {
            opacity: .6;
            border-color: @snippet-border-color-hover;
        }

        &.not-matched {
            height: 0 !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            overflow: hidden;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            border: 0 !important;
            opacity: 0 !important;
        }
    }
}

#keditor-snippets-type-switcher {
    margin: 0;

    > li {
        > a {
            border-radius: @border-radius @border-radius 0 0;
            height: 42px;
            padding: 10px 5px;
        }

        &.active {
            > a {
                font-weight: bold;
            }
        }
    }
}

#keditor-snippets-container {
    height: ~"calc(100% - 42px)";
    background: @snippet-bg;
    padding: 10px 5px;
    border: solid @border-color;
    border-width: 0 1px 1px;

    > .keditor-snippets {
        height: 100%;

        > .keditor-snippets-inner {
            height: 100%;
            .clearfix();
            overflow-y: auto;
            overflow-x: hidden;
        }

        > .keditor-snippets-filter-wrapper {
            margin: 0 5px;

            .keditor-snippets-filter,
            .keditor-snippets-search {
                border: 1px solid @border-color;
                height: 34px;
                padding: 5px 10px;
                font-size: 14px;
                line-height: 1.42857143;
                width: 100%;
                display: block;
                margin-bottom: 10px;
            }

            + .keditor-snippets-inner {
                height: ~"calc(100% - 88px)";
            }
        }
    }
}

.keditor-snippet {
    padding: 15px;
    border: 1px solid @snippet-border-color;
    cursor: move;
    .transition(all @animation-duration);
    float: left;
    background: @snippet-bg;
    margin: 0 5px 10px;
    .user-select(none);

    img {
        display: block;
    }

    &:last-child {
        margin-bottom: 0;
    }
}

/* ==================================================================================
   Settings panel
   ================================================================================== */
#keditor-setting-panel {
    background: #fff;
    position: absolute;
    z-index: 1001;
    top: 10px;
    width: ~"calc(100% - 20px)";
    right: -100%;
    bottom: 10px;
    border: 1px solid @border-color;
    border-radius: @border-radius;
    .transition(all @animation-duration);

    .opened-keditor-setting & {
        right: 10px;
    }
}

#keditor-setting-header {
    height: 42px;
    border-bottom: 1px solid @border-color;
    .clearfix;
    padding: 10px 30px 10px 15px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

#keditor-setting-title {
    color: #666;
    font-weight: bold;
}

#keditor-setting-closer {
    text-decoration: none;
    color: lighten(#666, 20%);
    position: absolute;
    top: 10px;
    bottom: 10px;
    right: 10px;
    width: 21px;
    text-align: center;
    line-height: 21px;

    &:hover {
        color: #666;
    }
}

#keditor-setting-body {
    position: absolute;
    top: 42px;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px;
}

#keditor-setting-forms {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;

    .keditor-setting-form {
        overflow: hidden;
        display: none;

        &.active {
            display: block;
        }
    }
}

/* ==================================================================================
   Toolbar
   ================================================================================== */
.keditor-toolbar {
    position: absolute;
    display: none;

    > a {
        padding: 1px 3px;
        font-size: 12px;
        width: 20px;
        height: 20px;
        display: block;
        text-align: center;
        line-height: 20px;

        .fa {
            line-height: inherit;
        }
    }

    .btn-container-reposition,
    .btn-component-reposition {
        cursor: move;
    }
}

/* ==================================================================================
   Container
   ================================================================================== */
.keditor-container {
    position: relative;

    &:before {
        position: absolute;
        top: -3px;
        right: -3px;
        left: -3px;
        bottom: -3px;
        border: 3px dashed transparent;
        content: " ";
        display: block;
    }

    > .keditor-toolbar {
        top: -3px;
        left: -39px;
        border: 1px solid @container-toolbar-border-color;
        border-radius: @border-radius;
        overflow: hidden;

        > a {
            background: @container-toolbar-button-bg;
            color: @container-toolbar-button-color;

            &:hover {
                background: @container-toolbar-button-bg-hover;
            }
        }
    }

    &:hover {
        &:before {
            border-color: @container-outline-color-hover;
        }
    }

    &.showed-keditor-toolbar {
        &:before {
            border-color: @container-outline-color-selected;
        }

        > .keditor-toolbar {
            display: block;
        }
    }
}

.keditor-container-content {
    min-height: 50px !important;
    position: relative;

    &:before {
        position: absolute;
        top: -1px;
        left: -1px;
        right: -1px;
        bottom: -1px;
        content: " ";
        display: block;
        border: 1px dashed @container-content-outline-color;

    }
}

/* ==================================================================================
   Component
   ================================================================================== */
.keditor-component {
    position: relative;

    &:before {
        position: absolute;
        top: -2px;
        right: -2px;
        left: -2px;
        bottom: -2px;
        content: " ";
        border: 2px solid @container-content-toolbar-outline-color;
        display: none;
        z-index: 1;
    }

    .keditor-toolbar {
        top: -24px;
        right: -2px;
        left: -2px;
        background-color: @container-content-toolbar-bg;
        padding: 2px 2px;
        text-align: right;

        > a {
            border: 0;
            background: none;
            color: @container-content-toolbar-button-color;
            text-align: center;
            border-radius: 0;
            .box-shadow(none);
            .transition(all @animation-duration);
            display: inline-block;

            &:hover {
                background-color: @container-content-toolbar-button-bg-hover;
            }
        }
    }

    .keditor-component-content {
        position: relative;
        z-index: 2;
    }

    &:hover,
    &.showed-keditor-toolbar {
        &:before {
            display: block;
        }
    }

    &.showed-keditor-toolbar {
        .keditor-component-content {
            outline: none !important;
        }
    }

    &:hover {
        z-index: 2;

        &:before {
            border-top: 0;
        }

        .keditor-toolbar {
            display: block;
        }
    }
}

/* ==================================================================================
   Drag n Drop helper
   ================================================================================== */
.keditor-snippet {
    // When dragging
    &.ui-draggable-dragging {
        .transition(none) !important;
    }
}

.ui-sortable-placeholder {
    background: @snippet-placeholder-bg !important;
    visibility: visible !important;
    height: 10px !important;
    margin: 5px 0 !important;
    float: none !important;
    outline: none !important;
}

.keditor-section {
    &.ui-sortable-helper {
        background: @snippet-bg !important;
        opacity: 0.5;
    }
}
