// Name:            Nestable
// Description:     Defines styles for nestable lists
//
// Component:       `uk-nestable`
//
// Sub-objects:     `uk-nestable-list`
//                  `uk-nestable-item`
//                  `uk-nestable-placeholder`
//                  `uk-nestable-empty`
//                  `uk-nestable-handle`
//                  `uk-nestable-moving`
//                  `[data-nestable-action='toggle']`
//
// Modifier:        `uk-nestable-list-dragged`
//
// States:          `uk-parent`
//                  `uk-collapsed`
//
// Markup:
//
// <!-- uk-nestable addon -->
// <ul class="uk-nestable" data-uk-nestable>
//     <li>
//         <div class="uk-nestable-item">
//             <div class="uk-nestable-handle"></div>
//             <div data-nestable-action="toggle"></div>
//             <span></span>
//         </div>
//     </li>
// </ul>
//
// ========================================================================


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

@nestable-padding-left:                         40px;
@nestable-dragged-z-index:                      1050;

@nestable-item-margin-bottom:                   10px;
@nestable-item-padding:                         0; // modified
@nestable-item-background:                      #f6f6f6; // modified

@nestable-placeholder-border:                   #e4e4e4; // modified

@nestable-empty-height:                         40px;

@nestable-handle-font-size:                     15px; // modified
@nestable-handle-color:                         #979898; // modified
@nestable-handle-icon:                          "\f0c9";

@nestable-toggle-color:                         @nestable-handle-color; // modified
@nestable-toggle-hover-color:                   darken(@nestable-handle-color, 10%); // modified
@nestable-toggle-icon:                          "\f068"; // modified
@nestable-toggle-collapsed-icon:                "\f067"; // modified


/* ========================================================================
   Component: Nestable
 ========================================================================== */

.uk-nestable {
    padding: 0;
    list-style: none;
    .hook-nestable;
}


/* Sub-object `uk-nestable-list`
 ========================================================================== */

.uk-nestable-list {
    margin: 0;
    padding-left: @nestable-padding-left;
    list-style: none;
}


/* Sub-modifier `uk-nestable-list-dragged`
 ========================================================================== */

.uk-nestable-list-dragged {
    position: absolute;
    z-index: @nestable-dragged-z-index;
    padding-left: 0;
    pointer-events: none;
    .hook-nestable-list-dragged;
}


/* Sub-object `uk-nestable-item`
 ========================================================================== */

.uk-nestable-item {
    margin-bottom: @nestable-item-margin-bottom;
    padding: @nestable-item-padding;
    background: @nestable-item-background;
    .hook-nestable-item;
}


/* Sub-object `uk-nestable-placeholder`
 * The placeholder which marks the drop area
 ========================================================================== */

.uk-nestable-placeholder {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: @nestable-item-margin-bottom;
    border: 1px dashed @nestable-placeholder-border;
    .hook-nestable-placeholder;
}


/* Sub-object `uk-nestable-empty`
 * The style of an empty list
 ========================================================================== */

.uk-nestable-empty {
    min-height: @nestable-empty-height;
    .hook-nestable-empty;
}


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

.uk-nestable-handle {
    display: inline-block;
    font-size: @nestable-handle-font-size;
    color: @nestable-handle-color;
    .hook-nestable-handle;
}

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

/* Icon */
.uk-nestable-handle:after {
    content: @nestable-handle-icon;
    font-family: FontAwesome;
}


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

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


/* Sub-object `[data-action='toggle']`
 ========================================================================== */

/* Hidden by default */
[data-nestable-action='toggle'] {
    display: inline-block;
    color: @nestable-toggle-color;
    visibility: hidden;
    .hook-nestable-toggle;
}

/* Hover */
[data-nestable-action='toggle']:hover {
    color: @nestable-toggle-hover-color;
    cursor: pointer;
}

/* Icon */
[data-nestable-action='toggle']:after {
    content: @nestable-toggle-icon;
    font-family: FontAwesome;
}

/*
 * Show if nested
 */

.uk-parent > .uk-nestable-item [data-nestable-action='toggle'] { visibility: visible; }

/*
 * Collapsed
 */

.uk-collapsed > .uk-nestable-item [data-nestable-action='toggle']:after { content: @nestable-toggle-collapsed-icon; }

.uk-collapsed .uk-nestable-list { display: none; }


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

.hook-nestable-misc;

.hook-nestable() {}
.hook-nestable-list-dragged() {}
.hook-nestable-item() {}
.hook-nestable-placeholder() {}
.hook-nestable-empty() {}
.hook-nestable-handle() {}
.hook-nestable-toggle() {}
.hook-nestable-misc() {}