@use "../core/_index.scss" as *;
@use "../icons/_variables.scss" as *;
@use "../expansion-panel/_variables.scss" as *;
@use "../core/spacing/_index.scss" as *;

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

@mixin kendo-chart-wizard--layout() {
   // Chart wizard
   .k-chart-wizard {
        .k-icon-text-wrapper {
            display: flex;
            align-items: center;
            gap: var( --kendo-chart-wizard-icon-text-gap, #{$kendo-chart-wizard-icon-text-gap} );
        }

        .k-icon-background-area {
            display: flex;
            padding: var( --kendo-chart-wizard-icon-area-padding, #{$kendo-chart-wizard-icon-area-padding} );
            border-radius: var( --kendo-chart-wizard-icon-area-border-radiusg, #{$kendo-chart-wizard-icon-area-border-radius} );
        }
   }

   .k-chart-types-wrapper {
        display: flex;
        flex-direction: column;
        gap: var( --kendo-chart-wizard-chart-type-spacing, #{$kendo-chart-wizard-chart-type-spacing} );
    }

    .k-chart-wizard-splitter {
        height: 100%;

        .k-tabstrip {
            width: 100%;
            height: 100%;
        }
    }

    .k-chart-wizard-preview-pane {
        padding: var( --kendo-chart-wizard-preview-pane-padding, #{$kendo-chart-wizard-preview-pane-padding} );
    }

    .k-chart-wizard-property-pane {
        padding: var( --kendo-chart-wizard-property-pane-padding, #{$kendo-chart-wizard-property-pane-padding} );
    }
}