@import "../../../css/vars";

// Widget styling

.cke_widget_drag_handler_container_swc_hidden {
    display: none !important;
}

.cke_widget_drag_handler_container,
.swc_asset_resizer_icon_wrapper,
.swc_asset_any_icon_wrapper,
.swc_asset_refreshing {
    width: 32px !important;
    background: fadeout(@ssbItBg, 0%) !important;
    overflow: hidden;
    z-index: 9999;

    .add_box_sizing();
    * {
        .add_box_sizing();
    }

    i, .swc_icon {
        margin: 4px;
        padding: 2px;
        color: #909090;
        font-family: fontawesome;
        font-size: 20px;
        position: absolute;
        width: 32px;
        height: 32px;
    }

    .swc_icon {
        font-family: 'swiftysiteui';
        padding-top: 13px;
        padding-left: 4px;
        font-size: 18px;
    }

    &.swc_hide_icon {
        display: none !important;
    }
}

.swc_asset_resizer_icon_wrapper,
.swc_asset_any_icon_wrapper,
.swc_asset_refreshing {
    position: absolute;
//    top: 0;
//    right: 0;
    margin-top: 0;
    margin-left: 0;
    overflow: visible;
    height: 32px !important;

    i {
        margin: 5px;
        width: auto;
        height: auto;
    }
}

.swc_icon_wr_divider {
    width: 1px;
    height: 32px !important;
    display: block;
    float: left;
    background-color: #CACACA;
}

.swc_asset_adv_icons_wrapper {
    visibility: hidden;
    background-color: transparent !important;

    .swc_asset_any_icon_wrapper {
        position: relative;
        display: block;
        float: left;
        cursor: pointer;
    }

    .cke_widget_drag_handler_container {
        opacity: 1;
    }

    &::after {
        content: '';
        display: table;
        clear: both;
    }
}

.swc_asset_title_icons_wrapper {
    visibility: hidden;
    display: inline-block;
    height: 32px;
    line-height: 32px;
    padding: 0 8px;
    background: fadeout(@ssbItBg, 10%) !important;
    word-wrap: normal;
    font-family: @font-family-base;
    color: #909090;
    border-left: 1px solid #CACACA;
}

.swc_asset_plus_icon_wrapper,
.swc_asset_p_plus_icon_wrapper {
    display: block !important;

    i {
        left: 2px;
    }

    &:hover {
        cursor: pointer !important;
    }
}

div .swc_asset_resizer_icon_wrapper {
    display: block;

    &:hover {
        cursor: w-resize;
    }
}

div .swc_asset_cog_icon_wrapper {
    display: block;
    right: 0;
    z-index: 99999 !important;

    > .swc_icon, > i {
        margin: 0;
        padding: 16px 0 0 8px;
    }

    > i {
        padding: 7px 0 0 9px;
        width: 32px !important;;
        height: 32px !important;
    }

    &:hover {
        cursor: pointer;
        opacity: 1;
        background: transparent !important;

        > .swc_icon, > i {
            background: @ssbItBg !important;
            opacity: 0.75;

            &:hover {
                opacity: 1;
            }
        }

        .swc_asset_adv_icons_wrapper, .swc_asset_title_icons_wrapper {
            visibility: inherit;
        }

        .swc_asset_adv_icons_wrapper {
            .cke_widget_drag_handler_container {
                opacity: .75;

                &:hover {
                    opacity: 1;
                }
            }

            .swc_icon_wr_divider {
                opacity: .75;
            }
        }
    }
    &.swc_asset_adv_icon_wrapper:hover {
        //cursor: move;
    }
    .swc_asset_move_icon_wrapper {
        cursor: move;
    }

}

.swc_asset_cog_icon_row_wrapper {
    top: -32px;
}

.cke_widget_wrapper {

    .cke_widget_editable.cke_widget_editable_focused {
        outline: none !important;
    }

    .swc_asset,
    .swc_text,
    .swc_grid_column {
        position: relative;   // Only in edit mode, so we can absolute position the resize icon.
    }

    .ckimgrsz {
        visibility: hidden;
        &.swc_resizing {
            visibility: visible;
        }
    }

    &:hover {
        & > .cke_widget_element {
            outline: 1px solid @ssbDragBorderColor !important;

            &.swc_grid_row {
                outline: none !important;
            }

            &.swc_hide_outline {
                outline: none !important;
            }
        }
        &.cke_widget_editable {
            outline: none !important;
        }
        & > .cke_widget_drag_handler_container {
            height: 32px !important;
        }

        .ckimgrsz {
            visibility: visible;
        }
    }

    // START From resize plugin
//    img::selection {
//        color: rgba(0, 0, 0, 0)
//    }
    img.ckimgrsz {
        outline: 1px dashed #000
    }
    .ckimgrsz {
        position: absolute;
        width: 0;
        height: 0;
        cursor: default;
        z-index: 10001
    }
    .ckimgrsz span {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        background-size: 100% 100%;
        opacity: .65;
        outline: 1px dashed #000
    }
    .ckimgrsz i {
        position: absolute;
        display: block;
        width: 5px;
        height: 5px;
        background: #fff;
        border: 1px solid #000
    }
    .ckimgrsz i.active, .ckimgrsz i:hover {
        background: #000
    }
    .ckimgrsz i.br, .ckimgrsz i.tl {
        cursor: nwse-resize
    }
    .ckimgrsz i.bm, .ckimgrsz i.tm {
        cursor: ns-resize
    }
    .ckimgrsz i.bl, .ckimgrsz i.tr {
        cursor: nesw-resize
    }
    .ckimgrsz i.lm, .ckimgrsz i.rm {
        cursor: ew-resize
    }
    body.dragging-br, body.dragging-br *, body.dragging-tl, body.dragging-tl * {
        cursor: nwse-resize !important
    }
    body.dragging-bm, body.dragging-bm *, body.dragging-tm, body.dragging-tm * {
        cursor: ns-resize !important
    }
    body.dragging-bl, body.dragging-bl *, body.dragging-tr, body.dragging-tr * {
        cursor: nesw-resize !important
    }
    body.dragging-lm, body.dragging-lm *, body.dragging-rm, body.dragging-rm * {
        cursor: ew-resize !important
    }
    // END From resize plugin
}

img.cke_widget_drag_handler {
    width: 32px !important;
    height: 32px !important;
    position: absolute;
    cursor: pointer !important;
}

// Other styling

.cke_float .cke_top {
    border-bottom-color: #b6b6b6 !important;
}

.cke_top {
    padding: 0 !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    background-image: none !important;
    background: @panelBackgroundColor !important;
    filter: none !important;
}

.cke_toolgroup {
    float: none !important;
    margin: 0 !important;
    border: none !important;
}

.cke_combopanel__font {
    width: 225px !important;
}

.cke_combo_button,
.cke_button {
    height: 20px !important;
    padding: 8px 12px !important;
}

.cke_combo_text {
    line-height: 22px !important;
}

.cke_combo_arrow {
    margin: 6px 0 0 !important;
}

.cke_button,
.cke_combo_button {
    border: none !important;
    margin: 0 !important;
    -moz-border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    border-radius: 0 !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    background: none !important;
    filter: none !important;
}

.cke_combo_on,
.cke_combo_off,
.cke_button_on,
.cke_button_off,
.cke_button_disabled {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    background-image: none !important;
    filter: none !important;

    &:hover,
    &:focus,
    &:active {
        -moz-box-shadow: none !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        background-image: none !important;
        background-color: darken(@panelBackgroundColor, 5%) !important;
        filter: none !important;
    }
}

.cke_combo_on,
.cke_button_on {
    background-color: darken(@panelBackgroundColor, 10%) !important;
}

.cke_combo_off,
.cke_button_off {
    background-color: @panelBackgroundColor !important;
}

.cke_combo_disabled,
.cke_button_disabled {
    background-color: @panelBackgroundColor !important;
}

.swc_hide_asset_icon {
    display: none !important;
}

.cke_editable {
    .cke_widget_wrapper:hover {
        > .cke_widget_element,
        .cke_widget_editable {
            outline: none;

            .swc_grid_colwrapper {
                outline: 1px solid #c0c0c0;
            }

            &.swc_hide_outline {
                outline: none !important;

                .swc_grid_colwrapper {
                    outline: none !important;
                }
            }
        }

        .swc_text {
            cursor: text;
        }
    }
}

// Remove the light blue CK border of selected widgets
.cke_widget_wrapper.cke_widget_focused>.cke_widget_element,
.cke_widget_wrapper .cke_widget_editable.cke_widget_editable_focused {
    //outline: 2px solid #ace;
    outline: none !important;
}

// Long selectors to make sure it will be applied over other !important
body.swc_no_editor_hovers div .cke_editable {
    .cke_widget_wrapper, .cke_widget_wrapper:hover {
        > .cke_widget_element,
        .cke_widget_editable {
            outline: none !important;
        }
    }

    .cke_widget_drag_handler_container,
    .swc_asset_resizer_icon_wrapper,
    .swc_asset_any_icon_wrapper,
    .swc_asset_refreshing {
        display: none !important;
    }

    .swc_grid_row .swc_grid_colwrapper .swc_grid_column {
        outline: 1px solid @ssbDragBorderColor !important;
    }
}

.swc_drag_insert_placeholder {
    width: 100%;
    height: 20px;

    background-image: linear-gradient(
        -45deg,
        @ssHighlightColor 25%,
        white 25%,
        white 50%,
        @ssHighlightColor 50%,
        @ssHighlightColor 75%,
        white 75%,
        white
    );
    background-size: 4px 4px;
}

.swc_drag_drag_placeholder {
    outline: 1px solid @ssbDragBorderColor !important;
    overflow: hidden;

    .swc_grid_row,
    .swc_grid_row *,
    .swc_text
    .swc_asset {
        // This will make the transparent gradient mask working in Chrome
        position: inherit;
    }

    .swc_grid_row,
    .swc_text
    .swc_asset {
        margin: 0 !important;
    }
}

.swc_drag_drag_hide {
    display: none !important;
}

.swc_fix_cursor_move {
    cursor: move !important;
}

.swc_video_drag_wrapper {
    background-color: #a0a0a0;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    padding: 50px;
    text-align: center;
    color: white;
}

.swc_page_mouse_moved {
    .cke_editable .swc_grid_colwrapper {
        outline: 1px solid #c0c0c0;
    }
}

@keyframes swc_eff_pg_fadeout {
  0%   { outline-color: rgba( 192, 192, 192, 1 ); }
  100% { outline-color: rgba( 192, 192, 192, 0 ); }
}

.swc_page_m_m_fadeout {
    .cke_editable .swc_grid_colwrapper {
        animation: swc_eff_pg_fadeout 1000ms infinite;
    }
}

@keyframes swc_eff_fadeout {
  0%   { opacity: .75; }
  100% { opacity: 0; }
}

.swc_will_remove {
    animation: swc_eff_fadeout 1000ms infinite;
}