_layout.scss

@use "sass:map";
@use "../core/" as *;
@use "../button/_variables.scss" as *;
@use "./_variables.scss" as *;

@mixin kendo-pager--layout() {

    .k-pager {
        padding-inline: var( --INTERNAL--kendo-pager-padding-x, 0 );
        padding-block: var( --INTERNAL--kendo-pager-padding-y, 0 );
        border-width: var( --kendo-pager-border-width, #{$kendo-pager-border-width} );
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: var( --kendo-pager-font-family, #{$kendo-pager-font-family} );
        font-size: var( --kendo-pager-font-size, #{$kendo-pager-font-size} );
        line-height: var( --kendo-pager-line-height, #{$kendo-pager-line-height} );
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: var( --INTERNAL--kendo-pager-spacing, 0 );
        position: relative;
        overflow: hidden;
        cursor: default;
        flex: 0 0 auto;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

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

    }


    // Base pager section
    %base-pager-section {
        display: flex;
        flex-direction: row;
        align-items: center;
    }


    // Base pager item
    %base-pager-item {
        color: inherit;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;

        &:hover {
            z-index: 2;
        }
    }


    // Pager items
    .k-pager-nav {
        @extend %base-pager-item !optional;
        @include border-radius( var( --kendo-pager-item-border-radius, #{$kendo-pager-item-border-radius} ) );
    }


    // Pager numbers
    .k-pager-numbers-wrap {
        display: flex;
        flex-direction: row;
        position: relative;

        select.k-dropdown-list {
            cursor: pointer;
            display: none;
        }
    }
    .k-pager-numbers {
        display: flex;
        flex-direction: row;

        // Selected state
        .k-selected {
            cursor: inherit;
            z-index: 2;
        }

        .k-button {
            --INTERNAL--kendo-button-padding-x: var( --INTERNAL--kendo-button-padding-y );

            .k-button-text {
                min-width: calc( var( --kendo-line-height ) * 1em );
            }
        }
    }


    // Spacing between items
    .k-pager-nav + .k-pager-nav,
    .k-pager-nav + .k-pager-numbers-wrap,
    .k-pager-numbers-wrap + .k-pager-nav {
        @if ($kendo-pager-item-spacing) {
            margin-inline-start: var( --kendo-pager-item-spacing, #{$kendo-pager-item-spacing} );
        }
    }


    // Pager input
    .k-pager-input {
        @extend %base-pager-section !optional;

        .k-textbox {
            margin-inline: 1ex;
            margin-block: 0;
            width: var( --kendo-pager-input-width, #{$kendo-pager-input-width} );
        }
    }


    // Pager sizes
    .k-pager-sizes {
        @extend %base-pager-section !optional;

        .k-dropdown-list,
        > select {
            margin-inline-end: 1ex;
            width: var( --kendo-pager-dropdown-width, #{$kendo-pager-dropdown-width} );
        }

        .k-input-inner,
        .k-input-value-text {
            text-overflow: clip;
        }
    }


    // Pager info
    .k-pager-info {
        @extend %base-pager-section !optional;
        text-align: end;
        justify-content: flex-end;
        flex: 1 1 0%;
        order: 9;
    }


    // Pager refresh
    .k-pager-refresh {
        margin-inline-start: auto;
        color: inherit;
        order: 10;
    }

    // Responsive
    .k-pager-mobile-sm {
        overflow: visible;

        // Show native select
        .k-pager-numbers-wrap {
            select.k-dropdown-list {
                @extend %base-pager-section !optional;
                @if ($kendo-pager-section-spacing) {
                    margin-left: $kendo-pager-section-spacing;
                    margin-right: $kendo-pager-section-spacing;
                }
                width: var( --kendo-pager-dropdown-width, #{$kendo-pager-dropdown-width} );
            }
        }
    }

    // Hide components
    .k-pager-mobile-md .k-pager-info,
    .k-pager-mobile-sm .k-pager-info,
    .k-pager-mobile-sm .k-pager-sizes,
    .k-pager-mobile-sm .k-pager-numbers {
        display: none;
    }

    // Pager sizes
    @each $size, $size-props in $kendo-pager-sizes {
        $_padding-x: map.get($size-props, padding-x);
        $_padding-y: map.get($size-props, padding-y);
        $_item-group-spacing: map.get($size-props, item-group-spacing);

        .k-pager-#{$size} {
            --INTERNAL--kendo-pager-padding-x: var( --kendo-pager-#{$size}-padding-x, #{$_padding-x} );
            --INTERNAL--kendo-pager-padding-y: var( --kendo-pager-#{$size}-padding-y, #{$_padding-y} );
            --INTERNAL--kendo-pager-spacing: var( --kendo-pager-#{$size}-spacing, #{$_item-group-spacing} );

            .k-pager-input {
                margin-inline-start: var( --kendo-pager-input-margin-start, #{$_item-group-spacing} );
                margin-inline-end: var( --kendo-pager-input-margin-end, #{$_item-group-spacing} );
            }
        }
    }

}