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

/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */

.slds-avatar {
  /* stylelint-disable */
  --_slds-c-avatar-group-image-small: var(
    --lwc-groupDefaultAvatarSmall,
    url('../../public/group_avatar_96.png')
  );
  --_slds-c-avatar-group-image-medium: var(
    --lwc-groupDefaultAvatarMedium,
    url('../../public/group_avatar_160.png')
  );
  --_slds-c-avatar-group-image-large: var(
    --lwc-groupDefaultAvatarLarge,
    url('../../public/group_avatar_200.png')
  );
  --_slds-c-avatar-user-image-small: var(
    --lwc-userDefaultAvatarSmall,
    url('../../public/profile_avatar_96.png')
  );
  --_slds-c-avatar-user-image-medium: var(
    --lwc-userDefaultAvatarMedium,
    url('../../public/profile_avatar_160.png')
  );
  --_slds-c-avatar-user-image-large: var(
    --lwc-userDefaultAvatarLarge,
    url('../../public/profile_avatar_200.png')
  );
  /* stylelint-enable */

  --slds-c-icon-color-background: var(--_slds-c-avatar-color-background);

  width: var(--slds-g-sizing-9);
  height: var(--slds-g-sizing-9);
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  border-radius: var(
    --slds-c-avatar-radius-border,
    var(--slds-s-avatar-radius-border, var(--slds-g-radius-border-2))
  );
  line-height: var(--slds-g-font-lineheight-1);
  font-size: var(--slds-g-font-scale-1);

  &:focus-visible {
    box-shadow: var(--slds-g-shadow-outset-focus-1);
    outline: 0;
  }
}

/**
  * Uses the small group image as the avatar icon
  */
.slds-avatar_group-image-small {
  background: var(--_slds-c-avatar-group-image-small) top left / cover no-repeat;
}

/**
  * Uses the medium group image as the avatar icon
  */
.slds-avatar_group-image-medium {
  background: var(--_slds-c-avatar-group-image-medium) top left / cover no-repeat;
}

/**
  * Uses the large group image as the avatar icon
  */
.slds-avatar_group-image-large {
  background: var(--_slds-c-avatar-group-image-large) top left / cover no-repeat;
}

/**
  * Uses the small user avatar image as the avatar icon
  */
.slds-avatar_profile-image-small {
  background: var(--_slds-c-avatar-user-image-small) top left / cover no-repeat;
}

/**
  * Uses the medium user avatar image as the avatar icon
  */
.slds-avatar_profile-image-medium {
  background: var(--_slds-c-avatar-user-image-medium) top left / cover no-repeat;
}

/**
  * Uses the large user avatar image as the avatar icon
  */
.slds-avatar_profile-image-large {
  background: var(--_slds-c-avatar-user-image-large) top left / cover no-repeat;
}

.slds-avatar_x-small {
  width: var(--slds-g-sizing-6);
  height: var(--slds-g-sizing-6);
  font-size: var(--slds-g-font-scale-neg-2);
  border-radius: var(
    --slds-c-avatar-radius-border,
    var(--slds-s-avatar-radius-border, var(--slds-g-radius-border-1))
  );

  --_slds-c-icon-sizing: var(--slds-g-sizing-6);
}

.slds-avatar_small {
  width: var(--slds-g-sizing-7);
  height: var(--slds-g-sizing-7);
  font-size: var(--slds-g-font-scale-neg-2);
  border-radius: var(
    --slds-c-avatar-radius-border,
    var(--slds-s-avatar-radius-border, var(--slds-g-radius-border-1))
  );

  --_slds-c-icon-sizing: var(--slds-g-sizing-7);
}

.slds-avatar_medium {
  width: var(--slds-g-sizing-9);
  height: var(--slds-g-sizing-9);
  font-size: var(--slds-g-font-scale-1);

  --_slds-c-icon-sizing: var(--slds-g-sizing-9);
}

.slds-avatar_large {
  width: var(--slds-g-sizing-10);
  height: var(--slds-g-sizing-10);
  font-size: var(--slds-g-font-scale-3);
  line-height: var(--slds-g-font-lineheight-2);

  --_slds-c-icon-sizing: var(--slds-g-sizing-10);
}

.slds-avatar_circle {
  border-radius: var(--slds-g-radius-border-circle);
}

.slds-avatar_empty {
  border: var(--slds-g-sizing-border-1) dashed var(--slds-g-color-border-1);
}

.slds-avatar__initials {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  margin: auto;
  color: var(--slds-c-avatar-text-color, var(--slds-g-color-on-accent-1));
  height: 100%;
  text-shadow: 0 0 1px rgb(0, 0, 0, 80%);
  background-color: var(--_slds-c-avatar-color-background, var(--slds-g-color-accent-container-1));
}

.slds-avatar__initials[title] {
  cursor: default;
  text-decoration: none;
}

/* inverse is not currently supported by LBC */
.slds-avatar__initials_inverse {
  --slds-c-avatar-text-color: var(--slds-c-avatar-inverse-text-color, var(--slds-g-color-on-surface-1));

  background-color: var(--slds-g-color-surface-container-2);
  text-shadow: none;
}