$-editor-messages-margin-x: 2%;
%o-editor-messages {
    background: $o-we-dropzone-bg-color;
    text-align: center;
    color: #fff;
    outline: $o-we-dropzone-border-width dashed $o-we-dropzone-accent-color;
    outline-offset: -$o-we-dropzone-border-width;

    &:before {
        content: attr(data-editor-message);
        display: block;
        font-size: 20px;
    }
    // Show the default editor message only for "empty" elements
    &:not(:empty) {
        &[data-editor-message-default]:before {
            content: none;
        }
    }
    &:after {
        content: attr(data-editor-sub-message);
        display: block;
    }
}
%o-disable-iframes {
    iframe {
        pointer-events: none;
    }
}
.o_we_snippet_area_animation {
    animation-delay: 999ms; // Disable it but allow to inherit the animation

    &::before {
        animation: inherit;
        animation-delay: 0ms;
    }
}

.o_editable {
    &:not(:empty), &[data-oe-type] {
        &:not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"]):not(.o_editable_no_shadow):not([data-oe-type="image"]):hover,
        &.o_editable_date_field_linked {
            outline: $o-we-handle-border-width solid $o-we-handles-accent-color;
            outline-offset: $o-we-handle-border-width;
        }
        &[data-oe-type="image"]:not(.o_editable_no_shadow):hover {
            position: relative;

            &:after {
                content: "";
                pointer-events: none;
                @include o-position-absolute(0, 0, 0, 0);
                z-index: 1;
                outline: $o-we-handle-border-width solid $o-we-handles-accent-color;
                outline-offset: $o-we-handle-border-width;
            }
        }
    }
    &:focus, &[data-oe-type] {
        min-height: 0.8em;
        min-width: 8px;

        // TODO this feature just needs to be reviewed to not have to make
        // exceptions such as this
        &#o_footer_scrolltop_wrapper {
            min-height: 0;
            min-width: 0;
        }
    }
    &.o_is_inline_editable {
        display: inline-block;
    }
    .btn, &.btn {
        -webkit-user-select: auto;
        -moz-user-select: auto;
        -ms-user-select: auto;
        user-select: auto;
        cursor: text!important;
    }
    /* Summernote not Support for placeholder text https://github.com/summernote/summernote/issues/581 */
    &[placeholder]:not(:focus) {
        &:empty:before,
        &:has(br:only-child):before,
        &[data-oe-zws-empty-inline]:before {
            content: attr(placeholder);
            opacity: 0.3;
            pointer-events: none;
        }
    }

    // This style block is about the "editor message" which highlights the areas
    // where the user can drag & drop snippets.
    &.oe_structure.oe_empty, &[data-oe-type=html], .oe_structure.oe_empty {
        // Base case (website.page (#wrap), t-field (product description), ..)
        > .oe_drop_zone.oe_insert:not(.oe_vertical) {
            @extend %o-editor-messages;
            height: auto;

            // Empty editable element during drag & drop
            &:only-child {
                margin: 20px $-editor-messages-margin-x;
                width: 100% - $-editor-messages-margin-x * 2;
                padding: 12px 0px;
            }

            &:not(:only-child) {
                &::before {
                    font-size: 16px;
                }
                &[data-editor-message-default]::before {
                    content: none;
                }
            }
        }

        // Exception 1: empty wrap NOT during drag & drop
        &#wrap:empty {
            @extend %o-editor-messages;
            padding: 112px 0px;
            margin: 20px $-editor-messages-margin-x;
            border-radius: $border-radius-lg;
        }

        // Exception 2: empty wrap during drag & drop (override of base case)
        &#wrap > .oe_drop_zone.oe_insert:not(.oe_vertical):only-child {
            padding: 112px 0px;
            text-shadow: none;
        }

        > p:empty:only-child {
            color: #aaa;
        }
    }
    &[data-oe-type=html].oe_empty:empty {
        @extend %o-editor-messages;
    }
}
.editor_enable [data-oe-readonly]:hover {
    cursor: default;
}
.oe_structure_solo > .oe_drop_zone {
    // TODO implement something more robust. This is currently for our only
    // use case of oe_structure_solo: the footer. The dropzone in there need to
    // be 1px lower that the end-of-page dropzone to distinguish them. The
    // usability has to be reviewed anyway.
    transform: translateY(10px); // For some reason "1px" is not enough...
}

/* Prevent the text contents of draggable elements from being selectable. */
[draggable] {
    user-select: none;
}

.oe_editable:focus,
.css_editable_hidden,
.editor_enable .css_editable_mode_hidden {
    outline: none!important;
}

.editor_enable .css_non_editable_mode_hidden,
.o_editable .media_iframe_video .css_editable_mode_display {
    display: block!important;
}

// TODO: in master check if the class / rule is relevant at all
.editor_enable [data-oe-type=html].oe_no_empty:empty {
    height: 16px!important;
}

.link-style {
    .dropdown > .btn {
        min-width: 160px;
    }
    .link-style {
        display: none;
    }
    li {
        text-align: center;
        label {
            width: 100px;
            margin: 0 5px;
        }
    }
    .col-md-2 > * {
        line-height: 2em;
    }
}

// fontawesome
#wrap.o_editable .fa {
    cursor: pointer;
}

// parallax dropzones are in conflict with outside of parallax dropzones
.parallax .oe_structure > .oe_drop_zone {
    &:first-child {
        top: 16px;
    }
    &:last-child {
        bottom: 16px;
    }
}

.editor_enable .o_add_language {
    display: none !important;
}

// Facebook Page
.editor_enable .o_facebook_page:not(.o_facebook_preview) {
    @extend %o-disable-iframes;
    .o_facebook_alert .o_add_facebook_page {
        cursor: pointer;
    }
}

// Prevent Instagram block to open Instagram in edit mode.
.editor_enable .s_instagram_page {
    @extend %o-disable-iframes;
}

// s_countdown preview classes
body.editor_enable {
    .s_countdown {
        .s_countdown_enable_preview {
            display: initial !important;
        }
        .s_countdown_none {
            display: none !important;
        }
    }
}

//s_dynamic_snippet
body.editor_enable {
    .s_dynamic {
        [data-url] {
            cursor: inherit;
        }
    }
}

// Website Animate
.editor_enable.o_animated_text_highlighted {
    .o_animated_text {
        position: relative;

        &:after {
            content: "";
            pointer-events: none;
            @include o-position-absolute(0, 0, 0, 0);
            z-index: 1;
            // This border is useful when there is a green background behind
            // the text.
            border: 1px dotted white;
            background-color: rgba(greenyellow, .2);
        }
    }
}

// Inputs in editable zones should not be possible to interact with.
// TODO as this was done as a fix in 13.0, this only targets the inputs of
// specific snippets and even targets snippets of other apps (which do not
// declare files for edit mode only). In master it should be refactored to
// target all inputs and/or target specific snippets in their own app.
.editor_enable {
    .s_website_form, .s_searchbar_input, .js_subscribe, .s_group, .s_donation_form {
        input:not(.o_translatable_attribute) {
            pointer-events: none;
        }
    }
    .s_website_form {
        textarea:not(.o_translatable_attribute):not(.o_translatable_text) {
            pointer-events: none;
        }
    }

    // Some dropdown links are not deactivated in edit, so we prevent clicks.
    #o_logout,
    .js_change_lang {
        pointer-events: none;
    }
}
.o_homepage_editor_welcome_message {
    padding-top: 128px;
    padding-bottom: 128px;
    font-family: $o-font-family-sans-serif;
}
// offcanvas backdrop
body.editor_enable {
    // We prevent selection to avoid the powerbox hint from being added to the
    // backdrop by clicking on it in edit mode.
    .offcanvas-backdrop {
        user-select: none;
    }
}
// edit link popover
$o-we-popover-bg: white;
body.editor_enable {
    .o_edit_menu_popover {
        background-color: $o-we-popover-bg;
        font-family: $o-we-font-family;

        a {
            color: $o-brand-primary;

            &.text-muted {
                color: rgba(0, 0, 0, 0.65) !important;
            }
        }
        i:not(.js_edit_menu > i) {
            color: rgba(0, 0, 0, 0.9);
        }
        &.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after {
            border-top-color: $o-we-popover-bg;
        }
        &.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after {
            border-right-color: $o-we-popover-bg;
        }
        &.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after {
            border-bottom-color: $o-we-popover-bg;
        }
        &.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after {
            border-left-color: $o-we-popover-bg;
        }
    }
}

// tooltip
body.editor_enable {
     .tooltip .tooltip-inner {
        color: white !important;
    }
}