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


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

$sortable-dragged-z-index:                       1050 !default;

$sortable-placeholder-opacity:                   0 !default;

$sortable-empty-height:                          30px !default;


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

.uk-sortable {
    position: relative;
    @include hook-sortable();
}

/*
 * Deactivate browser touch actions in IE11
 */

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

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

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

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

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


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

.uk-sortable-dragged {
    position: absolute;
    z-index: $sortable-dragged-z-index;
    pointer-events: none;
    @include hook-sortable-dragged();
}


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

.uk-sortable-placeholder {
    opacity: $sortable-placeholder-opacity;
    @include hook-sortable-placeholder();
}


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

.uk-sortable-empty {
    min-height: $sortable-empty-height;
    @include hook-sortable-empty();
}


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

/*
 * Deactivate browser touch actions in IE11
 */

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

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


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

.uk-sortable-moving,
/* Needed if moving over links or buttons */
.uk-sortable-moving * { cursor: move; }


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

@include hook-sortable-misc();

// @mixin hook-sortable(){}
// @mixin hook-sortable-dragged(){}
// @mixin hook-sortable-placeholder(){}
// @mixin hook-sortable-empty(){}
// @mixin hook-sortable-misc(){}