@import "base";
@import "mixins";
@import "font-awesome/variables";
@import "susy";

.jstree-container-ul {
    margin: 0;
}

.jstree-container-ul,
.jstree-container-ul ul {
    list-style-type: none;
}

.jstree-children {
    padding-left: 1.5 * $base-line-height;
}

.jstree-container-ul,
.jstree-container-ul > li{
    padding-left: 0;
}

.jstree-node {
    position: relative;
}

.jstree-anchor {
    @include field-row;
    display: block;
    margin: $spacing-small 0 0;
}

.jstree-editlink-container {
    display: none;
    padding: ($spacing-medium - 1px);
    border: 1px solid $gray-on-white;
    overflow: hidden;
    line-height: 1.5 * $base-line-height;
    font-weight: bold;

    & > label > input,
    & > label > textarea,
    & > label > select,
    .query-form-element {
        float: right;
        width: span(7 of 10);
        font-weight: normal;
    }

    .query-form-element input {
        width: 100%;
    }

    label {
        display: block;

        &:not(:last-child) {
            margin-bottom: $spacing-small;
        }
    }
}

.value .jstree-editlink-container label {
    line-height: 1.5 * $base-line-height;
}

.jstree-hovered,
.jstree-clicked {
    background-color: opacify($gray-on-white, .08);
}

i.jstree-icon {
    font-style: normal;
    position: absolute;
    right: $spacing-medium;
    top: 0;
}

.jstree-icon:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.jstree-open,
.jstree-closed {
    position: relative;
}

.jstree-open > .jstree-ocl,
.jstree-closed > .jstree-ocl,
.jstree-removenode-remove,
.jstree-removenode-undo,
.jstree-editlink-edit,
.jstree-displaylink,
.jstree-private {
    width: $base-line-height;
    height: 1.5 * $base-line-height;
    line-height: 1.5 * $base-line-height;
    background-color: opacify($gray-on-white, .16);
    text-align: right;
    cursor: pointer;
    z-index: 1;
}

.jstree-open > .jstree-ocl,
.jstree-closed > .jstree-ocl {
    width: 1.5 * $base-line-height;
    right: 0;
    text-align: center;
}


i.jstree-icon.jstree-ok,
i.jstree-icon.jstree-er {
    left: 100%;
    width: 1.5 * $base-line-height;
    height: 1.5 * $base-line-height;
    line-height: 1.5 * $base-line-height;
    background-color: opacify($gray-on-white, .08);
    text-align: center;
}

.jstree-removenode-remove,
.jstree-removenode-undo,
.jstree-editlink-edit,
.jstree-displaylink,
.jstree-private {
    background-color: transparent;
    opacity: .5;

    &:hover {
        opacity: 1;
    }
}

.jstree-private {
    color: $copy-gray;

    &:hover {
        opacity: .5;
    }
}

.jstree-open > .jstree-anchor .jstree-removenode-remove,
.jstree-closed > .jstree-anchor .jstree-removenode-remove,
.jstree-open > .jstree-anchor .jstree-removenode-undo,
.jstree-closed > .jstree-anchor .jstree-removenode-undo {
    right: 2 * $base-line-height;
}

.jstree-open > .jstree-anchor .jstree-editlink-edit,
.jstree-closed > .jstree-anchor .jstree-editlink-edit {
    right: 3 * $base-line-height;
}

i.jstree-editlink-edit {
    right: 1.5 * $base-line-height;
}

i.jstree-private {
    background-color: transparent;
    position: static;
    display: inline-block;
    margin-right: $spacing-small;
    height: $base-font-size;
    line-height: 1;
}

.jstree-open > .jstree-anchor .jstree-displaylink,
.jstree-closed > .jstree-anchor .jstree-displaylink {
    right: 4 * $base-line-height;
}

i.jstree-displaylink {
    right: 2.5 * $base-line-height;
}

.block-pagelist-tree .jstree-open > .jstree-anchor .jstree-displaylink,
.block-pagelist-tree .jstree-closed > .jstree-anchor .jstree-displaylink {
    right: 3 * $base-line-height;
}

.block-pagelist-tree i.jstree-displaylink {
    right: 1.5 * $base-line-height;
}

.jstree-anchor:hover > .jstree-removenode-remove {
    display: block;
}

.jstree-open > .jstree-ocl:before {
    content: fa-content($fa-var-caret-down);
}

.jstree-closed > .jstree-ocl:before {
    content: fa-content($fa-var-caret-right);
}

.jstree-ok:before {
    content: fa-content($fa-var-check);
}

.jstree-er:before {
    content: fa-content($fa-var-times);
}

.jstree-removenode-remove:before {
    content: fa-content($fa-var-trash-alt);
}

.jstree-removenode-undo:before {
    content: fa-content($fa-var-undo);
}

.jstree-editlink-edit:before {
    content: fa-content($fa-var-pencil-alt);
}

.jstree-displaylink:before {
    content: fa-content($fa-var-external-link-alt);
}

.jstree-private:before {
    content: fa-content($fa-var-eye-slash);
}

.jstree-removenode-removed .jstree-anchor {
    background-color: #ffcccc;
}

.jstree-removenode-removed .jstree-icon:not(.jstree-removenode-undo), 
.jstree-removenode-removed .jstree-children .jstree-icon {
    display: none;
}

.jstree-removenode-removed > .jstree-anchor .jstree-removenode-undo, {
    right: $spacing-medium;
}

.jstree-removenode-toberemoved {
    margin-left: .5 * $spacing-small;
}

.jstree-removenode-removed.jstree-open > .jstree-ocl,
.jstree-removenode-removed.jstree-closed > .jstree-ocl {
    background-color: rgba(255, 0, 0, .24);
}

.jstree-editlink-editmode > .jstree-anchor .jstree-editlink-edit {
    opacity: .35;
}

#jstree-marker {
    position: absolute;
    top: 0;
    left: 0;
    margin: -5px 0 0 0;
    padding: 0;
    border-right: 0;
    border-top: 5px solid rgba(0, 0, 0, 0);
    border-bottom: 5px solid rgba(0, 0, 0, 0);
    border-left: 5px solid;
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
}

#jstree-dnd {
    z-index: 1;
    padding: $spacing-small $spacing-medium;
    background-color: $gray-on-white;
    line-height: $base-line-height;
}
