jqtree.postcss

ul.jqtree-tree {
    list-style: none outside;
    margin-left: 0;
    margin-bottom: 0;
    padding: 0;

    &.jqtree-dnd {
        touch-action: none;
    }

    ul.jqtree_common {
        list-style: none outside;
        margin-left: 12px;
        margin-right: 0;
        margin-bottom: 0;
        padding: 0;
        display: block;
    }

    li.jqtree-closed > ul.jqtree_common {
        display: none;
    }

    li.jqtree_common {
        clear: both;
        list-style-type: none;
    }

    .jqtree-toggler {
        border-bottom: none;
        color: #333;
        text-decoration: none;
        vertical-align: middle;

        &:hover {
            color: #000;
            text-decoration: none;
        }

        &.jqtree-closed {
            background-position: 0 0;
        }

        &.jqtree-toggler-left {
            margin-right: 0.5em;
        }

        &.jqtree-toggler-right {
            margin-left: 0.5em;
        }
    }

    .jqtree-element {
        cursor: pointer;
        position: relative;
        display: flex;
    }

    .jqtree-title {
        color: #1c4257;
        vertical-align: middle;
    }

    .jqtree-title-button-left {
        margin-left: 1.5em;

        &.jqtree-title-folder {
            margin-left: 0;
        }
    }

    li.jqtree-folder {
        margin-bottom: 4px;

        &.jqtree-closed {
            margin-bottom: 1px;
        }
    }

    li.jqtree-ghost {
        position: relative;
        z-index: 10;
        margin-right: 10px;

        span {
            display: block;
        }

        span.jqtree-circle {
            border: solid 2px #0000ff;
            border-radius: 100px;
            height: 8px;
            width: 8px;
            position: absolute;
            top: -4px;
            left: -6px;
            box-sizing: border-box;
        }

        span.jqtree-line {
            background-color: #0000ff;
            height: 2px;
            padding: 0;
            position: absolute;
            top: -1px;
            left: 2px;
            width: 100%;
        }

        &.jqtree-inside {
            margin-left: 48px;
        }
    }

    span.jqtree-border {
        position: absolute;
        display: block;
        left: -2px;
        top: 0;
        border: solid 2px #0000ff;
        border-radius: 6px;
        margin: 0;
        box-sizing: content-box;
    }

    li.jqtree-selected > .jqtree-element,
    li.jqtree-selected > .jqtree-element:hover {
        background-color: #97bdd6;
        background: linear-gradient(#bee0f5, #89afca);
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
    }

    .jqtree-moving > .jqtree-element .jqtree-title {
        outline: dashed 1px #0000ff;
    }
}

ul.jqtree-tree.jqtree-rtl {
    direction: rtl;

    ul.jqtree_common {
        margin-left: 0;
        margin-right: 12px;
    }

    .jqtree-toggler {
        margin-left: 0.5em;
        margin-right: 0;
    }

    .jqtree-title {
        margin-left: 0;
        margin-right: 1.5em;

        &.jqtree-title-folder {
            margin-right: 0;
        }
    }

    li.jqtree-ghost {
        margin-right: 0;
        margin-left: 10px;

        span.jqtree-circle {
            right: -6px;
        }

        span.jqtree-line {
            right: 2px;
        }

        &.jqtree-inside {
            margin-left: 0;
            margin-right: 48px;
        }
    }

    span.jqtree-border {
        right: -2px;
    }
}

span.jqtree-dragging {
    color: #fff;
    background: #000;
    opacity: 0.6;
    cursor: pointer;
    padding: 2px 8px;
}