@use "./_variables.scss" as *;
@use "../icons/_variables.scss" as *;
@use "../../functions/index.scss" as *;
@use "../../motion/index.scss" as *;
@use "sass:map";

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

    // List container
    .k-list-container {
        display: flex;
        flex-flow: column nowrap;

        > .k-list {
            flex: 1;
            height: 100%;
            border-radius: 0;
        }

        &.k-popup {
            padding-inline: $kendo-list-container-padding-inline;
            padding-block: $kendo-list-container-padding-block;
        }
    }

    // List
    .k-list {
        margin: 0;
        box-sizing: border-box;
        border-radius: inherit;
        font-family: $kendo-list-font-family;
        font-size: $kendo-list-font-size;
        line-height: $kendo-list-line-height;
        display: flex;
        flex-flow: column nowrap;
        outline: none;
        position: relative;
        overflow: hidden;

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

        // Switch sizes
        @each $size, $size-props in $kendo-list-sizes {
            $_font-size: map.get( $size-props, font-size );
            $_line-height: map.get( $size-props, line-height );
            $_font-size: map.get( $size-props, font-size );
            $_line-height: map.get( $size-props, line-height );
            $_header-padding-x: map.get( $size-props, header-padding-x );
            $_header-padding-y: map.get( $size-props, header-padding-y );
            $_header-font-size: map.get( $size-props, header-font-size );
            $_header-line-height: map.get( $size-props, header-line-height );
            $_item-padding-x: map.get( $size-props, item-padding-x );
            $_item-padding-y: map.get( $size-props, item-padding-y );
            $_item-font-size: map.get( $size-props, item-font-size );
            $_item-line-height: map.get( $size-props, item-line-height );
            $_group-item-padding-x: map.get( $size-props, group-item-padding-x );
            $_group-item-padding-y: map.get( $size-props, group-item-padding-y );
            $_group-item-font-size: map.get( $size-props, group-item-font-size );
            $_group-item-line-height: map.get( $size-props, group-item-line-height );
            $_group-label-padding-x: map.get( $size-props, item-group-label-padding-x );
            $_group-label-padding-y: map.get( $size-props, item-group-label-padding-y );
            $_group-label-font-size: map.get( $size-props, item-group-label-font-size );
            $_group-label-line-height: map.get( $size-props, item-group-label-line-height );
            $_filter-padding-x: map.get( $size-props, filter-padding-x );
            $_filter-padding-y: map.get( $size-props, filter-padding-y );

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

                // .k-list-header,
                .k-list-group-sticky-header {
                    padding-block: $_header-padding-y;
                    padding-inline: $_header-padding-x;
                    font-size: $_header-font-size;
                    line-height: $_header-line-height;
                }

                .k-list-filter {
                    padding-inline: $_filter-padding-x;
                    padding-block: $_filter-padding-y;
                }

                .k-list-item,
                .k-list-custom-value {
                    padding-block: $_item-padding-y;
                    padding-inline: $_item-padding-x;
                    font-size: $_item-font-size;
                    line-height: $_item-line-height;
                }

                &:has(.k-list-item-icon) .k-list-item,
                &:has(.k-list-item-icon) .k-list-group-item {
                    padding-inline-start:  calc( #{$kendo-icon-size} + $_item-padding-x + #{$kendo-list-item-gap} );
                }

                .k-list-item:has(.k-list-item-icon) .k-list-item-description {
                    padding-inline-start:  calc( #{$kendo-icon-size} + #{$kendo-list-item-gap});
                }

                .k-list-item:has(.k-list-item-icon),
                .k-list-group-item:has(.k-list-item-icon) {
                    padding-inline: $_item-padding-x;
                }

                .k-list-group-item {
                    padding-block: $_group-item-padding-y;
                    padding-inline: $_group-item-padding-x;
                    font-size: $_group-item-font-size;
                    line-height: $_group-item-line-height;
                }

                .k-list-item-group-label {
                    padding-block: $_group-label-padding-y;
                    padding-inline: $_group-label-padding-x;
                    font-size: $_group-label-font-size;
                    line-height: $_group-label-line-height;
                }
            }
        }
    }


    // List in popup
    .k-popup > .k-list {
        height: 100%;
        border-width: 0;
    }


    // List header
    // .k-list-header,
    .k-list-group-sticky-header {
        padding-block: $kendo-list-md-header-padding-y;
        padding-inline: $kendo-list-md-header-padding-x;
        border-width: 0;
        border-width: $kendo-list-header-border-width;
        border-style: solid;
        font-size: $kendo-list-header-font-size;
        line-height: $kendo-list-header-line-height;
        font-weight: $kendo-list-header-font-weight;
        white-space: nowrap;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        flex: none;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
    }


    // List content
    .k-list-content {
        border-color: inherit;
        flex: 1 1 auto;
        overflow: hidden;
        overflow-y: auto;
        position: relative;
    }


    // List UL
    .k-list-ul {
        margin: 0;
        padding: 0;
        border-width: 0;
        border-color: inherit;
        height: auto;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: $kendo-list-item-spacing;
        text-align: start;
    }

    .k-list-ul + .k-list-ul {
        margin-block-start: $kendo-list-item-spacing;
    }


    // List item
    .k-list-item,
    .k-list-custom-value {
        padding-block: $kendo-list-md-item-padding-y;
        padding-inline: $kendo-list-md-item-padding-x;
        border: 0;
        font-size: $kendo-list-item-font-size;
        line-height: $kendo-list-item-line-height;
        outline: none;
        cursor: pointer;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        align-content: center;
        column-gap: $kendo-list-item-gap;
        position: relative;

        transition: color k-transition(snappy), background-color k-transition(snappy), outline-color k-transition(snappy), box-shadow k-transition(snappy);

        &.k-first::before {
            content: "";
            border-width: 1px 0 0;
            border-style: solid;
            position: absolute;
            inset-block-start: 0;
            inset-inline-start: 0;
            inset-inline-end: 0;
        }
    }
    .k-list-item-text,
    .k-list-header-text,
    .k-list-optionlabel {
        min-height: 1lh;
    }
    .k-list-optionlabel {
        @extend .k-list-item !optional;
        column-gap: 0;
    }

    .k-list-custom-value {
        font-style: italic;
        position: sticky;
    }

    .k-list-item {
        flex-wrap: wrap;
        align-items: center;
        border-radius: $kendo-list-item-border-radius;
    }

    .k-list-item-text {
        flex: 1;
        text-overflow: ellipsis;
        min-width: 0;
        overflow: hidden;
    }

    .k-list-item-icon-wrapper,
    .k-list-item-actions,
    .k-list-item-text {
        align-self: flex-start;
    }

    .k-list-item-actions {
        display: flex;
        align-items: center;
        gap: $kendo-list-item-gap;
    }

    .k-list-item:has(.k-list-item-icon) .k-list-item-text::before,
    .k-list-item:has(.k-list-item-actions) .k-list-item-text::before {
        content: none;
    }

    .k-list .k-list-item-description {
        flex-basis: 100%;
        font-size: $kendo-list-item-description-font-size;
        line-height: $kendo-list-item-description-line-height;
    }

    // List group item
    .k-list-group-item {
        padding-block: $kendo-list-md-group-item-padding-y;
        padding-inline: $kendo-list-md-group-item-padding-x;
        border-width: 0;
        border-width: $kendo-list-group-item-border-width;
        border-style: solid;
        font-size: $kendo-list-group-item-font-size;
        line-height: $kendo-list-group-item-line-height;
        font-weight: $kendo-list-group-item-font-weight;
        cursor: default;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        align-content: center;
        gap: $kendo-list-item-gap;
        position: relative;
    }


    // List item group label
    .k-list-item-group-label {
        position: absolute;
        inset-block-start: 0;
        inset-inline-end: 0;
    }


    // Virtualization
    .k-virtual-list {}
    .k-virtual-content,
    .k-virtual-list .k-list-content {
        overflow-y: scroll;
    }
    .k-virtual-list .k-list-item,
    .k-virtual-list .k-list-group-item,
    .k-virtual-content .k-list-item,
    .k-virtual-content .k-list-group-item {
        position: absolute;
        width: 100%;
    }
    .k-virtual-list .k-list-item-text,
    .k-virtual-list .k-list-header-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .k-virtual-list .k-list-optionlabel {
        position: relative;
    }


    // Filter
    .k-list-filter {
        display: block;
        position: relative;
        padding-inline: $kendo-list-md-filter-padding-x;
        padding-block: $kendo-list-md-filter-padding-y;
        box-sizing: border-box;
        flex: none;
    }
}