// /**
//  * Copyright © Magento, Inc. All rights reserved.
//  * See COPYING.txt for license details.
//  */

.pagebuilder-content-type {
    display: block;
    font-size: 14px;

    [contenteditable=true] {
        -webkit-user-select: text;
        overflow-wrap: break-word;
        user-select: text;
        word-wrap: break-word;

        b {
            font-weight: normal;
        }
        i {
            font-style: normal;
        }
        &.placeholder-text:before {
            content: attr(data-placeholder);
        }
    }

    .pagebuilder-system-border;

    &.pagebuilder-content-type-active:hover:not(.no-system-border) {
        .pagebuilder-system-border-hover;

        &.pagebuilder-content-type-affordance {
            box-shadow: @pagebuilder-affordance-box-shadow-active;
        }
    }

    &.type-container:not(.pagebuilder-root-container) {
        box-shadow: 0 0 0 1px rgba(153, 153, 153, .3);

        &.pagebuilder-content-type-affordance {
            box-shadow: @pagebuilder-affordance-box-shadow;
        }
    }

    .pagebuilder-empty-container {
        -moz-transition: .3s;
        -webkit-transition: .3s;
        color: rgba(153, 153, 153, .8);
        font-size: 14px;
        left: 0;
        opacity: 0;
        position: absolute;
        text-align: center;
        top: 50%;
        transform: translateY(-50%);
        transition: .3s;
        visibility: hidden;
        width: 100%;

        &.visible {
            opacity: 1;
            visibility: visible;
        }

        &.empty-placeholder {
            left: 0;
            text-align: center;
            z-index: 1;
        }

        &.empty-placeholder-background {
            -moz-transition: .3s;
            -webkit-transition: .3s;
            background: url('@{baseDir}Magento_PageBuilder/css/images/cms-empty-row.svg') no-repeat center center;
            background-size: 505px 97px;
            height: 170px;
            padding-top: 130px;
            position: absolute;
            transition: .3s;
        }
    }

    .element-children {
        font-size: 0;
        position: relative;
    }

    &.children-min-height {
        > .element-children {
            min-height: 190px;
            padding: 30px;
        }
        > div {
            > .element-children {
                min-height: 190px;
                padding: 30px;
            }
        }
    }

    &.pagebuilder-abstract {
        background: @entity-color;
        color: @color-white;
        text-align: center;

        i {
            font-size: 24px;
        }

        h3 {
            margin: 6px 0 0;
            padding: 0;
        }

        * {
            color: @color-white;
        }
    }

    .pagebuilder-loading {
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    &.pagebuilder-image {
        .pagebuilder-image-placeholder {
            background: @color-white-fog;
            cursor: pointer;
            font-size: 12px;
            padding: 30px 0 16px;
            text-align: center;

            i {
                font-size: 34px;
                margin-bottom: 8px;
            }

            p {
                padding: 0 20px;
            }
        }

        &.loading {

            img {
                opacity: .5;
            }
        }

        .dz-message,
        .dz-preview {
            display: none;
        }

        &.dz-drag-hover {
            img,
            .pagebuilder-image-placeholder {
                -moz-filter: blur(5px);
                -webkit-filter: blur(5px);
                filter: blur(5px);
                opacity: .6;
            }
        }
    }

    &:before {
        &:extend(.pagebuilder-icon all);
        -moz-transition: opacity 200ms, top 200ms, visibility 200ms;
        -o-transition: opacity 200ms, top 200ms, visibility 200ms;
        -webkit-transition: opacity 200ms, top 200ms, visibility 200ms;
        align-items: center;
        background: rgba(238, 238, 238, .7);
        color: @color-gray65;
        content: @icon-pagebuilder-hide__content;
        display: flex;
        font-size: 3.5em;
        height: 100%;
        justify-content: center;
        left: 0;
        line-height: 0;
        opacity: 0;
        position: absolute;
        text-shadow: 0 0 25px rgba(238, 238, 238, .7);
        top: 0;
        transition: opacity 200ms, top 200ms, visibility 200ms;
        visibility: hidden;
        width: 100%;
        z-index: 20;
    }
}

.pagebuilder-content-type-affordance {
    border: 15px solid @color-gray98;
    box-shadow: @pagebuilder-affordance-box-shadow; // #ebebeb
    padding: 0;

    &:not(.pagebuilder-column):before {
        display: none;
    }

    > .pagebuilder-content-type.type-container.pagebuilder-row {
        box-shadow: none;
    }

    > .pagebuilder-display-label {
        background-color: transparent;
        color: @color-pagebuilder-silver;
        line-height: 13px;
        padding: 1px 0 0;
        text-transform: uppercase;
        transform: translate(-50%, -15px);
        width: 100%;
    }
}

.no-user-select {
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;

    * {
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
}

.no-pointer-events {
    pointer-events: none;
}

.pagebuilder-display-label {
    background: rgba(255, 255, 255, .9);
    border-radius: 2px;
    color: rgba(153, 153, 153, .8);
    display: inline;
    font-size: 9px;
    left: 50%;
    letter-spacing: .1em;
    padding: 0 4px;
    position: absolute;
    text-align: center;
    text-transform: capitalize;
    top: 0;
    transform: translate(-50%, -50%);
}

.pagebuilder-system-border {
    -moz-transition: box-shadow 200ms ease 200ms;
    -o-transition: box-shadow 200ms ease 200ms;
    -webkit-transition: box-shadow 200ms ease 200ms;
    border: 1px solid transparent;
    box-shadow: 0 0 0 1px rgba(153, 153, 153, 0);
    box-sizing: border-box;
    position: relative;
    transition: box-shadow 200ms ease 200ms;
}

.pagebuilder-system-border-hover {
    -moz-transition: box-shadow 200ms ease 200ms;
    -o-transition: box-shadow 200ms ease 200ms;
    -webkit-transition: box-shadow 200ms ease 200ms;
    box-shadow: 0 0 0 1px rgb(153, 153, 153);
    transition: box-shadow 200ms ease 200ms;

    &.type-container {
        box-shadow: 0 0 0 1px rgb(153, 153, 153);
    }
}

.pagebuilder-stage {
    &.dragging {
        .pagebuilder-content-type {
            .pagebuilder-column {
                font-size: 0;

                .pagebuilder-column-resize-handle {
                    display: none;
                }
            }
        }
    }
}

.pagebuilder-placeholder-sortable {
    background: @color-phoenix-dark;
    border: none;
    display: inline-block;
    height: 1px;
    margin-left: -5px;
    padding: 0;
    position: relative;
    width: calc(~'100% + 10px');

    &:before,
    &:after {
        background: @color-phoenix-dark;
        border-radius: 10px;
        content: '';
        height: 10px;
        margin-top: -5px;
        position: absolute;
        width: 10px;
        z-index: 999;
    }

    &:before {
        float: left;
    }

    &:after {
        float: right;
        right: 0;
    }

    &.pagebuilder-structure-wrapper {
        box-sizing: content-box;
        position: relative;
    }

    &.pagebuilder-placeholder-column {
        height: 90px;
        margin: 10px -6px;
        width: 12px;
        z-index: 500;
    }
}

//
//  Don't display the hover state when the stage is being interacted with
//  ______________________________________________________________________

.pagebuilder-stage.interacting .pagebuilder-content-type.pagebuilder-content-type-active:hover {
    box-shadow: 0 0 0 1px rgba(153, 153, 153, 0);

    &.type-container {
        box-shadow: 0 0 0 1px rgba(153, 153, 153, .3);
    }
}

//
//  Options Panel
//  _____________________________________________

.pagebuilder-options-visible {
    opacity: 1;
    visibility: visible;
}

.pagebuilder-options {
    -moz-transition: opacity 200ms, visibility 200ms;
    -o-transition: opacity 200ms, visibility 200ms;
    -webkit-transition: opacity 200ms, visibility 200ms;
    height: 40px;
    opacity: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    transform: translate(0, -50%);
    transition: opacity 200ms, visibility 200ms;
    visibility: hidden;
    z-index: 105;

    &.pagebuilder-options-middle {
        right: 50%;
        transform: translate(50%, -50%);
    }

    &.pagebuilder-options-visible {
        .pagebuilder-options-visible
    }

    .pagebuilder-options-wrapper {
        background: @color-white;
        border: 1px solid rgba(153, 153, 153, .7);
        box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
        display: flex;
        z-index: 99;

        .pagebuilder-name {
            display: inline-block;
            font-size: 14px;
            height: 38px;
            padding: 10px 0;
            vertical-align: bottom;
            white-space: nowrap;
        }

        a {
            color: @color-very-dark-grayish-orange;
            text-decoration: none;

            &:hover {
                background-color: @color-gray-darken0;
            }
        }

        .pagebuilder-options-links {
            background: @color-white;
            display: flex;
            list-style: none;
            margin: 0;
            vertical-align: middle;
            z-index: 2;

            .pagebuilder-options-link {
                vertical-align: top;

                .remove-structural {

                    &.disabled {
                        color: @color-dark-gray;
                        cursor: not-allowed;

                        &:hover {
                            background-color: @color-white;
                            color: @color-dark-gray;
                        }
                    }
                }

                > a {
                    color: @color-very-dark-grayish-orange;
                    display: block;
                    height: 36px;
                    text-align: center;
                    text-decoration: none;
                    transition: background .2s, color .2s;
                    vertical-align: middle;
                    width: 36px;

                    i {
                        font-size: 18px;
                        line-height: 36px;
                        text-decoration: none;
                        vertical-align: middle;
                    }

                    &.move-structural,
                    &.move-column {
                        cursor: move; /* fallback if grab cursor is unsupported */
                        cursor: grab;
                        cursor: -moz-grab;
                        cursor: -webkit-grab;
                        display: inline-block;
                        margin: 0;
                        padding: 0;
                        width: 36px;

                        &:active {
                            cursor: grabbing;
                            cursor: -moz-grabbing;
                            cursor: -webkit-grabbing;
                        }
                    }

                    &:hover:not(&.option-title) {
                        background-color: @color-gray-darken0;
                        color: @color-very-dark-gray-black;
                    }
                }

                > .option-title {
                    cursor: default;
                    font-size: 14px;
                    height: 36px;
                    line-height: 36px;
                    max-width: 200px;
                    overflow: hidden;
                    padding: 0 4px;
                    text-decoration: none;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                &:first-child {
                    > .option-title {
                        padding-left: 16px;
                    }
                }
            }
        }
    }
}

.focus-options {
    .pagebuilder-options {
        -moz-transition: opacity 200ms, visibility 200ms, transform 200ms;
        -o-transition: opacity 200ms, visibility 200ms, transform 200ms;
        -webkit-transition: opacity 200ms, visibility 200ms, transform 200ms;
        right: 50%;
        top: -20px;
        transform: translate(50%, -50%);
        transition: opacity 200ms, visibility 200ms, transform 200ms;

        .pagebuilder-options-wrapper {
            &:after {
                background: @color-white;
                border: 1px solid rgba(153, 153, 153, .7);
                bottom: -6px;
                content: '';
                display: block;
                height: 12px;
                left: calc(50% - 1px);
                position: absolute;
                transform: rotate(45deg) translateX(-50%);
                width: 12px;
                z-index: 1;
            }
        }
    }
}

.type-nested {
    .pagebuilder-options:nth-of-type(2) {
        left: auto;
        right: 0;
        transform: none;
    }
}

.ui-sortable-helper .pagebuilder-options .pagebuilder-options-wrapper .pagebuilder-options-links .pagebuilder-options-link {
    &.move-structural,
    &.move-column {
        cursor: -webkit-grabbing;
    }
}

//
//  Don't display the options when the stage is being interacted with
//  __________________________________________________________________

.pagebuilder-stage.interacting {
    .pagebuilder-options {
        display: none;
    }

    //
    //  We still want to display any arrow options, as they're shown on focus
    //  ______________________________________________________________________

    .focus-options {
        .pagebuilder-options {
            display: block;
        }
    }
}

//
//  Live Edit
//  _____________________________________________

.pagebuilder-live-edit-wrapper {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background: @color-pagebuilder-darker-gray;
    border: none;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    color: @color-pagebuilder-light-gray;
    display: none;
    left: 10px !important;
    overflow: hidden;
    position: absolute !important;
    top: -43px !important;
    z-index: 1000;

    ul.pagebuilder-live-edit-options {
        font-size: 0;
        height: 42px;
        margin: 0;
        padding: 0;

        li.pagebuilder-live-edit-option {
            display: inline-block;
            padding: 0;

            label {
                display: inline-block;
                font-size: 13px;
                font-weight: 600;
                padding: 0 12px 0 14px;
            }
            ul.pagebuilder-select-options {
                display: inline-block;
                font-size: 0;
                list-style: none;
                margin: 0;
                padding: 0;

                li {
                    display: inline-block;

                    a {
                        color: @color-white;
                        display: block;
                        font-size: 13px;
                        line-height: 42px;
                        padding: 0 14px;

                        &:hover {
                            background: @color-pagebuilder-dark-gray;
                            color: @color-pagebuilder-light-gray;
                            text-decoration: none;
                        }
                    }

                    &.active {
                        a {
                            background: @color-pagebuilder-dark-gray;
                            color: @color-pagebuilder-light-gray;
                            text-decoration: none;
                        }
                    }
                }
            }
        }
    }
}

.pagebuilder-content-type-hidden {
    .pagebuilder-system-border-hover {
        z-index: 10;
    }
    .pagebuilder-display-label {
        z-index: 12;
    }
    > .pagebuilder-content-type:before {
        opacity: 1;
        visibility: visible;
    }
    .pagebuilder-drop-indicator,
    .pagebuilder-content-type.type-container.empty-container > .content-type-container:before {
        opacity: 0 !important;
        visibility: hidden !important;
    }
}
