@use "sass:math";
.dx-dashboard-data-item-remove-action {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.05s linear;
    transition-delay: 0s;
    position: absolute;
    right: 0;
    top: 0;
    @include dx-dashboard-icon-hovered-image($itemSize, 24px, $dashboard-icon-danger-color, $dashboard-hover-icon-color);
    cursor: pointer;
    svg {
        pointer-events: none;
    }
    &.dx-dashboard-data-item-remove-action-visible {
        transition-delay: 0.05s;
        opacity: 1;
        visibility: visible;
    }
}
.dx-dashboard-cloned-copy {
    opacity: 1;
    z-index: -1;
}
dx-dashboard-data-item-link {
    position: relative;
    display: block;
    &:hover {
        .dx-dashboard-data-item-remove-action-embeded {
            opacity: 1;
            visibility: visible;
        }
    }
}
.dx-dashboard-data-item {
    height: $dataItemHeight;
    margin: $dataItemMargin 0;
    transition: height 0.5s;
    position: relative;
    transition: margin-right 0.1s linear;
    &.dx-dashboard-data-item-remove-action-visible {
        margin-right: $itemSize;
    }
    &.dx-empty .dx-button-normal:not(.dx-state-focused):not(.dx-state-hover):not(.dx-item-selected) {
        background-color: $dashboard-item-binding-menu-bg;
        color: $dashboard-designer-sub-header-color;
    }
    &.dx-state-warning .dx-button-normal:not(.dx-state-focused):not(.dx-state-hover):not(.dx-item-selected) {
        background-color: $warningColor;
        color: $dashboard-button-default-color;
    }
    &.dx-state-error .dx-button-normal:not(.dx-state-focused):not(.dx-state-hover):not(.dx-item-selected) {
        background-color: $dashboard-error;
        color: $dashboard-button-default-color; 
    }
    &.dx-dashboard-drag-in-progress {
        opacity: 0.35;
    }   
}
.dx-dashboard-hierarchical-group {
    margin-top: 4px;
    dx-dashboard-data-item-link {
        .dx-dashboard-data-item{
            margin-top: 0;
            margin-bottom: 0;
        }
        &:last-of-type {
            .dx-button-mode-contained.dx-buttongroup-item {
                &::after {
                    content: none;
                }
                &::before {
                    content: none;
                }
            }
        }
        .dx-button-mode-contained.dx-buttongroup-item {
            &.dx-state-focused {
                &::after {
                    border-color: $dashboard-button-normal-focused-bg transparent; 
                }
            }
            &.dx-item-selected {
                &::after {
                    border-color: $dashboard-button-normal-selected-bg transparent; 
                }
            }
            &.dx-state-hover {
                &::after {
                    border-color: $dashboard-button-normal-hover-bg transparent; 
                }
            }
            &::before {
                content: "";
                position: absolute;
                top: $dataItemHeight;
                left: math.div($dataItemWidth, 2) - $dataItemTriangleSize - 1;
                border-style: solid;
                border-width: $dataItemTriangleSize $dataItemTriangleSize 0;
                border-color: $dashboard-button-normal-border-color transparent;
                display: block;
                width: 0;
                z-index: $oneZIndex;
            }
            &::after {
                content: "";
                position: absolute;
                bottom: -$dataItemTriangleSize + 3;
                left: math.div($dataItemWidth, 2) - $dataItemTriangleSize;
                border-style: solid;
                border-width: ($dataItemTriangleSize - 1px) ($dataItemTriangleSize - 1px) 0;
                border-color: $dashboard-button-normal-bg transparent;
                display: block;
                width: 0;
                z-index: $oneZIndex + 1;
            }
        }
    }
    .dx-dashboard-drop-target {
        &.dx-state-hovered:not(:first-of-type) {
            border-radius: $dataItemBorderRadius;
            border-top: $dataItemBorder;
        }
    }
}