@import "inc/bootstrap";

.tree {
    overflow:auto;
    max-height: 75vh;
    max-width: 280px;
    background: white;
    border-right: 5px $canvas solid;
    .ltr, .rtl {
        margin-top: 8px;
        min-height: 150px;
        overflow: visible;
    }
    ul {
        display: block;
        margin: 0 8px;
        padding: 5px 0;
        list-style-type: none;
        li {
            padding-left: 12px;
            margin: 0 1px;
        }
        ins {
            display: inline-block;
            background-repeat: no-repeat;
            text-decoration: none;
            width: 16px;
            height: 19px;
            position: relative;
            left: 2px;
            top: 1px;
            font-family: 'tao';
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            @include font-size(14);

            /* Better Font Rendering =========== */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            color: whiten($info, .2);
        }
        &.ltr {
            ins {
                margin: 0 4px 0 0px;
            }
        }
    }

    li {
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABAAgMAAADwqRilAAAACVBMVEX///8kbHeAgIB/SOz/AAAAAXRSTlMAQObYZgAAAEVJREFUeNpjYIACBwY4EICzArAJhoQiAH6VWM0cBUDAMUQEuVaMxhWBEMIq2IBNcAHRKom2fVgBplXYQmgVthDSGiwhBAAx4grYHitHZwAAAABJRU5ErkJggg==) no-repeat -1000px -1000px;
        display: block;
        padding: 0 0 0 11px;
        ul {
            display: none;
            margin: 0;
            padding: 0;
        }
        a, span {
            height: 20px;
            color: $textColor;
            white-space: nowrap;
            text-decoration: none;
            display: inline-block;
            padding-right: 5px;
            @include font-size(13);
            @include simple-border(transparent);
            overflow: visible;
            text-overflow: ellipsis;
            &:after {
                content: "\00a0\00a0\00a0\00a0";
                white-space: pre;
                display: inline-block;
                width: 1px;
            }
            &:hover {
                color: $info;
            }
            &.clicked {
                background: $lightBlueGrey;
                border-color: $darkBlueGrey;
            }
            &:focus {
                outline: none;
            }
            input {
                margin: 0;
                padding: 0 0;
                display: inline-block;
                height: 12px !important;
                border: 1px solid white;
                background: white;
                font-size: 10px;
                &:not([class="xxx"]) {
                    padding: 1px 0;
                }
            }
        }

        &.open {
            background-position: -32px -46px;
        }
        &.closed {
            background-position: -48px -30px;
        }
        &.more a {
            text-align: left;
            color: $info;
        }

        &.paginate {
            margin: 15px 0 0 0 !important;
            display: inline-block !important;
            width: 90px;
            background-image: none !important;
            position: relative;
            left: -20px;
            a {
                width: 90px;
                &:hover, &.hover {
                    @include font-size(13);
                }
            }
            ins {
                transform: rotate(90deg);
                @include font-size(11);
                padding: 3px;
            }
        }
        &.paginate-more {
            ins {
                &:before {
                    @include icon-play;
                }
            }
        }

        &.paginate-all {
            ins {
                &:before {
                    @include icon-forward;
                }
            }
        }

        &.private ins:after, &.permissions-partial ins:after, &.permissions-none ins:after {
            display: inline-block;
            position: relative;
            left: -15px;
            top: 4px;
            @include tao-icon-setup;
            text-shadow: 0px 0px 1px #666;
            @include font-size(14);
        }

        &.permissions-partial ins:after {
            color: #EED401;
            @include icon-lock;
        }

        &.private ins:after, &.permissions-none ins:after {
            color: #BA122B;
            @include icon-lock;
        }

        &.open ul {
            display: block;
        }
        &.closed ul {
            display: none !important;
        }
        li {
            overflow: visible;
        }
    }

    .locked li a {
        color: gray;
    }
    .no_dots {
        background: transparent;
        ul {
            background: transparent;
        }
        li.leaf {
            background-image: none;
            background-color: transparent;
        }
    }

    .node-class {
        & > a > ins:before {
            @include icon-folder;
            color: $warning;
            top: 2px;
            text-shadow: 1px 1px 0 blacken($warning, .2);
        }
        &.open {
            & > a > ins:before {
                @include icon-folder-open;
            }
        }
    }
    .node-instance ins {
        background-image: none;
    }
    ul li a.loading ins {
        background-image: url("throbber.gif") !important;
        background-position: 0 0 !important;
    }
    li a ins.forbidden {
        background-position: -16px -16px;
    }
    .locked li a ins {
        background-position: 0 -48px;
    }
    li span ins {
        background-position: -16px 0;
    }
}

#jstree-marker {
    padding: 0;
    margin: 0;
    line-height: 5px;
    font-size: 1px;
    overflow: hidden;
    height: 5px;
    position: absolute;
    left: -45px;
    top: -30px;
    z-index: 1000;
    background-color: transparent;
    background-repeat: no-repeat;
    display: none;
    &.marker {
        width: 45px;
        background-position: -32px top;
    }
    &.marker_plus {
        width: 5px;
        background-position: right top;
    }

    background-image: url("icons.png");
}

#jstree-dragged {
    position: absolute;
    top: -10px;
    left: -10px;
    margin: 0;
    padding: 0;
    ul{
        background: none !important;
        min-height: inherit;
        max-height: inherit;
        padding: 0;
        margin: 0;
        li {
            margin: 0;
            a {
                padding: 0 6px;
                ins {
                    display: none;
                }
            }
        }
        ul {
            ul {
                display: none;
            }
        }
    }
}

.tree-css-context {
    a ins {
        background-image: url("icons.png");
        /* background-repeat:no-repeat; */
        background-position: -64px -64px;
        &.create {
            background-position: 0 -16px;
        }
        &.rename {
            background-position: -16px 0px;
        }
        &.remove {
            background-position: 0 -32px;
        }
    }
    li a.disabled span {
        color: #b0b0b0;
    }
}

.tree-checkbox {
    li > a.clicked {
        background: transparent;
        border-color: transparent;
    }
    li.node-instance >  a {
        ins:before {
            @include tao-icon-setup;
            @include icon-checkbox;
        }

        &.checked {
            ins:before {
                @include tao-icon-setup;
                @include icon-checkbox-checked;
            }
        }
    }
}

.taotree .node-instance ins:before {
    @include icon-test;
}

.modal .content .tree-custom {
    max-height: 50vh;
}

@import './inc/extension-icons';