@use "./_variables.scss" as *;
@use "../../mixins/index.scss" as *;
@use "../../motion/index.scss" as *;
@use "../../spacing/index.scss" as *;
@use "../../z-index/index.scss" as *;

@mixin kendo-suggestion--layout-base() {
    .k-suggestion-scrollwrap {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        position: relative;
        gap: k-spacing(.5);
    }

    .k-suggestion-group {
        padding-block: calc( #{$kendo-suggestion-padding-y} / 2 );
        margin-inline: calc( #{$kendo-suggestion-padding-y} / -2 );
        display: flex;
        flex: 1;
        flex-wrap: wrap;
        gap: $kendo-suggestion-spacing;
        align-self: normal;
        overflow: hidden;

        &.k-suggestion-group-scrollable {
            flex-wrap: nowrap;
        }

        &:not(:has(.k-suggestions-scroll)) {
            padding-inline: calc( #{$kendo-suggestion-padding-y} / 2 );
        }

        .k-suggestions-scroll {
            padding: calc( #{$kendo-suggestion-padding-y} / 2 );
            margin-block: calc( #{$kendo-suggestion-padding-y} / -2 );
            display: flex;
            overflow-x: auto;
            scrollbar-width: none;
            flex-wrap: nowrap;
            white-space: nowrap;
            gap: $kendo-suggestion-spacing;
        }
    }

    .k-suggestion-group-scrollable,
    .k-suggestion-scrollwrap {
        .k-suggestion {
            white-space: nowrap;
            max-width: none;
        }
    }

    .k-suggestion-group-scrollable,
    .k-suggestion-scrollwrap .k-suggestion-group {
        position: relative;
    }

    .k-suggestion {
        @include border-radius( $kendo-suggestion-border-radius );
        max-width: 100%;
        padding-block: $kendo-suggestion-padding-y;
        padding-inline: $kendo-suggestion-padding-x;
        box-sizing: border-box;
        border-width: $kendo-suggestion-border-width;
        border-style: $kendo-suggestion-border-style;
        font-size: $kendo-suggestion-font-size;
        line-height: $kendo-suggestion-line-height;
        font-weight: $kendo-suggestion-font-weight;
        flex: 0 0 auto;
        transition: background-color k-transition(rapid), box-shadow k-transition(rapid);
        cursor: pointer;
        outline: none;
        white-space: normal;
    }

    .k-suggestion-group-scrollable-end::before,
    .k-suggestion-group-scrollable-start::after,
    .k-suggestion-scrollwrap .k-suggestion-group-scrollable-end::before,
    .k-suggestion-scrollwrap .k-suggestion-group-scrollable-start::after {
        content: '';
        aspect-ratio: .3;
        position: absolute;
        top: 0;
        z-index: k-z-index("base", 3);
        height: calc( #{$kendo-suggestion-font-size} * #{$kendo-suggestion-line-height} + #{$kendo-suggestion-padding-y} * 2 + #{$kendo-suggestion-padding-y} + #{$kendo-suggestion-border-width} * 2);
    }

    .k-suggestion-group-scrollable-start::after,
    .k-suggestion-scrollwrap .k-suggestion-group-scrollable-start::after {
        inset-inline-end: 0;
    }

}

@mixin kendo-suggestion--layout() {
    @include kendo-suggestion--layout-base();
}