@use "../styles/__imports" as *;
.dx-dashboard-control {
    background-color: $dashboard-surface-bg;
    a {
        color: $dashboard-link-color;
    }
}
.dx-dashboard-widget-container,
.dx-dashboard-loading-container {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    min-height: 150px;
    min-width: 300px;
    overflow: hidden;
    .dx-dashboard-control-loading {
        text-transform: uppercase;
        color: $dashboard-toolbar-color;
        font-size: $labelFontSize;
        font-weight: bold;
    }
    * {
        box-sizing: border-box;
    }
    .dx-popup-wrapper {
        transition: background $menuAnimationDelay;
    }
    .dx-overlay-shader {
        background-color: $dashboard-overlay-shader-bg;
    }
    .dx-dashboard-no-visible-dashboard {
        @include dx-dashboard-vertical-align-container;
        width: 100%;
        height: 100%;
        text-align: center;
    }
    .dx-dashboard-designer-menu-header + .dx-popup-content, .dx-dashboard-property-grid .dx-popup-content {
        padding: 0px;
    }
    .dx-dashboard-surface {
        position: absolute;
        left: $toolItemSize*2;
        top: 0;
        right: 0;
        bottom: 0;
        &.dx-dashboard-surface-toolbar-visible {
            top: $menuTitleHeight; 
        }
        .dx-layout-item-wrapper {
            .dx-layout-item-container {
                overflow: hidden;
            }
        }
        .dx-layout-item-cover {
            background-color: transparent;
            border: 2px solid transparent;
            opacity: 1;
            transition: border-color $fastAnimationLength;
            &.dx-layout-float-cover {
                z-index: $layoutItemCoverZIndex;
            }
            &:hover {
                border-color: $dashboard-item-menu-item-border-color;
            }
        }
        body:hover & dashboard-docking-layout .dx-layout-root,
        & dashboard-docking-layout.dx-dashboard-in-work .dx-layout-root {
            .dx-layout-selected {
                pointer-events: none;
                border-color: $dashboard-item-menu-item-border-color;
            }
            &.dx-state-underlying-selection .dx-layout-item-cover:not(.dx-layout-selected):not(:hover) {
                background-color: $dashboard-item-shadow;
            }
            &.dx-state-underlying-selection .dx-layout-item-wrapper:not(:hover) > .dx-layout-item-container:not(.dx-layout-item-selected) {
                filter: grayscale(1);
                -webkit-filter: grayscale(1);
            }
            @include dx-dashboard-item-drop-position-indicator
        }
        .dx-dashboard-layout-state {
            svg {
                width: 48px;
                height: 48px;
                min-width: 48px;
                min-height: 48px;
            }
            &.dx-dashboard-layout-state-large {
                .dx-dashboard-item-type-title {
                }
                .dx-dashboard-item-type-icon {
                }
                .dx-dashboard-layout-state-content {
                }
            }
            &.dx-dashboard-layout-state-medium {
                .dx-dashboard-item-type-title {
                }
                .dx-dashboard-item-type-icon {
                    display: none;
                }
                .dx-dashboard-layout-state-content {
                }
            }
            &.dx-dashboard-layout-state-small {
                .dx-dashboard-item-type-title {
                }
                .dx-dashboard-item-type-icon {
                    display: none;
                }
                .dx-dashboard-layout-state-content {
                    display: none;
                }
            }
            .dx-dashboard-item-type-title {
                font-size: $normalFontSize;
                margin-top: 3px;
            }
            .dx-dashboard-layout-text {
                font-size: $smallFontSize;
                max-width: 150px;
                margin-top: 14px;
                align-self: center;
            }
            .dx-dashboard-layout-link {
                display: inline-block;
                text-decoration: underline;
                color: $dashboard-link-color;
                cursor: pointer;
                text-transform: none;
                font-weight: normal;
            }
            &.dx-dashboard-layout-state-empty {
                svg {
                    fill: currentColor;
                    color: $dashboard-icon-color;
                    opacity: 0.35;
                }
                div {
                    color: $dashboard-designer-sub-header-color;
                }
            }
            &.dx-dashboard-layout-state-error {
                svg {
                    color: $dashboard-error;
                    path {
                        fill: currentColor;
                    }
                }
                div {
                    color: $dashboard-error;
                }
            }
        }
        .dx-layout-item-placeholder {
            @include flex-v-container;
            height: 100%;
            pointer-events: auto;
            text-align: center;
            overflow: hidden;
            padding: 15px;
        }
        @include dx-dashboard-item-drop-position-indicator
    }
    .dx-texteditor-input {
        min-height: initial;
    }
    .dx-treelist-wrapper .dx-scrollable-container {
        max-height: 300px;
        cursor: default;
    }
}
dx-layout-item .dx-datagrid-rowsview.dx-scrollable .dx-scrollable-content {
    z-index: auto;
}
.dx-dashboard-item-controls {
    pointer-events: auto;
}