@use "sass:math";
@import "__color-scheme";
@import "_sizes-common.scss";
@import "__size-scheme";
@mixin dx-dashboard-binding-header($font-size: $bindingHeadersFontSize) {
    text-transform: uppercase;
    font-size: $font-size;
    font-weight: 700;
    color: $dashboard-designer-header-color;
    margin: 0;
}
@mixin dx-dashboard-properties-caption {
    font-size: 9px;    
    font-weight: 700;
    text-transform: uppercase;
}
@mixin dx-dashboard-properties-content {
    font-size: 11px;    
    font-weight: normal;
}
@mixin dx-dashboard-properties-search {
    .dx-list-search {
        height: $propertyEditorSize;
        margin-bottom: 0;
        &, &.dx-state-hover {
            border-top-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
        }
    }
    &.dx-list.dx-list-with-search .dx-scrollable-wrapper {
        height: calc(100% - #{$propertyEditorSize})
    }
    .dx-texteditor.dx-editor-outlined {
        border-radius: 0px;
    }
}
@mixin dx-dropdown-sizes-patch($size: 18px) {
    .dx-clear-button-area {
        width: 2*($size - 3px);
    }
    .dx-show-clear-button .dx-icon-clear {
        margin-top: -($size - 1px);
        width: 2*($size - 1px);
        height: 2*($size - 1px);
        background-size: $size $size;
        padding: math.div($size, 2);
        font-size: $size;
        line-height: $size;
    }
    .dx-dropdowneditor-icon {
        width: 2*($size - 2px);
        font-size: $size;
        line-height: $size;
    }
    .dx-dropdowneditor-icon:before {
        width: $size;
        margin-top: -(math.div($size, 2));
        margin-left: -(math.div($size, 2));
    }
    .dx-dropdowneditor-button {
        width: 2*($size - 1px);
    }
    .dx-tag-content {
        margin: 4px 0 0 4px;
        padding: 3px 25px 4px 6px;
        min-width: 40px;
    }
    .dx-tag-remove-button {
        width: 25px;
        height: 100%;
    }
    .dx-tag-remove-button:before {
        right: 9px;
        margin-top: -5px;
        width: 3px;
        height: 11px;
    }
    .dx-tag-remove-button:after {
        right: 5px;
        margin-top: -1px;
        width: 11px;
        height: 3px;
    }
}
@mixin dashboard-button-group($minwidth: 0) {
    .dx-buttongroup {
        width: 100%;
        height: $dataItemHeight;
        .dx-buttongroup-wrapper {
            height: 100%;
        }
        &.dx-dashboard-button-with-icon {
            @include dx-dashboard-icon-image($itemSize, $defaultIconSize, $dashboard-type-icon-color);
            .dx-buttongroup-item {
                padding: 0px;
                .dx-button-content {
                    padding: 0px;
                }
            }
            svg {
                pointer-events: none;
                margin: math.div($itemSize - $defaultIconSize, 2)-1px math.div($itemSize - $defaultIconSize, 2)-1px;
                fill: $dashboard-type-icon-sub-color;
            }
            .dx-item-selected {
                svg {
                    color: $dashboard-type-selected-icon-color;
                    fill: $dashboard-type-selected-icon-sub-color;
                }
            }
        }
        .dx-buttongroup-item {
            &.dx-buttongroup-item-has-width {
                flex: 1 1 0;
                @include dx-dashboard-text-overflow;
                min-width: $minwidth
            }
        }
    }
}