@use "../../mixins/index.scss" as *;
@use "../../color-system/_functions.scss" as *;
@use "./variables.scss" as *;
@use "../button/_variables.scss" as *;

@mixin kendo-dataviz--theme-base() {

    // Elements
    .k-chart,
    .k-sparkline,
    .k-stockchart {
        @include fill(
            $kendo-chart-text,
            transparent,
            $kendo-chart-border
        );

        .k-popup {
            background: transparent;
        }
    }


    // Tooltip
    .k-chart-tooltip {
        @include fill( $color: $kendo-chart-tooltip-color );
    }
    .k-chart-tooltip-inverse {
        @include fill( $color: $kendo-chart-tooltip-color-inverse );
    }

    .k-chart-crosshair-tooltip,
    .k-chart-shared-tooltip {
        color: $kendo-chart-crosshair-shared-tooltip-color;
        background-color: $kendo-chart-crosshair-shared-tooltip-background;
        border-color: $kendo-chart-crosshair-shared-tooltip-border;
    }

    .k-selection {
        border-color: $kendo-chart-selection-border-color;
        box-shadow: $kendo-chart-selection-shadow;
    }

    .k-selection-bg {
        background-color: transparent;
    }

    .k-handle {
        cursor: e-resize;

        // TODO: refactor and remove button dependency
        @include fill(
            $kendo-button-text,
            $kendo-button-bg,
            $kendo-button-border,
            $kendo-button-gradient
        );

        &:hover {
            @include fill(
                $kendo-button-hover-text,
                $kendo-button-hover-bg,
                $kendo-button-hover-border,
                $kendo-button-hover-gradient
            );
        }
    }

    .k-handle div {
        background-color: transparent;
    }

    .k-mask {
        background-color: k-color(surface-alt);
        opacity: .8;
    }

    .k-chart-overlay {
        background-color: $kendo-chart-overlay-bg;
    }


    // Treemap
    .k-treemap {
        @include fill(
            $kendo-treemap-text,
            $kendo-treemap-bg,
            $kendo-treemap-border
        );

        // Title
        .k-treemap-title {
            @include fill(
                $kendo-treemap-title-text,
                $kendo-treemap-title-bg,
                $kendo-treemap-title-border
            );
        }

        // Leaf
        .k-leaf {
            color: k-color(surface-alt);
        }
        .k-leaf.k-inverse {
            color: k-color(on-app-surface);
        }
        .k-leaf:hover,
        .k-leaf.k-hover {
            box-shadow: inset 0 0 0 3px k-color(border);
        }
    }

}