// Name:            Sortable
// Description:     Component to create sortable grids and lists
//
// Component:       `bdt-sortable`
//
// Sub-objects:     `bdt-sortable-drag`
//                  `bdt-sortable-placeholder`
//                  `bdt-sortable-handle`
//
// Modifiers:       `bdt-sortable-empty`
//
// States:          `bdt-drag`
//
// ========================================================================


// Variables
// ========================================================================

@sortable-dragged-z-index:                      @global-z-index + 50;

@sortable-placeholder-opacity:                  0;

@sortable-empty-height:                         50px;


/* ========================================================================
   Component: Sortable
 ========================================================================== */

.bdt-sortable {
    position: relative;
    .hook-sortable();
}

/*
 * Remove margin from the last-child
 */

.bdt-sortable > :last-child { margin-bottom: 0; }


/* Drag
 ========================================================================== */

.bdt-sortable-drag {
    position: fixed !important;
    z-index: @sortable-dragged-z-index !important;
    pointer-events: none;
    .hook-sortable-drag();
}


/* Placeholder
 ========================================================================== */

.bdt-sortable-placeholder {
    opacity: @sortable-placeholder-opacity;
    pointer-events: none;
    .hook-sortable-placeholder();
}


/* Empty modifier
 ========================================================================== */

.bdt-sortable-empty {
    min-height: @sortable-empty-height;
    .hook-sortable-empty();
}


/* Handle
 ========================================================================== */

/* Hover */
.bdt-sortable-handle:hover { cursor: move; }



// Hooks
// ========================================================================

.hook-sortable-misc();

.hook-sortable() {}
.hook-sortable-drag() {}
.hook-sortable-placeholder() {}
.hook-sortable-empty() {}
.hook-sortable-misc() {}