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


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

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

@sortable-placeholder-opacity:                  0;

@sortable-empty-height:                         50px;


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

.ui-sortable {
    position: relative;
    .hook-sortable;
}

/*
 * Deactivate pointer-events on SVGs in Safari
 */

.ui-sortable svg { pointer-events: none; }

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

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


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

.ui-sortable-drag {
    position: absolute !important;
    z-index: @sortable-dragged-z-index !important;
    pointer-events: none;
    .hook-sortable-drag;
}


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

.ui-sortable-placeholder {
    opacity: @sortable-placeholder-opacity;
    .hook-sortable-placeholder;
}


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

.ui-sortable-empty {
    min-height: @sortable-empty-height;
    .hook-sortable-empty;
}


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

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



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

.hook-sortable-misc;

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