@use 'sass:map';
@use '../../base' as *;
@use 'igniteui-theming/sass/animations/easings' as *;

/// @deprecated Use the `css-vars` mixin instead.
/// @see {mixin} css-vars
/// @param {Map} $theme - The theme used to style the component.
@mixin chip($theme) {
    @include css-vars($theme);
    $chip-max-width: 32ch;

    $variant: map.get($theme, '_meta', 'theme');
    $theme-variant: map.get($theme, '_meta', 'variant');

    $chip-padding: (
        comfortable: rem(if($variant != 'indigo', 12px, 7px)),
        cosy: rem(if($variant != 'indigo', 6px, 5px)),
        compact: rem(if($variant != 'indigo', 2px, 3px))
    );

    $box-shadow-focus: map.get((
        'material': null,
        'fluent': null,
        'bootstrap': 0 0 0 rem(4px) var-get($theme, 'focus-outline-color'),
        'indigo': 0 0 0 rem(3px) var-get($theme, 'focus-outline-color')
    ), $variant);

    $box-shadow-focus-selected: map.get((
        'material': null,
        'fluent': null,
        'bootstrap': 0 0 0 rem(4px) var-get($theme, 'focus-selected-outline-color'),
        'indigo': 0 0 0 rem(3px) var-get($theme, 'focus-selected-outline-color')
    ), $variant);

    $border-size: rem(1px);

    %igx-chip-area {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        width: 100%;

        @if $variant == 'indigo' {
            padding: pad(rem(4px));
            gap: rem(8px);
        }

        &:empty {
            display: none;
        }
    }

    %igx-chip {
        @include sizable();
        --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
        --chip-size: var(--component-size);

        position: relative;
        display: inline-flex;
        flex-shrink: 0;

        // Fix: The grid resizing does not autosize the filter header cells with the default filter chips
        // https://github.com/IgniteUI/igniteui-angular/pull/12770/files/efd2a274038c051e82561903f8799fd03265fd74#r1150993630
        min-width: max-content;
        touch-action: none;
        outline: none;

        // The focus and hover are build that way since the host is the focusable element
        &:focus {
            %igx-chip__item {
                outline-style: none;
                color: var-get($theme, 'focus-text-color');
                background: var-get($theme, 'focus-background');
                border-color: var-get($theme, 'focus-border-color');
                box-shadow: $box-shadow-focus;
            }

            %igx-chip__item--selected {
                color: var-get($theme, 'focus-selected-text-color');
                background: var-get($theme, 'focus-selected-background');
                border-color: var-get($theme, 'focus-selected-border-color');
                box-shadow: $box-shadow-focus-selected;
            }
        }

        &:hover {
            %igx-chip__item {
                color: var-get($theme, 'hover-text-color');
                background: var-get($theme, 'hover-background');
                border-color: var-get($theme, 'hover-border-color');
            }

            %igx-chip__item--selected {
                color: var-get($theme, 'hover-selected-text-color');
                background: var-get($theme, 'hover-selected-background');
                border-color: var-get($theme, 'hover-selected-border-color');
            }
        }
    }

    %igx-chip__item {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: auto;
        align-items: center;
        justify-content: center;
        text-align: center;
        height: var-get($theme, 'size');
        padding-inline: pad-inline(
            sizable(
                map.get($chip-padding, 'compact'),
                map.get($chip-padding, 'cosy'),
                map.get($chip-padding, 'comfortable')
            )
        );

        gap: sizable(rem(3px), rem(6px), rem(8px));
        color: var-get($theme, 'text-color');
        background: var-get($theme, 'background');
        border: $border-size solid var-get($theme, 'border-color');
        border-radius: var-get($theme, 'border-radius');
        user-select: none;
        overflow: hidden;
        cursor: pointer;
        filter: opacity(1);

        igx-avatar {
            display: flex !important;
            align-items: center;
            justify-content: center;
            font-size: 50%;
        }

        igx-avatar,
        igx-icon {
            --component-size: var(--chip-size);
        }

        igx-circular-bar {
            --diameter: #{sizable(rem(14px), rem(18px), rem(24px))};
        }

        @if $variant == 'indigo' {
            igx-icon {
                --size: #{sizable(rem(14px), rem(14px), rem(16px))}
            }
        }

        igx-avatar {
            max-height: 100%;
            width: sizable(rem(14px), rem(18px), rem(24px));
            max-width: sizable(rem(14px), rem(18px), rem(24px));
            height: sizable(rem(14px), rem(18px), rem(24px));
        }

        igx-prefix,
        [igxPrefix] {
            @extend %igx-chip__prefix;
        }

        igx-suffix,
        [igxSuffix] {
            @extend %igx-chip__suffix;
        }
    }

    %igx-chip__item--selected {
        color: var-get($theme, 'selected-text-color');
        background: var-get($theme, 'selected-background');
        border-color: var-get($theme, 'selected-border-color');
    }

    %igx-chip__item--primary {
        @if $variant == 'bootstrap' {
            color: contrast-color($color: 'primary', $variant: 600);
        } @else {
            color: contrast-color($color: 'primary', $variant: 500);
        }
        background: color($color: 'primary', $variant: 500);
        border-color: color($color: 'primary', $variant: 500);
    }

    %igx-chip%igx-chip--primary {
        &:focus {
            %igx-chip__item {
                @if $variant != 'bootstrap' and $variant != 'indigo' {
                    color: contrast-color($color: 'primary', $variant: 800);
                    background: color($color: 'primary', $variant: 800);
                    border-color: color($color: 'primary', $variant: 800);
                }

                @if $variant == "bootstrap" {
                    color: contrast-color($color: 'primary', $variant: 500);
                    background: color($color: 'primary', $variant: 500);
                    border-color: color($color: 'primary', $variant: 500);
                }

                @if $variant == 'indigo' {
                    color: contrast-color($color: 'primary', $variant: 900);
                    background: color($color: 'primary', $variant: 500);
                    border-color: color($color: 'primary', $variant: 500);
                    box-shadow: 0 0 0 rem(3px) color($color: 'primary', $variant: 400, $opacity: .5);
                }

                @if $variant == 'bootstrap' {
                    box-shadow: 0 0 0 rem(4px) color($color: 'primary', $variant: 500, $opacity: .38);
                }
            }
        }

        &:hover {
            %igx-chip__item {
                @if $variant == 'indigo' {
                    color: contrast-color($color: 'primary', $variant: 900);
                    background: color($color: 'primary', $variant: 400);
                    border-color: color($color: 'primary', $variant: 400);
                } @else {
                    color: contrast-color($color: 'primary', $variant: 600);
                    background: color($color: 'primary', $variant: 600);
                    border-color: color($color: 'primary', $variant: 600);
                }
            }
        }
    }

    %igx-chip__item--info {
        color: contrast-color($color: 'info', $variant: 500);
        background: color($color: 'info', $variant: 500);
        border-color: color($color: 'info', $variant: 500);
    }

    %igx-chip%igx-chip--info {
        &:focus {
            %igx-chip__item {
                color: contrast-color($color: 'info', $variant: 800);
                background: color($color: 'info', $variant: 800);
                border-color: color($color: 'info', $variant: 800);

                @if $variant == 'indigo' or $variant == 'bootstrap' {
                    color: contrast-color($color: 'info', $variant: 500);
                    background: color($color: 'info', $variant: 500);
                    border-color: color($color: 'info', $variant: 500);
                }

                @if $variant == 'indigo' {
                    box-shadow: 0 0 0 rem(3px) color($color: 'info', $variant: if($theme-variant == 'light', 100, 800));
                }

                @if $variant == 'bootstrap' {
                    box-shadow: 0 0 0 rem(4px) color($color: 'info', $variant: 500, $opacity: .38);
                }
            }
        }

        &:hover {
            %igx-chip__item {
                @if $variant == 'indigo' {
                    color: contrast-color($color: 'info', $variant: 400);
                    background: color($color: 'info', $variant: 400);
                    border-color: color($color: 'info', $variant: 400);
                } @else {
                    color: contrast-color($color: 'info', $variant: 600);
                    background: color($color: 'info', $variant: 600);
                    border-color: color($color: 'info', $variant: 600);
                }
            }
        }
    }

    %igx-chip__item--success {
        @if $variant == 'bootstrap' {
            color: contrast-color($color: 'success', $variant: 600);
        } @else {
            color: contrast-color($color: 'success', $variant: if($variant == 'indigo', 900, 500));
        }
        background: color($color: 'success', $variant: if($variant == 'indigo', 800, 500));
        border-color: color($color: 'success', $variant: if($variant == 'indigo', 800, 500));
    }

    %igx-chip%igx-chip--success {
        &:focus {
            %igx-chip__item {
                color: contrast-color($color: 'success', $variant: 800);
                background: color($color: 'success', $variant: 800);
                border-color: color($color: 'success', $variant: 800);

                @if $variant == 'indigo' {
                    box-shadow: 0 0 0 rem(3px) color($color: 'success', $variant: if($theme-variant == 'light', 200, 900));
                }

                @if $variant == 'bootstrap' {
                    border-color: color($color: 'success', $variant: 500);
                    background: color($color: 'success', $variant: 500);
                    color: contrast-color($color: 'success', $variant: 600);
                    box-shadow: 0 0 0 rem(4px) color($color: 'success', $variant: 500, $opacity: .38);
                }
            }
        }

        &:hover {
            %igx-chip__item {
                @if $variant == 'indigo' {
                    color: contrast-color($color: 'success', $variant: 900);
                    background: color($color: 'success', $variant: 700);
                    border-color: color($color: 'success', $variant: 700);
                } @else {
                    color: contrast-color($color: 'success', $variant: 600);
                    background: color($color: 'success', $variant: 600);
                    border-color: color($color: 'success', $variant: 600);
                }
            }
        }
    }

    %igx-chip__item--warning {
        @if $variant == 'indigo' {
            color: color($color: 'gray', $variant: if($theme-variant == 'light', 900, 50));
        } @else {
            color: contrast-color($color: 'warn', $variant: 900);
        }
        background: color($color: 'warn', $variant: 500);
        border-color: color($color: 'warn', $variant: 500);
    }

    %igx-chip%igx-chip--warning {
        &:focus {
            %igx-chip__item {
                color: contrast-color($color: 'warn', $variant: 800);
                background: color($color: 'warn', $variant: 800);
                border-color: color($color: 'warn', $variant: 800);

                @if $variant == 'indigo' or $variant == 'bootstrap' {
                    background: color($color: 'warn', $variant: 500);
                    border-color: color($color: 'warn', $variant: 500);
                }

                @if $variant == 'indigo' {
                    color: color($color: 'gray', $variant: if($theme-variant == 'light', 900, 50));
                    box-shadow: 0 0 0 rem(3px) color($color: 'warn', $variant: if($theme-variant == 'light', 100, 900));
                }

                @if $variant == 'bootstrap' {
                    box-shadow: 0 0 0 rem(4px) color($color: 'warn', $variant: 500, $opacity: .38);
                }
            }
        }

        &:hover {
            %igx-chip__item {
                @if $variant == 'indigo' {
                    color: color($color: 'gray', $variant: if($theme-variant == 'light', 900, 50));
                    background: color($color: 'warn', $variant: 400);
                    border-color: color($color: 'warn', $variant: 400);
                } @else {
                    color: contrast-color($color: 'warn', $variant: 600);
                    background: color($color: 'warn', $variant: 600);
                    border-color: color($color: 'warn', $variant: 600);
                }
            }
        }
    }

    %igx-chip__item--danger {
        @if $variant == 'bootstrap' {
            color: contrast-color($color: 'error', $variant: 600);
        } @else {
            color: contrast-color($color: 'error', $variant: if($variant == 'indigo', 900, 500));
        }
        background: color($color: 'error', $variant: if($variant == 'indigo', 600, 500));
        border-color: color($color: 'error', $variant: if($variant == 'indigo', 600, 500));
    }

    %igx-chip%igx-chip--danger {
        &:focus {
            %igx-chip__item {
                color: contrast-color($color: 'error', $variant: 800);
                background: color($color: 'error', $variant: 800);
                border-color: color($color: 'error', $variant: 800);

                @if $variant == 'indigo' {
                    border-color: color($color: 'error', $variant: 600);
                    background: color($color: 'error', $variant: 600);
                    color: contrast-color($color: 'error', $variant: 900);
                    box-shadow: 0 0 0 rem(3px) color($color: 'error', $variant: if($theme-variant == 'light', 100, 900));
                }

                @if $variant == 'bootstrap' {
                    border-color: color($color: 'error', $variant: 500);
                    background: color($color: 'error', $variant: 500);
                    color: contrast-color($color: 'error', $variant: 600);
                    box-shadow: 0 0 0 rem(4px) color($color: 'error', $variant: 500, $opacity: .38);
                }
            }
        }

        &:hover {
            %igx-chip__item {
                @if $variant == 'indigo' {
                    color: contrast-color($color: 'error', $variant: 900);
                    background: color($color: 'error', $variant: 500);
                    border-color: color($color: 'error', $variant: 500);
                } @else {
                    color: contrast-color($color: 'error', $variant: 600);
                    background: color($color: 'error', $variant: 600);
                    border-color: color($color: 'error', $variant: 600);
                }
            }
        }
    }

    %igx-chip__start {
        > igx-avatar,
        > igx-circular-bar {
            &:first-child {
                @if $variant != 'indigo' {
                    margin-inline-start: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1);
                } @else {
                    margin-inline-start: calc(#{sizable(rem(1px), rem(3px), rem(4px))} * -1);
                }
            }
        }

        [igxPrefix],
        igx-prefix {
            &:first-of-type {
                igx-avatar,
                igx-circular-bar {
                    @if $variant != 'indigo' {
                        margin-inline-start: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1);
                    } @else {
                        margin-inline-start: calc(#{sizable(rem(1px), rem(3px), rem(4px))} * -1);
                    }
                }
            }
        }
    }

    %igx-chip__end {
        > igx-avatar,
        > igx-circular-bar {
            &:last-child {
                @if $variant != 'indigo' {
                    margin-inline-end: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1);
                } @else {
                    margin-inline-end: calc(#{sizable(rem(1px), rem(3px), rem(4px))} * -1);
                }
            }
        }

        [igxPrefix],
        igx-prefix {
            &:first-of-type {
                igx-avatar,
                igx-circular-bar {
                    @if $variant != 'indigo' {
                        margin-inline-end: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1);
                    } @else {
                        margin-inline-end: calc(#{sizable(rem(1px), rem(3px), rem(4px))} * -1);
                    }
                }
            }
        }
    }

    %igx-chip__start,
    %igx-chip__end {
        display: flex;
        align-items: center;
        position: relative;

        &:empty {
            display: none;
        }
    }

    %igx-chip__prefix,
    %igx-chip__suffix {
        @include ellipsis();

        display: inline-block;
        vertical-align: middle;
        max-width: $chip-max-width;

        > igx-icon {
            display: block;
        }
    }

    %igx-chip__content {
        @include ellipsis();

        max-width: $chip-max-width;

        &:empty {
            display: none;
        }
    }

    %igx-chip__remove {
        display: inline-flex;
        color: var-get($theme, 'remove-icon-color', currentColor);

        &:empty {
            display: none;
        }

        // FIX IE11 and Edge focus styles.
        // [focus-within] is not supported by IE & Edge.
        &:focus {
            igx-icon {
                color: var-get($theme, 'remove-icon-color-focus');
            }
        }

        igx-icon {
            &:focus{
                outline-style: none;
            }
        }
    }

    %igx-chip__select {
        display: inline-flex;
        align-items: center;
        max-width: rem(24px);
        opacity: 1;
        z-index: 1;
        transition: max-width .12s $in-out-quad, opacity .12s $in-out-quad .06s;
        transition-behavior: allow-discrete;

        @starting-style {
            max-width: 0;
            opacity: 0;
        }
    }

    %igx-chip__ghost {
        @extend %igx-chip;

        position: absolute;
        box-shadow: var-get($theme, 'ghost-elevation');
        overflow: hidden;
        color: var-get($theme, 'ghost-text-color');
        background: var-get($theme, 'ghost-background');
        // If z-index is not set,
        //the chip would hide behind it's parent grid as it has a z-index of 1
        z-index: 10;

        igx-avatar,
        igx-circular-bar,
        igx-icon {
            --component-size: var(--chip-size);
        }

        &:hover,
        &:focus {
            background: var-get($theme, 'ghost-background');
        }
    }

    %igx-chip__item--disabled {
        color: var-get($theme, 'disabled-text-color');
        background: var-get($theme, 'disabled-background');
        border-color: var-get($theme, 'disabled-border-color');
    }

    %igx-chip--disabled {
        cursor: default;
        pointer-events: none;

        @if $variant == 'indigo' {
            %igx-chip__item--selected {
                background: color($color: 'primary', $variant: 400, $opacity: .5);
                border-color: transparent;
                color: contrast-color($color: 'primary', $variant: 900, $opacity: if($theme-variant == 'light', .4, .2));
            }

            &%igx-chip--primary {
                %igx-chip__item {
                    /* stylelint-disable max-nesting-depth */
                    @if $theme-variant == 'light' {
                        color: contrast-color($color: 'primary', $variant: 900, $opacity: .4);
                    } @else {
                        color: contrast-color($color: 'primary', $variant: 900, $opacity: .2);
                    }

                    background: color($color: 'primary', $variant: 400, $opacity: .5);
                    border-color: transparent;
                    /* stylelint-enable max-nesting-depth */
                }
            }

            &%igx-chip--info {
                %igx-chip__item {
                    color: contrast-color($color: 'info', $variant: 900);
                    background: color($color: 'info', $variant: 500);
                    border-color: color($color: 'info', $variant: 500);
                }
            }

            &%igx-chip--success {
                %igx-chip__item {
                    color: contrast-color($color: 'success', $variant: 900);
                    background: color($color: 'success', $variant: 800);
                    border-color: color($color: 'success', $variant: 800);
                }
            }

            &%igx-chip--warning {
                %igx-chip__item {
                    color: color($color: 'gray', $variant: if($theme-variant == 'light', 900, 50));
                    background: color($color: 'warn', $variant: 500);
                    border-color: color($color: 'warn', $variant: 500);
                }
            }

            &%igx-chip--danger {
                %igx-chip__item {
                    color: contrast-color($color: 'error', $variant: 900);
                    background: color($color: 'error', $variant: 600);
                    border-color: color($color: 'error', $variant: 600);
                }
            }

            &%igx-chip--info,
            &%igx-chip--success,
            &%igx-chip--warning,
            &%igx-chip--danger {
                %igx-chip__item {
                    opacity: .4;
                }
            }
        }

        %igx-chip__end {
            &:has(%igx-chip__remove:only-child) {
                display: none;
            }
        }
    }
}

/// Adds typography styles for the igx-chip component.
/// Uses the 'body-2'
/// category from the typographic scale.
/// @group typography
/// @param {Map} $categories [(text: 'body-2')] - The categories from the typographic scale used for type styles.
@mixin chip-typography(
    $categories: (text: 'body-2'))
{
    $text: map.get($categories, 'text');

    %igx-chip__item {
        @include type-style($text);
    }
}