@import "../ui-widgets/ui-widgets-mixins";
$appearanceItemSize: 24px;
$iconItemSize: 18px;
$itemPreviewSize: 20px;
$borderWidth: 1px;
$borderSelectionWidth: 2px;
.dx-dashboard-widget-container {
    .dx-dropdowneditor-overlay.dx-dashboard-cf-color-picker {
        display: inline;
        .dx-popup-content {
            padding: 20px;
        }
    }
    .dx-dashboard-style-settings-editor-popup.dx-dropdowneditor-overlay {
        .dx-popup-content {
            .dx-dashboard-style-settings-editor {
                border: none;
            }
        }
    }
    .dx-dashboard-range-edit-number-template.dx-dropdowneditor-overlay {
        .dx-popup-content {
            padding: 10px;
        }
    }
}
.dx-dashboard-style-settings-editor {
    background-color: $dashboard-widget-bg;
    border: 1px solid $dashboard-border-color;
    padding: 4px 7px 7px 7px;
    .dx-dashboard-style-settings-editor-caption {
        @include dx-dashboard-binding-header;
    }
    .dx-dashboard-style-settings-editor-caption-wrapper {
        padding-top: 4px;
    }
}
@function getTemplateAreas($colCount) {
    $result: "";
    @for $i from 1 through $colCount {
        $result: $result + "header ";
    }
    @return $result;
}
@mixin dx-dashboard-style-settings-editor-grid($colCount) {
    display: grid;
    grid-template-columns: repeat($colCount, 1fr);
    grid-template-areas: getTemplateAreas($colCount);
    gap: 4px;
    align-items: center;
    justify-items: center;
    padding-top: 2px;
}
.dx-dashboard-style-settings-editor-grid {
    @include dx-dashboard-style-settings-editor-grid(8);
}
.dx-dashboard-style-settings-editor-icons-grid {
    @include dx-dashboard-style-settings-editor-grid(10);
}
.dx-dashboard-style-settings-editor-grid-no-style {
    grid-area: header;
    justify-self: normal;
}
.dx-dashboard-appearance-range-preview {
    width: 50px;
    height: 10px;
    margin: 2px;
    display: inline-block;
    background-color: $dashboard-widget-bg;
}
.dx-dashboard-appearance-gradient-preview {
    width: 30px;
    height: 4px;
    display: inline-block;
    background-color: $dashboard-widget-bg;
}
.dx-dashboard-appearance-bar-preview {
    width: 50px;
    height: 4px;
    display: inline-block;
    &:nth-child(2)  { 
        width: 40px;
    }
    &:nth-child(3)  { 
        width: 30px;
    }
    &:nth-child(4)  { 
        width: 20px;
    }
     &:nth-child(5)  { 
        width: 15px;
    }
}
.dx-dashboard-appearance-gradient-bar-preview {
    width: 30px;
    height: 4px;
    display: inline-block;
    &:nth-child(2)  { 
        width: 27px;
    }
    &:nth-child(3)  { 
        width: 24px;
    }
    &:nth-child(4)  { 
        width: 21px;
    }
    &:nth-child(5)  { 
        width: 18px;
    }
    &:nth-child(6)  { 
        width: 15px;
    }
}
.dx-layout-manager {
    .dx-dashboard-appearance-layout-item {
        &.dx-field-item:not(.dx-first-col) {
            padding-left: 10px;
        }
        &.dx-field-item:not(.dx-last-col) {
            padding-right: 10px;
        }
    }
}
.dx-dashboard-appearance-item-wrapper {
    > label {
        margin-bottom: 3px;
        font-size: 14px;
        font-weight: 400;
    }
}
.dx-dashboard-appearance-bordered-item {
    border: 1px solid #ddd;
    border-radius: 2px;
    background-clip: border-box;
}
.dx-buttongroup-item.dx-button-mode-outlined.dx-button.dx-dashboard-appearance-item-font-style-button {
    margin-right: 5px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,.24);
}
@mixin dx-dashboard-appearance-item-preview($width: $appearanceItemSize, $height: $appearanceItemSize) {
    width: $width;
    height: $height;
    background-color: $dashboard-widget-bg;
    border-radius: 2px;
    border: $borderSelectionWidth solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    &.dx-dashboard-appearance-item-label {
        border: $borderWidth solid $dashboard-border-color;
        border-radius: 0px;
    }
    &.dx-dashboard-appearance-item-transparent {
        background-origin: border-box;
        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImR4LWRhc2hib2FyZC10cmFuc3BhcmVudC1iYWNrZ3JvdW5kIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDI0IDI0IiAgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQogIDxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQogIAkgIC5keC1kYXNoYm9hcmQtY3VycmVudC1jb2xvci1pY29ue2ZpbGw6I0RFREVERTt9DQogIDwvc3R5bGU+DQoJPHJlY3QgeD0iMCIgeT0iMCIgY2xhc3M9ImR4LWRhc2hib2FyZC1jdXJyZW50LWNvbG9yLWljb24iIHdpZHRoPSI2IiBoZWlnaHQ9IjYiLz4NCgk8cmVjdCB4PSIxMiIgeT0iMCIgY2xhc3M9ImR4LWRhc2hib2FyZC1jdXJyZW50LWNvbG9yLWljb24iIHdpZHRoPSI2IiBoZWlnaHQ9IjYiLz4gIA0KICA8cmVjdCB4PSI2IiB5PSI2IiBjbGFzcz0iZHgtZGFzaGJvYXJkLWN1cnJlbnQtY29sb3ItaWNvbiIgd2lkdGg9IjYiIGhlaWdodD0iNiIvPg0KCTxyZWN0IHg9IjE4IiB5PSI2IiBjbGFzcz0iZHgtZGFzaGJvYXJkLWN1cnJlbnQtY29sb3ItaWNvbiIgd2lkdGg9IjYiIGhlaWdodD0iNiIvPiAgDQogIDxyZWN0IHg9IjAiIHk9IjEyIiBjbGFzcz0iZHgtZGFzaGJvYXJkLWN1cnJlbnQtY29sb3ItaWNvbiIgd2lkdGg9IjYiIGhlaWdodD0iNiIvPg0KCTxyZWN0IHg9IjEyIiB5PSIxMiIgY2xhc3M9ImR4LWRhc2hib2FyZC1jdXJyZW50LWNvbG9yLWljb24iIHdpZHRoPSI2IiBoZWlnaHQ9IjYiLz4NCiAgPHJlY3QgeD0iNiIgeT0iMTgiIGNsYXNzPSJkeC1kYXNoYm9hcmQtY3VycmVudC1jb2xvci1pY29uIiB3aWR0aD0iNiIgaGVpZ2h0PSI2Ii8+DQoJPHJlY3QgeD0iMTgiIHk9IjE4IiBjbGFzcz0iZHgtZGFzaGJvYXJkLWN1cnJlbnQtY29sb3ItaWNvbiIgd2lkdGg9IjYiIGhlaWdodD0iNiIvPg0KPC9zdmc+DQo=');
        background-repeat: repeat-x;
    }
    &.dx-dashboard-appearance-item-empty {
        width: 100%;
        background-color: rgba(0,0,0,0);
    }
    &::after {
        display: block;
        text-align: center;
        width: 100%;
        content: attr(data-label);
        font-size: 14px;
        margin-bottom: 2px;
    }
}
.dx-dashboard-appearance-item {
    @include dx-dashboard-appearance-item-preview;
    &.dx-state-selected {
        border: $borderSelectionWidth solid rgba(0,0,0,0.4);
        border-radius: 2px;
        padding: 0;
    }
    &:hover {
        border: $borderSelectionWidth solid rgba(0,0,255,0.4);
        border-radius: 2px;
        padding: 0;
    }
}
.dx-dashboard-icon-item {
    width: $iconItemSize;
    height: $iconItemSize;
    display: inline-block;    
    background-position: 1px 1px;
    &.dx-state-selected {
        outline: $borderSelectionWidth solid rgba(0,0,0,0.4);
    }
    &:hover {
        outline: $borderSelectionWidth solid rgba(0,0,255,0.4);
    }
}
.dx-dashboard-range-editor {
    @include dx-dashboard-properties-border;
    .dx-dashboard-range-editor-header {
        @include dx-dashboard-collection-toolbar-header();
        background-color: transparent;
        border-bottom: 1px solid rgba(0,0,0,0.08);
    }
    .dx-dashboard-properties & .dx-texteditor {
        height: 100%;
    }
    .dx-dashboard-range-editor-content {
        @include dx-dashboard-grid;
        width: 100%;
        .dx-datagrid-focus-overlay {
            display: none;
        }
        .dx-datagrid-content .dx-datagrid-table .dx-row .dx-editor-cell .dx-dropdowneditor {
            padding-left: 0px;
            margin-left: 0px;
        }
        .dx-dashboard-range-editor-state-hover {
            background-color: $dashboard-item-hover-bg;
        }
        .dx-datagrid-content .dx-datagrid-table .dx-row > td {
            vertical-align: middle
        }
        .dx-datagrid .dx-row > td {
            padding: 0px;
        }
        .dx-datagrid-rowsview {
            .dx-selection.dx-row:hover {
                & > td.dx-dashboard-range-editor-state-hover {
                    background-color: $dashboard-item-hover-bg;
                }
            }
        }
        .dx-dashboard-rangestop {
            @include dx-dashboard-properties-border(2px);
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            left: 0;
            top: 0;
        }
        .dx-highlight-outline {
            border: 2px solid $dashboard-conditional-formatting-active-editor-border-color;
            .dx-dashboard-rangestop {
                border: none;
            }
        }
        .dx-dashboard-range-style {
            vertical-align: middle;
            position: relative;
            .dx-dashboard-range-appearance-item {
                @include dx-dashboard-appearance-item-preview(100%, 100%);
                position: absolute;
                left: 0%;
                top: 0%;
            }
            .dx-dashboard-rangeicon {
                width: 100%;
                height: 100%;
                display: block;
                position: absolute;
                left: 50%;
                top: 50%;
                margin: -7px;
            }
        }
        .dx-dashboard-range-sign {
            font-weight: 700;
            .dx-texteditor-input {
                font-style: normal;
            }
        }
        .dx-dashboard-range-value {
            text-align: center;
            font-weight: 700;
        }
        .dx-dashboard-range-cell {
            @include dx-dashboard-vertical-align-container;
            text-align: center;
            font-size: 12px;
            margin: 2px;
            padding: 5px;
        }
        .dx-dashboard-range-value, .dx-dashboard-range-sign, .dx-highlight-outline {
            .dx-dashboard-range-cell {
                margin: 0px;
            }
        }
    }
}
.dx-dashboard-condition-type-editor {
    background-color: $dashboard-widget-bg;
    border: 1px solid $dashboard-border-color;
    border-radius: 2px;
    overflow: hidden;
}
.dx-dashboard-condition-types-container {
    position: relative;
    height: 300px;
    &>div {
        position: absolute;
        top: 0;
        left: 0;
        transition: left 0.5s;
        width: 100%;
        height: 100%;
        .dx-list-item {
            .dx-list-item-content {
                padding: 0;
                line-height: initial;
            }
            &.dx-dashboard-has-children::after {
                content: '';
                background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMC4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImR4LWRhc2hib2FyZC1mYy1hcnJvdy1yaWdodCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxMiAxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTIgMTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLmR4LWRhc2hib2FyZC1jdXJyZW50LWNvbG9yLWljb257ZmlsbDojN0I3QjdCO30NCjwvc3R5bGU+DQo8cG9seWdvbiBjbGFzcz0iZHgtZGFzaGJvYXJkLWN1cnJlbnQtY29sb3ItaWNvbiIgcG9pbnRzPSI1LDEwIDksNiA1LDIgIi8+DQo8L3N2Zz4NCg==');
                position: absolute;
                width: 12px;
                height: 12px;
                right: 8px;
                top: 9px;
            }
        }
    }
    &>div:last-of-type {
        left: 275px;
    }
    &.dx-dashboard-state-condition-selected {
        &>div:first-of-type {
            left: -275px;
        }
        &>div:last-of-type {
            left: 0;
        }
    }
}
.dx-dashboard-list > .dx-list:not(.dx-list-select-decorator-enabled).dx-dashboard-gallery-list {
    .dx-list-group-header {
        @include dx-dashboard-binding-header;
        color: $dashboard-designer-sub-header-color;
        padding-top: 8px;
        padding-bottom: 8px;
        border: none;
        background: inherit;
    }
    .dx-list-group-body {
        width: $editorsWidth;
    }
    .dx-list-item {
        display: inline-block;
        width: auto;
        height: auto;
        border-top: none;
        white-space: normal;
        padding-right: 10px;
        padding-left: 10px;
    }
}
.dx-dashboard-gallery-item {
    padding: 4px;
    &>div {
        display: block;
        margin-top: 2px;
    }
}
@media screen and (max-width: 767px) {
    .dx-layout-manager {
        .dx-dashboard-appearance-layout-item {
            &.dx-field-item:not(.dx-first-col) {
                padding-left: 0;
            }
            &.dx-field-item:not(.dx-last-col) {
                padding-right: 0;
            }
        }
    }
}