/* Variants */
/* Define maps for size-related variables */
/* Define maps for color-related variables */
nv-avatar {
  align-items: center !important;
  background-color: var(--components-avatar-background-1);
  border-radius: var(--radius-rounded-full) !important;
  display: flex !important;
  flex-shrink: 0 !important;
  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
  font-style: normal;
  font-weight: var(--font-weight-medium-emphasis);
  justify-content: center !important;
  leading-trim: both;
  line-height: 1 !important;
  text-align: center;
  text-edge: cap;
  text-transform: uppercase;
}
nv-avatar.avatar-color-1 {
  background-color: var(--components-avatar-background-1);
  color: var(--components-avatar-content-1);
}
nv-avatar.avatar-color-2 {
  background-color: var(--components-avatar-background-2);
  color: var(--components-avatar-content-2);
}
nv-avatar.avatar-color-3 {
  background-color: var(--components-avatar-background-3);
  color: var(--components-avatar-content-3);
}
nv-avatar.avatar-color-4 {
  background-color: var(--components-avatar-background-4);
  color: var(--components-avatar-content-4);
}
nv-avatar.avatar-color-5 {
  background-color: var(--components-avatar-background-5);
  color: var(--components-avatar-content-5);
}
nv-avatar.avatar-color-6 {
  background-color: var(--components-avatar-background-6);
  color: var(--components-avatar-content-6);
}
nv-avatar.avatar-color-7 {
  background-color: var(--components-avatar-background-7);
  color: var(--components-avatar-content-7);
}
nv-avatar.avatar-color-8 {
  background-color: var(--components-avatar-background-8);
  color: var(--components-avatar-content-8);
}
nv-avatar.avatar-color-9 {
  background-color: var(--components-avatar-background-9);
  color: var(--components-avatar-content-9);
}
nv-avatar.avatar-color-10 {
  background-color: var(--components-avatar-background-10);
  color: var(--components-avatar-content-10);
}
nv-avatar img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}
nv-avatar.avatar-xs {
  width: var(--avatar-xs-size);
  height: var(--avatar-xs-size);
  font-size: var(--avatar-xs-font-size);
  line-height: var(--avatar-xs-font-size);
}
nv-avatar.avatar-xs nv-icon > svg {
  width: var(--spacing-3);
  height: var(--spacing-3);
  stroke-width: 1.2px;
}
nv-avatar.avatar-sm {
  width: var(--avatar-sm-size);
  height: var(--avatar-sm-size);
  font-size: var(--avatar-sm-font-size);
  line-height: var(--avatar-sm-font-size);
}
nv-avatar.avatar-sm nv-icon > svg {
  width: var(--spacing-4);
  height: var(--spacing-4);
  stroke-width: 1.5px;
}
nv-avatar.avatar-md {
  width: var(--avatar-md-size);
  height: var(--avatar-md-size);
  font-size: var(--avatar-md-font-size);
  line-height: var(--avatar-md-font-size);
}
nv-avatar.avatar-md nv-icon > svg {
  width: var(--spacing-5);
  height: var(--spacing-5);
  stroke-width: 1.6px;
}
nv-avatar.avatar-lg {
  width: var(--avatar-lg-size);
  height: var(--avatar-lg-size);
  font-size: var(--avatar-lg-font-size);
  line-height: var(--avatar-lg-font-size);
}
nv-avatar.avatar-lg nv-icon > svg {
  width: var(--spacing-6);
  height: var(--spacing-6);
  stroke-width: 1.8px;
}
nv-avatar.avatar-xl {
  width: var(--avatar-xl-size);
  height: var(--avatar-xl-size);
  font-size: var(--avatar-xl-font-size);
  line-height: var(--avatar-xl-font-size);
}
nv-avatar.avatar-xl nv-icon > svg {
  width: var(--spacing-7);
  height: var(--spacing-7);
  stroke-width: 1.9px;
}