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

////
/// @group themes
/// @access public
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
////

/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
/// @param {Color} $color [null] - The icon color.
/// @param {String} $size [null] - The icon size.
/// @param {Color} $disabled-color [null] - The disabled icon color.
/// @requires $light-material-schema
/// @example scss Change the icon color
///   $my-icon-theme: icon-theme($color: orange);
///   // Pass the theme to the css-vars() mixin
///   @include css-vars($my-icon-theme);
@function icon-theme(
    $schema: $light-material-schema,

    $color: null,
    $size: null,
    $disabled-color: null
) {
    $name: 'igx-icon';
    $icon-schema: ();

    @if map.has-key($schema, 'icon') {
        $icon-schema: map.get($schema, 'icon');
    } @else {
        $icon-schema: $schema;
    }

    $theme: digest-schema($icon-schema);

    @return extend($theme, (
        name: $name,
        color: $color,
        size: $size,
        disabled-color: $disabled-color,
        theme: map.get($schema, '_meta', 'theme'),
    ));
}

// stylelint-disable font-family-no-missing-generic-family-keyword
/// @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;
    }
}