/* ------------------------------------------------------------------------------
*
*  # Fancytree
*
*  Styles for fancytree_all.min.js - tree plugin for jQuery
*
* ---------------------------------------------------------------------------- */

// Check if component is enabled
@if $enable-fancytree {


    // Base
    // ------------------------------

    // Container
    .fancytree-container {
        list-style: none;
        white-space: nowrap;
        padding: 0;
        margin: 0;
        overflow: auto;
        position: relative;

        // Remove outline on focus
        &:focus {
            outline: 0;
        }

        // List
        ul {
            list-style: none;
            padding-left: $icon-font-size;
            margin: 0;
        }

        // Disabled state
        .ui-fancytree-disabled & {
            opacity: 0.6;
        }
    }

    // Disabled state
    .ui-fancytree-disabled {
        .fancytree-container,
        .fancytree-title,
        .fancytree-expander {
            cursor: $cursor-disabled;
        }

        .fancytree-treefocus .fancytree-selected .fancytree-title {
            background-color: $fancytree-node-selected-bg;
            color: $fancytree-node-selected-color;
        }
    }

    // Give icons common base
    .fancytree-expander:after,
    .fancytree-icon:after,
    .fancytree-checkbox:after,
    .fancytree-drag-helper-img:after,
    .fancytree-drop-before:after,
    .fancytree-drop-after:after,
    .fancytree-loading .fancytree-expander:after,
    .fancytree-statusnode-wait .fancytree-icon:after {
        font-family: $icon-font-family;
        display: inline-block;
        font-size: $icon-font-size;
        line-height: 1;
        vertical-align: top;
        @include ll-font-smoothing();
    }


    //
    // Common icon definitions
    //

    // Base
    .fancytree-icon,
    .fancytree-custom-icon,
    .fancytree-expander {
        display: inline-block;
        vertical-align: top;
        margin-left: $fancytree-node-padding-x;
        margin-top: ($line-height-computed + ($fancytree-node-padding-y * 2) - $icon-font-size) / 2;
        @include size($icon-font-size);
    }

    // Checkboxes
    .fancytree-checkbox {
        vertical-align: top;
        margin-top: ($line-height-computed + ($fancytree-node-padding-y * 2) - $custom-control-indicator-size) / 2;
        margin-left: $fancytree-node-padding-x;
    }

    // Used by 'icon' node option
    img.fancytree-icon {
        border: 0;
    }



    //
    // Expander icon
    //
    // Prefix: fancytree-exp-
    // 1st character: 'e': expanded, 'c': collapsed, 'n': no children
    // 2nd character (optional): 'd': lazy (Delayed)
    // 3rd character (optional): 'l': Last sibling
    // ----------------------------------------

    // Icons
    .fancytree-expander {
        cursor: pointer;

        .fancytree-exp-c &:after {
            content: $icon-indicator-collapse;
        }
        .fancytree-exp-cl &:after {
            content: $icon-indicator-collapse;
        }
        .fancytree-exp-cd &:after,
        .fancytree-exp-cdl &:after {
            content: $icon-indicator-collapse;
        }
        .fancytree-exp-e &:after,
        .fancytree-exp-ed &:after {
            content: $icon-indicator-expand;
        }
        .fancytree-exp-el &:after,
        .fancytree-exp-edl &:after {
            content: $icon-indicator-expand;
        }
    }

    // Status node icons
    .fancytree-statusnode-error .fancytree-icon:after {
        content: $icon-validation-error;
    }

    // Loading icon
    .fancytree-loading .fancytree-expander,
    .fancytree-statusnode-wait .fancytree-icon {
        margin-left: auto;
        margin-right: auto;
        display: inline-block;
        text-align: center;
        @include size($icon-font-size);

        &:after {
            content: $icon-loading-spinner;
            @include transition(all ease-in-out $component-transition-timer);
        }
    }



    //
    // # Node type icon
    //
    // Prefix: fancytree-ico-
    // 1st character: 'e': expanded, 'c': collapsed,
    // 2nd character (optional): 'f': folder
    // ----------------------------------------


    //
    // Documents
    //

    // Icons
    .fancytree-ico-c,
    .fancytree-ico-e {
        .fancytree-icon:after {
            content: $icon-fancytree-file;
        }
    }

    // With children
    .fancytree-has-children {
        &.fancytree-ico-c .fancytree-icon:after {
            content: $icon-fancytree-sub-collapse;
        }

        &.fancytree-ico-e .fancytree-icon:after {
            content: $icon-fancytree-sub-expand;
        }
    }


    //
    // Folders
    //

    // Icons
    .fancytree-ico-cf,
    .fancytree-ico-ef {
        .fancytree-icon:after {
            content: $icon-fancytree-folder;
        }
    }

    // With children
    .fancytree-has-children {
        &.fancytree-ico-cf .fancytree-icon:after {
            content: $icon-fancytree-folder-collapse;
        }

        &.fancytree-ico-ef .fancytree-icon:after {
            content: $icon-fancytree-folder-expand;
        }
    }


    //
    // Checkbox icon
    //

    .fancytree-checkbox {
        width: $custom-control-indicator-size;
        height: $custom-control-indicator-size;
        border: $custom-control-indicator-border-width solid $custom-control-indicator-border-color;
        background-color: $custom-control-indicator-bg;
        display: inline-block;
        text-align: center;
        position: relative;
        cursor: pointer;        
        @include border-radius($custom-checkbox-indicator-border-radius);
        @include transition($custom-forms-transition);

        // Checker base
        &:after {
            content: '';
            position: absolute;
            width: $custom-control-indicator-size;
            height: $custom-control-indicator-size;
            top: -$custom-control-indicator-border-width;
            left: -$custom-control-indicator-border-width;
            background: escape-svg($custom-checkbox-indicator-icon-checked) no-repeat 50% / #{$custom-control-indicator-bg-size};
            opacity: 0;
            @include transition(opacity ease-in-out $component-transition-timer);
        }

        // Display indicators
        .fancytree-selected &:after,
        .fancytree-partsel &:after,
        .fancytree-radio &:after {
            opacity: 1;
        }

        // Checked state
        .fancytree-selected &,
        .fancytree-partsel & {
            border-color: $custom-control-indicator-checked-border-color;
            @include gradient-bg($custom-control-indicator-checked-bg);
        }
        .fancytree-has-children:not(.fancytree-selected) &:after {
            background-image: none;
        }

        // Indeterminate state
        .fancytree-partsel.fancytree-has-children:not(.fancytree-selected) &:after {
            background-image: escape-svg($custom-checkbox-indicator-icon-indeterminate);
        }

        // Radio (single select imitation)
        .fancytree-radio & {
            @include border-radius($custom-radio-indicator-border-radius)

            &:after {
                background-image: escape-svg($custom-radio-indicator-icon-checked);
            }
        }
    }



    // Other styles
    // ------------------------------

    //
    // Drag'n'drop support
    //

    // Helper
    .fancytree-drag-helper {
        .fancytree-title {
            padding-right: ($fancytree-node-padding-x * 2) + $icon-font-size;
            border: $card-border-width solid $border-color;
            background-color: $white;
            opacity: 0.8;
            margin: 0;
        }
    }

    // Drag helper image
    .fancytree-drag-helper-img {
        &:after {
            position: absolute;
            top: 50%;
            margin-top: -($icon-font-size / 2);
            right: $fancytree-node-padding-x;
            z-index: 10;
        }

        // If accept
        .fancytree-drop-accept &:after {
            content: $icon-validation-success;
            color: $green-500;
        }

        // If reject
        .fancytree-drop-reject &:after {
            content: $icon-validation-error;
            color: $red-500;
        }
    }

    // Marker icon
    #fancytree-drop-marker {
        &.fancytree-drop-before,
        &.fancytree-drop-after {
            width: 15rem;
            border-top: $border-width solid $gray-600;
            position: absolute !important;
        }
    }

    // Source node while dragging
    .fancytree-drag-source {
        opacity: 0.5;
    }

    // Target node while dragging cursor is over it
    .fancytree-drop-target.fancytree-drop-accept a {
        background-color: $blue-500 !important;
        color: $white !important;
        text-decoration: none;
    }


    //
    // Styles specific to this skin
    //

    // Node
    .fancytree-node {
        display: inherit;
        width: 100%;
        position: relative;
        margin-bottom: 1px;
    }

    // Title
    .fancytree-title {
        border: 0;
        padding: $fancytree-node-padding-y $fancytree-node-padding-x;
        margin-left: $element-spacer-x;
        display: inline-block;
        cursor: pointer;
        @include border-radius($border-radius);
        @include transition(all ease-in-out $component-transition-timer);

        // Editable node input
        > input {
            border: 0;
            outline: 0;
            padding: 0;
            background-color: transparent;
        }

        // Selected title
        .fancytree-selected &,
        .fancytree-active & {
            background-color: $fancytree-node-selected-bg;
            color: $fancytree-node-selected-color;
        }

        // Title when focused
        .fancytree-treefocus .fancytree-selected & {
            background-color: $fancytree-node-active-bg;
            color: $fancytree-node-active-color;
        }
    }

    // Inside dark sidebar
    .sidebar:not(.sidebar-light) {
        .fancytree-selected .fancytree-title,
        .fancytree-active .fancytree-title {
            background-color: rgba($white, 0.2);
            color: $white;
        }

        .fancytree-treefocus .fancytree-selected .fancytree-title {
            background-color: $white;
            color: $body-color;
        }
    }


    //
    // Table extension
    //

    .fancytree-ext-table {

        // Node
        .fancytree-node {
            display: inline-block;
            width: auto;
            margin: 0;
        }

        // Title
        .fancytree-title {
            display: inline;
        }

        // Container
        &.fancytree-container {
            white-space: normal;
        }

        // Icons
        .fancytree-expander,
        .fancytree-icon,
        .fancytree-custom-icon {
            margin-top: (($icon-font-size - $font-size-base) / 2);
        }

        // Checkboxes
        .fancytree-checkbox {
            margin: 0 auto;
            float: none;
        }

        // Rows
        tbody tr {
            @include transition(all ease-in-out $component-transition-timer);

            // Checkbox cell
            td:first-child {
                text-align: center;
            }

            // Title
            .fancytree-title {
                background-color: transparent;
                color: inherit !important;
                padding: 0;
                @include transition(none);
            }

            // Focused items
            &.fancytree-focused,
            &.fancytree-active {
                background-color: $table-accent-bg;
            }

            // Selected items
            &.fancytree-selected {
                background-color: $fancytree-node-active-bg;
                color: $fancytree-node-active-color;

                // Checkbox
                .fancytree-checkbox {
                    color: $custom-control-indicator-checked-color;
                    border-color: $custom-control-indicator-checked-border-color;
                }

                // Title bg override
                .fancytree-title {
                    background-color: transparent;
                }
            }

            // Focused and selected
            .fancytree-treefocus &.fancytree-selected {
                .fancytree-title {
                    @include transition(color ease-in-out $component-transition-timer);
                }
            }
        }
    }


    //
    // Child Counter extension
    //

    .fancytree-ext-childcounter .fancytree-childcounter {
        position: absolute;
        right: 0;
        top: $fancytree-node-padding-y;
        color: $gray-600;
    }


    //
    // Helpers
    //

    // Hide original elements
    .fancytree-helper-hidden {
        display: none;
    }

    // Indeterminate state
    .fancytree-helper-indeterminate-cb {
        color: $gray-700;
    }

    // Disabled state
    .fancytree-helper-disabled {
        color: $gray-900;
    }

    // Spinner
    .fancytree-helper-spin {
        animation: rotation 1s linear infinite;
    }
}