.drag-default-button {
    @extend .btn-default; // Button like styling for drag element
    background-color: #ffffff;
    border-color: $list-group-border;
    border-left: none; // Don't need side borders because the elements are inside panel
    border-right: none;
}

.btn-draggable .btn-group-vertical > .btn {
    @extend .icon;
    padding: 10px 12px 10px 35px;
    text-align: left;

    &:before {
        box-sizing: border-box;
        color: #777;
        opacity: 0.7;
        content: "\f047";
        display: block;
        height: 100%;
        left: 0px;
        line-height: 1.3em;
        padding: 10px 15px 5px;
        position: absolute;
        top: 0px;
        width: 22px;
    }
    &.checkbox {
        margin-top: -1px;
    }
    .checkbox {
        right: 10px;
        top: 10px;
    }
}
.draggable {
    z-index: 1;
    position: relative;
}

.droppable {
    z-index: 0;
    position: relative;
}

// This is a different case where we can use the icon itself
.icon-drag:before {
    display: block;
    float: left;
    margin-right: 10px;
    height: 100%;
    color: rgba(#555, 0.4);
}

.icon-drag-current {
    border: 1px dashed #ccc;
    min-width: 200px;
}


.ui-draggable-dragging {
    .blocktype-drag {
        overflow: hidden;
        min-width: 200px;
    }
    label {
        @include text-overflow;
        max-width: 80%;
        line-height: 1em;
        padding-top: 3px;
        margin:0;
    }
    .icon, .indicator {
        padding-top: 3px;
        vertical-align: top;
    }
    .indicator {
        padding-top: 5px;
    }
}

// Droppable area background indicator
.block-drop-on {
    background: darken($panel-default-heading-bg, 5%) ;
}

.drag-handle,
.ui-draggable {
  cursor: move;
}

.ui-sortable-helper {
    overflow: hidden;
}

.ui-sortable {
    list-style-type: none;
}