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

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

    // Chip
    .k-chip {
        border-width: $kendo-chip-border-width;
        border-style: solid;
        outline: 0;
        font-family: var(--kendo-font-family);
        font-weight: $kendo-chip-font-weight;
        display: inline-flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;
        gap: $kendo-chip-spacing;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        user-select: none;
        transition: color k-transition(rapid), background-color k-transition(rapid), box-shadow k-transition(rapid), opacity k-transition(rapid);

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

        .k-selected-icon-wrapper {
            display: none !important; // stylelint-disable-line declaration-no-important
        }

        // Roundness
        @each $roundness in $kendo-chip-roundness {
            #{k-when-default($kendo-chip-default-roundness, $roundness)}
            &.k-rounded-#{$roundness} {
                border-radius: k-border-radius($roundness);
            }
        }

        // Sizes
        @each $size, $size-props in $kendo-chip-sizes {
            $_padding-x: map.get( $size-props, padding-x );
            $_padding-y: map.get( $size-props, padding-y );
            $_font-size: map.get( $size-props, font-size );
            $_line-height: map.get( $size-props, line-height );

            #{k-when-default($kendo-chip-default-size, $size)}
            &.k-chip-#{$size} {
                padding-block: $_padding-y;
                padding-inline: $_padding-x;
                font-size: $_font-size;
                line-height: $_line-height;

                .k-chip-action {
                    padding: $_padding-y;
                }
            }
        }

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


    // Chip content
    .k-chip-content {
        min-width: 0;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        flex: 1 1 auto;

        // Adjustment for kendo-icon-wrapper
        .k-icon-wrapper-host {
            display: initial;
        }
    }
    .k-chip-content:first-child {
        margin-inline-start: $kendo-chip-spacing;
    }
    .k-chip-content:last-child {
        margin-inline-end: $kendo-chip-spacing;
    }


    // Chip text
    .k-chip-text,
    .k-chip-label {
        padding-block: .5em;
        padding-inline: 0;
        margin-block: -.5em;
        margin-inline: 0;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        flex: 1 1 auto;
    }


    // Chip avatar
    .k-chip-avatar {
        border-radius: 50%;
        background-size: cover;
        background-position: center;
        flex: none;
        width: 1em;
        height: 1em;
        flex-basis: 1em;
    }


    // Chip icon
    .k-chip-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
    }


    // Actions
    .k-chip-actions {
        margin-block: -5em;
        margin-inline: 0;
        flex: none;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        align-self: center;
    }
    .k-chip-action {
        flex: none;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        align-self: center;
    }


    // Legacy chip icons
    .k-remove-icon {
        font-size: inherit;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
    }


    // Chip list
    .k-chip-list {
        min-width: 0px;
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        position: relative;
    }

    .k-chip-list {
        // Sizes
        @each $name, $size in $kendo-chip-list-sizes {
            #{k-when-default($kendo-chip-default-size, $name)}
            &.k-chip-list-#{$name} {
                gap: $size;
            }
        }
    }

}