.mw-bg-image-handles{
    position: absolute;
    z-index: 999;
    pointer-events: none;
    .mw-le-handle-menu .mw-le-handle-menu-buttons {
        pointer-events: all;
        opacity: 1;
        position: absolute;
        top: 50px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #fff;
    }

}

.mw-handle-item {
    font-family: Inter, sans-serif;
    font-size: 14px;
    &.mw-le-resizable{
        position: absolute;
    }
    position: absolute;
    z-index: 998;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
    border: 3px solid #0078ff;
    transition: opacity .2s;
    pointer-events: none;
    & > *{
        pointer-events: all;
    }

    &.mw-handle-item-interaction-handle{
        pointer-events: none;

    }

    &.mw-handle-item-dragging {
        border-color: transparent;

        * {
            opacity: 0 !important;
        }
    }

    &.mw-handle-item-hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        display: none !important;
    }


    .mw-handlemenu-item {
        pointer-events: all;
    }

    .mw-le-resizer.mw-le-resizer-b:before,
    .mw-le-resizer.mw-le-resizer-b:after,
    .mw-le-resizer.mw-le-resizer-r:after,
    .mw-le-resizer:not(.mw-le-resizer-r, .mw-le-resizer-b) {
        display: none;

    }
}

.mw-draggable-helper {
    position: absolute;
    z-index: 10;
    pointer-events: none;
    .mw-element-is-dragged{
        opacity: 1;
        pointer-events: none;
    }
}

/*  Handles content  */

$darkBG: #404040;
$lightBG: #ffffff;

$bg: $lightBG;

$handleHeight: 38;
$handleholderHeight: 42;

.mw-handle-item-menus-holder{


    position: absolute;


}

#mw-handle-item-element-menu {
    display: flex;
    align-items: center;
}

#mw-handle-item-layout-root{
    .mw-handle-item-menus-holder{

        top: 10px;
        right: 10px;
        left: auto;



    }
}

.mw-handle-item {

    .mw-handle-item-menus-holder, .mw-le-handle-menu-button-sub-menu{

        height: #{$handleholderHeight}px;
        padding: 11px!important;
        padding-bottom: 9px !important;
        display: inline-flex;
        border-radius: 7px;
        border: 1px solid transparent;
        box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
        background-color: $bg;

        .mw-le-handle-menu-button {
            display: inline-flex;
            width: 32px;
            height: 32px;
            margin: 0 2px;
            border-radius: 3px;
            cursor: pointer;
            text-align: center;
            justify-content: center;
            align-items: center;
            transition: .3s;
            font-size: 19px;

            &.mw-handle-button-wide {
                width: auto;
                white-space: nowrap;
                display: block;
                text-align: left;
                border: 1px solid #eee;
                padding: 7px 10px 7px 5px !important;
                height: auto;
                margin: 2px;

                * {
                    vertical-align: middle;
                }
            }

            &:hover {
                background-color: #f1f1f1;
            }

            &.mw-handle-drag-button {
                cursor: grab;
            }
        }

    }

    .mw-le-handle-menu-button-sub-menu {
        padding: 4px 6px 4px 6px !important;
        top: 40px;
        right: -4px;

    }
}


.mw-le-handle-menu {
    .mw-le-handle-menu-buttons{

        height: #{$handleHeight}px;


        display: inline-flex;
        align-items: center;

        pointer-events: all;

        position: static;

        &:empty{
            display: none !important;
        }
        transition: .2s;
        opacity: 0;
        transform: translateY(10px);
        z-index: 2;
        position: relative;
    }
    position: relative;

    color: $darkBG;

    * {
        vertical-align: middle;
    }
}
.mw-handle-item.mw-handle-active{
    .mw-le-handle-menu {
        .mw-le-handle-menu-buttons{
            opacity: 1;
            transform: translateY(0px);
        }
    }
}





#mw-handle-item-layout-root{

    .mw-handle-item-menus-holder, .mw-le-handle-menu-buttons{
        height: auto;

        padding: 0;
    }

    .mw-le-handle-menu-buttons{
        display: block;
        *{
            vertical-align: middle;
        }
    }

    #mw-handle-item-layout-menu {
        top: 0;
        right: 5px;
        left: auto;


        .mw-le-handle-menu-title {
            display: none;
        }
    }
}

.mw-le-handle-menu-button-holder {
    display: flex;
    align-items: center;
    width: auto;
    white-space: nowrap;
    text-align: left;
    border: 1px solid #eee;
    padding: 7px 10px 7px 5px !important;
    height: auto;
    margin: 8px 2px;

    * {
        vertical-align: middle;
    }

    .mw-le-handle-menu-button.mw-handle-insert-button {
        padding: 5px;

        &:hover {
            background-color: #f1f1f1;
        }
    }

}

.mw-le-handle-menu-buttons {
    display: inline-block;
    white-space: nowrap;

    & > .mw-le-handle-menu-button {
        display: inline-flex;
        width: 32px;
        height: 32px;
        margin: 0 2px;
        border-radius: 3px;
        cursor: pointer;
        text-align: center;
        justify-content: center;
        align-items: center;
        transition: .3s;
        font-size: 19px;

        &.mw-handle-button-wide{
            width: auto;
            white-space: nowrap;
            display: block;
            text-align: left;
            border: 1px solid #eee;
            padding: 7px 10px 7px 5px !important;
            height: auto;
            margin: 2px;
            * {
                vertical-align: middle;
            }
        }
        &:hover {
            background-color: #f1f1f1;
        }
        &.mw-handle-drag-button{
            cursor: grab;
        }
    }
}

html[dir="rtl"] {

    .mw-le-handle-menu-button-sub-menu {
        left: 0;
        right: auto;
    }
}

.mw-le-handle-menu-button-sub-menu {
    display: flex;
    flex-wrap: nowrap;
    padding: 4px 0;
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transform: scaleY(.5);
    transform-origin: center top;
    transition: .2s;
    top: 100%;
    left: auto;
    right: 0;
    background-color: #fff;
    box-shadow: 0px 4px 16px rgba(17, 17, 26, .1), 0px 8px 32px rgba(17, 17, 26, .05);
    border-radius: 5px;

    .mw-le-handle-menu-button {
        display: block;
        white-space: nowrap;
        padding: 5px 10px;
        text-align: left;
        transition: background-color .3s;

        &:hover {
            background-color: #f1f1f1;
        }
    }
}

.mw-le-handle-menu-button.sub-menu-active {
    & > .mw-le-handle-menu-button-sub-menu {
        visibility: visible;
        opacity: 1;
        transform: scaleY(1);
    }
}


.mw-le-handle-menu-button-content {
    display: inline-flex;
    white-space: nowrap;
    flex-wrap: nowrap;
    .mw-le-handle-menu-button-text {
        font-size: 14px;
    }

    align-items: center;
}

.mw-le-handle-menu-title {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    height: 20px;
    -webkit-user-select: none;
    user-select: none;
    cursor: grab;
    background-color: #0078ff;
    color: white;
}
.mw-handle-item-interaction-handle .mw-le-handle-menu-title{
    display: inline-flex;
    position: absolute;
    top: -22px;
    left: -3px;
}

.mw-le-handle-menu-button-icon {
    display: inline-flex;
    white-space: nowrap;
    align-items: center;
    margin-inline: 6px;

    svg, .mdi, .material-icons, .fa {
        max-width: 25px;
        max-height: 25px;
        display: inline-block;
        fill: black;

        &.path {
            fill: black;
        }
    }

    svg {
        width: 25px;
        height: 25px;
        //fill: currentColor;
    }

    * {
        max-width: 31px;
        max-height: 31px;
    }
}

.mw-le-handle-menu-title-text {
    font-size: 12px;
}



body.mw--resizing{


    .mw-handle-item-layout-plus {
        opacity: 0;
        pointer-events: none !important;
    }
}


.mw-handle-item-layout-plus {
    $height: 30;
    font-size: 12px;
    display: inline-flex;
    position: absolute;
    pointer-events: all;
    min-width: 100px;
    text-align: center;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    background-color: #0078ff;
    color: white;
    border-radius: 7px;
    cursor: pointer;
    left: 50%;
    transform: translateX(-50%);
    height: #{$height}px;
    padding: 0 15px;
    box-shadow: #11111a1a 0 4px 16px, #11111a0d 0 8px 32px;

    &.mw-handle-item-layout-plus-top {
        top: 0;
        margin-top: -#{calc($height / 2)}px;
    }

    &.mw-handle-item-layout-plus-bottom {
        bottom: 0;
        margin-bottom: -#{calc($height / 2)}px;
    }

    &:hover {
        background-color: #016ce6;
    }

    &.mw-le-ghost-layout{
        position: static;
        display: flex;
        margin: 50px auto;
        transform: none;
        max-width: 200px;

        height: #{calc($height + ($height/2))}px;
    }
}

.mw-handle-item-element-image-control {
    position: absolute;
    top: 20%;
    left: 50%;
    width: 44px;
    height: 44px;
    margin-left: -22px;
    border-radius: 50px;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    cursor: pointer;
    pointer-events: all;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: 20px auto;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M8.5,13.5L11,16.5L14.5,12L19,18H5M21,19V5C21,3.89 20.1,3 19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19Z' /%3E%3C/svg%3E");

    & > input {
        position: absolute;
        top: 0;
    }
}


html.mw-le--page-preview {
    .mw-handle-item-layout-plus{
        display: none;
    }
}
html:not(.mw-le--page-preview) [data-mw-live-edithover="true"] > * {
    pointer-events: none;
    .module,.element,.cloneable, .edit{
        pointer-events: all;
    }
    &.module,&.element,&.cloneable, &.edit{
        pointer-events: all;
    }
}


.mw-le--handle-icon--color{
    display: inline-block;
    position: relative;
    vertical-align: middle;
    width: 25px;
    height: 25px;
    border-radius: 25px;
    border: 2px solid #111;
    overflow: hidden;


        background-image: repeating-conic-gradient(silver 0 25%, transparent 0 50%), linear-gradient(0deg, rgba(0,0,0,0.01) 0%, rgba(0,0,0,0) 100%);
        background-size:9px 9px, 100% 100%;

        .mw-le--handle-icon--color-color{
            position: absolute;
            inset: 0;
        }


}
