// draggable handle
ul.lasso-component--controls {
    * { .box-sizing(border-box); }
    .editor--tool__bg();
    position: absolute;
    margin:0;
    padding:0;
    line-height:1;
    height:@component-controls--height;
    width:@component-controls--width;
    top:4px;
    //right:0;
    //left:-10000px;
    text-align: center;
    margin: 0 auto;
    border-radius:@editor--radius - 2;
    .clearfix();
    .opacity(0);
    .transition(opacity .4s ease);
    z-index: 105;
    padding-left:0;
    
    &.editus-center {
       left:0;
       right:0;
    }
    &.editus-right {
       right:0;
    }

    li {
        float:left;
        list-style-type: none;
        line-height: 1;
		margin: 0;
        width:@component-controls--width / 4.1;
        height:@component-controls--height - 2;
        border-right:1px solid lighten(@toolbar--border,5);
        text-align: center;
        text-shadow:0 1px 1px rgba(0,0,0,0.4);

        &:before {
            .editor-icon-font();
            position: relative;
            top:1px;
            font-size:@component-controls--font__size;
        }

        &:first-child:hover {
            border-bottom-left-radius: @component-controls--radius;
            border-top-left-radius: @component-controls--radius;
        }

        &:hover {
            cursor: pointer;
            background:@toolbar--hover;
        }

        &:active {
            .box-shadow(inset 0 0 6px -2px rgba(0,0,0,0.66));
        }

        &:last-child {
            border-right:none;

            &:hover {
                border-top-right-radius: @component-controls--radius;
                border-bottom-right-radius: @component-controls--radius;
            }
        }

        &.lasso-drag{
            cursor:move ;
            &:hover {
                cursor:move;
            }
            &:before {
                content:'\e600';
            }
        }

        &.lasso-settings:before {
            content:'\e994';
        }

        &.lasso-clone:before {
            content:'\e92c';
        }
        &.lasso-delete:before {
            content:'\e9ad';
        }
    }

}


.lasso-editing .aesop-component:hover, .lasso-editing .wp-block-cover:hover {
 .lasso-component--controls{
    left:4px;
    .opacity(1);
 }
}

// misc
.aesop-timeline-stop .lasso-component--controls li {
    line-height:16px;
}
.aesop-image-component[data-align="right"]:hover .lasso-component--controls,
.aesop-image-component[data-align="left"]:hover .lasso-component--controls {
    margin:13px 0 0 4px;
}
.aesop-image-component[data-align="right"]:hover .lasso-component--controls {
    left:auto;
}
.lasso-component {
  position:relative;
}

.editus_shortcode_p {
  position: relative;
}

.editus_shortcode {
  .editor--tool__bg();
  .transition(opacity .4s ease);
  margin: auto;
  text-align: center;
  width: 200px;
  z-index: 105;
  position: absolute;
  left: 0;
  right: 0;
  top:0;
  opacity:0.5;
  border-radius:4px;
}

.editus_shortcode_p:hover .editus_shortcode {
  opacity:1;
}

@media ( max-width:768 ) { 
	.editus_shortcode_p .editus_shortcode {
	  opacity:1;
	}
}