@use 'sass:map';
@use '../../base' as *;

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

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

    $search-input-inline-padding: map.get((
        'material': pad-inline(rem(4px), rem(8px), rem(16px)),
        'fluent': pad-inline(rem(2px), rem(4px), rem(8px)),
        'bootstrap': pad-inline(rem(4px), rem(8px), rem(16px)),
        'indigo': pad-inline(rem(8px), rem(12px), rem(12px))
    ), $variant);

    $search-input-block-padding: map.get((
        'material': pad-inline(rem(8px)),
        'fluent': pad-inline(rem(2px), rem(4px), rem(8px)),
        'bootstrap': pad-inline(rem(8px)),
        'indigo': pad-inline(rem(12px))
    ), $variant);

    %igx-combo {
        position: relative;
        display: block;
    }

    %igx-combo__checkbox {
        margin-inline-end: rem(8px);

        @if $variant == 'material' {
            margin-inline-end: rem(16px);

            div {
                padding: 0;
            }
        }
    }

    %igx-combo__drop-down {
        position: absolute;
        width: 100%;

        .igx-drop-down {
            width: 100%;
        }
    }

    %igx-combo__search {
        padding-inline: $search-input-inline-padding;
        padding-block: $search-input-block-padding;
        margin: 0 !important;
        z-index: 26;
        border-bottom: rem(1px) dashed var-get($theme, 'search-separator-border-color');

        .igx-input-group__bundle {
            padding-block-start: 0;
            height: auto;
        }

        .igx-input-group__bundle-main {
            padding-inline: 0;
        }

        .igx-input-group__bundle-start,
        .igx-input-group__bundle-end {
            min-width: 0;
        }

        igx-input-group {
            --theme: #{if($variant == 'indigo', 'indigo', 'material')};
            --ig-size: #{if($variant == 'indigo', 2, 1)};

            @if $variant == 'bootstrap' or $variant == 'indigo' {
                input {
                    height: rem(28px);
                }
            } @else if $variant == 'fluent' {
                input {
                    height: rem(32px);
                }
            }
        }
    }

    %igx-combo__case-icon,
    %igx-combo__case-icon--active {
        line-height: 0;
    }

    // The wrapping element here is needed
    // in order to override the !important rule of .igx-icon--inactive.
    %igx-combo__case-icon {
        igx-icon {
            --ig-icon-disabled-color: var(--ig-gray-600);

            opacity: 1;
        }
    }

    %igx-combo__case-icon--active {
        igx-icon {
            color: color($color: 'primary')
        }
    }

    %igx-combo__content {
        --item-count: 6;

        position: relative;
        overflow: hidden;
        max-height: calc(var(--size) * var(--item-count));

        @if $variant == 'indigo' {
            max-height: calc(var(--size) * var(--item-count) + rem(16px));
        }

        &:focus {
            outline: transparent;
        }
    }

    %igx-combo__add {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        padding: rem(16px);
        gap: rem(16px);
        background: var-get($theme, 'empty-list-background');
    }

    %igx-combo__add-item {
        height: auto !important;
        background: var-get($theme, 'empty-list-background') !important;
        justify-content: center;
        outline: none !important;
    }

    %igx-combo__empty {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        color: var-get($theme, 'empty-list-placeholder-color');
        padding: 0 rem(24px);
        font-size: rem(13px);
    }

    @if $variant == 'bootstrap' {
        .igx-input-group__bundle::after {
            height: rem(1px) !important;
        }
    }

    @if $variant == 'fluent' or $variant == 'bootstrap' {
        %igx-combo__search {
            --ig-input-group-input-suffix-background: transparent;
            --ig-input-group-input-suffix-background--focused: transparent;

            .igx-input-group__bundle::after {
                border-block-end-color: var(--border-color);
            }

            .igx-input-group__bundle:hover::after {
                border-block-end-color: #{if($variant == 'fluent', var(--hover-border-color), var(--border-color))};;
            }

            .igx-input-group--focused .igx-input-group__bundle::after {
                border-block-end-color: var(--focused-bottom-line-color);
            }
        }
    }

    .igx-input-group {
        %igx-combo__toggle-button {
            cursor: pointer;
            background: var-get($theme, 'toggle-button-background');
            color: var-get($theme, 'toggle-button-foreground');
        }

        %igx-combo__clear-button {
            cursor: pointer;

            @if $variant == 'bootstrap' {
                border-inline-end: rem(1px) solid var(--border-color);
            }

            &:empty {
                padding: 0;
            }
        }

        &:not(.igx-input-group--disabled){
          %igx-combo__clear-button {
                color: var-get($theme, 'clear-button-foreground');
                background: var-get($theme, 'clear-button-background');
            }
        }
    }

    %form-group-bundle:not(%form-group-bundle--disabled):focus-within {
        %igx-combo__toggle-button {
            color: var-get($theme, 'toggle-button-foreground-focus');
            background: var-get($theme, 'toggle-button-background-focus');
        }

        %igx-combo__clear-button {
            color: var-get($theme, 'clear-button-foreground-focus');
            background: var-get($theme, 'clear-button-background-focus');
        }

        &%form-group-bundle--border {
            %igx-combo__toggle-button {
                background: var-get($theme, 'toggle-button-background-focus--border');
            }
        }
    }

    @if $variant == 'indigo' {
        %form-group-bundle:not(%form-group-bundle--disabled):hover {
            %igx-combo__toggle-button {
                color: var-get($theme, 'toggle-button-foreground-focus');
                background: var-get($theme, 'toggle-button-background-focus');
            }

            %igx-combo__clear-button {
                color: var-get($theme, 'clear-button-foreground-focus');
                background: var-get($theme, 'clear-button-background-focus');
            }
        }
    }

    .igx-input-group--filled {
        %igx-combo__toggle-button {
            color: var-get($theme, 'toggle-button-foreground-filled');
        }

        @if $variant == 'material' {
            &.igx-input-group--focused {
                %igx-combo__toggle-button {
                    color: var-get($theme, 'toggle-button-foreground-filled');
                }
            }
        }
    }

    .igx-input-group--focused {
        %igx-combo__toggle-button {
            color: var-get($theme, 'toggle-button-foreground-focus');
            background: var-get($theme, 'toggle-button-background-focus');
        }

        %igx-combo__clear-button {
            color: var-get($theme, 'clear-button-foreground-focus');
            background: var-get($theme, 'clear-button-background-focus');
        }
    }

    .igx-input-group.igx-input-group--focused:not(.igx-input-group--box) {
        @if $variant == 'material' {
            %igx-combo__toggle-button {
                background: var-get($theme, 'toggle-button-background-focus--border');
            }
        }
    }

    %form-group-bundle:not(%form-group-bundle--disabled) {
        %igx-combo__clear-button:focus-visible,
        %igx-combo__toggle-button:focus-visible {
            color: color($color: 'secondary');
            background: var-get($theme, 'toggle-button-background');
        }
    }

    .igx-input-group--disabled {
        %igx-combo__toggle-button {
            background: var-get($theme, 'toggle-button-background-disabled');
            color: var-get($theme, 'toggle-button-foreground-disabled');
        }

        %igx-combo__clear-button {
            @if $variant == 'bootstrap' {
                border-inline-end: 0;
            }
        }
    }

    igx-combo {
        %form-group-input,
        %form-group-prefix,
        %form-group-suffix {
            cursor: pointer;
        }
    }
}