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


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

@nestable-item-margin:                          0;

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

@nestable-placeholder-border:                   #99baca;

@nestable-toggle-icon:                          "";
@nestable-toggle-collapsed-icon:                "";

@nestable-panel-padding:                        16px 12px;
@nestable-panel-background:                     @global-background;


// Component
// ========================================================================

.hook-nestable() {}

.hook-nestable-item() {}

.hook-nestable-dragged() {}

.hook-nestable-placeholder() { background: #f5fbfe; }

.hook-nestable-empty() {}

.hook-nestable-handle() {}

.hook-nestable-toggle() {
    height: 20px;
    width: 10px;
    background: url("@{global-image-path}/caret-down.svg") 0 0 no-repeat;
}

.hook-nestable-panel() {
    margin-top: -1px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;

    &:hover,
    .uk-nestable-dragged & {
        background: #fff;
    }

}


// Miscellaneous
// ========================================================================

.hook-nestable-misc() {

    .uk-collapsed .uk-nestable-toggle { background-image: url("@{global-image-path}/caret-right.svg"); }

    .uk-active > .uk-nestable-panel { background: #fff; }

}