@import "compass/css3"
@import "compass/css3/user-interface"
@import "compass/css3/transition"


/* ---- SNIPPET EDITOR ---- {{{ */

#oe_snippets
    #o_left_bar, #o_arrow
        position: fixed
        top: 34px
        left: 0px
        bottom: 0
        background: rgb(40,40,40)
        +box-shadow(0px 10px 10px -10px black inset)
        font-size: 14px
        .snippets_loading
            color: white
    #o_arrow
        z-index: 1009
        width: 24px
        opacity: 0.75
        > *
            position: absolute
            color: white
        div
            @include transform( translateX(-36%) rotate(-90deg) )
            top: 50%
            white-space: nowrap
        .fa
            width: 100%
            left: 40%
    #o_left_bar
        left:  -228px
        z-index: 1010
        width: 210px
        @include transition(all 500ms ease)
        ul
            text-align: center
            margin: 0
            padding: 6px 0
            list-style-type: none
            li
                display: inline-block
                padding: 0 3px
                a
                    color: #aaa
                .fa-stack
                    overflow: hidden
            li.active a.fa, li.active .fa-stack-1x
                color: #428bca

    &.o_open #o_left_bar
        left: 0
    .o_panel
        margin: 0
        border: 0
        width: 210px
    .o_panel_header
        background: #dff0d8
        padding: 1px 8px
        color: #414141
        text-align: center
        .fa-stack
            overflow: hidden
            font-size: 1em
    .o_panel_body
        white-space: normal
        background: black
        padding: 7px 3px
        > div
            background: rgb(0,0,0)
            label
                width: 44px
                color: #fff
                padding-left: 10px

                div
                    width: 100px
                    text-align: center
                    @include transform( translate(-39px, 44px) , rotate(-90deg) )
                    @include transform-origin(50%)

.oe_snippet
    display: inline-block
    vertical-align: top
    width: 93px
    margin-left: 3px
    margin-right: 3px
    margin-top: 1px
    position: relative
    overflow: hidden
    +user-select(none)
    cursor: move
    .oe_snippet_thumbnail
        text-align: center
        height: 100%
        background: transparent
        color: white
        position: relative
        &:hover
            .oe_snippet_thumbnail_img
                @include transform( scale(.95,.95))
        .oe_snippet_thumbnail_title
            font-size: 12px
            display: block
            +text-shadow(0 0 2px rgb(0,0,0))
        .oe_snippet_thumbnail_img
            height: 74px
            width: 92px
            background-size: cover
            @include transform( scale(1,1))
        span, div
            line-height: 18px
    & > :not(.oe_snippet_thumbnail)
        display: none !important
    &.disable
        .oe_snippet_thumbnail
            background-color: rgba(255, 0, 0, 0.75)
        .oe_snippet_thumbnail_img
            opacity: 0.8
#oe_snippets .oe_snippet_thumbnail
    @include background(#747474, radial-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.4)))

// }}}}

/* ---- SNIPPETS DROP ZONES ---- {{{ */

.oe_drop_zone.oe_insert
    display: block
    height: 48px
    margin: 0px
    margin-top: -4px
    margin-bottom: -44px
    @include transition(margin 250ms linear)
    width: 100%
    position: absolute
    z-index: 1000
    &:not(.oe_vertical):before
        content: ""
        display: block
        border-top: dashed 2px rgba(209, 178, 255, 0.72)
        position: relative
        top: 0px
    &.oe_hover:before
        border-top: dashed 2px rgba(116, 255, 161, 0.72)
    &.oe_vertical
        width: 48px
        float: left
        position: relative
        margin: 0px -24px !important
    &.oe_vertical_text
        width: 48px
        float: none
        display: inline-block
        position: relative
        margin: 0px -24px !important
    &.oe_overlay
        +border-radius(3px)
        //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.1) ,rgba(255,255,255,.1) 35px, rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 75px))
        //background-size: 100px 100px
        background: rgba(153, 0, 255,.5)

.oe_drop_zone, .oe_drop_zone_style
    border: none
    //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.1) ,rgba(255,255,255,.1) 35px, rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 75px))
    //background-size: 100px 100px
    background: rgba(153, 0, 255, .3)
    +border-radius(4px)
    &.oe_hover
        background: rgba(0, 255, 133, .3)
        z-index: 1001

.oe_drop_zone_style
    color: white
    height: 48px
    margin-bottom: 32px
    padding-top: 12px

// }}}

/* ---- SNIPPET MANIPULATOR ----  {{{ */

#oe_manipulators
    position: absolute
    top: 0
    z-index: 1050

.resize_editor_busy
    background-color: rgba(0,0,0,0.3)

.oe_overlay
    display: none
    height: 0
    position: absolute
    background: transparent
    z-index: 1001
    //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.02) ,rgba(255,255,255,.02) 35px, rgba(0,0,0,.02) 35px, rgba(0,0,0,.02) 75px))
    +border-radius(3px)
    @include transition(opacity 100ms linear)
    +box-sizing(border-box)
    &.oe_active
        display: block
    .oe_handle
        display: block !important
        position: absolute
        top: 50%
        left: 50%
        +box-sizing(border-box)
        width: 16px
        height: 16px
        margin: -2px
        > div
            z-index: 1
            position: absolute
            border-style: dashed
            border-width: 1px
            border-color: #666666
            +box-shadow(0px 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 0px 1px rgba(255,255,255,0.5) inset)
        &.e:before, &.w:before, &.s:before, &.n:before, &.size .oe_handle_button
            z-index: 2
            position: relative
            top: 50%
            left: 50%
            display: block
            background: rgba(255, 255, 255, 1)
            border: solid 1px rgba(0, 0, 0, .2)
            +border-radius(5px)
            width: 18px
            height: 18px
            margin: -9px
            padding-left: 1px
            font-size: 14px
            line-height: 14px
            font-family: FontAwesome
            color: rgba(0,0,0,.5)
            @include transition(background 100ms linear)
        &.e, &.w, &.s, &.n
            &:hover:before
                background: rgba(0, 0, 0, .5)
                color: #fff
                +box-shadow(0 0 5px 3px rgba(255,255,255,.7))
        &.e, &.w
            top: 4px
            height: 100%
            &:before
                content: "\f07e"
                line-height: 16px
            > div
                width: 0
                height: 100%
                top: 2px
                left: 8px
        &.e
            left: auto
            right: -6px
            cursor: w-resize
        &.w
            left: -6px
            cursor: e-resize
        &.s, &.n
            left: 2px
            width: 100%
            &:before
                content: "\f07d"
                text-align: center
                padding: 1px
            > div
                width: 100%
                height: 0
                top: 7px
                left: 1px
        &.s
            top: auto
            cursor: n-resize
        &.n
            cursor: s-resize
            > div
                top: 5px
        &.size
            z-index: 3
            top: auto
            left: 50%
            bottom: -6px
            margin-left: -50px
            .oe_handle_button
                position: relative
                z-index: 3
                text-align: center
                margin-left: -52px
                margin-top: -10px
                left: 0px
                &:hover
                    background: rgba(30, 30, 30, .8)
                    color: #fff
                    +box-shadow(0 0 5px 3px rgba(255,255,255,.7))
            .size
                position: absolute
                width: 64px
                cursor: row-resize
                top: 9px
                margin-left: 52px
                padding: 0 5px
            .auto_size
                position: absolute
                width: 100px
                top: 9px
                cursor: pointer
        &.readonly
            cursor: auto !important
            &:before, &.size
                display: none !important

    .icon.btn
        display: inline-block

    .oe_overlay_options
        position: absolute
        width: 100%
        top: -35px
        z-index: 1002
        > .btn-group
            display: -ms-flexbox
            display: -moz-box
            display: -webkit-box
            display: -webkit-flex
            display: flex
            -moz-justify-content: center
            -webkit-justify-content: center
            justify-content: center
            > *
                cursor: pointer
                -ms-flex: 0 0 auto
                -moz-flex: 0 0 auto
                -webkit-box-flex: 0
                -webkit-flex: 0 0 auto
                flex: 0 0 auto
        .btn, a
            cursor: pointer
        .dropdown
            display: inline-block
        .dropdown-menu
            text-align: left
            min-width: 180px
        .dropdown-menu select,.dropdown-menu input
            display: block

    &.block-w-left .w:before
        content: "\F061" !important
    &.block-w-right .w:before
        content: "\F060" !important
    &.block-w-left.block-w-right .w:before
        display: none !important
    &.block-e-left .e:before
        content: "\F061" !important
    &.block-e-right .e:before
        content: "\F060" !important
    &.block-e-left.block-e-right .e:before
        display: none !important

    &.block-s-top .s:before
        content: "\F063" !important
    &.block-s-bottom .s:before
        content: "\f062" !important
    &.block-n-top .n:before
        content: "\F063" !important
    &.block-n-bottom .n:before
        content: "\f062" !important

    &.o_keypress
        opacity: 0
        -webkit-transition: .8s
        -moz-transition: .8s
        -o-transition: .8s
        -transition: .8s


.s-resize-important, .s-resize-important *
    cursor: s-resize !important
.n-resize-important, .n-resize-important *
    cursor: n-resize !important
.e-resize-important, .e-resize-important *
    cursor: e-resize !important
.w-resize-important, .w-resize-important *
    cursor: w-resize !important
.move-important, .move-important *
    cursor: move !important

// }}}