@use "sass:math";
@import "__color-scheme";
@import "_sizes-common.scss";
@import "__size-scheme";
@mixin flex-v-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
}
@mixin dx-dashboard-icon-rect-image($width: $defaultSize, $height: $defaultSize, $svgSize: $defaultIconSize, $svgColor: $dashboard-icon-color) {
    width: $width;
    height: $height;
    svg {
        width: $svgSize;
        height: $svgSize;
        margin: math.div($height - $svgSize, 2) math.div($width - $svgSize, 2);
        pointer-events: none;
        color: $svgColor;
    }
    &.dx-state-disabled {
        svg {
            color: $dashboard-disabled-icon-color;
        }
    }
}
@mixin dx-dashboard-icon-image($size: $defaultSize, $svgSize: $defaultIconSize, $svgColor: $dashboard-icon-color) {
    @include dx-dashboard-icon-rect-image($size, $size, $svgSize, $svgColor);
}
@mixin dx-dashboard-icon-hovered-image($size: $defaultSize, $svgSize: $defaultIconSize, $svgColor: $dashboard-icon-color, $svgHoverColor: $dashboard-hover-icon-color) {
    @include dx-dashboard-icon-rect-image($size, $size, $svgSize, $svgColor);
    &:hover {
        svg {
            color: $svgHoverColor;
        }
    }
}
@mixin dx-dashboard-remove-button($size: $defaultSize) { 
    .dx-dashboard-remove-icon {
        @include dx-dashboard-icon-image($size, 20px);
        svg {
            color: $dashboard-icon-danger-color;
        }
        position: absolute;
        right: 0;
        top: -2px;
        visibility: hidden;
    }
    &.dx-list-item-selected, &.dx-state-hover {
        .dx-dashboard-remove-icon {
            visibility: visible;
            &:hover {
                svg {
                    color: $dashboard-icon-danger-color;
                }
            }
        }
    }
}
@mixin dx-dashboard-item-hover {
    &:hover:not(.dx-state-disabled) {
        background-color: $dashboard-data-item-hover-bg;
    }
}
@mixin dx-dashboard-item-drop-position-indicator {
    $locations: top left right bottom;
    @each $location in $locations {
        .dx-layout-item-cover.dx-drag-over-#{$location} {
            @each $otherLocation in $locations {
                @if $otherLocation != $location {
                    border-#{$otherLocation}: 3px solid transparent;
                }
            }
            border-#{$location}: 3px solid $dashboard-accent;
            opacity: 1;
            background-color: transparent;
            box-sizing: border-box;
        }
        .dx-layout-item-placeholder.dx-drag-over-#{$location} {
            background-color: $dashboard-accent;
            opacity: .1;
        }
    }
}
@mixin dx-dashboard-action {        
    display: inline-block;
    text-decoration: underline;
    color: $dashboard-link-color;
    cursor: pointer;
}
@mixin dx-dashboard-text-overflow($overflow: ellipsis){
  overflow: hidden;
  white-space: nowrap;
  text-overflow: $overflow; 
}
@mixin dx-dashboard-fixed {
    white-space: nowrap;
    display: inline-block;
}
@mixin dx-dashboard-box-shadow($value) {
    -webkit-box-shadow: $value;
       -moz-box-shadow: $value;
            box-shadow: $value;
}
@mixin dx-dashboard-background-clip($value) {
    -moz-background-clip: $value;
    -webkit-background-clip: $value;
    background-clip: $value;
}
@mixin dx-dashboard-properties-border($size: 1px) {
    @include dx-dashboard-background-clip(padding-box);
    border: $size solid $dashboard-border-color;
    border-radius: 2px;
}
@mixin dx-dashboard-vertical-align-container(){
    white-space: nowrap;
    &:before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        height: 100%;
        width: 0px;
    }
    &>* {
        display: inline-block;
        vertical-align: middle;
        white-space: normal;
    }
}
@mixin dx-dashboard-list-item-border {
    border-top: none;
    border-bottom: 1px solid $dashboard-border-sub-color;
}
@mixin dx-dashboard-noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}
@mixin dx-dashboard-grid {
    .dx-datagrid-rowsview {
        a {
            color: $dashboard-link-color;
        }
        .dx-selection.dx-row {
            &:not(.dx-row-focused) > td,
            &:not(.dx-row-focused):hover > td,
            &:not(.dx-row-focused) > tr > td,
            &:not(.dx-row-focused):hover > tr > td,
            &:hover > td {
                background-color: $dashboard-item-selected-bg;
                color: $dashboard-color;
                .dx-link {
                    color: inherit;
                }
            }
            &:not(.dx-row-focused) {
                &:not(.dx-row-lines) > td,
                &:hover:not(.dx-row-lines) > td,
                &.dx-row-lines > td,
                &:hover.dx-row-lines > td,
                &.dx-row-lines > tr > td,
                &:hover.dx-row-lines > tr > td {
                    border-bottom-color: $dashboard-border-sub-color;
                    border-top-color: $dashboard-border-sub-color;
                }
            }
            &.dx-column-lines > td,
            &:hover.dx-column-lines > td,
            &.dx-column-lines > tr > td,
            &:hover.dx-column-lines > tr > td {
                border-left-color: $dashboard-border-sub-color;
                border-right-color: $dashboard-border-sub-color;
            }
        }        
    }
}
@mixin dx-dashboard-truncated {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@mixin dx-dashboard-ellipsis {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
}