// stylelint-disable font-family-no-missing-generic-family-keyword
@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 icon($theme) {
    @include css-vars($theme);

    $size: var-get($theme, 'size');

    // The igx-icon tag selector in front of the placeholder is on purpose
    // this approach effectively enables us to eliminate any potential style conflicts without the need of !important
    %igx-icon-display {
        @include sizable();
        --component-size: var(--ig-size, #{var-get($theme, 'default-size')});

        display: inline-flex;
        font-size: $size;
        color: var-get($theme, 'color');
        direction: inherit;

        div,
        svg {
            display: block;
            width: inherit;
            height: inherit;
            fill: currentColor;
        }

        &[igxPrefix].material-icons,
        &[igxSuffix].material-icons {
            font-family: 'Material Icons';
        }
    }

    // Using "em" unit here is on purpose see:
    // https://github.com/IgniteUI/igniteui-angular/issues/13394#event-10241243103
    igx-icon%igx-icon-display {
        width: 1em;
        height: 1em;
    }

    %igx-icon--success {
        color: color($color: 'success');
    }

    %igx-icon--error {
        color: color($color: 'error');
    }

    %igx-icon--inactive {
        color: var-get($theme, 'disabled-color') !important;
        opacity: .54;
    }
}