@use 'sass:map';
@use '../../../mx-core/src/base/colors';

@mixin mx-avatar-theme($theme) {
  $is-dark: map.get($theme, is-dark);
  $color-theme: colors.$mx-light;

  @if $is-dark {
    $color-theme: colors.$mx-dark;
  }

  .mx-avatar {
    background-color: map.get($color-theme, tertiaryContainer);
    color: map.get($color-theme, onTertiaryContainer);
    border-color: map.get($color-theme, outlineVariant);
  }

  /* mx-avatar-group */
  .mx-avatar-group {
    &__content {
      color: map.get($color-theme, onSurface);
    }
  }

  /* mx-avatar-profile */
  .mx-avatar-profile {
    &__user-name {
      color: map.get($color-theme, onSurface);
    }
    &__user-info {
      color: map.get($color-theme, onSurfaceVariant);
    }
  }
}