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

@mixin kendo-listview--layout() {

    // Listview
    .k-listview {
        margin: 0;
        padding: 0;
        border-width: 0;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: var( --kendo-listview-font-family, #{$kendo-listview-font-family} );
        font-size: var( --kendo-listview-font-size, #{$kendo-listview-font-size} );
        line-height: var( --kendo-listview-line-height, #{$kendo-listview-line-height} );
        display: flex;
        flex-flow: column nowrap;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
    }
    .k-listview-bordered {
        border-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} );
    }


    // Listview content
    .k-listview-content {
        margin: 0;
        padding: 0;
        outline: 0;
        flex-grow: 1;
        position: relative;
        overflow: auto;

        &::after {
            height: 0;
            clear: both;
            display: block;
        }
    }
    .k-listview-content.k-d-flex,
    .k-listview-content.k-d-grid {
        &::after { display: none; }
    }
    .k-listview-content.k-d-grid {
        grid-gap: var( --kendo-listview-grid-gap, #{$kendo-listview-grid-gap} );
    }
    .k-listview-content-padding-rectangle {
        padding-inline: var( --kendo-listview-padding-x, #{$kendo-listview-padding-x} );
        padding-block: var( --kendo-listview-padding-y, #{$kendo-listview-padding-y} );
    }
    .k-listview-content-padding-square {
        padding: var( --kendo-listview-padding-y, #{$kendo-listview-padding-y} );
    }


    // Listview item
    .k-listview-item {
        padding: 0;
        border-width: 0;
        outline: 0;
        border-style: solid;
        box-sizing: border-box;
        flex-shrink: 0;
    }
    .k-listview-item-padding-rectangle {
        padding-inline: var( --kendo-listview-item-padding-x, #{$kendo-listview-item-padding-x} );
        padding-block: var( --kendo-listview-item-padding-y, #{$kendo-listview-item-padding-y} );
    }
    .k-listview-item-padding-rectangle .k-listview-link {
        margin-inline: calc( var( --kendo-listview-item-padding-x, #{$kendo-listview-item-padding-x} ) * -1);
        margin-block: calc( var( --kendo-listview-item-padding-y, #{$kendo-listview-item-padding-y} ) * -1);
        padding-inline: var( --kendo-listview-item-padding-x, #{$kendo-listview-item-padding-x} );
        padding-block: var( --kendo-listview-item-padding-y, #{$kendo-listview-item-padding-y} );
    }
    .k-listview-item-padding-square {
        padding: var( --kendo-listview-item-padding-y, #{$kendo-listview-item-padding-y} );
    }
    .k-listview-item-padding-square .k-listview-link {
        margin: (-$kendo-listview-item-padding-y);
        padding: var( --kendo-listview-item-padding-y, #{$kendo-listview-item-padding-y} );
    }


    // Header
    .k-listview-header {
        border-width: 0;
        border-style: solid;
        border-color: inherit;
        padding-inline: var( --kendo-listview-header-padding-x, #{$kendo-listview-header-padding-x} );
        padding-block: var( --kendo-listview-header-padding-y, #{$kendo-listview-header-padding-y} );
    }
    .k-listview-bordered > .k-listview-header {
        border-block-end-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} );
    }


    // Listview footer
    .k-listview-footer {
        border-width: 0;
        border-style: solid;
        border-color: inherit;
        padding-inline: var( --kendo-listview-footer-padding-x, #{$kendo-listview-footer-padding-x} );
        padding-block: var( --kendo-listview-footer-padding-y, #{$kendo-listview-footer-padding-y} );

    }
    .k-listview-bordered > .k-listview-footer {
        border-block-start-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} );
    }


    // Listview pager
    .k-listview-pager {
        border-width: 0;
        border-color: inherit;
    }
    .k-listview-bordered > .k-listview-pager-top {
        border-block-end-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} );
    }
    .k-listview-bordered > .k-listview-pager-bottom {
        border-block-start-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} );
    }


    // Borders
    .k-listview-borders-all {
        .k-listview-item {
            border-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} );
        }
    }
    .k-listview-borders-horizontal {
        .k-listview-item {
            border-block-start-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} );
        }
        .k-listview-item:first-child {
            border-block-start-width: 0;
        }
    }
    .k-listview-borders-vertical {
        .k-listview-item {
            border-inline-start-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} );
        }
        .k-listview-item:first-child {
            border-inline-start-width: 0;
        }
    }
}