////
/// @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} $palette [$default-palette] - The palette used as basis for styling the component.
/// @param {Map} $schema [$light-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 $default-palette
/// @requires $light-schema
/// @requires apply-palette
/// @requires extend
///
/// @example scss Change the icon color
///   $my-icon-theme: igx-icon-theme($color: orange);
///   // Pass the theme to the igx-icon component mixin
///   @include igx-icon($my-icon-theme);
@function igx-icon-theme(
    $palette: $default-palette,
    $schema: $light-schema,

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

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

    $theme: apply-palette($icon-schema, $palette);

    @return extend($theme, (
        name: $name,
        palette: $palette,
        color: $color,
        size: $size,
        disabled-color: $disabled-color
    ));
}

/// @param {Map} $theme - The theme used to style the component.
/// @requires {mixin} igx-root-css-vars
/// @requires --var
@mixin igx-icon($theme) {
    @include igx-root-css-vars($theme);

    // @debug $theme;

    $igx-icon-font-size: --var($theme, 'size');

    %igx-icon-display {
        width: $igx-icon-font-size;
        height: $igx-icon-font-size;
        font-size: $igx-icon-font-size;
        color: --var($theme, 'color');

        svg {
            width: inherit;
            height: inherit;
            fill: currentColor;

            use {
                pointer-events: none;
            }
        }
    }

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