////
/// @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>
////

/// If only background color is specified, text/icon color
/// will be assigned automatically to a contrasting color.
/// @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} $icon-background [null]- The background color used for avatars of type icon.
/// @param {Color} $icon-color [null] - The icon color used for avatars of type icon.
/// @param {Color} $initials-background [null] - The background color used for avatars of type initials.
/// @param {Color} $initials-color [null] - The text color used for avatars of type initials.
/// @param {Color} $image-background [null] - The background color used for avatars of type image.
/// @requires $default-palette
/// @requires $light-schema
/// @requires apply-palette
/// @requires text-contrast
/// @requires extend
///
/// @example scss Change the background and icon colors in icon avatars
///   $my-avatar-theme: igx-avatar-theme($icon-background: black, $icon-color: white);
///   // Pass the theme to the igx-avatar component mixin
///   @include igx-avatar($my-avatar-theme);
@function igx-avatar-theme(
    $palette: $default-palette,
    $schema: $light-schema,
    $icon-background: null,
    $icon-color: null,
    $initials-background: null,
    $initials-color: null,
    $image-background: null
) {
    $name: 'igx-avatar';
    $theme: ();

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

    @if not($icon-color) and $icon-background {
        $icon-color: text-contrast($icon-background);
    }

    @if not($initials-color) and $initials-background {
        $initials-color: text-contrast($initials-background);
    }

    @return extend($theme, (
        name: $name,
        palette: $palette,
        icon-background: $icon-background,
        icon-color: $icon-color,
        initials-background: $initials-background,
        initials-color: $initials-color,
        image-background: $image-background
    ));
}

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

    $small-size: 40px;
    $medium-size: 64px;
    $large-size: 88px;

    %igx-avatar-display {
        position: relative;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        user-select: none;
        color: --var($theme, 'initials-color');
        background: --var($theme, 'initials-background');
        vertical-align: middle;
    }

    %igx-avatar--rounded {
        border-radius: 50%;
    }

    %igx-avatar--small {
        width: rem($small-size);
        height: rem($small-size);
        min-width: rem($small-size);
    }

    %igx-avatar--medium {
        width: rem($medium-size);
        height: rem($medium-size);
        min-width: rem($medium-size);
    }

    %igx-avatar--large {
        width: rem($large-size);
        height: rem($large-size);
        min-width: rem($large-size);
    }

    %igx-avatar-inner {
        width: 100%;
        height: 100%;
        border-radius: inherit;
    }

    %igx-avatar-icon {
        color: --var($theme, 'icon-color');
        background: --var($theme, 'icon-background');
    }

    %igx-avatar-image {
        background-color: --var($theme, 'image-background');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    %igx-avatar-initials {
        text-transform: uppercase;
        color: --var($theme, 'initials-color');
        background-color: --var($theme, 'initials-background');
    }

    %igx-avatar-initials--small {
        font-size: rem($small-size / 2);
        line-height: rem($small-size);
    }

    %igx-avatar-initials--medium {
        font-size: rem($medium-size / 2);
        line-height: rem($medium-size);
    }

    %igx-avatar-initials--large {
        font-size: rem($large-size / 2);
        line-height: rem($large-size);
    }
}