@import '../../styles/variables.less';

app-elements-tree {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    div.greeting {
        padding: 12px;
        & p {
            color: var(--scheme-color-1);
        }
        & div.buttons {
            padding-top: 12px;
            text-align: center;
            & button {
                color: var(--scheme-color-0);
            }
        }
    }
    div.controls {
        position: absolute;
        display: flex;
        flex-direction: row;
        top: 0;
        left: 0;
        height: 32px;
        width: ~"calc(100% - 2px)";
        & app-filter-input {
            margin-left: 12px;
            flex: auto;
        }
        & span.small-icon-button {
            padding-top: 4px;
            margin: 4px 0px 0 6px;
        }
        & span.small-icon-button:last-child {
            margin-right: 6px;
        }
    }
    div.tree {
        position: absolute;
        top:32px;
        left:0;
        width: ~"calc(100% - 22px)";
        padding: 0 11px;
        bottom: 0;
        overflow-y:auto;
        overflow-x: hidden;
        outline: none;
        & mat-tree {
            background: none;
            padding-left: 4px;
            & button[disabled="true"] {
                display: none;
            }
        }
        & mat-tree-node {
            position: relative;
            min-height: 18px;
            border: solid thin rgba(0,0,0,0);
            z-index: 0;
            &[data-selected="true"] {
                &:after {
                    position: absolute;
                    content: '';
                    display: block;
                    width: 2px;
                    height: 100%;
                    right: 0;
                    top:0;
                    background: var(--scheme-color-active);
                }
            }
            &[data-exists="false"] {
                color: var(--scheme-color-4);
            }
            &:hover {
                &:before {
                    position: absolute;
                    content: '';
                    display: block;
                    width: ~"calc(100% + 36px)";
                    height: 100%;
                    left: -16px;
                    top:0;
                    background: var(--scheme-color-hover);
                    z-index: -1;
                }
            }
            & button {
                line-height: 16px!important;
                width: 16px!important;
                height: 16px!important;
                padding: 0!important;
                overflow: hidden;
                margin-left: -8px;
                margin-right: 4px;
            }
            & mat-icon {
                height: 16px;
                width: 16px;
                line-height: 16px;
                font-size: 16px;
            }
            & mat-progress-bar {
                position: absolute;
                height: 2px;
                bottom: 0;
            }
            & span.name {
                position: relative;
                white-space: nowrap;
                display: flex;
                overflow: hidden;
                text-overflow: ellipsis;
                align-items: center;
                & > span {
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                & span.ext {
                    margin-right: 6px;
                    color: var(--scheme-color-2);
                    flex: none;
                    font-size: 10px;
                    line-height: 10px;
                    height: 10px;
                    font-weight: 500;
                    margin-left: 12px;
                }
                & span.match {
                    background: var(--scheme-color-active);
                }
            }
        }
    }

}