@import "~@dnnsoftware/dnn-react-common/styles/index";
.dnn-persona-bar-treeview-menu {
    padding: 0;
    .parent-expand {
        margin-left: 10px;
        margin-left: 6px;
        .list-item-menu {
            text-align: left;
        }
        .treeview-parent-expand-button, .treeview-parent-collapse-button {
            height: 28px;
            margin-top: -2px;
            cursor: pointer;
        }
    }
    .dnn-persona-bar-treeview-ul {
        margin-left: 0px;
        padding: 0 0;
        li::before, li::after {
            display: none;
        }
    }
    .list-item-menu {
        width: 90px;
        .draft-pencil {
            height: 32px;
            display: inline-block;
            svg:hover {
                fill: @alto;
            }
        }
    }
    .list-item-menu-right {
        width: 70px;
        .draft-pencil {
            width: auto;
            display: inline-block;
            svg:hover {
                fill: @alto;
            }
            .dnn-persona-bar-draft-icon {
                display: inline-block;
                width: 20px;
            }
            .selection-arrow {
                width: 50px;
            }
        }
    }
    .tree-menu-ul ul {
        padding: 0;
    }
    .selection-arrow {
        top: 5px;
    }
}

.dnn-persona-bar-treeview {
    font-family: inherit;
    cursor: auto;
    padding: 15px 18px 0px 6px;
    max-width: 309px;
    min-width: 309px;
    img {
        -webkit-user-drag: none;
        -khtml-user-drag: none;
        -moz-user-drag: none;
        -o-user-drag: none;
        user-drag: none;
    }
    .collapse-expand {
        transition: all .5s ease-out;
        font-size: 12px;
        font-weight: bold;
        color: @curiousBlue;
        margin: 0 0 20px 20px;
        cursor: pointer;
    }
    .initial {
        color: @alto;
        cursor: default;
    }
    .item-name {
        position: relative;
        top: -5px;
        font-weight: bold;
        margin-left: 5px;
        
        display: inline-block;
        width: 150px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

        p {
            display: inline;
        }
    }
    .item-name-hidden {
        font-style: italic;
    }
    svg:hover {
        fill: @alto;
    }
    .selected-item {
        svg {
            fill: @curiousBlue;
        }
    }
    .list-item-highlight {
        color: @curiousBlue;
    }
    .list-item-dragover {
        color: @curiousBlue;
    }
    .list-item-disabled {
        color: @mountainMist;
        font-style: italic;
    }
    .parent-expand-button {
        display: inline-block;
        position: relative;
        height: 28px;
        left: 15px;
        height: 28px;
        div {
            width: 24px;
        }
        svg {
            fill: #000;
        }
    }
    .parent-expand-icon {
        display: inline-block;
        width: 10px;
        height: 28px;
        margin-right: 10px;
        font-size: 14px;
    }
    .selection-arrow {
        display: inline-block;
        position: relative;
        width: 90px;
        top: 0px;
        left: 5px;
        font-size: 18px;
        font-weight: bold;
        color: @curiousBlue;
        >div {
            float: right;
            height: 20px;
            width: 20px;
            display: inherit;
            svg {
                fill: @curiousBlue;
            }
            svg:hover {
                fill: @curiousBlue !important;
            }
        }
        .dots {
            margin-right: 7px;
            cursor: pointer;
            svg {
                width: 20px;
                circle {
                    fill: @alto;
                }
            }
            svg:hover {
                circle {
                    fill: @curiousBlue;
                }
            }
            &.active {
                circle {
                    fill: @curiousBlue;
                }
            }
            .dnn-in-context-menu {
                transition: all .25s;
                animation: fadeIn .25s ease-in forwards;
            }
        }
    }
    .draft-pencil {
        width: 20px;
        height: 20px;
        display: inline-block;
        svg:hover {
            fill: @alto;
        }
        div{
            height: 20px;
        }
    }
}

.dnn-persona-bar-treeview-ul.tree {
    img {
        -webkit-user-drag: none;
        -khtml-user-drag: none;
        -moz-user-drag: none;
        -o-user-drag: none;
        user-drag: none;
    }
    ul:not(:first-child) {
        li {
            margin-left: 10px;
        }
        li::before, li::after {
            content: '';
            position: absolute;
            left: 0;
        }
        li::before {
            border-top: 1px solid @alto;
            top: 10px;
            width: 10px;
            height: 0;
            left: -5px;
        }
        li::after {
            border-left: 1px solid @alto;
            height: 100%;
            width: 0px;
            top: -10px;
            left: -5px;
        }
        li:last-child::after {
            border-left: 1px solid @alto;
            height: 20px;
            width: 0px;
            top: -10px;
        }
    }
    float: left;
}

.dnn-persona-bar-treeview-ul {
    span {
        padding: 0;
        margin: 0;
    }
    ul {
        margin-left: 5px;
        padding: 0 0;
    }
    ul:first-child {
        margin-left: 0px;
    }
    li {
        width: 175px;
        list-style: none;
        position: relative;
    }
    .collapse-expand {
        display: none;
    }
    .dragged-proxy {
        position: absolute;
        width: 100%;
        height: 28px;
        z-index: 9998;
        background-color: transparent;
    }
    .dropZoneActive {
        margin: 0;
        padding: 0;
        background-color: #fff;
        transition: all .5s;
    }
    .dropZoneInactive {
        cursor: auto;
        margin: 0;
        padding: 0;
        height: inherit;
        transition: all .5s;
    }
    .dropZoneArea {
        cursor: auto;
        height: 2px;
        width: 100%;
        padding: 5px 0;
        text-align: center;
        background-color: transparent;
    }
    .list-item-border-bottom {
        margin-left: 10px;
        border-top: 1px solid @curiousBlue;
    }
    .list-item-border-top {
        margin-left: 10px;
        border-bottom: 1px solid @curiousBlue;
    }
}

.dnn-persona-bar-treeview-icon {
    width: 20px;
    height: 28px;
    display: inline-block;
    float: left;
    div {
        height: 28px;
    }
    svg {
        height: 20px;
    }
}

.dnn-persona-bar-treeview-dragged {
    -webkit-box-shadow: 0px 2px 26px -6px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 2px 26px -6px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 2px 26px -6px rgba(0, 0, 0, 0.75);
    border: 1px solid @curiousBlue;
    z-index: 1000;
    position: absolute;
    top: 200px;
    background-color: #fff;
    list-style: none;
    width: 200px;
    pointer-events: none;
    cursor: auto;
    height: 28px;
    .item-name {
        display: inline;
        p {
            display: inline;
        }
        position:relative;
        top: -5px;
        left: 5px;
    }
    ul {
        display: none;
    }
    .selection-arrow, .draft-pencil, .parent-expand-button, .dragged-proxy {
        display: none;
    }
}

@keyframes BounceHeightIn {
    0% {
        opacity: 0;
        height: 0px;
    }
    85% {
        opacity: .8;
        height: 100px;
    }
    100% {
        opacity: 1;
        height: auto;
    }
}

@keyframes BounceHeightOut {
    0% {
        opacity: 1;
        height: auto;
    }
    15% {
        opacity: .8;
        height: 100px;
    }
    100% {
        opacity: 0;
        height: 0px;
    }
}