@use "sass:meta";
@use "sass:string";
@use "../core/_index.scss" as *;
@use "./_variables.scss" as *;
@use "../tooltip/_variables.scss" as *;
@use "../core/spacing/_index.scss" as *;

@mixin kendo-dataviz--layout() {

    .k-barcode {
        display: inline-block;

        > div {
            height: 150px;
        }
    }

    // Elements
    .k-chart,
    .k-sparkline,
    .k-stockchart {
        border-width: var( --kendo-chart-border-width, #{$kendo-chart-border-width} );
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: var( --kendo-chart-font-family, #{$kendo-chart-font-family} );
        font-size: var( --kendo-chart-font-size, #{$kendo-chart-font-size} );
        line-height: var( --kendo-chart-line-height, #{$kendo-chart-line-height} );
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
    }

    .k-chart,
    .k-stockchart {
        display: block;
        height: 400px;
    }

    .k-chart-surface {
        height: 100%;
    }

    .k-chart .k-popup {
        border-width: 0;
    }

    .k-chart-tooltip-wrapper .k-animation-container-shown,
    .k-chart-tooltip-wrapper.k-animation-container-shown {
        @include border-radius( k-border-radius(md) );
        transition: left ease-in 80ms, top ease-in 80ms;
    }

    .k-sparkline-tooltip-wrapper,
    .k-chart-tooltip-wrapper {
        z-index: 12000;

        .k-popup {
            @include border-radius( k-border-radius(md) );
            padding: 0;
            border-width: 0;
            background: transparent;
        }
    }

    .k-chart-tooltip table {
        border-spacing: 0;
        border-collapse: collapse;
    }

    .k-chart-tooltip {
        @include border-radius( k-border-radius(md) );
        font-size: var( --kendo-chart-tooltip-font-size, #{$kendo-chart-tooltip-font-size} );
        line-height: var( --kendo-chart-tooltip-line-height, #{$kendo-chart-tooltip-line-height} );
        padding-inline: var( --kendo-chart-tooltip-padding-x, #{$kendo-tooltip-padding-x} );
        padding-block: var( --kendo-chart-tooltip-padding-y, #{$kendo-tooltip-padding-y} );
    }

    .k-chart-tooltip th {
        width: auto;
        text-align: center;
        padding: 1px;
    }

    .k-chart-tooltip td {
        width: auto;
        text-align: start;
        padding-inline: var( --kendo-chart-tooltip-padding-x, #{k-spacing(1)} );
        padding-block: var( --kendo-chart-tooltip-padding-y, #{k-spacing(0.5)} );
        line-height: var( --kendo-chart-tooltip-line-height, #{$kendo-chart-tooltip-line-height} );
        vertical-align: middle;
    }

    .k-chart-crosshair-tooltip,
    .k-chart-shared-tooltip {
        border-width: 1px;
        border-style: solid;
    }

    .k-chart-shared-tooltip .k-chart-shared-tooltip-marker {
        display: block;
        width: 15px;
        height: 3px;
        vertical-align: middle;
    }

    // Selection
    .k-selector {
        position: absolute;
        transform: translateZ(0);
    }

    .k-selection {
        position: absolute;
        height: 100%;
        border-width: 1px;
        border-style: solid;
        border-bottom: 0;
    }

    .k-selection-bg {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .k-handle {
        @include border-radius( 50% );
        width: var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} );
        height: var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} );
        border-width: 1px;
        border-style: solid;
        z-index: 1;
        position: absolute;
        box-sizing: content-box;
    }

    .k-handle div {
        width: 100%;
        height: 100%;
    }

    .k-left-handle {
        inset-inline-start: calc( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) / -2 );
    }

    .k-right-handle {
        inset-inline-end: calc( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) / -2 );
    }

    .k-left-handle div {
        margin-block-start: calc( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) * -1 );
        margin-inline-start: calc( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) / -1.5 );
        padding-block-start: calc( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) * 2 );
        padding-inline-end: calc( ( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) / 1.5 ) * 2 );
    }

    .k-right-handle div {
        margin-block-start: calc( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) * -1 );
        margin-inline-start: calc( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) / -1.5 );
        padding-block-start: calc( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) * 2 );
        padding-inline-start: calc( ( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) / 1.5 ) * 2 );
    }

    .k-left-handle.k-handle-active div {
        margin-inline-start: calc( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) * 2 );
        padding-inline-start: calc( ( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) * 2 ) + ( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) / 1.5 ) );
    }

    .k-right-handle.k-handle-active div {
        margin-inline-start: calc( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) * 2 );
        padding-inline-end: calc( ( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) * 2 ) + ( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) / 1.5 ) );
    }

    .k-mask {
        position: absolute;
        height: 100%;
    }

    // Navigator hint
    .k-navigator-hint div {
        position: absolute;
    }

    .k-navigator-hint .k-scroll {
        @include border-radius( k-border-radius(md) );
        position: absolute;
        height: 4px;
    }

    .k-navigator-hint .k-tooltip {
        margin-top: 20px;
        min-width: 160px;
        opacity: 1;
        text-align: center;
    }

    // Sparklines
    .k-sparkline,
    .k-sparkline span {
        display: inline-block;
        vertical-align: top;
    }

    .k-sparkline span {
        height: 100%;
        width: 100%;
    }

    .k-chart-dragging {
        user-select: none;
    }

    .k-chart-donut-center {
        position: absolute;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        border-radius: 50%;
        text-align: center;

        border: 4px solid transparent;
        box-sizing: border-box;
    }

    .k-pdf-export {
        .k-chart,
        .k-sparkline,
        .k-stockchart {
            .k-animation-container {
                display: none;
            }
        }
    }

        // Chart Overlay
        .k-chart-overlay {
            margin: 0;
            width: 100%;
            height: if( --kendo-chart-computed-title-height, calc( 100% - var( --kendo-chart-computed-title-height, #{$kendo-chart-computed-title-height} ) ), 100% );
            position: absolute;
            top: 0;
            left: 0;
            opacity: 1;
            z-index: 10001;

            &-top {
                top: var( --kendo-chart-computed-title-height, #{$kendo-chart-computed-title-height} );
            }

            .k-no-data {
                min-height: auto;
                padding-block-start: var( --kendo-chart-no-data-padding-y, #{$kendo-chart-no-data-padding-y} );
                font-size: var( --kendo-chart-no-data-font-size, #{$kendo-chart-no-data-font-size} );
                font-weight: var( --kendo-chart-no-data-font-weight, #{$kendo-chart-no-data-font-weight} );
            }
        }

    .k-diagram {
        height: 600px;
    }

    .k-diagram .km-scroll-wrapper {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .k-diagram .km-scroll-wrapper {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .k-canvas-container {
        width: 100%;
        height: 100%;
    }

    // Sankey labels
    .k-sankey text {
        pointer-events: none;
    }

    // Base
    .k-treemap {
        height: 400px;
        box-sizing: border-box;
        border-width: 1px;
        border-style: solid;
        outline: 0;
        font-family: var( --kendo-treemap-font-family, #{$kendo-treemap-font-family} );
        font-size: var( --kendo-treemap-font-size, #{$kendo-treemap-font-size} );
        line-height: var( --kendo-treemap-line-height, #{$kendo-treemap-line-height} );
        display: block;
        overflow: hidden;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

        // Tile
        .k-treemap-tile {
            margin: -1px 0 0 -1px;
            height: 100%;
            box-sizing: border-box;
            border: 1px solid;
            border-color: inherit;
            color: inherit;
            background-color: inherit;
            overflow: hidden;
            position: absolute;
        }
        > .k-treemap-tile {
            position: relative;
        }

        // Title
        .k-treemap-title {
            padding-inline: var( --kendo-treemap-title-padding-x, #{k-spacing(1)} );
            padding-block: var( --kendo-treemap-title-padding-y, #{k-spacing(0.5)} );
            border-width: 0 0 1px;
            border-style: solid;
            border-color: inherit;
            font-size: var( --kendo-treemap-font-size, #{$kendo-treemap-font-size} );
            background-position: 0 0;
            background-repeat: repeat-x;
        }
        .k-treemap-title-vertical {
            padding-inline: var( --kendo-treemap-padding-y, #{k-spacing(1)} );
            padding-block: var( --kendo-treemap-title-padding-x, #{k-spacing(1)} );
            width: var( --kendo-line-height-em, #{$kendo-line-height-em} );
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            position: absolute;
            top: 0;
            bottom: 0;

            > div {
                transform-origin: right;
                transform: rotate(-90deg);
                position: absolute;
                top: 0;
                right: 1em;
            }
        }


        // Wrap
        .k-treemap-wrap {
            border-color: inherit;
            color: inherit;
            background-color: inherit;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }
        .k-treemap-title + .k-treemap-wrap {
            inset-block-start: calc( calc( #{k-spacing(0.5)} * 2 ) + calc( var( --kendo-line-height, normal ) * var( --kendo-font-size, inherit) ) + 1px);
        }
        .k-treemap-title-vertical + .k-treemap-wrap {
            inset-inline-start: calc( calc( #{k-spacing(0.5)} * 2 ) + calc( var( --kendo-line-height, normal) * var( --kendo-font-size, inherit) ) + 1px);
        }


        // Leaf
        .k-leaf {
            padding: var( --kendo-treemap-leaf-padding, #{k-spacing(1)} );
        }
    }

    .k-gauge {
        text-align: start;
        position: relative;
    }

    .k-arcgauge,
    .k-circulargauge {
        display: inline-block;
    }

    .k-arcgauge-label,
    .k-circulargauge-label {
        position: absolute;
        text-align: center;
        padding: 0;
        margin: 0;
    }

    .k-qrcode {
        display: inline-block;

        > div {
            height: 150px;
        }
    }

    // export variables to allow use in scripts
    $exported: (
        primary-contrast: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white),
        base: $kendo-component-bg,
        background: $kendo-component-bg,

        normal-background: $kendo-component-bg,
        normal-text-color: $kendo-component-text,

        series-a: $kendo-series-a,
        series-b: $kendo-series-b,
        series-c: $kendo-series-c,
        series-d: $kendo-series-d,
        series-e: $kendo-series-e,
        series-f: $kendo-series-f,

        series-1: $kendo-series-1,
        series-2: $kendo-series-2,
        series-3: $kendo-series-3,
        series-4: $kendo-series-4,
        series-5: $kendo-series-5,
        series-6: $kendo-series-6,
        series-7: $kendo-series-7,
        series-8: $kendo-series-8,
        series-9: $kendo-series-9,
        series-10: $kendo-series-10,
        series-11: $kendo-series-11,
        series-12: $kendo-series-12,
        series-13: $kendo-series-13,
        series-14: $kendo-series-14,
        series-15: $kendo-series-15,
        series-16: $kendo-series-16,
        series-17: $kendo-series-17,
        series-18: $kendo-series-18,
        series-19: $kendo-series-19,
        series-20: $kendo-series-20,
        series-21: $kendo-series-21,
        series-22: $kendo-series-22,
        series-23: $kendo-series-23,
        series-24: $kendo-series-24,
        series-25: $kendo-series-25,
        series-26: $kendo-series-26,
        series-27: $kendo-series-27,
        series-28: $kendo-series-28,
        series-29: $kendo-series-29,
        series-30: $kendo-series-30,

        gauge-pointer: $kendo-series-f,
        gauge-track: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-30 )),

        chart-font-size: $kendo-chart-font-size,
        chart-title-font-size: $kendo-chart-title-font-size,
        chart-pane-title-font-size: $kendo-chart-pane-title-font-size,
        chart-pane-title-font-weight: $kendo-chart-pane-title-font-weight,
        chart-label-font-size: $kendo-chart-label-font-size,

        chart-inactive: $kendo-chart-inactive-bg,
        chart-major-lines: $kendo-chart-major-lines,
        chart-minor-lines: $kendo-chart-minor-lines,
        chart-area-opacity: $kendo-chart-area-opacity,
        chart-area-inactive-opacity: $kendo-chart-area-inactive-opacity,
        chart-line-inactive-opacity: $kendo-chart-line-inactive-opacity,
        chart-notes-background: $kendo-chart-notes-background,
        chart-notes-border: $kendo-chart-notes-border,
        chart-notes-lines: $kendo-chart-notes-lines,
        chart-crosshair-background: $kendo-chart-crosshair-background,
        chart-error-bars-background: $kendo-chart-error-bars-background,

    );

    // TODO: remove in favor of CSS variables once all suites are updated
    @each $name, $value in $exported {
        $type: meta.type-of($value);

        .k-var--#{$name} {
            @if $type == "color" or $type == "string" and string.index($value, "color") {
                // background-color can store any color
                background-color: #{$value};
            } @else if string.index($name, "font-size") {
                font-size: #{$value};
            } @else if string.index($name, "font-weight") {
                font-weight: #{$value};
            } @else if string.index($name, "opacity") {
                opacity: #{$value};
            }

        }
    }

    $_css-vars: (
        chart-primary-contrast: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white),
        chart-bg: $kendo-chart-bg,
        chart-text: $kendo-chart-text,

        chart-font-size: $kendo-chart-font-size,
        chart-title-font-size: $kendo-chart-title-font-size,
        chart-pane-title-font-size: $kendo-chart-pane-title-font-size,
        chart-pane-title-font-weight: $kendo-chart-pane-title-font-weight,
        chart-label-font-size: $kendo-chart-label-font-size,

        chart-inactive: $kendo-chart-inactive-bg,
        chart-major-lines: $kendo-chart-major-lines,
        chart-minor-lines: $kendo-chart-minor-lines,
        chart-area-opacity: $kendo-chart-area-opacity,
        chart-area-inactive-opacity: $kendo-chart-area-inactive-opacity,
        chart-line-inactive-opacity: $kendo-chart-line-inactive-opacity,
        chart-notes-bg: $kendo-chart-notes-background,
        chart-notes-border: $kendo-chart-notes-border,
        chart-notes-lines: $kendo-chart-notes-lines,
        chart-crosshair-bg: $kendo-chart-crosshair-background,
        chart-error-bars-bg: $kendo-chart-error-bars-background,

        chart-series-1: $kendo-series-1,
        chart-series-2: $kendo-series-2,
        chart-series-3: $kendo-series-3,
        chart-series-4: $kendo-series-4,
        chart-series-5: $kendo-series-5,
        chart-series-6: $kendo-series-6,
        chart-series-7: $kendo-series-7,
        chart-series-8: $kendo-series-8,
        chart-series-9: $kendo-series-9,
        chart-series-10: $kendo-series-10,
        chart-series-11: $kendo-series-11,
        chart-series-12: $kendo-series-12,
        chart-series-13: $kendo-series-13,
        chart-series-14: $kendo-series-14,
        chart-series-15: $kendo-series-15,
        chart-series-16: $kendo-series-16,
        chart-series-17: $kendo-series-17,
        chart-series-18: $kendo-series-18,
        chart-series-19: $kendo-series-19,
        chart-series-20: $kendo-series-20,
        chart-series-21: $kendo-series-21,
        chart-series-22: $kendo-series-22,
        chart-series-23: $kendo-series-23,
        chart-series-24: $kendo-series-24,
        chart-series-25: $kendo-series-25,
        chart-series-26: $kendo-series-26,
        chart-series-27: $kendo-series-27,
        chart-series-28: $kendo-series-28,
        chart-series-29: $kendo-series-29,
        chart-series-30: $kendo-series-30,

        chart-gauge-pointer: $kendo-series-f,
        chart-gauge-track: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-30 ))

    );

    .k-chart,
    .k-diagram,
    .k-gauge,
    .k-sparkline {
        @each $name, $value in $_css-vars {
            --kendo-#{$name}: #{$value};
        }
    }

}