// gmage-editor-transform
.gmage-editor {
    .gmage-editor-transform{
        box-sizing: border-box;
        border: 1px solid #FFF;
        position: absolute;
        z-index: 5;

        &:before{
            content: "";
            box-sizing: content-box;
            border: 1px dashed #666;
            cursor: move;
            height: 100%;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            margin:-1px 0 0 -1px;
        }
        &:after{
            content: "";
            cursor: move;
            height: 25px;
            width: 100%;
            position: absolute;
            top: 100%;
            left: 0;
            display: none;
        }

        &-editing{
            &:after{
                display: block;
            }
        }

        &-lock{
            &:before{
                cursor: no-drop;
            }

            .gmage-editor-grip,
            .gmage-editor-rotator{
                display: none;
            }
        }

        .gmage-editor-grip{
            cursor: nw-resize;
            margin-top: -15px;
            margin-left: -15px;
            padding: 11px;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 5;

            b{
                display: block;
                background: #FFF;
                border: 1px solid #666;
                height: 7px;
                width: 7px;
            }
        }
        .gmage-editor-grip-ne{
            cursor: ne-resize;
            margin-left: -14px;
            left: 100%;
        }
        .gmage-editor-grip-se{
            cursor: se-resize;
            margin-left: -14px;
            margin-top: -15px;
            left: 100%;
            top: 100%;
        }
        .gmage-editor-grip-sw{
            cursor: sw-resize;
            margin-top: -14px;
            top: 100%;
        }
        .gmage-editor-grip-n{
            cursor: n-resize;
            left: 50%;
        }
        .gmage-editor-grip-e{
            cursor: e-resize;
            margin-left: -14px;
            left: 100%;
            top: 50%;
        }
        .gmage-editor-grip-s{
            cursor: s-resize;
            margin-top: -14px;
            left: 50%;
            top: 100%;
        }
        .gmage-editor-grip-w{
            cursor: w-resize;
            top: 50%;
            left: 0;
        }
        .gmage-editor-rotator{
            cursor: pointer;
            margin: 8px 0 0 -16px;
            padding: 7px;
            position: absolute;
            left: 50%;
            top: 100%;
            z-index: 5;
            width: 32px;
            height: 32px;

            &:before,
            &:after{
                content: "";
                border-left: 1px solid #FFF;
                cursor: default;
                margin: -4px 0 0 -1px;
                height: 12px;
                width: 0;
                overflow: hidden;
                position: absolute;
                left: 50%;
                top: 0;
                pointer-events: none;
            }
            &:after{
                border-left: 1px dashed #666;
            }

            b{
                .icon(rotator);
                width: 18px;
                height: 18px;

                span{
                    font-weight: normal;
                    font-style: normal;
                    position: absolute;
                    top: 40px; left: 1px;
                    text-shadow: 0 0 1px #FFF;

                    display: inline-block;
                    width: 30px;
                    height: 20px;
                    text-align: center;
                }
            }
        }

        &.gmage-editor-transform-inner{
            @bdw: 4px;
            @bwOffset: -5px;

            border-color: #005CF9;
            cursor: move;
            // overflow: hidden;

            &:before{
                border: 1px solid #005CF9;
            }

            .gmage-editor-grip{
                cursor: nw-resize;
                left: initial;
                top: initial;
                margin-top: 0;
                margin-left: 0;
                padding: 0;
                position: absolute;
                z-index: 5;
                width: 15px;
                height: 15px;
                border: solid 5px #005CF9;
                b{
                    display: none;
                }
            }
            .gmage-editor-grip-ne{
                cursor: ne-resize;
                margin-left: -15px;
                right: @bwOffset;
                top: @bwOffset;
                border-width: @bdw @bdw 0 0;
            }
            .gmage-editor-grip-nw{
                cursor: ne-resize;
                left: @bwOffset;
                top: @bwOffset;
                border-width: @bdw 0 0 @bdw;
            }
            .gmage-editor-grip-se{
                cursor: se-resize;
                right: @bwOffset;
                bottom: @bwOffset;
                border-width: 0 @bdw @bdw 0;
            }
            .gmage-editor-grip-sw{
                cursor: sw-resize;
                margin-top: -14px;
                bottom: @bwOffset;
                left: @bwOffset;
                border-width: 0 0 @bdw @bdw;
            }
            .gmage-editor-grip-n{
                cursor: n-resize;
                left: 50%;
                top: @bwOffset;
                width: 18px;
                margin-left: -9px;
                border-width: @bdw 0 0 0;
            }
            .gmage-editor-grip-e{
                cursor: e-resize;
                margin-left: -14px;
                left: initial;
                right: @bwOffset;
                top: 50%;
                height: 18px;
                margin-top: -9px;
                border-width: 0 @bdw 0 0;
            }
            .gmage-editor-grip-s{
                cursor: s-resize;
                margin-top: -14px;
                left: 50%;
                bottom: @bwOffset;
                width: 18px;
                margin-left: -9px;
                border-width: 0 0 @bdw 0;
            }
            .gmage-editor-grip-w{
                cursor: w-resize;
                top: 50%;
                left: @bwOffset;
                height: 18px;
                margin-top: -9px;
                border-width: 0 0 0 @bdw;
            }
        }

        &.gmage-editor-grip_expand-vertical {
            .gmage-editor-grip-e {
                right: -13.5px;
                border-right-width: 0;
                border-left-width: 4px;
            }
            .gmage-editor-grip-w {
                left: -13.5px;
                border-left-width: 0;
                border-right-width: 4px;
            }
        }
        &.gmage-editor-grip_expand-horizontal {
            .gmage-editor-grip-s {
                bottom: -13.5px;
                border-top-width: 4px;
                border-bottom-width: 0;
            }
            .gmage-editor-grip-n {
                top: -13.5px;
                border-top-width: 0;
                border-bottom-width: 4px;
            }
        }

        &.octant0 .gmage-editor-grip-n{cursor: ns-resize}
        &.octant1 .gmage-editor-grip-n{cursor: nesw-resize}
        &.octant2 .gmage-editor-grip-n{cursor: ew-resize}
        &.octant3 .gmage-editor-grip-n{cursor: nwse-resize}
        &.octant4 .gmage-editor-grip-n{cursor: ns-resize}
        &.octant5 .gmage-editor-grip-n{cursor: nesw-resize}
        &.octant6 .gmage-editor-grip-n{cursor: ew-resize}
        &.octant7 .gmage-editor-grip-n{cursor: nwse-resize}

        &.octant0 .gmage-editor-grip-ne{cursor: nesw-resize}
        &.octant1 .gmage-editor-grip-ne{cursor: ew-resize}
        &.octant2 .gmage-editor-grip-ne{cursor: nwse-resize}
        &.octant3 .gmage-editor-grip-ne{cursor: ns-resize}
        &.octant4 .gmage-editor-grip-ne{cursor: nesw-resize}
        &.octant5 .gmage-editor-grip-ne{cursor: ew-resize}
        &.octant6 .gmage-editor-grip-ne{cursor: nwse-resize}
        &.octant7 .gmage-editor-grip-ne{cursor: ns-resize}

        &.octant0 .gmage-editor-grip-e{cursor: ew-resize}
        &.octant1 .gmage-editor-grip-e{cursor: nwse-resize}
        &.octant2 .gmage-editor-grip-e{cursor: ns-resize}
        &.octant3 .gmage-editor-grip-e{cursor: nesw-resize}
        &.octant4 .gmage-editor-grip-e{cursor: ew-resize}
        &.octant5 .gmage-editor-grip-e{cursor: nwse-resize}
        &.octant6 .gmage-editor-grip-e{cursor: ns-resize}
        &.octant7 .gmage-editor-grip-e{cursor: nesw-resize}

        &.octant0 .gmage-editor-grip-se{cursor: nwse-resize}
        &.octant1 .gmage-editor-grip-se{cursor: ns-resize}
        &.octant2 .gmage-editor-grip-se{cursor: nesw-resize}
        &.octant3 .gmage-editor-grip-se{cursor: ew-resize}
        &.octant4 .gmage-editor-grip-se{cursor: nwse-resize}
        &.octant5 .gmage-editor-grip-se{cursor: ns-resize}
        &.octant6 .gmage-editor-grip-se{cursor: nesw-resize}
        &.octant7 .gmage-editor-grip-se{cursor: ew-resize}

        &.octant0 .gmage-editor-grip-s{cursor: ns-resize}
        &.octant1 .gmage-editor-grip-s{cursor: nesw-resize}
        &.octant2 .gmage-editor-grip-s{cursor: ew-resize}
        &.octant3 .gmage-editor-grip-s{cursor: nwse-resize}
        &.octant4 .gmage-editor-grip-s{cursor: ns-resize}
        &.octant5 .gmage-editor-grip-s{cursor: nesw-resize}
        &.octant6 .gmage-editor-grip-s{cursor: ew-resize}
        &.octant7 .gmage-editor-grip-s{cursor: nwse-resize}

        &.octant0 .gmage-editor-grip-sw{cursor: nesw-resize}
        &.octant1 .gmage-editor-grip-sw{cursor: ew-resize}
        &.octant2 .gmage-editor-grip-sw{cursor: nwse-resize}
        &.octant3 .gmage-editor-grip-sw{cursor: ns-resize}
        &.octant4 .gmage-editor-grip-sw{cursor: nesw-resize}
        &.octant5 .gmage-editor-grip-sw{cursor: ew-resize}
        &.octant6 .gmage-editor-grip-sw{cursor: nwse-resize}
        &.octant7 .gmage-editor-grip-sw{cursor: ns-resize}

        &.octant0 .gmage-editor-grip-w{cursor: ew-resize}
        &.octant1 .gmage-editor-grip-w{cursor: nwse-resize}
        &.octant2 .gmage-editor-grip-w{cursor: ns-resize}
        &.octant3 .gmage-editor-grip-w{cursor: nesw-resize}
        &.octant4 .gmage-editor-grip-w{cursor: ew-resize}
        &.octant5 .gmage-editor-grip-w{cursor: nwse-resize}
        &.octant6 .gmage-editor-grip-w{cursor: ns-resize}
        &.octant7 .gmage-editor-grip-w{cursor: nesw-resize}

        &.octant0 .gmage-editor-grip-nw{cursor: nwse-resize}
        &.octant1 .gmage-editor-grip-nw{cursor: ns-resize}
        &.octant2 .gmage-editor-grip-nw{cursor: nesw-resize}
        &.octant3 .gmage-editor-grip-nw{cursor: ew-resize}
        &.octant4 .gmage-editor-grip-nw{cursor: nwse-resize}
        &.octant5 .gmage-editor-grip-nw{cursor: ns-resize}
        &.octant6 .gmage-editor-grip-nw{cursor: nesw-resize}
        &.octant7 .gmage-editor-grip-nw{cursor: ew-resize}

    }
    .show_important {
        display: block !important;
    }
}

.gmage-editor-transform-inner{
    cursor: move;
}