@use 'sass:math';
@use '../core/style/spacing' as *;

$avatar-size: $uxg-spacing-5;
$avatar-size-large: $uxg-spacing-6;
$avatar-size-dense: $uxg-spacing-4;

@mixin uxg-avatar-size($size) {
  height: $size;
  width: $size;
}

.uxg-avatar {
  @include uxg-avatar-size($avatar-size);

  border-radius: 50%;
  margin: $uxg-spacing-1;
  object-fit: cover;
  user-select: none;
  align-items: center;
  display: flex;
  justify-content: center;

  img {
    border-radius: 50%;
    width: inherit;
    height: inherit;
  }
}

.uxg-avatar[dense],
*[dense] .uxg-avatar {
  @include uxg-avatar-size($avatar-size-dense);
}

.uxg-avatar[large],
*[large] .uxg-avatar {
  @include uxg-avatar-size($avatar-size-large);
}

.uxg-avatar-list {
  align-items: center;
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  user-select: none;

  .uxg-avatar {
    margin: 0;
  }

  li,
  uxg-avatar {
    display: inline-grid;
    margin: 0;
    position: relative;
    width: math.div($avatar-size, 1.5);

    &:nth-child(1) {
      z-index: 2;
    }

    &:nth-child(2) {
      z-index: 1;
    }

    &:nth-child(3) {
      z-index: 0;
    }
  }

  &[dense] {
    li,
    uxg-avatar {
      width: math.div($avatar-size-dense, 1.5);
    }
  }

  &[large] {
    li,
    uxg-avatar {
      width: math.div($avatar-size-large, 1.5);
    }
  }
}

.uxg-avatar-number,
*[dense] .uxg-avatar-number {
  margin: 0;
  padding: 0 0 0 $uxg-spacing-4;
}

*[dense] .uxg-avatar-number {
  padding: 0 0 0 $uxg-spacing-3;
}