@use "../core/_index.scss" as *;
@use "../list/_variables.scss"as *;
@use "./_variables.scss" as *;

@mixin kendo-spreadsheet--theme() {
    // Spreadsheet
    .k-spreadsheet {
        @include fill(
            var( --kendo-spreadsheet-text, #{$kendo-spreadsheet-text} ),
            var( --kendo-spreadsheet-bg, #{$kendo-spreadsheet-bg} ),
            var( --kendo-spreadsheet-border, #{$kendo-spreadsheet-border} )
        );
    }

    // Header
    .k-spreadsheet-header {
        @include fill(
            var( --kendo-spreadsheet-header-text, #{$kendo-spreadsheet-header-text} ),
            var( --kendo-spreadsheet-header-bg, #{$kendo-spreadsheet-header-bg} ),
            var( --kendo-spreadsheet-header-border, #{$kendo-spreadsheet-header-border} )
        );
    }

    // Row / column headers
    .k-spreadsheet-top-corner,
    .k-spreadsheet-row-header,
    .k-spreadsheet-column-header {
        @include fill(
            var( --kendo-spreadsheet-header-text, #{$kendo-spreadsheet-header-text} ),
            var( --kendo-spreadsheet-header-bg, #{$kendo-spreadsheet-header-bg} ),
            var( --kendo-spreadsheet-header-border, #{$kendo-spreadsheet-header-border} )
        );
    }


    // Cell editor
    .k-spreadsheet-cell-editor {
        @include fill(
            var( --kendo-spreadsheet-cell-editor-text, #{$kendo-spreadsheet-cell-editor-text} ),
            var( --kendo-spreadsheet-cell-editor-bg, #{$kendo-spreadsheet-cell-editor-bg} ),
            var( --kendo-spreadsheet-cell-editor-border, #{$kendo-spreadsheet-cell-editor-border} )
        );
    }


    // Cells
    .k-spreadsheet-merged-cell {
        @include fill( $bg: var( --kendo-spreadsheet-bg, #{$kendo-spreadsheet-bg} ) );
    }


    // Selection
    .k-spreadsheet .k-selection-full,
    .k-spreadsheet .k-selection-partial {
        @include fill( $bg: var( --kendo-spreadsheet-partial-selection-bg, #{$kendo-spreadsheet-partial-selection-bg} ) );
    }
    .k-spreadsheet-selection {
        @include fill(
            var( --kendo-spreadsheet-selection-text, #{$kendo-spreadsheet-selection-text} ),
            var( --kendo-spreadsheet-selection-bg, #{$kendo-spreadsheet-selection-bg} ),
            var( --kendo-spreadsheet-selection-border, #{$kendo-spreadsheet-selection-border} )
        );
        @include box-shadow( var( --kendo-spreadsheet-selection-shadow, #{$kendo-spreadsheet-selection-shadow} ) );
    }
    .k-spreadsheet-selection-highlight {
        @include fill( $border: var( --kendo-spreadsheet-selection-border, #{$kendo-spreadsheet-selection-border} ) );
    }
    .k-spreadsheet .k-single-selection::after {
        @include fill(
            var( --kendo-spreadsheet-single-selection-text, #{$kendo-spreadsheet-single-selection-text} ),
            var( --kendo-spreadsheet-single-selection-bg, #{$kendo-spreadsheet-single-selection-bg} ),
            var( --kendo-spreadsheet-single-selection-border, #{$kendo-spreadsheet-single-selection-border} )
        );
    }
    .k-spreadsheet-active-cell {
        @include fill ( $bg: var( --kendo-spreadsheet-active-cell-bg, #{$kendo-spreadsheet-active-cell-bg} ) );
        @include box-shadow( var( --kendo-spreadsheet-active-cell-shadow, #{$kendo-spreadsheet-active-cell-shadow} ) );
    }

    .k-spreadsheet .k-auto-fill {
        border-color: var( --kendo-spreadsheet-selected-border, #{$kendo-spreadsheet-selected-border} );
        background-color: var( --kendo-spreadsheet-selected-bg, #{$kendo-spreadsheet-selected-bg} );
        box-shadow: inset 0 0 0 1px var( --kendo-spreadsheet-selected-bg, #{$kendo-spreadsheet-selected-bg} );

        @include fill(
            var( --kendo-spreadsheet-auto-fill-text, #{$kendo-spreadsheet-auto-fill-text} ),
            var( --kendo-spreadsheet-auto-fill-bg, #{$kendo-spreadsheet-auto-fill-bg} ),
            var( --kendo-spreadsheet-auto-fill-border, #{$kendo-spreadsheet-auto-fill-border} )
        );
        @include box-shadow( var( --kendo-spreadsheet-auto-fill-shadow, #{$kendo-spreadsheet-auto-fill-shadow} ) );
    }
    .k-spreadsheet .k-auto-fill-punch {
        @include fill( $bg: var( --kendo-spreadsheet-auto-fill-punch-bg, #{$kendo-spreadsheet-auto-fill-punch-bg} ) );
    }


    // Resize handle
    .k-spreadsheet .k-resize-handle,
    .k-spreadsheet .k-resize-hint-handle,
    .k-spreadsheet .k-resize-hint-marker {
        @include fill( $bg: var( --kendo-spreadsheet-resize-handle-bg, #{$kendo-spreadsheet-resize-handle-bg} ) );
    }

    // Comments
    .k-spreadsheet-has-comment::after {
        border-block-color: var( --kendo-spreadsheet-cell-comment-border, #{$kendo-spreadsheet-cell-comment-border} ) transparent;
        border-inline-color: transparent var( --kendo-spreadsheet-cell-comment-border, #{$kendo-spreadsheet-cell-comment-border} );
    }

    // Validation
    .k-spreadsheet-cell .k-dirty {
        border-block-color: var( --kendo-spreadsheet-cell-dirty-border, #{$kendo-spreadsheet-cell-dirty-border} ) transparent;
        border-inline-color: var( --kendo-spreadsheet-cell-dirty-border, #{$kendo-spreadsheet-cell-dirty-border} ) transparent;
    }

    // Filter button
    .k-spreadsheet .k-filter-range {
        border-color: var( --kendo-spreadsheet-primary-border, #{$kendo-spreadsheet-primary-border} );
    }
    .k-spreadsheet-filter {
        @include fill(
            var( --kendo-spreadsheet-filter-button-text, #{$kendo-spreadsheet-filter-button-text} ),
            var( --kendo-spreadsheet-filter-button-bg, #{$kendo-spreadsheet-filter-button-bg} ),
            var( --kendo-spreadsheet-filter-button-border, #{$kendo-spreadsheet-filter-button-border} )
        );
        box-shadow: inset 0 0 0 1px var( --kendo-spreadsheet-filter-button-border, #{$kendo-spreadsheet-filter-button-border} );

        &:hover {
            @include fill(
                var( --kendo-spreadsheet-filter-button-hover-text, #{$kendo-spreadsheet-filter-button-hover-text} ),
                var( --kendo-spreadsheet-filter-button-hover-bg, #{$kendo-spreadsheet-filter-button-hover-bg} ),
                var( --kendo-spreadsheet-filter-button-hover-border, #{$kendo-spreadsheet-filter-button-hover-border} )
            );
        }

        &.k-active {
            @include fill(
                var( --kendo-spreadsheet-filter-button-active-text, #{$kendo-spreadsheet-filter-button-active-text} ),
                var( --kendo-spreadsheet-filter-button-active-bg, #{$kendo-spreadsheet-filter-button-active-bg} ),
                var( --kendo-spreadsheet-filter-button-active-border, #{$kendo-spreadsheet-filter-button-active-border} )
            );
        }

    }

    .k-spreadsheet-value-treeview-wrapper {
        @include fill(
            var( --kendo-spreadsheet-text, #{$kendo-spreadsheet-text} ),
            var( --kendo-spreadsheet-bg, #{$kendo-spreadsheet-bg} ),
            var( --kendo-spreadsheet-border, #{$kendo-spreadsheet-border} )
        );
    }

    // Filter menu legacy - delete after new rendering adoption R3 23
    .k-spreadsheet-filter-menu {

        > .k-menu,
        > .k-menu:not(.k-context-menu) {

            .k-item:hover,
            .k-item.k-hover {
                @include fill(
                    var( --kendo-list-item-hover-text, #{$kendo-list-item-hover-text} ),
                    var( --kendo-list-item-hover-bg, #{$kendo-list-item-hover-bg} )
                );
            }
        }

        .k-columnmenu-item > .k-icon:first-child {
            color: var( --kendo-spreadsheet-filter-menu-icon-color, #{$kendo-spreadsheet-filter-menu-icon-color} );
        }
    }


    .k-spreadsheet-insert-image-dialog {
        border-color: var( --kendo-spreadsheet-insert-image-dialog-preview-border, #{$kendo-spreadsheet-insert-image-dialog-preview-border} );

        .k-spreadsheet-has-image {
            &:hover,
            &.k-hover {
                box-shadow: var( --kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow, #{$kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow} );
            }

            &:hover div,
            &.k-hover div {
                color: var( --kendo-spreadsheet-insert-image-dialog-overlay-hover-text, #{$kendo-spreadsheet-insert-image-dialog-overlay-hover-text} );
            }
        }
    }

    .k-spreadsheet-drawing {
        &.k-spreadsheet-active-drawing {
            outline-color: var( --kendo-spreadsheet-drawing-handle-outline-color, #{$kendo-spreadsheet-drawing-handle-outline-color} );
        }

        .k-spreadsheet-drawing-handle {
            border-color: var( --kendo-spreadsheet-drawing-handle-border-color, #{$kendo-spreadsheet-drawing-handle-border-color} );
            background-color: var( --kendo-spreadsheet-drawing-handle-bg, #{$kendo-spreadsheet-drawing-handle-bg} );
        }
    }

    .k-spreadsheet-drawing-anchor-cell {
        background: var( --kendo-spreadsheet-drawing-anchor-bg, #{$kendo-spreadsheet-drawing-anchor-bg} );
    }


    // Formula bar
    .k-spreadsheet-formula-list {}
    .k-syntax-ref { color: #ff8822; }
    .k-syntax-num { color: #0099ff; }
    .k-syntax-str { color: #38b714; }
    .k-syntax-error { color: red; }
    .k-syntax-bool { color: #a9169c; }
    .k-syntax-paren-match { background-color: #caf200; }

}