.resource-tree{
    $nodeHeight: 40px;
    $actionWidth: 25px;
    $hoverWidth: $nodeHeight - 15px;

    position: relative;
    height: 100%;
    opacity : 0;
    &.rendered {
        opacity: 1;
        @include transition(opacity, 300ms, linear);
    }

    &.multiple ul li.selectable {
        & > a > .selector {
            display: inline-block;
        }
    }

    &.multiple ul li.instance[data-access="denied"] a .selector {
        display: none;
    }

    .clickable {
        &:hover {
            &:before {
                content: " ";
                display: inline-block;
                position: absolute;
                width: $hoverWidth;
                height: $hoverWidth;
                top: 7.5px;
                left: 0;
                border-radius: 50%;
                background-color: blacken($uiSelectableHoverBg, .2);
                opacity: .5;
            }
        }
        &:focus {
            outline: 0 none;
        }
    }

    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;

        li {
            position: relative;
            cursor: pointer;

            & > a {
                height: $nodeHeight;
                line-height: $nodeHeight;
                display: block;
                width: 100%;
                padding-right: 30px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                border-bottom: solid 1px $uiGeneralContentBorder;
                color : $textColor;
            }
            &.class {
                .class-toggler {
                    display: inline-block;
                    position: relative;
                    width: $actionWidth;
                    height: $nodeHeight;
                    text-align: center;
                    &:after {
                        @include tao-icon-setup;
                        @include icon-down;
                        @include font-size(15);
                        position: relative;
                    }
                }
                &.empty .class-toggler{
                    visibility: hidden;
                }
                & > a {
                    & > .icon-folder:before {
                        @include icon-folder-open;
                        color: $warning;
                        margin-right: 4px;
                    }
                    &:hover {
                        background-color: $uiSelectableHoverBg;
                        color : $textColor;
                        @include transition(all, 200ms, linear);
                    }
                }

                &.selected {
                    & > a {
                        background-color: $uiSelectableSelectedBg;
                        color: $textHighlight;
                        &:before, &:after {
                            color: $textHighlight;
                        }
                        @include transition(all, 200ms, linear);

                        &:hover {
                            background-color: $uiSelectableSelectedHoverBg;
                            @include transition(all, 200ms, linear);
                        }
                        .clickable:hover:before {
                            background-color: whiten($uiSelectableSelectedHoverBg, .2);
                        }
                    }
                }
                &.closed {
                    & > a > .class-toggler:after {
                        @include icon-right;
                    }
                    & > a > .icon-folder:before {
                        @include icon-folder;
                    }
                    & > ul {
                        display: none;
                    }
                }
            }
            &.instance {
                & > a > [class^="icon-"], & > a > [class*=" icon-"] {
                    color: $info;
                    margin-right: 4px;
                    margin-left: $actionWidth;
                    @include font-size(16);
                }
                &:hover {
                    background-color: $uiSelectableHoverBg;
                    color : $textColor;
                    @include transition(all, 200ms, linear);
                }
                &.selected {
                    background-color: $uiSelectableSelectedBg;
                    & > a, & > a > [class^="icon-"], & > a > [class*=" icon-"] {
                        color: $textHighlight;
                    }
                    @include transition(all, 200ms, linear);

                    &:hover {
                        background-color: $uiSelectableSelectedHoverBg;
                        @include transition(all, 200ms, linear);
                    }
                    .clickable:hover:before {
                        background-color: whiten($uiSelectableSelectedHoverBg, .2);
                    }
                }
            }
            & > a > .selector {
                display: none;
                position: absolute;
                top: 0;
                right: 8px;
                line-height: $nodeHeight;
                height: $nodeHeight;
                width: $actionWidth;
                text-align:center;

                &:after {
                    @include transition(all, 200ms, linear);
                    @include tao-icon-setup;
                    @include icon-checkbox;
                    @include font-size(15);
                    color: $info;
                    line-height: $nodeHeight;
                    position: relative;
                }
            }
            &.selected > a > .selector:after {
                @include icon-checkbox-checked;
            }
            &.selected > a > .selector:after, &.selected > a:hover > .selector:after {
                color: $textHighlight;
            }
            &[data-access=denied] > a, &[data-access=partial] > a {
                [class^="icon-"], [class*=" icon-"] {
                    position: relative;
                    &:after {
                        @include icon-lock;
                        color: #555;
                        position: absolute;
                        left: 7px;
                        top: 6px;
                    }
                }
            }
            &[data-access=denied] {
                color: $uiClickableActiveBg;
                background-color: $textHighlight;
                &:hover, &:hover > a, & > a, [class^="icon-"]:before, [class*=" icon-"]:before  {
                    cursor: auto;
                    background-color: $textHighlight;
                    color: $uiClickableActiveBg !important;
                }
            }
            a:hover {
                text-decoration: none;
            }
        }
    }
}