/* ===== Avatar Group ===== */
.avatar-group-container {
    display: flex;
    align-items: center;
    gap: var(--size-2);
  }
  
  .avatar-group-icon {
    color: var(--on-layer-widget);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .avatar-group {
    display: flex;
    align-items: center;
  }
  
  .avatar {
    --avatar-size: 48px;
    --avatar-background-color: var(--primary-container);
    --avatar-color: var(--on-primary-container);
    inline-size: var(--avatar-size);
    aspect-ratio: 1;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--layer-widget);
    color: var(--on-layer-background);
    overflow: hidden;
    font-size: calc(var(--avatar-size) * 0.35);
    font-weight: var(--font-weight-5);
    position: relative;
    box-shadow: var(--elevation-1);
  }
  
  .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .avatar.filled {
    background-color: var(--avatar-background-color);
    color: var(--avatar-color);
  }
  
  .avatar.extra-small {
    --avatar-size: 20px;
    font-size: calc(var(--avatar-size) * 0.4);
  }
  
  .avatar.x-small {
    --avatar-size: 24px;
  }
  .avatar.small {
    --avatar-size: 32px;
  }
  .avatar.medium {
    --avatar-size: 48px;
  }
  
  .avatar.large {
    --avatar-size: 64px;
  }
  
  .avatar.x-large {
    --avatar-size: 96px;
  }
  .avatar.xx-large {
    --avatar-size: 128px;
  }
  
  .avatar-group .avatar {
    margin-inline-end: calc(var(--size-2) * -1);
    border: 2px solid var(--layer-background);
    transition: transform 0.2s var(--ease-emphasized), z-index 0.1s;
    cursor: pointer;
  }
  
  .avatar-group .avatar:hover {
    transform: translateY(-4px) scale(1.05);
    z-index: 2;
  }
  
  .avatar-more {
    font-size: var(--font-size-body-small);
    font-weight: var(--font-weight-5);
    color: var(--on-layer-widget);
    margin-left: var(--size-2);
  }