/* We don't use 2xl, 3xl, 4xl map keys because in some Intellij configurations, these keys are reformatted */
:host {
  /**
   * @prop --avatar-bg: set the background color of the avatar if it does not have img-src given
   * @prop --avatar-size: override the default avatar size (in pixel)
   */
  --avatar-border-color: var(--joy-color-neutral-30);
  --avatar-bg: var(--joy-color-secondary-50);
  --avatar-size: 46px;
  font-family: var(--joy-font-family-base);
  line-height: var(--joy-line-height-large);
  font-weight: var(--joy-font-weight-normal);
  display: inline-flex;
}

.joy-company-avatar {
  position: relative;
  overflow: hidden;
  width: var(--avatar-size);
  height: var(--avatar-size);
  min-width: var(--avatar-size);
  min-height: var(--avatar-size);
  border-radius: var(--joy-core-radius-3);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-family: inherit;
  font-weight: inherit;
  border: 1px solid var(--avatar-border-color);
  background-color: white;
}
.joy-company-avatar_has-logo {
  background-color: var(--avatar-bg);
}
.joy-company-avatar img {
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}
.joy-company-avatar_large {
  --avatar-size: 46px;
  font-size: var(--joy-font-size-primary-600);
}
.joy-company-avatar_medium {
  --avatar-size: 30px;
  border-radius: var(--joy-core-radius-2);
  font-size: var(--joy-font-size-primary-300);
}
.joy-company-avatar_small {
  --avatar-size: 20px;
  border-radius: var(--joy-core-radius-1);
  font-size: var(--joy-font-size-primary-100);
}
.joy-company-avatar__teal {
  background-color: var(--joy-color-secondary-50);
}
.joy-company-avatar__yellow {
  background-color: var(--joy-color-quaternary-50);
}
.joy-company-avatar__turquoise {
  background-color: var(--joy-color-tertiary-50);
}
.joy-company-avatar__red {
  background-color: var(--joy-color-primary-50);
}
.joy-company-avatar__grey {
  background-color: var(--joy-color-neutral-40);
}
.joy-company-avatar__blue {
  background-color: var(--joy-color-brand-secondary-50);
}
.joy-company-avatar__pink {
  background-color: var(--joy-color-brand-primary-50);
}
.joy-company-avatar__transparent {
  background-color: transparent;
}