/* We don't use 2xl, 3xl, 4xl map keys because in some Intellij configurations, these keys are reformatted */
:host {
  /**
   * @prop --avatar-large-size : Larger avatar size, in pixels
   * @prop --avatar-large-font-size : Larger avatar font size
   * @prop --avatar-medium-size : Medium avatar size, in pixels
   * @prop --avatar-medium-font-size : Medium avatar font size
   * @prop --avatar-small-size : Smaller avatar size, in pixels
   * @prop --avatar-small-font-size : Small avatar font size
   * @prop --avatar-placeholder-background : Placeholder avatar (without photo) background-color
   * @prop --avatar-additional-avatar-background : In an avatar list, you can display a "+X" avatar. The property allows to style its background.
   */
  --avatar-large-size: 100px;
  --avatar-large-font-size: var(--joy-font-size-2xl);
  --avatar-medium-size: 60px;
  --avatar-medium-font-size: var(--joy-font-size-primary-600);
  --avatar-small-size: 30px;
  --avatar-small-font-size: var(--joy-font-size-primary-200);
  --avatar-placeholder-background: var(--joy-color-neutral-30);
  --avatar-additional-avatar-background: var(--joy-color-secondary-50);
  display: inline-flex;
  font-family: var(--joy-font-family-base);
  font-weight: var(--joy-font-weight-normal);
}

a {
  text-decoration: none;
}

.joy-avatar {
  border-radius: var(--joy-core-radius-6);
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  background-color: var(--joy-color-secondary-10);
  display: flex;
  color: white;
  align-items: center;
  justify-content: center;
  border: 0;
  text-decoration: none;
  white-space: nowrap;
  /** ******** */
  /* ALL SIZES */
}
.joy-avatar__wrapper {
  position: relative;
}
.joy-avatar img {
  display: block;
  height: 100%;
  min-width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  border-radius: 50%;
  object-fit: cover;
}
.joy-avatar__compress {
  z-index: 1;
  border: 2px solid white;
}
.joy-avatar__compress:not(.joy-avatar__first) {
  margin-left: -30px;
}
.joy-avatar__strategy {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--joy-font-weight-bold);
  bottom: 0;
  right: 0;
  background-color: var(--joy-color-neutral-70);
  user-select: none;
}
.joy-avatar.joy-avatar__large {
  width: var(--avatar-large-size);
  height: var(--avatar-large-size);
  min-width: var(--avatar-large-size);
  max-width: var(--avatar-large-size);
  min-height: var(--avatar-large-size);
  max-height: var(--avatar-large-size);
  font-size: var(--avatar-large-font-size);
  font-family: inherit;
  font-weight: inherit;
}
.joy-avatar.joy-avatar__large + .joy-avatar__strategy {
  width: var(--joy-core-spacing-5);
  height: var(--joy-core-spacing-7);
  border-radius: var(--joy-core-spacing-5);
}
.joy-avatar.joy-avatar__medium {
  width: var(--avatar-medium-size);
  height: var(--avatar-medium-size);
  min-width: var(--avatar-medium-size);
  max-width: var(--avatar-medium-size);
  min-height: var(--avatar-medium-size);
  max-height: var(--avatar-medium-size);
  font-size: var(--avatar-medium-font-size);
  font-family: inherit;
  font-weight: inherit;
}
.joy-avatar.joy-avatar__medium + .joy-avatar__strategy {
  width: var(--joy-core-spacing-5);
  height: var(--joy-core-spacing-7);
  border-radius: var(--joy-core-spacing-5);
}
.joy-avatar.joy-avatar__small {
  width: var(--avatar-small-size);
  height: var(--avatar-small-size);
  min-width: var(--avatar-small-size);
  max-width: var(--avatar-small-size);
  min-height: var(--avatar-small-size);
  max-height: var(--avatar-small-size);
  font-size: var(--avatar-small-font-size);
  font-family: inherit;
  font-weight: inherit;
}
.joy-avatar.joy-avatar__small.joy-avatar__compress:not(.joy-avatar__first) {
  margin-left: -15px;
}
.joy-avatar.joy-avatar__small + .joy-avatar__strategy {
  width: var(--joy-core-spacing-3);
  height: var(--joy-core-spacing-4);
  border-radius: var(--joy-core-spacing-3);
}
.joy-avatar.joy-avatar__placeholder {
  background-color: var(--avatar-placeholder-background);
}
.joy-avatar.joy-avatar__placeholder svg {
  color: white;
}
.joy-avatar__number {
  background-color: var(--avatar-additional-avatar-background);
}
.joy-avatar__teal {
  background-color: var(--joy-color-secondary-50);
}
.joy-avatar__yellow {
  background-color: var(--joy-color-quaternary-50);
}
.joy-avatar__turquoise {
  background-color: var(--joy-color-tertiary-50);
}
.joy-avatar__red {
  background-color: var(--joy-color-primary-50);
}
.joy-avatar__grey {
  background-color: var(--joy-color-neutral-40);
}
.joy-avatar__blue {
  background-color: var(--joy-color-brand-secondary-50);
}
.joy-avatar__pink {
  background-color: var(--joy-color-brand-primary-50);
}
.joy-avatar__transparent {
  background-color: transparent;
}