@use '@angular/material' as mat;
@use 'sass:map';
@use '../../styles/typography';
@use '../../styles/mixins';

@mixin avatar-theme($theme) {
  $color-config: mat.get-color-config($theme);
  $accent: mat.get-color-from-palette(map.get($color-config, accent));
  $background: map.get($color-config, background);
  $foreground: map.get($color-config, foreground);

  .avatar {
    &__circle {
      border: 1px solid $accent;
      background-color: map.get($background, background);
    }

    &__initials {
      color: map.get($foreground, text);
    }
  }
}

.avatar {
  display: inline-block;
  margin: 0;

  * {
    box-sizing: border-box;
  }

  &__wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  &__circle {
    @include mixins.circle(44px);
    @include mixins.flexCentering;
    overflow: hidden;
    flex-shrink: 0;

    &--has-image {
      background-color: transparent;
    }
  }

  &__image {
    @include mixins.circle(100%);
    object-fit: cover;
  }

  &__initials {
    @include typography.text-base;
    font-weight: map.get(typography.$font-weights, 'semibold');
    user-select: none;
  }

  &__content {
    @include typography.text-xs;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  &__name {
    font-weight: map.get(typography.$font-weights, 'semibold');
    text-transform: capitalize;
  }

  &__description {
    font-weight: map.get(typography.$font-weights, 'light');
    text-transform: lowercase;
  }
}