/* Avatar */

.avatar {
  position: relative;
  display: flex;
  height: var(--avatar-size, var(--avatar-base-size));
  width: var(--avatar-size, var(--avatar-base-size));
  flex-shrink: 0;
  overflow: var(--avatar-base-overflow);
  border-radius: var(--avatar-base-border-radius);
}

.avatar-image {
  aspect-ratio: 1 / 1;
  height: 100%;
  width: 100%;
}

.avatar-fallback {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: var(--avatar-base-border-radius);
  background-color: var(--avatar-fallback-bg);
  font-size: var(--avatar-fallback-font-size);
  font-weight: var(--avatar-fallback-font-weight);
  color: var(--avatar-fallback-color);
}

/* Avatar Sizes */
.avatar-xs {
  height: var(--avatar-size-xs);
  width: var(--avatar-size-xs);
}

.avatar-sm {
  height: var(--avatar-size-sm);
  width: var(--avatar-size-sm);
}

.avatar-md {
  height: var(--avatar-size-md);
  width: var(--avatar-size-md);
}

.avatar-lg {
  height: var(--avatar-size-lg);
  width: var(--avatar-size-lg);
}

.avatar-xl {
  height: var(--avatar-size-xl);
  width: var(--avatar-size-xl);
}

/* Avatar Shapes */
.avatar-circle,
.avatar-circle .avatar-fallback {
  border-radius: var(--radius-full);
}

.avatar-square,
.avatar-square .avatar-fallback {
  border-radius: var(--radius-md);
}