@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 select($theme) {
    @include css-vars($theme);
    $variant: map.get($theme, '_meta', 'theme');

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

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

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

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

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

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

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

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

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