@use 'sass:map';
@use '../../base' as *;
@use 'igniteui-theming/sass/animations/easings' as *;

/// @deprecated Use the `css-vars` mixin instead.
/// @see {mixin} css-vars
/// @param {Map} $theme - The theme used to style the component.
@mixin avatar($theme) {
    @include css-vars($theme);

    $variant: map.get($theme, '_meta', 'theme');

    %igx-avatar-display {
        @include sizable();

        --component-size: var(--ig-size, #{var-get($theme, 'default-size')});

        position: relative;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        user-select: none;
        color: var-get($theme, 'color');
        background: var-get($theme, 'background');
        vertical-align: middle;
        outline-style: none;
        flex-shrink: 0;
        width: var-get($theme, 'size');
        height: var-get($theme, 'size');

        igx-icon {
            --component-size: 3;

            color: var-get($theme, 'icon-color');
        }

        @if $variant == 'indigo' {
            igx-icon {
                --component-size: 1;
            }
        }
    }

    %igx-avatar-image {
        width: 100%;
        height: 100%;
        border-radius: inherit;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    %igx-avatar--circle {
        border-radius: calc(#{var-get($theme, 'size')} / 2);
    }

    %igx-avatar--rounded {
        border-radius: var-get($theme, 'border-radius');
    }

    %igx-avatar--initials {
        text-transform: uppercase;
        font-size: calc(#{var-get($theme, 'size')} / 2);
        line-height: calc(#{var-get($theme, 'size')} / 2);
    }
}