@use 'sass:map';

@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

@include b(avatar) {
  @include set-css-var-value(('avatar', 'size'), 40px);
  @include set-css-var-value(
    ('avatar', 'text-color'),
    getCssVar('color-white')
  );
  @include set-css-var-value(
    ('avatar', 'bg-color'),
    getCssVar('color-neutral-3')
  );

  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  color: getCssVar('avatar', 'text-color');
  background: getCssVar('avatar', 'bg-color');
  width: getCssVar('avatar', 'size');
  height: getCssVar('avatar', 'size');
  min-width: getCssVar('avatar', 'size');
  min-height: getCssVar('avatar', 'size');
  font-size: calc(getCssVar('avatar', 'size') * 0.4);
  font-weight: 600;

  border-radius: calc(getCssVar('avatar', 'size') * 0.3);

  > img {
    display: block;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
  }

  @include when(circle) {
    border-radius: 50%;
  }

  @include e(icon) {
    font-size: calc(getCssVar('avatar', 'size') * 0.5);
  }
}