@use "sass:map";
@use "../../color-system/_constants.scss" as *;
@use "../../mixins/index.scss" as *;
@use "../../functions/index.scss" as *;
@use "../../spacing/index.scss" as *;
@use "../../border-radii/index.scss" as *;
@use "../../motion/index.scss" as *;
@use "./variables.scss" as *;
@use "../icons/_variables.scss" as *;
@use "../../z-index/index.scss" as *;

@mixin kendo-treeview--layout-base() {

    // Treeview
    .k-treeview {
        border-radius: $kendo-treeview-border-radius;
        border-width: 0;
        background: none;
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-treeview-font-family;
        display: block;
        cursor: default;
        overflow: auto;
        white-space: nowrap;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        @each $size, $size-props in $kendo-treeview-sizes {
            $_font-size: map.get( $size-props, font-size);
            $_line-height: map.get( $size-props, line-height);
            $_item-padding-x: map.get( $size-props, item-padding-x);
            $_item-padding-y: map.get( $size-props, item-padding-y);
            $_checkbox-padding-x: map.get( $size-props, checkbox-padding-x );
            $_checkbox-padding-y: map.get( $size-props, checkbox-padding-y );

            #{k-when-default($kendo-treeview-default-size, $size)}
            &.k-treeview-#{$size} {
                font-size: $_font-size;
                line-height: $_line-height;

                .k-treeview-leaf {
                    padding-block: $_item-padding-y;
                    padding-inline: $_item-padding-x;
                }

                .k-checkbox-wrap {
                    padding-block: $_checkbox-padding-y;
                    padding-inline: $_checkbox-padding-x;
                }
            }
        }

        font-size: $kendo-treeview-font-size;
        line-height: $kendo-treeview-line-height;
    }


    // Treeview filter
    .k-treeview-filter {
        padding: k-spacing(2);
        display: block;
        position: relative;
        flex: none;
    }


    // Treeview group
    .k-treeview-group {
        display: flex;
        flex-direction: column;
        gap: $kendo-treeview-gap;
        min-width: fit-content;

        margin: 0;
        padding: 0;
        list-style: none;
        position: relative;
        outline: 0;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

        &.ng-animating {
            overflow: hidden;
        }

        .k-treeview-group {
            margin-top: $kendo-treeview-gap;
        }
    }


    // Treeview wrappers
    .k-treeview-item-content {
        @include border-radius( $kendo-treeview-item-border-radius );
        display: flex;
        flex-direction: row;
        align-items: center;
        align-content: center;
        padding-inline-start: calc( var(--kendo-treeview-level, 0) * #{$kendo-treeview-indent} );
    }


    // Treeview item
    .k-treeview-item {
        outline-style: none;
        margin: 0;
        padding: 0;
        border-width: 0;
        display: block;
    }


    // Treeview toggle
    .k-treeview-toggle {
        margin-inline-start: calc( #{$kendo-treeview-indent} * -1);
        flex: none;
        display: inline-flex;
        flex-flow: row nowrap;
        align-items: center;
        cursor: pointer;
    }
    .k-treeview-toggle .k-icon {
        padding: $kendo-icon-padding;
        box-sizing: content-box;
    }


    // Loading icon
    .k-treeview-loading {
        margin-inline-end: $kendo-icon-spacing;
    }


    // Checkbox
    .k-treeview .k-checkbox-wrap,
    .k-treeview .k-checkbox-wrapper {
        align-self: center;
    }


    // Treeview leaf
    .k-treeview-leaf {
        padding-block: $kendo-treeview-md-item-padding-y;
        padding-inline: $kendo-treeview-md-item-padding-x;
        border: $kendo-treeview-item-border-width solid transparent;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        align-content: center;
        vertical-align: middle;
        position: relative;
        transition: color k-transition(rapid), background-color k-transition(rapid), border-color k-transition(rapid), box-shadow k-transition(rapid);

        .k-icon,
        .k-image,
        .k-sprite {
            margin-inline-end: $kendo-icon-spacing;
        }
    }


    // Treeview load more button
    .k-treeview .k-treeview-load-more-button {
        cursor: pointer;

        &:hover,
        &.k-hover,
        &:focus,
        &.k-focus {
            text-decoration: underline;
        }
    }

}