:root:has(#reportDesigner),
#reportDesigner {
    --kendo-color-primary: var(--secondary-color);
    --kendo-color-primary-hover: var(--tertiary-color);
    --kendo-color-primary-on-surface: var(--secondary-color);
    --kendo-color-on-primary: var(--white-color);
}

    #reportDesigner * {
        box-sizing: border-box;
    }

    #reportDesigner .k-button.k-button-solid-primary {
        border-color: var(--kendo-color-primary);
        color: var(--kendo-color-on-primary);
        background-color: var(--kendo-color-primary);
    }

    #reportDesigner .k-splitbar:focus,
    #reportDesigner .k-splitbar.k-focus,
    #reportDesigner .k-splitbar:hover,
    #reportDesigner .k-splitbar.k-hover,
    #reportDesigner .k-splitbar-horizontal-hover,
    #reportDesigner .k-splitbar-vertical-hover {
        background-color: var(--kendo-color-primary) !important;
        color: var(--kendo-color-on-primary) !important;
    }

    #reportDesigner .k-picker.k-icon-picker > .k-input-inner,
    #reportDesigner .k-picker.k-picker-md.k-icon-picker > .k-input-inner {
        padding: 0;
        height: 29px;
        background-color: var(--kendo-color-on-primary);
    }

    #reportDesigner .k-picker.k-dropdownlist.k-hover .k-input-inner,
    #reportDesigner .k-picker.k-picker-solid.k-dropdownlist.k-hover .k-input-inner,
    #reportDesigner .k-picker.k-picker-solid.k-dropdownlist:hover .k-input-inner {
        border-color: var(--kendo-color-border-alt);
        background-color: var(--kendo-color-base-hover);
    }

    #reportDesigner .k-panelbar > .k-panelbar-item.k-active > .k-link.k-selected:hover,
    #reportDesigner .k-panelbar > .k-panelbar-item.k-active > .k-link.k-selected.k-hover,
    #reportDesigner .k-panelbar > .k-panelbar-item.k-expanded > .k-link.k-selected:hover,
    #reportDesigner .k-panelbar > .k-panelbar-item.k-expanded > .k-link.k-selected.k-hover {
        background-color: var(--kendo-color-base-hover);
        color: var(--kendo-color-on-base);
    }

[data-theme="dark"] #reportDesigner,
[data-theme="dark"]:root:has(#reportDesigner) {
    --kendo-color-surface: var(--report-designer-panelbar-bgk-color);
    --kendo-color-surface-alt: var(--report-designer-splitter-bgk-color);
    --kendo-color-on-app-surface: var(--report-designer-main-text-color);
    --kendo-color-on-base: var(--report-designer-main-text-color);
    --kendo-color-base-hover: var(--report-designer-main-menu-hover-bgk-color);
    --kendo-color-border: var(--report-designer-border-alt-color);
    --kendo-color-base-active: var(--report-designer-main-menu-hover-bgk-color);
    --kendo-color-base: var(--report-designer-picker-bgk-color);
}

    [data-theme="dark"] #reportDesigner .twd-canvas {
        background-color: var(--report-designer-canvas-bgk-color);
    }

    [data-theme="dark"] #reportDesigner.twd-designer .k-input,
    [data-theme="dark"] #reportDesigner .twd-properties .properties__editors ul li .twd-editors,
    [data-theme="dark"] #reportDesigner .twd-properties .properties__content > div:first-of-type,
    [data-theme="dark"] #reportDesigner .twd-editor .editor__editors-container {
        border-color: var(--tlk-input-inner-border-color);
    }

    [data-theme="dark"] #reportDesigner .twd-top-menu-area,
    [data-theme="dark"] #reportDesigner .twd-main-menu .main-menu__item.-first,
    [data-theme="dark"] #reportDesigner.twd-designer .designer__canvas {
        border-color: var(--report-designer-border-color);
    }

    [data-theme="dark"] #reportDesigner .twd-editor .editor__editors-container.-empty:before {
        color: var(--report-designer-main-text-color);
    }