@use 'sass:list';
@use '../../base/token';
@use '../../abstract';

// ==========================================
// Avatar
// option
// size: (img size, img margin, label size, desc size)
// ==========================================

$avatar-size: (
  'sm': (
    32px,
    10px,
    var(--font-size-1),
    var(--font-size-0),
  ),
  'md': (
    40px,
    10px,
    var(--font-size-1),
    var(--font-size-1),
  ),
  'lg': (
    48px,
    10px,
    var(--font-size-2),
    var(--font-size-2),
  ),
  'xl': (
    56px,
    10px,
    var(--font-size-3),
    var(--font-size-2),
  ),
);

.cds-avatar {
  $this: &;
  display: inline-grid;
  grid-template-areas: 'img label';
  align-items: center;

  &[data-count='2'] {
    grid-template-areas:
      'img label'
      'img desc';
  }

  &__label {
    grid-area: label;
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2);
    color: var(--gray-500);
  }

  &__desc {
    grid-area: desc;
    color: var(--gray-400);
  }

  &__media {
    grid-area: img;
    border-radius: 50%;
  }

  &:hover #{$this}__media {
    box-shadow: 0 0 0 4px var(--gray-50);
  }

  @each $size, $values in $avatar-size {
    &--#{$size} {
      @if ($size == 'sm') {
        align-items: center;
      }

      #{$this}__media {
        width: nth($values, 1);
        height: nth($values, 1);
        margin-inline-end: nth($values, 2);
      }

      #{$this}__label {
        font-size: nth($values, 3);
      }

      #{$this}__desc {
        font-size: nth($values, 4);
      }
    }
  }
}