/*
 * Copyright (c) 2026, Salesforce, Inc.,
 * All rights reserved.
 * For full license text, see the LICENSE.txt file
 */

/**
  * An image is the preferred format for an avatar
  */
.slds-avatar-group {
  width: var(--slds-g-sizing-9);
  height: var(--slds-g-sizing-9);
  position: relative;
  display: inline-block;
}

/**
  * Variant of an Avatar in an Avatar Group
  */
.slds-avatar-grouped {
  border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-on-accent-1);
  /* NOTE: If this isn't set to zero, images in those avatars that are smaller 
    than the default line height will stop filling the container */
  line-height: 0;
  border-radius: var(--slds-s-avatar-radius-border, var(--slds-g-radius-border-circle));
  background-color: var(--slds-g-color-accent-container-1);
}

/**
  * Variant of an Avatar with inverse background in an Avatar Group
  */
.slds-avatar-grouped_inverse {
  background-color: var(--slds-g-color-surface-container-2);
}

/**
  * Modifier for the primary Avatar in an Avatar Group
  */
.slds-avatar-grouped__primary {
  width: var(--slds-g-sizing-7);
  height: var(--slds-g-sizing-7);
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  z-index: 1;

  /**
  * Modifier for the Avatar that contains User Initials in an Avatar Group
  */
  .slds-avatar-grouped__initials {
    transform: scale(0.5);
  }
}

/**
  * Modifier for the secondary Avatar in an Avatar Group
  */
.slds-avatar-grouped__secondary {
  width: var(--slds-g-sizing-6);
  height: var(--slds-g-sizing-6);
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;

  .slds-avatar-grouped__initials {
    transform: scale(0.4);
  }
}

/**
  * Modifier for the icon Avatar in an Avatar Group
  */
.slds-avatar-grouped__icon {
  height: 100%;
  line-height: 0;

  .slds-icon {
    width: 100%;
    height: 100%;
  }
}

/**
  * Creates an extra small Avatar Group
  */
.slds-avatar-group_x-small {
  width: var(--slds-g-sizing-6);
  height: var(--slds-g-sizing-6);

  .slds-avatar-grouped__primary {
    width: var(--slds-g-sizing-5);
    height: var(--slds-g-sizing-5);
  }

  /**
  * Modifier for the initials Avatar in an Avatar Group
  */
  .slds-avatar-grouped__primary .slds-avatar-grouped__initials {
    transform: scale(0.3);
  }

  .slds-avatar-grouped__secondary {
    width: var(--slds-g-sizing-4);
    height: var(--slds-g-sizing-4);
  }

  .slds-avatar-grouped__secondary .slds-avatar-grouped__initials {
    transform: scale(0.18);
  }
}

/**
  * Creates a small Avatar Group
  */
.slds-avatar-group_small {
  width: var(--slds-g-sizing-7);
  height: var(--slds-g-sizing-7);

  .slds-avatar-grouped__primary {
    width: var(--slds-g-sizing-6);
    height: var(--slds-g-sizing-6);
  }

  .slds-avatar-grouped__primary .slds-avatar-grouped__initials {
    transform: scale(0.4);
  }

  .slds-avatar-grouped__secondary {
    width: var(--slds-g-sizing-5);
    height: var(--slds-g-sizing-5);
  }

  .slds-avatar-grouped__secondary .slds-avatar-grouped__initials {
    transform: scale(0.3);
  }
}

/**
  * Creates a medium Avatar Group
  */
.slds-avatar-group_medium {
  width: var(--slds-g-sizing-9);
  height: var(--slds-g-sizing-9);

  .slds-avatar-grouped__primary {
    width: var(--slds-g-sizing-7);
    height: var(--slds-g-sizing-7);
  }

  .slds-avatar-grouped__primary .slds-avatar-grouped__initials {
    transform: scale(0.5);
  }

  .slds-avatar-grouped__secondary {
    width: var(--slds-g-sizing-6);
    height: var(--slds-g-sizing-6);
  }

  .slds-avatar-grouped__secondary .slds-avatar-grouped__initials {
    transform: scale(0.4);
  }
}

/**
  * Creates a large Avatar Group
  */
.slds-avatar-group_large {
  width: var(--slds-g-sizing-10);
  height: var(--slds-g-sizing-10);

  .slds-avatar-grouped__primary {
    width: calc(var(--slds-g-sizing-9) + var(--slds-g-sizing-3));
    height: calc(var(--slds-g-sizing-9) + var(--slds-g-sizing-3));
  }

  .slds-avatar-grouped__primary .slds-avatar-grouped__initials {
    transform: scale(0.8);
  }

  .slds-avatar-grouped__secondary {
    width: var(--slds-g-sizing-7);
    height: var(--slds-g-sizing-7);
  }

  .slds-avatar-grouped__secondary .slds-avatar-grouped__initials {
    transform: scale(0.5);
  }
}