// Name:            Sortable
// Description:     Defines styles for sortable grids and lists
//
// Component:       `wk-sortable`
//
// Sub-objects:     `wk-sortable-handle`
//                  `wk-sortable-moving`
//
// Modifier:        `wk-sortable-dragged`
//                  `wk-sortable-placeholder`
//
// Markup:
//
// <!-- wk-sortable -->
// <ul class="wk-sortable" data-wk-sortable>
//     <li></li>
//     <li></li>
// </ul>
//
// ========================================================================


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

@sortable-dragged-z-index:                      1050;

@sortable-placeholder-opacity:                  0;

@sortable-empty-height:                         30px;


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

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

/*
 * Deactivate browser touch actions in IE11
 */

.wk-sortable > * { touch-action: none; }

/*
 * Disables the default callout shown when you touch and hold a touch target
 * Currently only works in Webkit
 */

.wk-sortable a,
.wk-sortable img { -webkit-touch-callout: none; }

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

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


/* Sub-modifier `wk-sortable-dragged`
 ========================================================================== */

.wk-sortable-dragged {
    position: absolute;
    z-index: @sortable-dragged-z-index;
    pointer-events: none;
    .hook-sortable-dragged;
}


/* Sub-modifier `wk-sortable-placeholder`
 ========================================================================== */

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


/* Empty List
 ========================================================================== */

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


/* Sub-object `wk-sortable-handle`
 ========================================================================== */

/*
 * Deactivate browser touch actions in IE11
 */

.wk-sortable-handle { touch-action: none; }

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


/* Sub-object `wk-sortable-moving`
 ========================================================================== */

.wk-sortable-moving,
/* Needed if moving over links or buttons */
.wk-sortable-moving * { cursor: move; }
/* Fixes dragging items over iframes */
.wk-sortable-moving iframe { pointer-events: none; }


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

.hook-sortable-misc;

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