$dataSourceRowHeight: 32px;
$dataSourceRowPadding: 6px;
.dx-dashboard-datasource-browser-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .dx-dashboard-form-right-column {
        .dx-dashboard-datasource-tree-wrapper {
            background-color: $dashboard-widget-bg;
            @include dx-dashboard-properties-border;
            .dx-dashboard-datasource-browser-tree {
                .dx-treelist .dx-treelist-item {
                    font-size: 0;
                    min-width: 100px;
                    &.dx-treelist-item-selected {
                        background-color: $dashboard-data-sources-menu-field-list-selected-bg;
                        color: $dashboard-data-sources-menu-field-list-selected-color;
                        .dx-dashboard-datasource-field-icon-remove {
                            svg {
                                color: $dashboard-icon-danger-color;
                            }
                        }
                        .dx-dashboard-datasource-field-icon-remove:hover {
                            svg {
                                color: $dashboard-hover-icon-color;
                            }
                        }
                    }
                    &.dx-dashboard-treelist-item-disabled {
                        opacity: 0.5;
                    }
                    &:hover:not(.dx-dashboard-treelist-item-disabled) {
                        background-color: $dashboard-data-sources-menu-field-list-hover-bg;
                        color: $dashboard-data-sources-menu-field-list-hover-color;
                    }
                    &.dx-treelist-group-item {
                        &:not(.dx-treelist-item-collapsed) {
                            font-weight: bold;
                        }
                    }
                    .dx-collapsing-image {
                        font: 14px/1 DXIcons;
                        font-size: 14px;
                        background-image: none;
                        margin: 0 0 0 4.5px;
                        &:before {
                            content: "+";
                            line-height: $itemSize - 2px;
                        }
                        &.dx-image-expanded {
                            transform: none;
                            &:before {
                                content: "-";
                            }
                        }
                    }
                    &.dx-dashboard-corrupted-calc-field {
                        color: $dashboard-error;
                    }
                }
                .dx-dashboard-datasource-tree-item-column {
                    display: inline-block;
                    height: 100%;
                    width: 33%;
                    border-right: 1px solid $dashboard-border-color;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    line-height: $itemSize;
                    font-size: $smallFontSize + 1px;
                    vertical-align: top;
                    .dx-treelist-item-images {
                        width: 26px;
                        .dx-dashboard-datasource-field-icon > div {
                            width: 17px;
                        }
                    }
                    .dx-dashboard-datasource-field-icon {
                        padding: 0 5px;
                        cursor: pointer;
                        &.dx-dashboard-calculated-field {
                            padding: 0px;
                            float: left;
                            margin-top: 5px;
                        }
                        svg {
                            width: $dataSourceRowHeight - 2 * $dataSourceRowPadding;
                            height: $dataSourceRowHeight - 2 * $dataSourceRowPadding;
                            color: $dashboard-icon-color;
                        }
                    }
                    .dx-dashboard-datasource-field-icon-remove {
                        svg {
                            color: $dashboard-icon-danger-color;
                        }
                    }
                    .dx-dashboard-datasource-field-icon-edit:hover,
                    .dx-dashboard-datasource-field-icon-remove:hover {
                        svg {
                            color: $dashboard-hover-icon-color;
                        }
                    }
                }
                transition: opacity linear 0.15s;
                transition-delay: 0s;
                &.dx-state-loading {
                    transition: opacity linear 0.5s;
                    transition-delay: 0.5s;
                    pointer-events: none;
                    opacity: 0.7
                }
            }
            .dx-dashboard-treelist-loading {
                opacity: 0;
                transition: opacity linear 0s;
                transition-delay: 0s;
                &.dx-state-active {
                    transition: opacity linear 0.5s;
                    transition-delay: 0.5s;
                    opacity: 1;
                    @include dx-dashboard-binding-header;
                    border: none;
                    color: $dashboard-designer-sub-header-color;
                    text-align: center;
                    position: absolute;
                    top: 50px;
                    left: 0;
                    right: 0;
                }
            }
        }
    }
}
.dx-dashboard-datasources-list-holder {
    position: relative;
    height: 100%;
    .dx-dashboard-datasources-list-header {
        color: $dashboard-designer-header-color;
        font-size: 14px;
        text-transform: none;
        font-weight: normal;
        margin-bottom: 10px;
        .dx-dashboard-datasource-action {
            float: right;
            @include dx-dashboard-action;
        }
    }
    .dx-dashboard-datasources-list {
        position: absolute;
        left: 0;
        right: 0;
        top: 28px;
        height: calc(100% - 30px);
    }
    .dx-dashboard-datasources-content {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: $dashboard-widget-bg;
        @include dx-dashboard-properties-border;
    }
    .dx-dashboard-datasources-loading {
        color: $dashboard-toolbar-color;
        @include flex-v-container;
        align-self: center;
    }
    .dx-dashboard-datasources-error {
        padding: 35px 130px 0px 40px;
        .dx-dashboard-datasources-error-title {
            font-size: 14px;
            font-weight: bold;
            color: $dashboard-error;
            display: inline-block;
            padding-right: 70px;
        }
        .dx-dashboard-datasources-error-details {
            font-size: 11px;
        }
    }
}
.dx-dashboard-datasources-list {
    background-color: $dashboard-widget-bg;
    @include dx-dashboard-properties-border;
    @include dx-dashboard-properties-search;
    .dx-list-item {
        cursor: default;
        .dx-dashboard-datasource-icon:not(.dx-state-disabled) {
            cursor: pointer;
        }
        .dx-state-disabled {
            opacity: 0.3;
        }
        &:hover, &.dx-state-focused {
            .dx-dashboard-datasource-icons,
            .dx-dashboard-datasource-icon-remove,
            .dx-dashboard-datasource-icon-rename,
            .dx-dashboard-datasource-icon-embed,
            .dx-dashboard-datasource-icon-preview,
            .dx-dashboard-datasource-icon-link {
                visibility: visible;
            }
            .dx-dashboard-datasource-icon-remove {
                svg {
                    color: $dashboard-icon-danger-color;
                }
            }
        }
    }
    .dx-dashboard-datasource-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .dx-dashboard-datasource-description {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .dx-dashboard-datasource-icons {
            display: flex;
            visibility: hidden;
            align-items: center;
        }
        .dx-dashboard-datasource-icon {
            @include dx-dashboard-icon-hovered-image(24px, $defaultIconSize, $dashboard-icon-color);
        }
    }
    &.dx-dashboard-datasources-box {
        .dx-dashboard-datasource-item {
            float: left;
            width: 250px;
            margin: 15px;
        }
    }
}