// Styling for trees (question tree and external data tree)
@import "lib/main";

// Vellum wrappers
.formdesigner .fd-ui-container {

    // Styles shared by both trees
    .jstree {

        .jstree-node {

            // Items in tree (type icon + name)
            .jstree-anchor {
                color: darken(@blueDark, 10);
                line-height: 27px;
                height: 26px;

                &.jstree-hovered,
                &.jstree-clicked {
                    border: none;
                    background: desaturate(lighten(@blue, 58), 40);
                }

                &.jstree-clicked {
                    .box-shadow(0px 0px 4px fade(@blue, 60%));
                }
            }

            .jstree-anchor > .jstree-icon, .add_choice:before {
                background: none;
                font-size: .85em;
                color: @cc-brand-mid;
            }

            .add_choice {
                display: block;
                margin-left: 50px;
                cursor: pointer;
                padding: 0 5px;

                // This is fragile; it overwrites fontawesome styles with .jstree-anchor and body styles
                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
                line-height: 24px;
                height: 24px;

                &:before {
                    margin-right: 6px;

                    // Bring back .fa font
                    font: normal normal normal 14px/1 FontAwesome;
                }

                // Also fragile; both because of the static width and because the other styles
                // are taken from .jstree-hovered
                &:hover {
                    border: none;
                    background-color: #eaeff5;
                    width: 95px;
                }
            }

            &.jstree-closed .add_choice {
                display: none;
            }

            .fd-valid-alert-icon {
                margin-right: 3px;
                margin-left: -3px;
            }
        }
    }

    // Styles for question tree only, including header
    .fd-tree {
        .fd-head {
            @height: 46px;
            height: @height;

            h2 {
                line-height: @height;
                font-size: 14px;
            }

            .fd-head-menu-container {
                line-height: @height;
            }
        }

        .fd-scrollable {
            overflow-x: auto;

            // Separate tree from header
            .jstree {
                margin: 5px 0;
            }
        }

        .fd-undo-delete {
            margin-bottom: 0px;
        }
    }

    // Panel for external data sources tree, including header
    .fd-external-sources-container {

        // Header for panel
        .fd-head.fd-head-external-sources {
            cursor: pointer;

            h2 {
                font-size: 12px;
            }
        }

        // Area for search
        .fd-external-resource-search {
            background-color: @cc-bg;
            margin-bottom: 5px;
            > form {
                position: relative;
                padding: 0px @contentPaddingVellum;
                i {
                    line-height: 42px;
                }
            }

            // Icon and search box
            .fd-search-control {
                position: absolute;
                top: 5px;
                margin-left: 18px;
                width: 100%;
            }
        }

        // Data tree itemsuse a different color scheme
        .fd-external-sources-tree .jstree-anchor {
            color: @cc-neutral-low;
            &.jstree-clicked {
                background-color: @cc-bg;
                .box-shadow(0px 0px 4px fade(@cc-neutral-mid, 80%));
            }

            > .jstree-icon {
                color: @cc-neutral-mid;
            }
        }
    }

    .fd-undo-delete p {
        margin-top: 1em;
    }
}

#jstree-dnd {
    max-width: 300px;
    .text-overflow();
}
