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

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

.cds-avatar-label-group {
  $this: &;
  display: flex;
  flex-direction: row;

  &__img {
    border-radius: 50%;
  }

  &__text-wrapper {
    display: flex;
    flex-direction: column;
  }

  &__label {
    color: var(--gray-500);
    font-weight: var(--font-weights-commerce-sans-2);
  }

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

  @each $size, $values in $avatar-label-group-size {
    &--#{$size} {
      align-items: center;
      gap: nth($values, 2);

      #{$this}__img {
        width: nth($values, 1);
        height: nth($values, 1);
      }

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

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