.widget-wrapper {
    position: relative;
}
    .widget-wrapper.editing {
        min-height: 27px;
    }    

    .widget-wrapper:hover > .insert-trigger {
        display: block;
    }
    
    .widget-wrapper:hover > .widget-wrapper__actions {
        display: inline-flex;
    }

.widget-wrapper--container.editing {
    min-height: 43px;
    min-width: 80px;
}

    .widget-wrapper--container.editing:hover::before {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        background: transparent;
        border: 1px dashed #fd7e14;
    }

.widget-wrapper--hover-below::after,
.widget-wrapper--hover-above::after {
    content: " ";
    position: absolute;
    z-index: 1;
    left: 0;
    width: 100%;
    height: 30px;
    background: repeating-linear-gradient( 45deg, #d5eaee, #d5eaee 10px, #fff 10px, #fff 20px );
    opacity: .7;
}

.widget-wrapper--hover-below::after {
    bottom: -31px;
}

.widget-wrapper--hover-above::after {
    top: -31px;
}

.insert-trigger {
    display: none;
    position: absolute;
    left: calc((100% - 22px) / 2);
    height: 22px;
    width: 22px;
    background-color: #038244;
    color: #fff;
    padding: 0;
    font-size: .9rem;
    line-height: 1;
    z-index: 3;
    border-radius: 50%;
    box-shadow: 0 0 2px rgba(0,0,0,.5);
}

    .insert-trigger:hover {
        color: #fff;
        background-color: #026836;
        transition: all .3s;
    }

        .insert-trigger:hover ~ .widget-wrapper__overlay {
            background-color: rgba(3,130,68,.1);
            border: 1px dashed #038244;
            cursor: pointer;
            z-index: 2;
        }


.insert-trigger--above {
    top: -11px;
}

.insert-trigger--below {
    bottom: -11px;
}

.widget-wrapper__actions {
	display: none;
	position: absolute;
	z-index: 4;
	top: -24px;	
}

.widget-wrapper__btn {
    height: 24px;
    line-height: 20px;
    padding: 0 7px;
    font-size: .9rem;
    margin-right: 3px;
    border-radius: 0;
    color: #fff;
    background-color: #038244;
    box-shadow: 0 0 2px rgba(0,0,0,.5);
}

    .widget-wrapper__btn:hover {
        color: #fff;
        background-color: #026836;
    }

.widget-wrapper__actions--container {
    right: -3px;
}

.widget-wrapper__btn--container {
    color: #fff;
    background-color: #fd7e14;
}

    .widget-wrapper__btn--container:hover {
        color: #fff;
        background-color: #cb5d02;
    }

.widget-wrapper__overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 1px dashed transparent;
    z-index: 3;
}

    .widget-wrapper__overlay:hover,
    .widget-wrapper__actions:hover ~ .widget-wrapper__overlay,
    .insert-trigger:hover ~ .widget-wrapper__overlay {
        background-color: rgba(3,130,68,.1);
        border: 1px dashed #038244;
        cursor: pointer;
        z-index: 2;
    }