//
// Pagetree
//
#typo3-pagetree-topPanelItems {
    background-color: #eee;
}

#typo3-pagetree {
    height: 100%;

    .x-panel-bwrap,
    .x-panel-body {
        height: 100%;
    }

    ul {
        padding-left: 0;
        list-style: none;
    }

    .x-toolbar {
        padding: 0;
        border: none;
    }

    ul.x-tree-root-ct {
        padding-top: 24px;
        margin-bottom: 50px;
    }

    .x-panel-body {
        background: none;
    }

    .x-tree-node {
        .x-tree-node-el {
            line-height: 18px;
            height: 20px;
            margin-right: 3px;
            border-top: 1px solid transparent;
            border-bottom: 1px solid transparent;
            border-left: 1px solid transparent;
        }

        .x-tree-node-over,
        .x-tree-selected {
            border-bottom: 1px solid #d7d7d7;
            border-top: 1px solid #d7d7d7;
            border-right: 1px solid #d7d7d7;
        }

        .x-tree-node-over {
            background-color: #f2f2f2;
            border-top-right-radius: 3px;
            border-bottom-right-radius: 3px;
        }

        .x-tree-selected {
            background-color: #fff;
        }

        .x-tree-selected.x-tree-node-over {
            background-image: none;
            border-radius: 0;
        }
    }

    .x-tree-node-readableRootline {
        padding: 10px 0 3px 10px;
    }

    .x-unselectable,
    .x-unselectable * {
        //
        // restore behaviour from x-tree-node-el which gets overwritten by x-unselectable in default-css
        //
        cursor: pointer;
    }

    .ver-element,
    .ver-versions,
    .ver-page {
        background-color: #f7c898;
    }

    .x-tree-node-over.ver-element,
    .x-tree-node-over.ver-versions,
    .x-tree-node-over.ver-page,
    .x-tree-selected.ver-element,
    .x-tree-selected.ver-versions,
    .x-tree-selected.ver-page {
        background-color: #fee4c9;
    }

    .typo3-pagetree-filteringTree-highlight {
        background-color: #f48e0c;
        color: #fff;
        padding: 0;
    }
}

//
// Drag and Drop
//

.x-tree-lines .typo3-pagetree-node-notExpandable .x-tree-ec-icon {
    visibility: hidden;
}

.x-tree-lines .typo3-pagetree-node-notExpandable ul .x-tree-ec-icon {
    visibility: visible;
}

.x-tree-node a .typo3-pagetree-status,
.x-dd-drag-ghost a .typo3-pagetree-status {
    padding: 0;
    margin: 0 3px 0 0;
}

.typo3-pagetree-tree-copy {
    color: #666;
    margin-top: 5px;
}

.x-dd-drag-ghost-pagetree-text {
    display: inline-block;
    vertical-align: middle;
}

.x-dd-drag-ghost-pagetree,
.x-dd-drag-ghost {
    padding-bottom: 5px;
}

.x-dd-drop-icon {
    padding-top: 6px;
}

.x-dd-drag-ghost-pagetree span {
    margin: 3px 3px 0;
}

.x-dd-drag-ghost {
    background-color: inherit;
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

    span {
        margin: 0 1px 0 3px;
    }
}

.x-dd-drop-nodrop {
    background-color: #f6d3cf;
    border: 1px solid #d66c68;
}

.typo3-pagetree-deletionDropZone-proxyOver,
.x-tree-drop-ok-append,
.x-tree-drop-ok-between,
.x-tree-drop-ok-below,
.x-tree-drop-ok-above {
    background-color: #dce8f4;
    border: 1px solid #9eb2c5;
}

.x-dd-drop-nodrop .x-dd-drop-icon {
    background-image: url(../../../../backend/Resources/Public/Images/pagetree-drag-place-denied.png);
}

.x-tree-drop-ok-append.typo3-pagetree-copy .x-dd-drop-icon {
    background-image: url(../../../../backend/Resources/Public/Images/pagetree-drag-new-inside.png);
}

.x-tree-drop-ok-below.typo3-pagetree-copy .x-dd-drop-icon {
    background-image: url(../../../../backend/Resources/Public/Images/pagetree-drag-copy-below.png);
}

.x-tree-drop-ok-above.typo3-pagetree-copy .x-dd-drop-icon {
    background-image: url(../../../../backend/Resources/Public/Images/pagetree-drag-copy-above.png);
}

.x-tree-drop-ok-between.typo3-pagetree-copy .x-dd-drop-icon {
    background-image: url(../../../../backend/Resources/Public/Images/pagetree-drag-new-between.png);
}

.x-tree-drop-ok-append .x-dd-drop-icon {
    background-image: url(../../../../backend/Resources/Public/Images/pagetree-drag-move-into.png);
}

.x-tree-drop-ok-between .x-dd-drop-icon {
    background-image: url(../../../../backend/Resources/Public/Images/pagetree-drag-move-between.png);
}

.x-tree-drop-ok-below .x-dd-drop-icon {
    background-image: url(../../../../backend/Resources/Public/Images/pagetree-drag-move-below.png);
}

.x-tree-drop-ok-above .x-dd-drop-icon {
    background-image: url(../../../../backend/Resources/Public/Images/pagetree-drag-move-above.png);
}

#typo3-pagetree .x-tree-node .x-tree-drag-insert-below,
.x-tree-node div.x-tree-drag-insert-below,
.x-tree-dd-underline .x-tree-node div.x-tree-drag-insert-below a {
    border-bottom: 1px solid #9eb2c5;
}

#typo3-pagetree .x-tree-node .x-tree-drag-insert-above,
.x-tree-node .x-tree-drag-insert-above,
.x-tree-dd-underline .x-tree-node div.x-tree-drag-insert-above a {
    border-top: 1px solid #9eb2c5;
}

.x-tree-node .x-tree-drag-append {
    background: #d7e4f1;
}

.x-tree-node .x-tree-drag-append a span {
    background-color: inherit;
    border: none;
}

//
// Top Panel
//
.typo3-pagetree-toppanel {
    .btn {
        line-height: 16px;
    }

    padding: 0 10px;
    border-bottom: 1px solid #c3c3c3;

    .x-toolbar {
        padding: 0;
        border: 0 !important;
    }

    .x-toolbar-left-row {
        .btn {
            margin-right: 4px;
        }
    }

    .x-toolbar-right-row {
        .btn {
            margin-left: 4px;
        }
    }

    .x-panel-body,
    .x-panel-tbar {
        margin: 4px 0;
        min-height: 26px;
        height: auto !important;
    }

    .x-panel-bwrap {
        height: auto !important;
        overflow: visible;
    }

    .x-btn button {
        padding: 0;
        font-size: inherit;
    }
}

.typo3-pagetree-toppanel-filter {
    width: 100% !important;
    height: 26px !important;
    padding-right: 25px;
    padding-left: 8px;
    box-sizing: inherit;
}

.typo3-pagetree-toppanel-filter-clear {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translate(0, -50%);
}

.typo3-pagetree-toppanel-item {
    .x-form-field-wrap {
        width: 100% !important;
    }

    .x-panel-body {
        margin: 0;
    }
}

.typo3-pagetree-toppanel-drag-node {
    cursor: move;
    padding: 5px;
    border: none;
    background: none;
    font-size: 11px;
    line-height: 16px;
}

//
// Deletion Drop Zone
//
#typo3-pagetree-deletionDropZone {
    color: #fff;
    background-color: #585858;
    box-shadow: inset 0 2px 5px #414141;

    p {
        padding: 5px;
    }

    #typo3-pagetree-deletionDropZone-text {
        cursor: default;
        font-size: 0.9em;
        padding: 0 0 0 5px;
        display: inline;
    }
}

.typo3-pagetree-deletionDropZone-restore {
    background-color: #d5d5d5;
    background-repeat: repeat-x;
    background-image: linear-gradient(to bottom, #f6f6f6 10%, #d5d5d5 90%);
    border: 1px solid #7c7c7c;
    border-radius: 1px;
    color: #434343;
    cursor: pointer;
    display: inline-block;
    padding: 0 6px;
    margin-left: 24px;

    &:hover {
        background-color: #c8c8c8;
        background-image: linear-gradient(to bottom, #f6f6f6 10%, #c8c8c8 90%);
        background-position: bottom;
        background-repeat: repeat-x;
        border: 1px solid #737f91;
        color: #1e1e1e;
    }
}

.typo3-pagetree-deletionDropZone-restoreText {
    display: inline-block;
    padding: 4px 4px 4px 18px;
}

#typo3-pagetree .typo3-pagetree-deletionDropZone-activateProxyOver {
    background-color: #644d2d;
}

//
// Tree Highlighting
//
.x-tree-node-readableRootline {
    font-style: italic;
}

//
// Indicator Bar
//
[id=typo3-pagetree-indicatorBar] {
    .alert {
        margin: 10px 10px 0;
    }
}

//
// CONTEXT MENU
//

// pagetree-context-menu shadow
.x-shadow {
    z-index: 40 !important;                       // problem with EXTJS - needs to be removed
}

[id=typo3-pagetree-indicatorBar-temporaryMountPoint] {
    .media-right {
        position: absolute;
        right: 16px;
        transform: translateY(-100%);
        background-color: $alert-info-bg;
    }
}
