// block modal window wrapper

div.block-modal-window
    // z-index that's equal or higher to wp left and top menus
    z-index: 99999$i
    padding: 0
    border-radius: 0
    box-shadow: 0 1px 1px rgba(0,0,0,.04)
    &.ui-widget-content
        border: 1px solid $border
    .ui-dialog-titlebar
        background-color: transparent
        padding: 0
        border: 0
        padding: 0 12px
        border-bottom: 1px solid $line
        border-radius: 0
    .ui-dialog-title
        margin: 0
        font-size: 14px
        font-weight: 600
        color: $secondary
        line-height: 36px
    .ui-dialog-titlebar-close
        background: transparent
        border: 0
        outline: 0
        padding: 0
        top: 50%
        margin: 0
        width: 36px
        right: 0
        color: $icon-color
        padding: 0 5px
        line-height: 36px
        height: auto
        +transform(translateY(-50%))
        &:hover .ui-icon-closethick,
        &:focus .ui-icon-closethick,
        &:active .ui-icon-closethick
            background-image: none
            color: #fff
            background-color: $primary

    .ui-icon-closethick
        background-image: none
        text-indent: 0
        margin: 0
        left: 0
        top: 0
        width: auto
        height: auto
        &:after
            content: "\f158"
            padding: 0 8px
            font: 400 20px/1 dashicons
            speak: none
            vertical-align: middle
            -webkit-font-smoothing: antialiased
            -moz-osx-font-smoothing: grayscale

    .ui-dialog-buttonpane
        display: none
        padding: 10px
        border-top: 1px solid $line-dark
        background-color: #f5f5f5
        .ui-dialog-buttonset
            width: 210px
        .ui-button
            +button
            width: calc(50% - 6px)
            margin: 0 3px
    &.buttons-active
        .ui-dialog-buttonpane
            display: block

// blcok modal window container

.block-modal
    display: none
    &.ui-dialog-content
        padding: 10px
    .fields
        input,
        label,
        select
            width: 100%
        label
            color: $secondary
            font-weight: 600
            font-size: 13px
            margin-top: .5em
            margin-bottom: .5em
            display: block
            &:first-of-type
                margin-top: 0
        input,
        select
            line-height: 19px

        .wp-picker-default
            width: auto
        .image-container
            margin-bottom: .5em
            max-width: 175px
            line-height: normal
            img
                max-width: 100%

    .shortcode-tree
        height: 100%
        width: 100%
        box-sizing: border-box
        position: absolute
        left: 0
        padding: 3px 1.5px 6px
        top: 0
        font-size: 0
        button
            height: 100%
            width: calc(50% - 3px)
            display: inline-block
            margin: 0 1.5px 3px
            box-sizing: border-box
            font-size: 16px
            width: calc(50% - 3px)
            height: 50%

            // TODO: refactor
            &:first-child:nth-last-child(5),
            &:first-child:nth-last-child(5) ~ button
            &:first-child:nth-last-child(6),
            &:first-child:nth-last-child(6) ~ button,
            &:first-child:nth-last-child(7),
            &:first-child:nth-last-child(7) ~ button,
            &:first-child:nth-last-child(8),
            &:first-child:nth-last-child(8) ~ button,
            &:first-child:nth-last-child(9),
            &:first-child:nth-last-child(9) ~ button
                width: calc(33.3% - 3px)
                height: 33.3%

// playground

#grid
    .inside
        background-color: #F5F5F5
        padding: 12px
        margin-top: 0
        min-height: 308px

.grid-stack
    margin-left: -5px
    margin-right: -5px

.grid-container
    margin-top: 12px
    .grid-stack-placeholder > .placeholder-content
        border: 0
        background-color: #888
    .grid-stack-item
        .ui-resizable-se
            right: 5px
            text-align: center
            background: none
            +ico
            text-indent: 0
            &:before
                +icofont
                +transform(rotate(90deg))
                display: block
                content: "\65"
    .grid-stack-item-content
        background-color: #fff
        left: 5px$i
        right: 5px$i
        box-shadow: 0 1px 1px rgba(0,0,0,.04)
        border: 1px solid $border
    .shortcode-name
        font-size: 14px
        line-height: 35px
        float: left
        margin-left: 10px
        text-transform: capitalize
        font-weight: bold
        font-style: italic
    .controls
        position: absolute
        right: 0
        top: 0
        font-size: 0
        text-align: right
        width: 100%
        border-bottom: 1px solid $line
        a
            padding: 5px
            width: 25px
            height: 25px
            display: inline-block
            text-align: center
            &:hover
                color: #fff
                background-color: $primary
                &.remove-block
                    background-color: $danger
                &.edit-block
                    background-color: $success
                &.remove-shortcode
                    background-color: $warning
            &:focus
                box-shadow: none